/* ============================================================ Done.ai — brand foundation for the guidelines site. Single source of truth for type, color, radius and spacing. Every page on this site links this file; nothing re-declares a brand value locally. Source: Done.ai design tokens v2.1 (2026-07-14), from Figma "Done.ai x G—W" (v1t6SxNCyGrddLZX9YKtxT), Design system section 1089:4532. Mirrors the #done-tokens data island in the guidelines build. ============================================================ */ /* ---------- Typeface ---------- Done Sans ships exactly two weights. There is no 500 and no 700 — asking for them makes the browser fake the weight. Hierarchy comes from size and space, never from weight. */ @font-face { font-family: "Done Sans"; src: url("fonts/DoneSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Done Sans"; src: url("fonts/DoneSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ---------- Brand ---------- */ --color-brand-iris-200: #EEE7FF; --color-brand-iris-500: #6323DD; --color-brand-iris-800: #1C093E; /* the ink — every neutral derives from it */ --color-brand-greige: #F3F0ED; --color-brand-white: #FFFFFF; --color-brand-black: #000000; /* ---------- Dark alpha ramp — Iris 800 at the canonical stops ---------- */ --dark-alpha-50: rgba(28,9,62,.03); --dark-alpha-100: rgba(28,9,62,.06); --dark-alpha-200: rgba(28,9,62,.10); --dark-alpha-300: rgba(28,9,62,.18); --dark-alpha-400: rgba(28,9,62,.30); --dark-alpha-500: rgba(28,9,62,.42); --dark-alpha-600: rgba(28,9,62,.54); --dark-alpha-700: rgba(28,9,62,.68); --dark-alpha-800: rgba(28,9,62,.80); --dark-alpha-900: rgba(28,9,62,.90); --dark-alpha-950: rgba(28,9,62,.96); /* ---------- Light alpha ramp — white at the same stops ---------- */ --light-alpha-200: rgba(255,255,255,.10); --light-alpha-400: rgba(255,255,255,.30); --light-alpha-700: rgba(255,255,255,.68); --light-alpha-800: rgba(255,255,255,.80); --light-alpha-950: rgba(255,255,255,.96); /* ---------- Status ---------- */ --color-green-200: #E6F8ED; --color-green-500: #43C672; --color-green-800: #274D34; --color-orange-200: #FFE0CA; --color-orange-500: #FE712A; --color-orange-800: #4D2C1C; --color-red-200: #FFDAE2; --color-red-500: #DD365C; --color-red-800: #4D1A25; --color-blue-200: #ECF0FF; --color-blue-500: #6690FF; --color-blue-800: #1A254D; /* ---------- Semantic text ---------- The spec sets Text/Muted to dark-alpha-600 (.54). That tier measures 3.6–4.0:1 on these surfaces and misses WCAG AA 4.5:1, so this site uses the 700 tier — the lowest one that passes. Revert this single line if the design system ever resolves it the other way. */ --color-text-strong: var(--dark-alpha-950); --color-text-medium: var(--dark-alpha-800); --color-text-muted: var(--dark-alpha-700); --color-text-accent: var(--color-brand-iris-500); /* Inverse tiers, for content sitting on a strong fill. */ --color-text-inverse-strong: var(--light-alpha-950); --color-text-inverse-primary: var(--light-alpha-800); /* ---------- Semantic border / fill / action ---------- */ --color-border-subtle: var(--dark-alpha-200); --color-border-normal: var(--dark-alpha-400); --color-border-strong: var(--dark-alpha-800); --color-fill-subtle: var(--dark-alpha-100); --color-fill-strong: var(--dark-alpha-700); --color-action-primary-default: var(--dark-alpha-900); --color-action-primary-foreground: var(--color-brand-white); --color-action-primary-hover: var(--dark-alpha-700); --color-action-secondary-default: var(--dark-alpha-200); --color-action-secondary-hover: var(--dark-alpha-300); --color-action-accent-default: var(--color-brand-iris-500); --color-action-disabled-default: var(--dark-alpha-100); --color-action-disabled-foreground: var(--dark-alpha-300); /* ---------- Radius ---------- sm = tags/tight · md = chips, inputs · lg = cards, modals, elevated surfaces · xl = large surfaces · full = buttons, pills */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 1000px; /* ---------- Spacing ---------- Nearest token or fix the layout — never in-between values. */ --space-0: 0px; --space-100: 4px; --space-200: 8px; --space-300: 12px; --space-400: 16px; --space-500: 24px; --space-600: 32px; --space-700: 48px; --space-800: 64px; --space-900: 96px; /* ---------- Type ---------- The ladder is 10 · 12 · 14 · 16 · 18 · 24 · 32 · 56. Nothing between. */ --font-sans: "Done Sans", "Instrument Sans", Arial, sans-serif; --type-display-size: 56px; --type-display-lh: 110%; --type-display-track: -0.01em; --type-heading-lg-size: 32px; --type-heading-lg-lh: 120%; --type-heading-lg-track: -0.01em; --type-heading-md-size: 24px; --type-heading-md-lh: 120%; --type-heading-md-track: 0; --type-heading-sm-size: 18px; --type-heading-sm-lh: 120%; --type-heading-sm-track: 0; --type-body-lg-size: 16px; --type-body-lg-lh: 20px; --type-body-track: 0.01em; --type-body-md-size: 14px; --type-body-md-lh: 18px; --type-body-sm-size: 12px; --type-body-sm-lh: 16px; --type-ui-lg-size: 16px; --type-ui-lg-lh: 16px; --type-ui-md-size: 14px; --type-ui-md-lh: 14px; --type-ui-sm-size: 12px; --type-ui-sm-lh: 12px; --type-ui-xs-size: 10px; --type-ui-xs-lh: 10px; --type-ui-xs-track: 0.03em; --type-label-size: 12px; --type-label-lh: 16px; --type-label-track: 0.04em; /* ---------- Elevation ---------- There are no shadow tokens: Figma defines zero effect styles and the system's rule for cards is "elevation separates, never shadows/borders". Elevation is a translucent surface fill over the page field. */ --surface-lowest: rgba(255,255,255,.10); /* Elevated · Lowest = Light Alpha 200 */ --surface-low: rgba(255,255,255,.30); /* Elevated · Low = Light Alpha 400 */ --surface-medium: rgba(255,255,255,.54); /* Elevated · Medium = Light Alpha 600 */ --surface-high: rgba(255,255,255,.80); /* Elevated · High = Light Alpha 800 */ --surface-highest: rgba(255,255,255,.96); /* Elevated · Highest = Light Alpha 950 */ /* ---------- Brand gradients ---------- Paint styles Primary / Secondary / Tertiary, stops verbatim. */ --gradient-primary: linear-gradient(135deg, #2F1261 0%, #6323DD 40.9%, #ECBBF6 100%); --gradient-secondary: linear-gradient(45deg, #C0A7F1 0%, #E9CCF7 47.6%, #F7F2FC 100%); --gradient-tertiary: linear-gradient(135deg, #93AAFF 0%, #E0E7FF 40.9%, #F7F9FF 100%); /* Gradient-filled headline, verbatim from the final screen of northstar-onboarding.html. The box is wider than the words, so the visible slice sits inside the ramp rather than reaching either end. */ --gradient-heading: linear-gradient(92deg, #42128C 0%, #6323DD 34%, #A97FF0 66%, #EBC2E6 96%); /* ---------- Brand surface wash ---------- Built only from sanctioned stops: Secondary-gradient lavenders, Iris 200, and the #FFAFCE blob tone from the gradient system. */ --brand-wash: radial-gradient(115% 135% at 10% -10%, rgba(192,167,241,.80) 0%, rgba(192,167,241,0) 62%), radial-gradient(115% 100% at 44% 10%, rgba(233,204,247,.55) 0%, rgba(233,204,247,0) 58%), radial-gradient(100% 90% at 102% 58%, rgba(238,231,255,.60) 0%, rgba(238,231,255,0) 64%), radial-gradient(90% 80% at 58% 108%, rgba(255,175,206,.18) 0%, rgba(255,175,206,0) 58%), #F4EFFC; } /* ---------- Canonical text styles ---------- Use these rather than hand-setting a size. */ .t-heading-sm { font-size:var(--type-heading-sm-size); line-height:var(--type-heading-sm-lh); letter-spacing:var(--type-heading-sm-track); font-weight:400; } .t-body-lg { font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-lh); letter-spacing:var(--type-body-track); font-weight:400; } .t-body-md { font-size:var(--type-body-md-size); line-height:var(--type-body-md-lh); letter-spacing:var(--type-body-track); font-weight:400; } .t-body-sm { font-size:var(--type-body-sm-size); line-height:var(--type-body-sm-lh); letter-spacing:var(--type-body-track); font-weight:400; } .t-ui-lg { font-size:var(--type-ui-lg-size); line-height:var(--type-ui-lg-lh); letter-spacing:var(--type-body-track); font-weight:400; } .t-ui-md { font-size:var(--type-ui-md-size); line-height:var(--type-ui-md-lh); letter-spacing:var(--type-body-track); font-weight:400; } .t-ui-sm { font-size:var(--type-ui-sm-size); line-height:var(--type-ui-sm-lh); letter-spacing:var(--type-body-track); font-weight:400; } .t-ui-xs { font-size:var(--type-ui-xs-size); line-height:var(--type-ui-xs-lh); letter-spacing:var(--type-ui-xs-track); font-weight:400; } .t-label { font-size:var(--type-label-size); line-height:var(--type-label-lh); letter-spacing:var(--type-label-track); font-weight:600; text-transform:uppercase; color:var(--color-text-muted); }