/* ───────────────────────────────────────────────────────────────────── Boostt AI · Design Tokens v2.0 Light + Dark theme via [data-theme] attribute on . What changed from v1.0: • Display serif is now Instrument Serif (was Fraunces) • Onest is the workhorse. 90% of UI should use it • Added 8-color data viz palette with light/dark variants • Added container query units and improved spacing scale • Tightened motion semantics (added --t-instant for state changes) • Removed --bg-overlay (use --bg-canvas with --shadow-2 instead) See boostt-ai-brandbook.md for full documentation. ───────────────────────────────────────────────────────────────────── */ :root { /* ─── Brand identity (theme-independent) ──────────────────────── */ --brand-navy: #0D2430; --brand-teal: #1B8187; --brand-light: #58C3BE; --accent-yellow: #ECBF2B; --yellow-light: #FDF38E; /* ─── Typography ──────────────────────────────────────────────── */ /* Workhorse (90% of UI): geometric humanist sans, our voice */ --font-body: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Display moments (hero, editorial pulls): contemporary serif with personality */ --font-display: 'Instrument Serif', 'Fraunces', Georgia, serif; /* Technical truth (IDs, code, tabular data, kbd): clear, monospaced */ --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; /* ─── Radii ───────────────────────────────────────────────────── */ --r-xs: 4px; /* tight chips, status pills */ --r-sm: 6px; /* inputs, small buttons */ --r-md: 10px; /* cards, buttons */ --r-lg: 14px; /* large containers */ --r-xl: 20px; /* feature panels */ --r-full: 999px; /* pills, avatars */ /* ─── Motion ──────────────────────────────────────────────────── */ --t-instant: 60ms; /* state changes. Hover, focus ring appearance */ --t-fast: 120ms; /* color shifts, small movements */ --t-base: 220ms; /* transitions, expand/collapse, modal entry */ --t-slow: 420ms; /* page-level transitions, large surface changes */ --t-glacial: 800ms; /* hero / brand moments only */ --ease: cubic-bezier(0.32, 0.72, 0.36, 1.0); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0); /* gentle overshoot */ /* ─── Spacing (4px base) ─────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ─── Density tiers (multipliers, applied via [data-density]) ── */ --density: 1; /* default */ } [data-density="compact"] { --density: 0.75; } /* tables, data-heavy views */ [data-density="comfortable"] { --density: 1.25; } /* marketing, onboarding */ /* ─── Shorthand aliases (used by web personalization + newer views) ── */ :root { --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4); --sp-5: var(--space-5); --sp-6: var(--space-6); --sp-8: var(--space-8); --sp-10: var(--space-10); --sp-12: var(--space-12); } /* ═════════════════════════════════════════════════════════════════ DARK THEME (Boostt AI default) ═════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Surfaces */ --bg-app: #0A1418; --bg-canvas: #0F1B22; --bg-hover: #182832; --bg-active: #1F3340; /* one step further than hover, for pressed/active */ /* Text hierarchy */ --text-primary: #E8EEF0; --text-secondary: #B8C5CA; --text-tertiary: #7A8B92; --text-quaternary: #4C5A61; /* Lines */ --line: rgba(232, 238, 240, 0.08); --line-strong: rgba(232, 238, 240, 0.16); --line-accent: rgba(88, 195, 190, 0.32); /* alias for tinted-card borders */ /* Accent (interactive) */ --accent-text: #58C3BE; --accent-bg: rgba(88, 195, 190, 0.12); --accent-bg-strong: rgba(88, 195, 190, 0.22); --accent-border: rgba(88, 195, 190, 0.32); /* Status. Success */ --success-text: #69D391; --success-bg: rgba(105, 211, 145, 0.14); --success-border: rgba(105, 211, 145, 0.32); /* Status. Warning (yellow attention) */ --yellow-text: #ECBF2B; --yellow-bg: rgba(236, 191, 43, 0.14); --yellow-border: rgba(236, 191, 43, 0.32); /* Status. Danger */ --danger-text: #EF6363; --danger-bg: rgba(239, 99, 99, 0.14); --danger-border: rgba(239, 99, 99, 0.32); /* Data viz palette (categorical, color-blind aware) */ --data-1: #58C3BE; /* teal. The anchor. Matches brand-light */ --data-2: #ECBF2B; /* amber. Warm and distinct from teal */ --data-3: #F08770; /* coral. Soft warm, distinct from danger */ --data-4: #C084FC; /* plum. Rare hue, very distinguishable */ --data-5: #7BB8E8; /* sky. Calm cool blue */ --data-6: #A3E635; /* lime. Vibrant, distinct from success */ --data-7: #94A3B8; /* slate. Neutral, for "other" */ --data-8: #D4B896; /* sand. Warm neutral */ /* Tinted backgrounds for fill areas under lines / area charts */ --data-1-bg: rgba(88, 195, 190, 0.18); --data-2-bg: rgba(236, 191, 43, 0.18); --data-3-bg: rgba(240, 135, 112, 0.18); --data-4-bg: rgba(192, 132, 252, 0.18); --data-5-bg: rgba(123, 184, 232, 0.18); --data-6-bg: rgba(163, 230, 53, 0.18); --data-7-bg: rgba(148, 163, 184, 0.18); --data-8-bg: rgba(212, 184, 150, 0.18); /* Shadows */ --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4); /* Inner glow for active states (subtle) */ --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* Focus ring (accessibility) */ --ring: 0 0 0 3px var(--accent-bg); --ring-strong: 0 0 0 3px var(--accent-bg-strong); /* Semantic aliases (web personalization views) */ --c-bg: var(--bg-canvas); --c-text-muted: var(--text-tertiary); --c-accent: var(--accent-text); --c-success: var(--success-text); --c-success-bg: var(--success-bg); --c-warning: var(--yellow-text); --c-danger: var(--danger-text); --c-brand: var(--brand-teal); color-scheme: dark; } /* ═════════════════════════════════════════════════════════════════ LIGHT THEME ═════════════════════════════════════════════════════════════════ */ [data-theme="light"] { /* Surfaces */ --bg-app: #F7FAFB; --bg-canvas: #FFFFFF; --bg-hover: #EEF3F5; --bg-active: #E4ECF0; /* Text hierarchy */ --text-primary: #0D2430; --text-secondary: #3A4A52; --text-tertiary: #6B7B82; --text-quaternary: #A3B0B6; /* Lines */ --line: rgba(13, 36, 48, 0.10); --line-strong: rgba(13, 36, 48, 0.18); --line-accent: rgba(27, 129, 135, 0.28); /* Accent (interactive) */ --accent-text: #1B8187; --accent-bg: rgba(27, 129, 135, 0.10); --accent-bg-strong: rgba(27, 129, 135, 0.18); --accent-border: rgba(27, 129, 135, 0.28); /* Status. Success */ --success-text: #2D8B5F; --success-bg: rgba(45, 139, 95, 0.10); --success-border: rgba(45, 139, 95, 0.28); /* Status. Warning */ --yellow-text: #B8901E; --yellow-bg: rgba(236, 191, 43, 0.14); --yellow-border: rgba(184, 144, 30, 0.28); /* Status. Danger */ --danger-text: #C73A3A; --danger-bg: rgba(199, 58, 58, 0.10); --danger-border: rgba(199, 58, 58, 0.28); /* Data viz palette (light mode. Darker, more saturated for contrast on white) */ --data-1: #1B8187; /* teal */ --data-2: #B8901E; /* amber */ --data-3: #C45A47; /* coral */ --data-4: #8B5CF6; /* plum */ --data-5: #2563EB; /* sky */ --data-6: #65A30D; /* lime */ --data-7: #64748B; /* slate */ --data-8: #A88862; /* sand */ --data-1-bg: rgba(27, 129, 135, 0.10); --data-2-bg: rgba(184, 144, 30, 0.10); --data-3-bg: rgba(196, 90, 71, 0.10); --data-4-bg: rgba(139, 92, 246, 0.10); --data-5-bg: rgba(37, 99, 235, 0.10); --data-6-bg: rgba(101, 163, 13, 0.10); --data-7-bg: rgba(100, 116, 139, 0.10); --data-8-bg: rgba(168, 136, 98, 0.10); /* Shadows */ --shadow-1: 0 8px 24px rgba(13, 36, 48, 0.12); --shadow-2: 0 12px 32px rgba(13, 36, 48, 0.18), 0 2px 8px rgba(13, 36, 48, 0.08); --shadow-3: 0 24px 60px rgba(13, 36, 48, 0.28), 0 4px 12px rgba(13, 36, 48, 0.12); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8); --ring: 0 0 0 3px var(--accent-bg); --ring-strong: 0 0 0 3px var(--accent-bg-strong); /* Semantic aliases */ --c-bg: var(--bg-canvas); --c-text-muted: var(--text-tertiary); --c-accent: var(--accent-text); --c-success: var(--success-text); --c-success-bg: var(--success-bg); --c-warning: var(--yellow-text); --c-danger: var(--danger-text); --c-brand: var(--brand-teal); color-scheme: light; } /* ═════════════════════════════════════════════════════════════════ BASE ═════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-primary); background: var(--bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; /* Onest stylistic features */ } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; font-feature-settings: 'liga' 0; } /* Tabular numerals for data, IDs, timestamps */ .tabular { font-variant-numeric: tabular-nums; } /* ═════════════════════════════════════════════════════════════════ ACCESSIBILITY ═════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Focus visible default. Never remove without replacing */ :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }