/* Nothing brand tokens: CSS custom properties. Generated by hand from tokens.json. Keep the two files in step. Source: "Nothing | Brand Creative | Brand Guidelines.pdf" (BG), Drive folder 1JhmC66h5Hm7DQeXybGNvU0JHUOMbOi6J. Page refs are in tokens.json and BRAND.md. Usage: Theme: light by default; dark follows the OS, or force it with / . Fonts: NType 82 and Ndot are Nothing's house fonts (licence: Nothing brand materials only, internal sharing only, no modification or conversion). Use them only in Nothing services. Lettera Mono LL isn't bundled (Lineto licence). See ../assets/fonts/README.md. */ /* ---------- House fonts (paths are relative to this file) ---------- */ /* Lettera Mono LL: not bundled. If you hold a Lineto licence, add an @font-face named "Lettera Mono LL" in your project. Until then the --n-font-small stack falls back to NType 82 Mono. */ :root { /* ---------- Brand palette (BG p.26-29). Never use other colours. ---------- */ --n-pure-black: #000000; /* foundation, BG p.27 */ --n-window-grey: #B1B3B3; /* foundation, BG p.27 (RGB line in source is a typo) */ --n-grey: #F2F2EE; /* foundation, BG p.27. Source conflict: HEX #DCD7D2 vs RGB 242/242/238. See BRAND.md */ --n-red: #C8102E; /* primary, BG p.28 */ --n-blue: #002F6C; /* primary, BG p.28 */ --n-yellow: #FFC700; /* primary, BG p.28 */ --n-pure-white: #FFFFFF; /* highlight, BG p.29 */ /* ---------- Font families (fallbacks are inferred) ---------- */ --n-font-headline: "NType 82 Headline", Georgia, "Times New Roman", "PingFang SC", serif; --n-font-body: "NType 82", Georgia, "Times New Roman", "PingFang SC", serif; --n-font-mono: "NType 82 Mono", "Courier New", ui-monospace, "PingFang SC", monospace; --n-font-dot: "Ndot 55", "NType 82 Mono", "Courier New", ui-monospace, monospace; --n-font-dot-alt: "Ndot 57", "Ndot 55", "NType 82 Mono", "Courier New", monospace; --n-font-small: "Lettera Mono LL", "NType 82 Mono", "Courier New", ui-monospace, monospace; /* ---------- Type scale. BG gives pt bands; 1pt=1px and the 12px floor are inferred ---------- */ /* Type82 headline: >=40, leading 80%, tracking -2%, sentence case (BG p.33-37) */ --n-text-headline-size: 40px; --n-text-headline-leading: 0.8; --n-text-headline-tracking: -0.02em; --n-text-display-size: 80px; /* same leading/tracking as headline */ /* Type82 regular bands (BG p.42) */ --n-text-body-size: 15px; --n-text-body-leading: 1.25; --n-text-body-tracking: 0.01em; /* 7.5-15pt */ --n-text-lead-size: 20px; --n-text-lead-leading: 1.15; --n-text-lead-tracking: 0.01em; /* 15-30pt */ --n-text-title-size: 30px; --n-text-title-leading: 1.15; --n-text-title-tracking: -0.01em; /* 30-60pt */ --n-text-title-lg-size: 60px; --n-text-title-lg-leading: 1.0; --n-text-title-lg-tracking: -0.01em; /* 60-120pt */ --n-text-huge-leading: 0.85; /* above 120pt, tracking -1% */ /* Type82 mono: 7.5-15pt, tracking 0, 140-145% (BG p.45-48) */ --n-text-mono-size: 13px; --n-text-mono-leading: 1.45; --n-text-mono-max: 15px; /* Ndot 55: >=10pt, leading 90%, tracking 0 (BG p.50-53) */ --n-text-dot-size: 20px; --n-text-dot-leading: 0.9; --n-text-dot-min: 10px; /* Lettera Mono LL: small info/legal, leading 110%, tracking 0, uppercase (BG p.55-59) */ --n-text-small-size: 12px; --n-text-small-leading: 1.1; /* ---------- Grid (BG p.61-72) ---------- */ --n-grid-columns: 6; /* 2, 4, 6, 8 or 10 */ --n-grid-gutter: 2.3vw; /* 2.3% of format width; also the outer margin */ --n-grid-margin: 2.3vw; /* ---------- Effects ---------- */ --n-shadow: none; /* no shadows (BG p.79) */ --n-radius: 0; /* inferred: square corners throughout the source */ --n-rule: 1px dotted currentColor; /* inferred: dotted rules head every page of the BG */ /* ---------- Implementation spacing (NOT from the brand source; inferred defaults) ---------- */ --n-space-1: 4px; --n-space-2: 8px; --n-space-3: 12px; --n-space-4: 16px; --n-space-5: 24px; --n-space-6: 32px; --n-space-7: 48px; /* ---------- Semantic roles: light theme (inferred; all text pairs pass WCAG AA) ---------- */ color-scheme: light; --n-color-bg: var(--n-grey); --n-color-surface: var(--n-pure-white); --n-color-text: var(--n-pure-black); --n-color-text-muted: var(--n-pure-black); /* no brand grey passes AA on light grounds */ --n-color-text-inverse: var(--n-pure-white); --n-color-border: var(--n-pure-black); --n-color-border-subtle: var(--n-window-grey); /* decorative only */ --n-color-accent: var(--n-yellow); /* fill only, with black text */ --n-color-on-accent: var(--n-pure-black); --n-color-link: var(--n-blue); --n-color-focus: var(--n-blue); --n-color-danger: var(--n-red); --n-color-warning: var(--n-yellow); --n-color-info: var(--n-blue); --n-color-success: var(--n-pure-black); /* no green in the palette */ --n-color-primary-bg: var(--n-pure-black); --n-color-primary-text: var(--n-pure-white); } /* ---------- Dark theme: follows OS unless data-theme="light" ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --n-color-bg: var(--n-pure-black); --n-color-surface: var(--n-pure-black); --n-color-text: var(--n-pure-white); --n-color-text-muted: var(--n-window-grey); --n-color-text-inverse: var(--n-pure-black); --n-color-border: var(--n-window-grey); --n-color-border-subtle: var(--n-window-grey); --n-color-accent: var(--n-yellow); --n-color-on-accent: var(--n-pure-black); --n-color-link: var(--n-pure-white); --n-color-focus: var(--n-yellow); --n-color-danger: var(--n-red); /* icons, borders, large text only on black */ --n-color-warning: var(--n-yellow); --n-color-info: var(--n-pure-white); --n-color-success: var(--n-pure-white); --n-color-primary-bg: var(--n-pure-white); --n-color-primary-text: var(--n-pure-black); } } :root[data-theme="dark"] { color-scheme: dark; --n-color-bg: var(--n-pure-black); --n-color-surface: var(--n-pure-black); --n-color-text: var(--n-pure-white); --n-color-text-muted: var(--n-window-grey); --n-color-text-inverse: var(--n-pure-black); --n-color-border: var(--n-window-grey); --n-color-border-subtle: var(--n-window-grey); --n-color-accent: var(--n-yellow); --n-color-on-accent: var(--n-pure-black); --n-color-link: var(--n-pure-white); --n-color-focus: var(--n-yellow); --n-color-danger: var(--n-red); --n-color-warning: var(--n-yellow); --n-color-info: var(--n-pure-white); --n-color-success: var(--n-pure-white); --n-color-primary-bg: var(--n-pure-white); --n-color-primary-text: var(--n-pure-black); }