/* * tokens.css — LIVE Peach token set for the 36-section brand deck. * * =================================================================================== * APPLIED 2026-07-17 (token pass) from rebrand/tokens-peach-draft.css, after Max * signed off the scope table (SCOPE_TABLE.md) and ratified every value. The Radesk * original is backed up at rebrand/pre-reskin-backup/tokens.css. This file mirrors * the ported deck's custom-property NAMES so every section keeps resolving, then * remaps each slot's VALUE to Peach's system. Radesk-specific names * (--role-purple-*, --role-cart-*) keep their new Peach VALUES; the rename to * intent-named tokens is PROPOSED in comments and happens per section at its * content batch, so nothing breaks in the transitional state. * =================================================================================== * * Theme model (inverts vs the Radesk original, which was black board / white light): * DARK (default :root) canvas = Navy #070A43, ink = Off-white #FCF8F8, * accent = on-navy orange #FF653D [RATIFIED 2026-07-17] * LIGHT (:root[data-theme=light]) canvas = Off-white #FCF8F8, ink = Navy #070A43, * accent = base orange #EC5228 * * Value provenance is tagged per line: * [DS] = SOURCE_DESIGN_SYSTEM.md (as-practiced 2026 system) * [RES] = SOURCE_RESEARCH.md (60-30-10, contrast data) * [2022] = SOURCE_2022_GUIDELINES.md (CMYK/Pantone reference) * [DERIV] = orange-on-navy/DERIVATION.md (on-navy orange) * [INT] = interview decision, ALIGNMENT_BRIEF.md * [PROPOSE] = derived here for a gap with no source (flag for Max) */ :root { /* ---- Board / canvas (DARK is the default theme) ---- */ --color-canvas: #070A43; /* [INT] dark canvas = Navy (was #000000 black board). Never pure black. */ /* ---- Named palette variables (theme-invariant brand values) ---- Kept byte-identical in both themes, exactly like the Radesk palette was. The names carry over from the ported deck so sections keep resolving; only the hex/role behind each slot is remapped to Peach. Role tokens (below) decide which entry plays a job per theme. */ /* Slot 01 — was Ice White #F5F6FC. Peach: the off-white brand surface. */ --color-primary-01: #FCF8F8; /* [DS] Off-white (never pure #FFFFFF as a brand surface) */ /* Slot 02 — was Purple #6232FF (the hero accent). Peach: canonical brand Orange. NOTE: this palette slot stays #EC5228 in BOTH themes so the 3.1 swatch specimen always shows the one true brand orange. The surface-tuned on-navy orange lives in --role-accent below, NOT here. */ --color-primary-02: #EC5228; /* [DS][2022] Orange, Pantone 172, CMYK 0/80/100/0 */ /* Slot 03 — was Midnight #14141A (dark card/panel bg above the board). Peach: Deep Navy, the elevated dark surface that sits above the navy canvas. */ --color-primary-03: #0B0C2A; /* [DS] Deep Navy — elevated dark surfaces, code blocks, card panels on dark */ /* Slot 04 — was Lime #CEFF1C (bright pop accent). Peach: Blue, the one secondary used with any regularity. */ --color-primary-04: #5D6ADC; /* [DS] Blue — the regular secondary (gradient mid-stop, info accent) */ /* Slot grayscale-04 — was #9DA2B3 (footer/secondary text). Peach: a mid step of the PROPOSED neutral ramp (below), tuned to read on both navy and off-white. */ --color-grayscale-04: #8A8DAE; /* [PROPOSE] neutral-500-ish; footer/secondary text on both themes */ /* ---- The rest of the Peach primary + secondary palette (new; no Radesk equivalent) ---- */ --color-navy: #070A43; /* [DS][2022] Navy Blue, Pantone 2766, CMYK 100/90/0/50 — the anchor */ --color-orange: #EC5228; /* [DS][2022] Orange — canonical, alias of --color-primary-02 */ --color-orange-on-navy: #FF653D; /* [DERIV] RATIFIED 2026-07-17 (flag A) — brightened orange for dark surfaces. WCAG 6.34:1 / APCA Lc 46 on navy; ΔE2000 5.69 from base; full brand chroma. Runner-up was #F95E36. */ --color-offwhite: #FCF8F8; /* [DS] Off-white light canvas */ --color-secondary-blue: #5D6ADC; /* [DS] Blue — the regular secondary */ --color-secondary-yellow: #FFC539; /* [DS][2022] Yellow — gradient warm stop, rare highlight */ --color-secondary-teal: #91DDAB; /* [DS][2022] Teal — gradient end stop, rare success dot */ --color-secondary-burgundy: #700A2F;/* [DS][2022] Burgundy — deepest/rarest accent, "almost never" */ /* ---- PROPOSED neutral ramp (3.3 Grayscale) ---- NO grayscale system exists in ANY source. This ramp is DERIVED here by interpolating off-white #FCF8F8 -> navy #070A43, anchored on the real DS neutrals: muted #D7D8E6 (borders), body #343666, and the brand navy anchor #070A43 (900). Navy-tinted on purpose so it belongs to the brand rather than a neutral grey. APPROVED (flag B, Max 2026-07-17): navy-tinted ramp, roles documented on 3.3. NEUTRAL-RAMP FIX (Max, 2026-07-18): the old ramp put deep-navy #0B0C2A at 900 and navy #070A43 at 950 — but #0B0C2A is DARKER (OKLCH L 0.176) than navy (L 0.198), so the ramp went back UP at the last step (non-monotonic), and #0B0C2A read too black (chroma only 0.060 vs navy's 0.103). Fix: navy moves to 900 (the canvas anchor sits at 900); 950 is re-derived a modest OKLCH step darker than navy keeping navy's hue and full chroma (reads as deep navy, not black); 800 is re-interpolated in OKLCH between 700 and the new 900 so 50->950 is evenly stepped and strictly monotonic. OKLCH L series (50->950): 0.982 0.949 0.886 0.794 0.701 0.558 0.440 0.356 0.277 0.198 0.168 — strictly decreasing. #0B0C2A stays as --color-primary-03 (below); only these neutral-scale entries move. */ --color-neutral-50: #FCF8F8; /* [DS] off-white canvas */ --color-neutral-100: #EFEDF2; /* [PROPOSE] */ --color-neutral-200: #D7D8E6; /* [DS] muted — borders/dividers/placeholders */ --color-neutral-300: #B8BAD0; /* [PROPOSE] */ --color-neutral-400: #9A9CB8; /* [PROPOSE] */ --color-neutral-500: #6E7191; /* [PROPOSE] */ --color-neutral-600: #4C4F73; /* [PROPOSE] */ --color-neutral-700: #343666; /* [DS] body text — also the lightened stage/bento background (08/11/12/13) */ --color-neutral-800: #1C2155; /* [DERIV] re-interpolated OKLCH midpoint between 700 and 900(navy); L≈0.277 (was #1B1E4A) */ --color-neutral-900: #070A43; /* [DS][2022] navy — the brand/canvas anchor; L≈0.198 (moved here from 950) */ --color-neutral-950: #04023B; /* [DERIV] deepest surface — a modest OKLCH step darker than navy, navy hue+chroma kept; L≈0.168 (replaces #0B0C2A, which read too black and broke monotonicity) */ /* Card border — was rgba(157,159,169,0.2). Peach: navy-tinted hairline on dark. */ --color-card-border: rgba(138, 141, 174, 0.2); /* [PROPOSE] neutral-500 @ 0.2 on dark */ --color-white: #FFFFFF; /* literal white — reserved for pure-UI elements only, NOT a brand surface [DS] */ --color-black: #000000; /* literal black — true black, utility only */ /* ---- Brand gradient (the flagship secondary use — 3.2) ---- */ --gradient-brand-animated: linear-gradient(45deg, #FFC539, #EC5228, #5D6ADC, #91DDAB); /* [DS] 4-stop, 15s loop, gold-bookended */ --gradient-brand-static: linear-gradient(to right, #EC5228, #5D6ADC); /* [DS] reduced-motion fallback (orange->blue only) */ /* ---- Role tokens (theme-conditional; the ONLY things that move dark->light) ---- The named palette above is theme-invariant; roles decide which entry plays a job per theme. Sections must reference these for anything that flips, never a raw palette var. */ /* Generic neutral info-card / panel background. Dark = Neutral 700 (#343666, the lightened mid-navy stage colour — was Deep Navy primary-03 #0B0C2A, softened 2026-07-18 per Max so panels no longer read near-black); light = Neutral 100 (#EFEDF2, a slightly darker off-white — was primary-01 #FCF8F8, which matched the light canvas and gave cards no separation. Mirrors the dark logic: darker canvas + lighter panel on dark → light canvas + slightly darker panel on light. Set 2026-07-18 per Max. Light override sits in the [data-theme=light] block below.) */ --role-card-panel: var(--color-neutral-700); /* Contrast ink that inverts with the canvas: emphasis headline word, version/date text, index category headers, footer/corner logomark. Dark = Off-white; light = Navy. (Radesk used pure white/black; Peach uses the brand off-white / navy pair instead.) */ --role-ink-contrast: var(--color-offwhite); /* NEW role — the surface-tuned brand accent (orange). This is where the on-navy orange rule lives: dark = #FF653D (on navy), light = #EC5228 (on off-white). CTAs, active states, logo-on-navy, accent icons reference THIS, not the palette orange. [DERIV] — RATIFIED 2026-07-17 (flag A). */ --role-accent: var(--color-orange-on-navy); /* Inside-stroke of the demo/hero card on the construction/clearspace sections (08-13). PROPOSE rename: --role-accent-card-border (Radesk name kept so sections resolve). */ --role-purple-card-border: rgba(138, 141, 174, 0.2); /* [PROPOSE] */ /* Border of the flattened "colour scene" rect on the clearspace sections (11-13). Half a step lighter than the card border. PROPOSE rename: --role-scene-border. */ --role-purple-scene-border: rgba(215, 216, 230, 0.2); /* [PROPOSE] neutral-200 @ 0.2 */ /* Nested sub-panel inside the sidebar/app demo cards on 25-icons-and-typography. Dark = a step above deep navy; light = off-white. */ --role-inner-panel: #14163A; /* [PROPOSE] one step lighter than deep navy on dark */ /* The one theme-flipping tab element on 25 (active "Cart" icon+label). Dark = off-white on the dark card; light = orange. PROPOSE rename: --role-tab-active. */ --role-cart-active: var(--color-offwhite); /* ---- Font families ---- */ /* Radesk shipped --font-manrope as the base family. Kept as an alias so any section still referencing it resolves; it now points at the Peach body face. */ --font-manrope: 'Rethink Sans', sans-serif; /* [DS] alias retained; do not present as a brand font name */ /* ---- Role-level font families (the brand-swap seam) ---- Peach's two-typeface system. Sections reference these role tokens. heading -> Sora (display/hero, H2/H3, kickers/labels, the gradient keyword) body -> Rethink Sans (paragraph, small body, AND data/labels/hex — no mono face) */ --font-heading: 'Sora', sans-serif; /* [DS] Sora, 100-800, NO italic */ --font-body: 'Rethink Sans', sans-serif; /* [DS] Rethink Sans, 400-800, true italics */ --font-mono: ui-monospace, SFMono-Regular, 'Courier New', monospace; /* [DS] utility ONLY (code samples in the doc); never a brand font */ /* ---- Weight tokens (Sora has no italic -> emphasis is weight 600, never italic) ---- */ --weight-display: 300; /* [DS] Sora Light for display/hero */ --weight-heading: 300; /* [DS] Sora Light for H2 */ --weight-heading-strong: 400; /* [DS] Sora Regular for H3 */ --weight-emphasis: 600; /* [DS] the no-italic emphasis rule (Sora 600 replaces italic) */ --weight-label: 600; /* [DS] Sora 600 uppercase for labels/kickers/buttons */ --weight-gradient-keyword: 700; /* [DS] the one bold gradient keyword per heading (700-800) */ --weight-body: 400; /* [DS] Rethink Sans body */ --weight-body-medium: 500; /* [DS] Rethink Sans article intros */ /* ---- Named text-style variables (carried from the ported deck; comments re-homed to Sora/Rethink. Sizes/leading unchanged so the section layouts keep their metrics; they will be re-gated against the new fonts at reskin time.) ---- */ /* "Footer" — footer nav labels, footnote-style hex/rgb/cmyk rows (Rethink Sans / body) */ --text-footer-size: 16px; --text-footer-weight: 600; --text-footer-line-height: 59px; /* "Footnote" — same size/weight as Footer, tight leading (color-card meta rows) */ --text-footnote-size: 16px; --text-footnote-weight: 600; --text-footnote-line-height: 16px; /* "Title" — section headlines and the big colour-swatch name label (Sora / heading) */ --text-title-size: 42px; --text-title-weight: 600; /* Sora 600; the gradient keyword within a title uses --weight-gradient-keyword */ --text-title-line-height: 48px; /* "Body" — paragraph/body copy under section headlines (Rethink Sans / body) */ --text-body-size: 21.5px; --text-body-weight: 400; /* was 600 (Manrope); Rethink Sans body is 400 */ --text-body-line-height: 34px; /* fixed from 59px (footer row-height had leaked in); body follows the 09 gold 21.5/34. Footer keeps its own --text-footer-line-height: 59px above. */ /* Cover giant headline ("Brand" / "Guidelines.") — Sora light for display */ --text-display-size: 125px; --text-display-weight: 300; /* was 500 (Manrope Medium); Sora display is 200-300 */ --text-display-line-height: 125px; /* Index category headers — Sora / heading, tight leading */ --text-index-heading-size: 21.5px; --text-index-heading-weight: 600; --text-index-heading-line-height: 21.5px; /* Index list items — Rethink Sans / body, tight leading */ --text-index-item-size: 16px; --text-index-item-weight: 400; /* was 600; body face at 400 */ --text-index-item-line-height: 21.5px; } /* ---- LIGHT theme overrides (canvas = off-white, ink = navy, accent = base orange) ---- Only the things that flip live here. The named palette is theme-invariant, so it is not repeated; only --color-canvas, the card border, and the role tokens move. */ :root[data-theme="light"] { --color-canvas: #FCF8F8; /* [INT][DS] light canvas = Off-white (was #FFFFFF; pure white is banned as a brand surface) */ /* Card border: same 0.2 opacity, lighter navy-tinted grey on light. */ --color-card-border: rgba(184, 186, 208, 0.2); /* [PROPOSE] neutral-300 @ 0.2 on light */ /* Role tokens flip: */ --role-card-panel: var(--color-neutral-100); /* neutral card bg on light: Neutral 100 #EFEDF2, a slightly darker off-white so cards separate from the #FCF8F8 canvas (was primary-01 #FCF8F8, no separation) */ --role-ink-contrast: var(--color-navy); /* contrast ink: Off-white -> Navy */ --role-accent: var(--color-orange); /* [DERIV] accent: on-navy #FF653D -> base #EC5228 on light */ --role-purple-card-border: rgba(215, 216, 230, 0.2); /* [PROPOSE] lighter on light */ --role-purple-scene-border: rgba(184, 186, 208, 0.2); /* [PROPOSE] */ --role-inner-panel: var(--color-offwhite); /* 25 nested sub-panels: dark -> off-white */ --role-cart-active: var(--color-orange); /* 25 active tab: off-white -> orange */ /* Font/weight/size tokens are not theme-dependent; every --font-*, --weight-*, and --text-* value above applies unchanged in light mode. */ } /* ---- Theme-scoped content swap (editability-first) ---- Where the source has genuinely different TEXT per theme (e.g. a swatch that reads one way in dark and another in light), both strings live in the HTML as sibling spans and CSS shows the right one. Dark is the default. */ .light-only { display: none; } :root[data-theme="light"] .dark-only { display: none; } :root[data-theme="light"] .light-only { display: inline; }