/* ============================================================ Boldfit Internal Design System — tokens v2.0.0 Source of truth for colour, radius, elevation, type and motion across every Boldfit internal tool (Pulse, Cerebro, Central, Sanctum, Watcher, Vulcan). This file replaces the copies that were pasted into each repo. Consume it through the registry, do not fork it: npx shadcn@latest add @boldfit/tokens Then in your app CSS: @import "tailwindcss"; @import "@/styles/boldfit-tokens.css"; Every value here is a contract. If you need one that does not exist, add it here and ship a new version. Never hard-code. ============================================================ */ :root { /* ---- core (shadcn contract names — do not rename) ---- */ --background: #F5F6F4; --foreground: #14181A; --card: #FFFFFF; --card-foreground: #14181A; --popover: #FFFFFF; --popover-foreground: #14181A; --primary: #00769A; /* interactive identity: actions, links, focus */ --primary-foreground: #FFFFFF; --secondary: #E4F0F5; --secondary-foreground: #075D77; --muted: #EEF0EE; --muted-foreground: #5D6866; --accent: #FDF6C8; /* pale brand-yellow hover wash */ --accent-foreground: #14181A; --destructive: #B93A2C; --destructive-foreground: #FFFFFF; --border: #E5E8E5; --input: #D9DED9; --ring: #00769A; /* ---- brand (accent only: mark, highlights, "New") ---- */ --brand: #FCE900; --brand-foreground: #131313; /* ---- semantic (STATE ONLY — never decoration) ---- */ --ok: #1F7A48; --ok-soft: #E2F2E9; --warn: #96660F; --warn-soft: #F8EED9; --crit: #B93A2C; --crit-soft: #F9E7E4; --mute: #97A09D; --mute-soft: #EEF1EF; /* ---- ink scale (text) ---- */ --ink: #14181A; --ink-2: #5D6866; --ink-3: #69736F; /* WCAG-AA min for small meta text */ /* ---- app chrome (the dark rail) ---- */ --rail: #131313; --rail-sel: #222222; --rail-text: #9DA3A0; /* ---- sidebar (shadcn contract) ---- The rail IS the sidebar, so these alias the rail and follow it into dark mode with no duplicated literals. Never set to a hex. */ --sidebar: var(--rail); --sidebar-foreground: var(--rail-text); --sidebar-primary: var(--primary); --sidebar-primary-foreground: var(--primary-foreground); --sidebar-accent: var(--rail-sel); --sidebar-accent-foreground: #FFFFFF; --sidebar-border: color-mix(in srgb, var(--rail-text) 22%, transparent); --sidebar-ring: var(--primary); /* ---- chart (categorical series identity ONLY) ---- Five slots, assigned in fixed order, never cycled. A 6th series folds into "Other" or becomes small multiples; it never gets a generated hue. Deliberately cool (teal → violet → magenta → indigo → plum): red, amber and green are reserved for --ok/--warn/--crit, so no series can be mistaken for a status. Every slot sits >= 15 OKLab ΔE from all three status colours. Computed, not picked. Both modes clear the lightness band, chroma floor, protan/deutan adjacent separation, the normal-vision floor and 3:1 contrast. Light: worst adjacent ΔE 10.9 CVD / 23.0 normal. Dark: 9.8 / 16.8. Re-run the validator before changing a value. */ --chart-1: #0A90B9; --chart-2: #6529A9; --chart-3: #CF4797; --chart-4: #343EB9; --chart-5: #C252BB; /* ---- radius ---- Base is 10px, matching shadcn's own default, so every registry component's rounded-md / rounded-lg lands on our scale instead of fighting it. The calc offsets are shadcn's; keep them. */ --radius: 0.625rem; /* 10px — the base */ --radius-xs: calc(var(--radius) - 6px); /* 4px */ --radius-sm: calc(var(--radius) - 4px); /* 6px */ --radius-md: calc(var(--radius) - 2px); /* 8px */ --radius-lg: var(--radius); /* 10px */ --radius-xl: calc(var(--radius) + 4px); /* 14px */ --radius-pill: 999px; /* Deprecated: v1 had a 12px --radius-card outside the scale, which is why containers and their children could end up the same radius. Aliased so v1 apps keep working. Use rounded-xl on new work. */ --radius-card: var(--radius-xl); /* ---- elevation ---- Internal tools are flat by default: borders carry structure, not shadows. These exist only for surfaces that genuinely float above the page (popovers, dropdowns, dragged cards, toasts). */ --shadow-none: none; --shadow-raised: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent); --shadow-overlay: 0 4px 12px color-mix(in srgb, var(--foreground) 10%, transparent), 0 1px 3px color-mix(in srgb, var(--foreground) 6%, transparent); --shadow-drag: 0 8px 24px color-mix(in srgb, var(--foreground) 16%, transparent); /* ---- typography ---- Figtree is the workhorse — body, UI, data. Self-hosted, so it renders identically everywhere. Avenir Next (the brand face) is display-only via --font-display: native on Apple, falls back to Figtree elsewhere. Avenir Next is licensed Monotype and cannot be freely self-hosted; licence web fonts if you need it cross-platform. */ --font-sans: "Figtree Variable", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Avenir Next", "Figtree Variable", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale. v1 documented these in tokens.json but never exposed them as variables, so no app could actually use them. */ --text-page-title: 38px; --text-page-title-weight: 800; --text-page-title-tracking: -0.02em; --text-section: 22px; --text-section-weight: 800; --text-tile: 22px; /* metric numbers, mono + tabular */ --text-body: 13.5px; --text-body-leading: 1.5; --text-data: 12.5px; /* mono figures, cells */ --text-label: 10.5px; --text-label-weight: 700; --text-label-tracking: 0.1em; /* ---- motion (functional, restrained) ---- */ --ease-soft: cubic-bezier(0.32, 0.72, 0, 1); /* sharp out, soft settle */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 130ms; /* exits, hovers */ --dur-base: 190ms; /* enters */ } /* Dark theme — applied via prefers-color-scheme OR a data-theme="dark" toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #0E1517; --foreground: #E8EEEF; --card: #162225; --card-foreground: #E8EEEF; --popover: #162225; --popover-foreground: #E8EEEF; --primary: #3FAAC9; --primary-foreground: #04222C; --secondary: #123A45; --secondary-foreground: #BEE4EF; --muted: #1B282C; --muted-foreground: #A4B4B8; --accent: #2A2410; --accent-foreground: #E8EEEF; --destructive: #E27A70; --destructive-foreground: #04222C; --border: #26363A; --input: #26363A; --ring: #3FAAC9; --brand: #FCE900; --brand-foreground: #131313; --ok: #5BC98A; --ok-soft: #123322; --warn: #E0A94A; --warn-soft: #332711; --crit: #E27A70; --crit-soft: #331A17; --mute: #8A9591; --mute-soft: #1E2A2D; --ink: #E8EEEF; --ink-2: #A4B4B8; --ink-3: #819598; --rail: #0A0F10; --rail-sel: #1C2A2E; --rail-text: #8A9591; /* Selected against the dark card surface, not flipped from light. */ --chart-1: #0A8AB1; --chart-2: #A670F3; --chart-3: #C84091; --chart-4: #596EEC; --chart-5: #B848B2; } } :root[data-theme="dark"] { --background: #0E1517; --foreground: #E8EEEF; --card: #162225; --card-foreground: #E8EEEF; --popover: #162225; --popover-foreground: #E8EEEF; --primary: #3FAAC9; --primary-foreground: #04222C; --secondary: #123A45; --secondary-foreground: #BEE4EF; --muted: #1B282C; --muted-foreground: #A4B4B8; --accent: #2A2410; --accent-foreground: #E8EEEF; --destructive: #E27A70; --destructive-foreground: #04222C; --border: #26363A; --input: #26363A; --ring: #3FAAC9; --brand: #FCE900; --brand-foreground: #131313; --ok: #5BC98A; --ok-soft: #123322; --warn: #E0A94A; --warn-soft: #332711; --crit: #E27A70; --crit-soft: #331A17; --mute: #8A9591; --mute-soft: #1E2A2D; --ink: #E8EEEF; --ink-2: #A4B4B8; --ink-3: #819598; --rail: #0A0F10; --rail-sel: #1C2A2E; --rail-text: #8A9591; /* Selected against the dark card surface, not flipped from light. */ --chart-1: #0A8AB1; --chart-2: #A670F3; --chart-3: #C84091; --chart-4: #596EEC; --chart-5: #B848B2; } /* Respect the user's motion preference — always. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }