/* ════════════════════════════════════════════════════════════════════ VYAN - Design Tokens · "Vyan Evolved" (Codex Ch. 15, rev. 2026-06) The Visual Brand System, compiled. Raw hex lives ONLY here (the system of record); everywhere else a raw hex is a defect. Obsidian & Platinum carry 90% of every surface; Ember appears only where money or trust moves. EVOLVED: the ground warms a few degrees toward graphite-brown, corners round onto one disciplined scale, and a real layered elevation ladder makes the instrument read as tangible, liftable hardware. Dark is primary; the same instrument flips to warm paper in daylight. Every value stays a token so every surface evolves at once. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Color · ground + surfaces (warmed toward graphite-brown) ── */ --obsidian: #0E0C09; /* app ground, warm graphite-brown */ --graphite: #1C1A15; /* primary card / surface */ --graphite-2: #16140F; /* recessed / secondary surface */ --graphite-3: #221F18; /* raised / hover surface, one step brighter */ --line: #2A2720; /* structural hairline (object edge) */ --line-hi: #3A362C; /* hovered / emphasized hairline */ --hairline: rgba(236,232,222,.07); /* ── Color · type ── */ --platinum: #E8E8EC; --plat-dim: #A8A8B4; --plat-faint: #86848D; /* lightened: now AA small text on cards (4.72:1) */ --ghost: #16140F; /* ghost brand marks, barely above ground */ /* ── Color · the earned accent ── */ --ember: #C9A23F; --ember-hi: #E8C97A; --ember-deep: #8F6F22; --ember-ink: #161204; /* dark ink on gold */ --ember-text: var(--ember); /* ember AS SMALL TEXT (marks, chips, labels, links); dark mode the raw ember already passes */ /* ── Color · functional states (never decorative) ── */ --green: #3DD68C; --amber: #F5B83D; --red: #E5484D; --trust: #4D7CFE; /* AA-verified ink for DARK INK ON A SATURATED FILL (verdict pills, meters) */ --green-ink: #0B3322; /* on --green fill (7.41:1) */ --amber-ink: #4A2A02; /* on --amber fill (7.27:1) */ --red-ink: #200406; /* on --red fill (4.96:1); white fails (3.91) */ --trust-ink: #040D24; /* on --trust fill (5.17:1); white fails (3.73) */ /* brighter tones for SATURATED COLOR AS TEXT on a tint (low-emphasis chips) */ --red-text: #FF6B6F; /* red text on --tint-red over a card (5.13:1) */ --trust-text: #7AA0FF; /* trust text on --tint-trust over a card (5.45:1) */ /* ── Gradients ── */ --grad-ember: linear-gradient(90deg, var(--ember-hi), var(--ember)); --grad-ember-deep: linear-gradient(135deg, #F0DA9A 0%, #E8C97A 45%, #A8842B 100%); --grad-plat: linear-gradient(135deg, #FFFFFF 0%, #C9C9D1 55%, #9A9AA4 100%); /* ── Accent tints (color-mix so they auto-track if a hue shifts) ── */ --tint-ember: color-mix(in srgb, var(--ember) 12%, transparent); --tint-ember-2: color-mix(in srgb, var(--ember) 20%, transparent); --tint-active: color-mix(in srgb, var(--ember) 14%, transparent); /* nav / chip active */ --tint-green: color-mix(in srgb, var(--green) 14%, transparent); --tint-amber: color-mix(in srgb, var(--amber) 14%, transparent); --tint-red: color-mix(in srgb, var(--red) 14%, transparent); --tint-trust: color-mix(in srgb, var(--trust) 14%, transparent); --tint-warm: color-mix(in srgb, var(--ember-hi) 5%, transparent); /* whole-card warm wash */ /* ── Tool accents · one ownable spark per product, deconflicted across the wheel (every pair >= 26 deg apart). Ember stays the ONLY money/CTA gold; a tool accent never lands on a CTA. The base is the brand color (mark, dot, border, tint); the -text sibling is the AA-safe text value. ── */ --tool-datum: #DB243C; --tool-datum-text: #E03E54; --tool-earshot: #E26C28; --tool-earshot-text: #E26C28; --tool-control: #A0B828; --tool-control-text: #A0B828; --tool-buildout: #569730; --tool-buildout-text: #569730; --tool-onsight: #29A362; --tool-onsight-text: #29A362; --tool-quotemaven: #11A793; --tool-quotemaven-text: #11A793; --tool-paidup: #0C83B6; --tool-paidup-text: #0C83B6; --tool-canvasspro: #3365F0; --tool-canvasspro-text: #4674F1; --tool-heylo: #8F4EE4; --tool-heylo-text: #975BE6; --tool-volley: #DA3EA1; --tool-volley-text: #DA3EA1; /* Founder board "VYAN FLEET - ELEVATED": TradeFlo = new product (gettradeflo.com); CyberSygn = the e-sign rail, elevated into the accent system. Both cyan; on the dark shell the bright base already clears AA, so dark -text = base. */ --tool-tradeflo: #00B8D4; --tool-tradeflo-text: #00B8D4; --tool-cybersygn: #12BFE5; --tool-cybersygn-text: #12BFE5; /* ── Type ── */ --disp: 'Michroma', 'Arial Black', sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', 'SFMono-Regular', 'Courier New', monospace; /* ── Radius · evolved rounder, one ascending family (no random bubbles) ── */ --r-media: 16px; /* edge-to-edge photo cap on a card */ --r-card: 16px; /* cards, sheets, modals (was 8) */ --r-card-lg: 20px; /* the mobile Control Deck + big panels */ --r-control: 12px; /* buttons, search, inputs, segmented (was 6) */ --r-inner: 9px; /* a control nested in a control */ --r-chip: 9px; /* chips, verdict pills, tags (was 4) */ --r-pill: 999px; /* ── Spacing · TWO intentional scales (COMPONENTS.md §1), NOT duplicates ── --s-* = fine 4px COMPONENT rhythm: padding + gaps INSIDE a surface. --sp-* = coarse PAGE/section vertical rhythm (defined below; 24 live uses). The four rungs they share (8/16/24/40) alias to --sp-* so there is one source of truth for the overlap. Distinct rungs (the 4/12/20/32 in-between steps) stay literal. Reconcile, never delete either scale. ── */ --s-1: 4px; --s-2: var(--sp-1); --s-3: 12px; --s-4: var(--sp-2); --s-5: 20px; --s-6: var(--sp-3); --s-7: 32px; --s-8: var(--sp-4); --pad-card: 18px; /* standard internal card padding */ --pad-panel: 22px; /* sheet / deck inner padding */ /* ── Elevation · the "tangible". Layered, warm-black. USAGE LAW: one tier per surface, never stack. e1 rest · e2 card/hover · e3 float-only (sheets/deck/modals/picker) · e4 modals/FAB. ── */ --e0: inset 0 0 0 1px var(--line); --e1: 0 1px 1px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.5); --e2: 0 1px 1px rgba(0,0,0,.55), 0 8px 20px -6px rgba(0,0,0,.66); --e3: 0 2px 2px rgba(0,0,0,.6), 0 18px 40px -10px rgba(0,0,0,.74); --e4: 0 4px 6px rgba(0,0,0,.62), 0 30px 64px -16px rgba(0,0,0,.8); --e-press: 0 1px 1px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.55); --e-inset: inset 0 1px 0 rgba(236,232,222,.05); /* top-edge light-catch */ --e-ember: 0 6px 22px -6px color-mix(in srgb, var(--ember) 55%, transparent); /* hot-door ring + FAB only */ --ring-ember: 0 0 0 3px color-mix(in srgb, var(--ember) 34%, transparent); /* focus ring */ --glow-ember: 0 0 24px rgba(201,162,63,.4); /* softened; hot-door ring only */ /* ── Motion (adds a tactile press; spring reserved for lift) ── */ --m-fast: 140ms; --m-base: 200ms; --m-pulse: 250ms; --m-enter: 420ms; --m-press: 90ms; /* the down-state */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.45, .64, 1); /* press-and-release lift */ --ease-exit: cubic-bezier(.16, 1, .3, 1); /* expo-out: settles like hardware */ --ease-press: cubic-bezier(.2, 0, 0, 1); /* firm, no overshoot */ /* ── Surfaces that aren't pure tokens elsewhere (warmed) ── */ --tint-hover: rgba(236,232,222,.04); --tint-row: rgba(236,232,222,.02); --scrim: rgba(8,7,5,.66); --header-bg: rgba(14,12,9,.9); /* ── Layout ── */ --max-w: 1216px; --max-w-text: 680px; --gutter: 32px; /* ════════════════════════════════════════════════════════════════ UXI v2 · the marketing/cinematic tier (CyberSygn x Quote Maven hybrid). ADDITIVE: the warm structural substrate above is unchanged; this adds the fluid display ramp, the section rhythm, and the per-product accent seam. ════════════════════════════════════════════════════════════════ */ /* Fluid display type ramp (Michroma display, capped for legibility) */ --fs-d1: clamp(34px, 6vw, 64px); /* hero h1 · Michroma · line-height 1.03 · -.015em */ --fs-d2: clamp(28px, 3.6vw, 46px); /* section h2 */ --fs-d3: clamp(20px, 2vw, 28px); /* card / sub-section */ --fs-lede: clamp(16px, 2.2vw, 19px); /* hero lede · plat-dim · max 58ch */ /* Marketing section rhythm */ --section-pad: clamp(64px, 10vh, 120px); /* The per-product ACCENT seam. A product SITE overrides these two lines to its own --tool-; component CSS only ever reads --accent. The accent is a MARKING color (kicker, mark, dots, figure stroke, hover border); EMBER alone fills CTAs and money. Default for this repo: TradeFlo (the console product). */ --accent: var(--tool-tradeflo); --accent-text: var(--tool-tradeflo-text); /* ════════════════════════════════════════════════════════════════ APP-SPECIFIC TOKENS (vyan-platform house) - preserved on swap. These are referenced across the house's CSS/HTML/JS and are NOT part of the canonical evolved file; they ride alongside it. ════════════════════════════════════════════════════════════════ */ /* ── Legacy spacing scale · vertical rhythm (still referenced widely) ── */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 80px; --sp-7: 96px; --sp-8: 112px; /* ── Type · the missing display size between h1 and h2 ── */ --fs-section: clamp(24px, 2.8vw, 36px); /* the section-h2 size */ --fs-eyebrow: 10.5px; /* ── Legend scale · mono UI labels, floored at 10px for legibility ── */ --m-lg: 12px; --m-md: 11px; --m-sm: 10px; /* sub-10px mono is SVG-only (diegetic blueprint) */ /* ── Tracking · the three sanctioned letter-spacings ── */ --trk-1: .12em; --trk-2: .16em; --trk-3: .20em; /* ── Figure / engineering-drawing strokes ── The technical drawing speaks in tokens so it flips to ink on paper. These replace the hardcoded #7A7A85/#5C5C66 and #3A3A42/#2E2E36 greys. */ --draw-line: #7A7A85; /* mid grey · primary draw stroke */ --draw-faint: #3A3A42; /* darker grey · faint construction lines */ --draw-ember: var(--ember); /* the ember stroke · earned figure accent */ } /* ════════════════════════════════════════════════════════════════════ LIGHT MODE · bright-sun field mode (auto by system) The same instrument in daylight: warm paper ground, ink type, the ember discipline unchanged. Every surface flips because every surface speaks in tokens. All pairs below recomputed to WCAG AA. ════════════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: light) { :root { --obsidian: #F2EEE6; /* the ground becomes warm paper */ --graphite: #FFFFFF; /* cards sit bright above the paper */ --graphite-2: #F7F3EB; /* recessed surface */ --graphite-3: #FBF8F2; /* hover / raised */ --ghost: #F7F3EB; --line: #E2DCCF; --line-hi: #CFC8B8; --hairline: rgba(40,34,22,.08); --platinum: #1E1B14; /* ink on paper (17.2:1 on white) */ --plat-dim: #5A554A; /* 7.41:1 on white */ --plat-faint: #676255; /* AA small text on paper (5.25:1) */ --ghost: #F7F3EB; --ember: #8A6A18; /* money text 5.05:1 on white; CTA fill */ --ember-hi: #B98F1E; --ember-deep: #8F6F22; --ember-ink: #161204; /* dark ink on the bright ember-hi stop (6.08:1) */ --ember-text: #7A5D14; /* ember AS SMALL TEXT on warm paper ground (~4.9:1 AA); raw --ember is ~4.37:1 and FAILS */ --green: #157A4B; --amber: #946400; --red: #C32026; --trust: #2F5FE0; --green-ink: #FFFFFF; --amber-ink: #FFFFFF; --red-ink: #FFFFFF; --trust-ink: #FFFFFF; --red-text: #C32026; --trust-text: #2F5FE0; --grad-ember: linear-gradient(90deg, #A8842B, #8A6A18); /* white label = 5.05:1 PASS */ --grad-ember-deep: linear-gradient(135deg, #E2C25F 0%, #C9A23F 45%, #8F6F22 100%); --grad-plat: linear-gradient(135deg, #2A2A32 0%, #4E4E5A 55%, #6E6E7A 100%); --tint-ember: color-mix(in srgb, var(--ember) 13%, transparent); --tint-ember-2: color-mix(in srgb, var(--ember) 22%, transparent); --tint-active: color-mix(in srgb, var(--ember) 14%, transparent); --tint-green: color-mix(in srgb, var(--green) 14%, transparent); --tint-amber: color-mix(in srgb, var(--amber) 16%, transparent); --tint-red: color-mix(in srgb, var(--red) 13%, transparent); --tint-trust: color-mix(in srgb, var(--trust) 12%, transparent); --tint-warm: color-mix(in srgb, var(--ember) 5%, transparent); /* ── Tool accent text · recomputed AA (>=4.5:1) on the warm paper ground ── */ --tool-datum-text: #D3122C; --tool-earshot-text: #B64A0C; --tool-control-text: #60700F; --tool-buildout-text: #3D791B; --tool-onsight-text: #147B44; --tool-quotemaven-text: #047767; --tool-paidup-text: #0271A1; --tool-canvasspro-text: #0E4DFB; --tool-heylo-text: #771BEE; --tool-volley-text: #CA1688; --tool-tradeflo-text: #007789; /* AA 4.54:1 on warm paper */ --tool-cybersygn-text: #0B768E; /* AA 4.54:1 on warm paper */ --e0: inset 0 0 0 1px var(--line); --e1: 0 1px 1px rgba(40,34,22,.06), 0 2px 6px -2px rgba(40,34,22,.1); --e2: 0 1px 1px rgba(40,34,22,.07), 0 8px 20px -6px rgba(40,34,22,.14); --e3: 0 2px 2px rgba(40,34,22,.08), 0 18px 40px -10px rgba(40,34,22,.18); --e4: 0 4px 6px rgba(40,34,22,.1), 0 30px 64px -16px rgba(40,34,22,.22); --e-press: 0 1px 1px rgba(40,34,22,.06), 0 2px 4px -2px rgba(40,34,22,.1); --e-inset: inset 0 1px 0 rgba(255,255,255,.7); --e-ember: 0 6px 22px -6px color-mix(in srgb, var(--ember) 45%, transparent); --ring-ember: 0 0 0 3px color-mix(in srgb, var(--ember) 30%, transparent); --glow-ember: 0 0 24px rgba(138,106,24,.3); --tint-hover: rgba(40,34,22,.04); --tint-row: rgba(40,34,22,.022); --scrim: rgba(40,34,22,.5); /* dark scrim over photos so light text stays AA */ --header-bg: rgba(242,238,230,.9); /* ── APP-SPECIFIC · figure strokes flip to ink on paper (the drawing reads in daylight) ── */ --draw-line: #5C5C66; /* mid ink · primary draw stroke on paper */ --draw-faint: #B4B4BE; /* light grey · faint construction lines on paper */ --draw-ember: var(--ember); /* ember references the light-mode --ember above */ } }