/* ============================================================================ LearnBoard — design tokens Direction: SPECTRUM. Approved 6 Aug 2026. The mark is a categorical palette, not a single brand color: EIGHT chromatic hues. Five carry the packs, three do status work. That mapping is the site's organising idea and is written out in standards.md §0. VARIABLES ONLY. No selectors, no component rules. Everything the site paints, spaces, rounds, shadows or animates resolves to a value in this file. PROVENANCE — everything here is sampled or computed, nothing estimated. - Every --lb-* hue is SAMPLED from the optimized logo SVGs (assets/img/learnboard-logo-light.svg / -dark.svg), taking only elements that fall inside the 0 0 500 320 viewBox. - --product-* are the running app's exact tokens from frontend/src/app/globals.css. - Contrast ratios in the comments are COMPUTED (WCAG 2.1 relative luminance) against --color-paper #FCFCFD unless stated. AA needs 4.5:1 for normal text, 3:1 for large text and non-text UI. - The mark contains NO navy and NO dark background. The neutral scale below is derived from the wordmark grey #6D6E71; the dark surface is a site decision, not a brand value. ========================================================================== */ :root { /* --- 1. The mark's eight hues (sampled) -------------------------------- Fill and graphic use. Only blue and magenta clear AA as text on paper. */ --lb-teal: #00AEB5; /* 2.65:1, fill only. THE PRIMARY */ --lb-blue: #056FC1; /* 5.06:1, text-safe */ --lb-green: #02B60A; /* 2.66:1, fill only */ --lb-gold: #FFCA2D; /* 1.49:1, fill only. Replaces the old yellow */ --lb-orange: #F7981E; /* LEGACY: not in the 7 Aug mark */ --lb-red: #F92403; /* 3.88:1, non-text UI */ --lb-magenta: #CD2F82; /* LEGACY: not in the 7 Aug mark */ --lb-purple: #8C66DA; /* 4.07:1, non-text UI */ --lb-grey: #6D6E71; /* 4.97:1 — the wordmark grey on light */ --lb-white: #FFFFFF; /* the wordmark on dark */ /* --- 2. Text-safe counterparts ----------------------------------------- Each hue darkened only as far as AA on paper requires. Use for labels, links, small icons and thin chart strokes on light surfaces. */ --lb-teal-ink: #008287; /* 4.51:1 */ --lb-blue-ink: #056FC1; /* 5.06:1, already safe */ --lb-green-ink: #018807; /* 4.53:1 */ --lb-gold-ink: #8E7119; /* 4.53:1 */ --lb-orange-ink: #A85206; /* LEGACY */ --lb-red-ink: #E72102; /* 4.55:1 */ --lb-magenta-ink: #B8125F; /* LEGACY */ --lb-purple-ink: #835FCC; /* 4.58:1 */ /* --- 3. Pack identity: one hue per pack, nine packs — five of the eight ------------------------------ A pack's hue never changes between pricing table, sector page and chart legend. See standards.md §0 for why these five and not the others. */ --pack-core: var(--lb-teal); /* Core analytics : the primary */ --pack-insights: var(--lb-blue); --pack-skills: var(--lb-purple); --pack-k12: var(--lb-gold); --pack-highered: var(--lb-green); --pack-corporate: var(--lb-orange); --pack-government: var(--lb-magenta); --pack-vet: var(--lb-red); --pack-platform: var(--color-ink-muted); /* always on, never sold: neutral */ /* text-safe counterparts, for a pack hue used as a label or a thin stroke */ --pack-core-ink: var(--lb-teal-ink); --pack-insights-ink: var(--lb-blue-ink); --pack-skills-ink: var(--lb-purple-ink); --pack-k12-ink: var(--lb-gold-ink); --pack-highered-ink: var(--lb-green-ink); --pack-corporate-ink: var(--lb-orange-ink); --pack-government-ink: var(--lb-magenta-ink); --pack-vet-ink: var(--lb-red-ink); /* --- 4. Chart series ---------------------------------------------------- Categorical only. Ordered so adjacent series stay distinguishable; a sequential or diverging scale is a separate decision. */ --series-1: var(--lb-blue); --series-2: var(--lb-teal); --series-3: var(--lb-purple); --series-4: var(--lb-orange); --series-5: var(--lb-magenta); --series-6: var(--lb-green); --series-7: var(--lb-gold); --series-8: var(--lb-red); /* --- 5. Surfaces and text ---------------------------------------------- Neutral scale from the wordmark grey — the mark has no navy. */ --color-paper: #FCFCFD; /* page */ --color-surface: #FFFFFF; /* cards, panels, table bodies */ --color-surface-sunk: #F5F6F7; /* wells, code blocks, zebra rows */ --color-surface-dark: #16191D; /* dark sections and footer — site choice */ --color-ink-deep: #111111; /* deepest ground, set on instruction 11 Aug 2026 */ --color-ink: #23262B; /* 14.80:1 on paper */ --color-ink-muted: #6D6E71; /* 4.97:1 on paper — the wordmark grey */ --color-ink-faint: #9A9DA1; /* 2.66:1 — decorative and disabled only */ --color-ink-on-dark: #F2F3F4; /* 15.87:1 on --color-surface-dark */ --color-rule: #E4E6E8; --color-rule-strong: #CDD0D3; /* --- 6. Interaction ---------------------------------------------------- The site follows the PRODUCT teal, not the mark's #00C3AB (which is fill-only at 2.24:1). --color-accent is the product's own primary and is NOT safe behind white text (2.82:1) — filled controls and accent text use --color-accent-strong. */ --color-accent: var(--product-primary); /* #00AEB5, 2.65:1, fills only */ --color-accent-strong: #008287; /* 4.51:1 on paper. Accent-coloured TEXT and links */ --color-accent-hover: #009AA0; /* darkens on hover: with white text, darker raises contrast (3.43:1) */ --color-accent-tint: #E4F6F7; /* quiet backgrounds */ --color-on-accent: #FFFFFF; /* white text on the primary: 2.72:1, BELOW the 4.5 AA minimum. Set on instruction, 7 Aug 2026 */ --color-icon-glyph: #FFFFFF; /* white glyph on a saturated icon tile. Kept separate from --color-on-accent so the two can diverge */ --color-focus: #056FC1; /* focus ring — 5.18:1, never removed */ /* --- 7. Status — the mark's other three hues --------------------------- */ --color-positive: var(--lb-green); --color-positive-ink: var(--lb-green-ink); --color-positive-tint: #E6F7E6; --color-caution: var(--lb-gold); --color-caution-ink: var(--lb-gold-ink); --color-caution-tint: #FDFBE3; --color-critical: var(--lb-red); --color-critical-ink: var(--lb-red-ink); --color-critical-tint: #FDE9E6; /* --- 8. Product adjacency --------------------------------------------- The running app's exact tokens. Kept so a screenshot never sits beside a near-miss of its own teal. */ --product-primary: #00AEB5; /* the brand primary, 7 Aug 2026 */ --product-primary-dark: #008287; --product-primary-light: #E4F6F7; --product-accent: #F4C842; /* --- 9. Typography — two families, no more ----------------------------- */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Type scale — 1.25 major third, fluid where it needs to be. */ --text-hero: clamp(2.25rem, 1.05rem + 3.6vw, 3.5rem); /* 36 to 56 : hero h1 */ --text-display: clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem); /* 36 → 56 */ --text-h1: clamp(2rem, 1.55rem + 1.9vw, 2.75rem); /* 32 → 44 */ --text-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.1875rem); /* 24 → 35 */ --text-h3: 1.375rem; /* 22 */ --text-h4: 1.125rem; /* 18 */ --text-body-lg: 1.125rem; /* 18 — lede */ --text-body: 1.0625rem; /* 17 — default */ --text-ui: 1rem; /* 16 : buttons, chips, hero body. Measured off the reference */ --text-small: 0.875rem; /* 14 */ --text-fine: 0.75rem; /* 12 : CTA microcopy */ --text-caption: 0.6875rem; /* 11 — uppercase labels only */ --text-data: 0.9375rem; /* 15 — mono figures */ --leading-hero: 1.1; /* 57.2px at 52px */ --leading-tight: 1.04; /* display */ --leading-snug: 1.25; /* headings */ --leading-ui: 1.375; /* 22px at 16px : hero bullets */ --leading-normal: 1.6; /* body */ --leading-relaxed: 1.7; /* long-form */ --tracking-hero: -0.04em; /* -2.1px at 52px */ --tracking-display: -0.028em; --tracking-heading: -0.018em; --tracking-normal: 0; --tracking-caption: 0.1em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* display. The reference sits at 650 */ /* --- 10. Spacing — 4px base ------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ --section-y: clamp(3.5rem, 2rem + 6vw, 6rem); /* vertical section rhythm */ --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); --measure: 68ch; /* max line length, long-form */ --measure-lede: 55ch; --container: 1280px; /* content cap. The reference sits near 1094; the extra room is spent on the grid, which bleeds past it */ /* --- 11. Radius — the mark's rounded rectangle ------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-btn: 12px; /* control radius, measured off the reference */ --radius-md: 10px; /* default: cards, buttons, inputs */ --radius-lg: 16px; /* feature panels, screenshot frames */ --radius-xl: 24px; --radius-pill: 999px; /* --- 12. Elevation — neutral-tinted, matching the grey-derived scale --- */ --shadow-none: none; --shadow-1: 0 1px 2px rgba(35, 38, 43, 0.06); --shadow-2: 0 1px 2px rgba(35, 38, 43, 0.06), 0 8px 20px -8px rgba(35, 38, 43, 0.14); --shadow-3: 0 1px 2px rgba(35, 38, 43, 0.06), 0 16px 40px -16px rgba(35, 38, 43, 0.20); --shadow-4: 0 24px 60px -24px rgba(35, 38, 43, 0.34); --shadow-focus: 0 0 0 3px rgba(5, 111, 193, 0.35); /* --- 13. Motion -------------------------------------------------------- Spectrum's language: elements ASSEMBLE — a short rise plus a slight scale-up, echoing the mark's mosaic resolving into bars. */ --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 260ms; --dur-swap: 520ms; /* panel swap: deliberately twice --dur-base */ --dur-tile: 800ms; /* tile grow and shrink: twice the old 400ms */ --dur-slow: 400ms; --dur-ambient: 9s; /* slow ambient loop. Only the eyebrow border uses it */ --dur-sweep: 700ms; /* longest permitted; nothing may exceed it */ --ease-assemble: cubic-bezier(0.34, 1.16, 0.40, 1.00); /* entrances */ --ease-standard: cubic-bezier(0.20, 0.00, 0.00, 1.00); /* state changes */ --ease-exit: cubic-bezier(0.40, 0.00, 1.00, 1.00); /* leaving */ --ease-linear: linear; /* opacity only */ --reveal-shift: 10px; /* how far a revealing element rises */ --reveal-scale: 0.97; /* what it scales up from */ --stagger-step: 55ms; /* between siblings */ --stagger-max: 700ms; /* total stagger ceiling, so nothing waits */ /* --- 14. Layering ------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; } /* Reduced motion: collapse every duration and transform at the token layer, so no component can reintroduce movement. Still variables only. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-swap: 0ms; --dur-tile: 0ms; --dur-slow: 0ms; --dur-sweep: 0ms; --dur-ambient: 0ms; --dur-ambient: 0ms; --reveal-shift: 0px; --reveal-scale: 1; --stagger-step: 0ms; --stagger-max: 0ms; } }