/* ================================================================= OVERLAY · DESIGN TOKENS The canonical source of brand variables. Import this file in any CSS context to inherit Overlay's identity. Version : 1.0.0 Last revision : 2026-05-02 Format : CSS custom properties (open standard, all browsers) ================================================================= */ :root { /* ------------------------------------------------------------ */ /* COLOUR · core palette */ /* ------------------------------------------------------------ */ --ovl-midnight: #0E1626; /* primary, ink, dark surface */ --ovl-parchment: #EFE8DA; /* primary surface, paper */ --ovl-copper: #B26A3D; /* sole accent — used sparingly */ /* COLOUR · neutrals (warm-cool balanced) */ --ovl-slate: #2A3142; /* neutral 800, body emphasis */ --ovl-stone: #5A5F6E; /* neutral 600, secondary text */ --ovl-linen: #DCD2BC; /* neutral 200, surface 2 */ --ovl-sand: #C0B7A2; /* hair rules on parchment */ /* COLOUR · semantic (subdued) */ --ovl-success: #4A6B3A; /* deep moss */ --ovl-warning: #A87B2B; /* dim amber */ --ovl-error: #9B3A2B; /* deep rust (not vermillion) */ /* COLOUR · roles */ --ovl-fg: var(--ovl-midnight); --ovl-fg-muted: var(--ovl-slate); --ovl-fg-subtle: var(--ovl-stone); --ovl-bg: var(--ovl-parchment); --ovl-bg-2: var(--ovl-linen); --ovl-rule: var(--ovl-midnight); --ovl-rule-soft: var(--ovl-sand); --ovl-accent: var(--ovl-copper); /* ------------------------------------------------------------ */ /* TYPOGRAPHY · families */ /* ------------------------------------------------------------ */ --ovl-font-display: "Albert Sans", "Inter", system-ui, sans-serif; --ovl-font-body: "Newsreader", "Iowan Old Style", Georgia, serif; --ovl-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* TYPOGRAPHY · weights */ --ovl-w-regular: 400; --ovl-w-medium: 500; --ovl-w-semibold: 600; --ovl-w-display: 800; /* wordmark + headline weight */ /* TYPOGRAPHY · scale (modular, 8pt baseline) */ /* Built from a 1.250 (major third) ratio anchored at 16px */ --ovl-text-2xs: 10.5px; /* mono labels, captions */ --ovl-text-xs: 12.5px; /* spec, fine print */ --ovl-text-sm: 14.5px; /* secondary body, table */ --ovl-text-base: 16.5px; /* default body */ --ovl-text-lg: 19px; /* lede, callout */ --ovl-text-xl: 24px; /* h3 */ --ovl-text-2xl: 32px; /* h2 base */ --ovl-text-3xl: 44px; /* h1 base */ --ovl-text-4xl: 64px; /* hero */ --ovl-text-5xl: 96px; /* display, max headline */ /* TYPOGRAPHY · letter-spacing */ --ovl-tracking-tight: -0.025em; /* display headlines */ --ovl-tracking-snug: -0.015em; /* body large */ --ovl-tracking-normal: 0; /* body */ --ovl-tracking-mono: 0.04em; /* mono numerals */ --ovl-tracking-label: 0.16em; /* eyebrow / mono labels */ /* TYPOGRAPHY · line-height */ --ovl-leading-tight: 0.95; /* display / headline */ --ovl-leading-snug: 1.15; /* h2/h3 */ --ovl-leading-normal: 1.5; /* body */ --ovl-leading-relaxed: 1.65; /* long-form reading */ /* ------------------------------------------------------------ */ /* SPACING · 8pt baseline, scale 1, 2, 3, 4, 6, 8, 12, 16, 24 */ /* ------------------------------------------------------------ */ --ovl-space-1: 4px; --ovl-space-2: 8px; --ovl-space-3: 12px; --ovl-space-4: 16px; --ovl-space-6: 24px; --ovl-space-8: 32px; --ovl-space-12: 48px; --ovl-space-16: 64px; --ovl-space-24: 96px; --ovl-space-32: 128px; /* ------------------------------------------------------------ */ /* RULE · borders and dividers */ /* ------------------------------------------------------------ */ --ovl-hair: 0.75px; --ovl-line: 1px; --ovl-thick: 2px; /* ------------------------------------------------------------ */ /* RADIUS · used sparingly. The brand prefers crisp corners. */ /* ------------------------------------------------------------ */ --ovl-radius-none: 0; --ovl-radius-sm: 2px; /* form inputs */ --ovl-radius-md: 6px; /* cards, panels */ --ovl-radius-pill: 999px; /* tags, status pills */ /* ------------------------------------------------------------ */ /* LAYOUT */ /* ------------------------------------------------------------ */ --ovl-content-max: 1240px; --ovl-prose-max: 64ch; --ovl-gutter: clamp(20px, 3vw, 48px); /* ------------------------------------------------------------ */ /* MOTION · used sparingly. Brand voice is steady, not animated */ /* ------------------------------------------------------------ */ --ovl-duration-fast: 150ms; --ovl-duration-base: 220ms; --ovl-easing: cubic-bezier(0.2, 0, 0.2, 1); } /* =================================================================== SELECTION COLOUR — copper at low alpha =================================================================== */ ::selection { background: rgba(178, 106, 61, 0.28); color: var(--ovl-midnight); } /* =================================================================== PRINT TOKENS · CMYK and Pantone equivalents These cannot be expressed in CSS — captured here for handover to print production. See 02-tokens/tokens.json for the full table. ================================================================= */ /* * COLOUR HEX RGB CMYK PANTONE (C) PANTONE (U) * -------------------------------------------------------------------------------------------- * Midnight #0E1626 14 / 22 / 38 90 / 80 / 50 / 70 5395 C Black 6 U * Parchment #EFE8DA 239 / 232 / 218 3 / 5 / 14 / 0 7527 C Warm Gray 1 U * Copper #B26A3D 178 / 106 / 61 25 / 60 / 80 / 15 7574 C 7574 U * Slate #2A3142 42 / 49 / 66 85 / 75 / 50 / 50 533 C 533 U * Stone #5A5F6E 90 / 95 / 110 65 / 55 / 40 / 20 431 C 431 U * Linen #DCD2BC 220 / 210 / 188 10 / 12 / 22 / 5 468 C 468 U * * NOTE: Pantone calls are best-fit approximations. Always run a * physical proof with the chosen printer before signing off on a run. * The agency recommends Drukkerij Tuijtel (Hardinxveld-Giessendam) * or Lecturis (Eindhoven) for offset, and PrintCorporate (Eindhoven) * for digital short-run. */