/* ============================================================ DataSeeds.AI - design tokens v3.5.0 (2026-09-02) Reconciled against the shipped designs: Figma homepage frame (K5XYtHyJ7ez3z9V2qqfI4j / 4221:8029 - the website_v5 build) and the sales deck page (4237:184 - the sales_deck build). Canonical file: design-system/tokens.css - website_v5/css/tokens.css is a symlink. Purple = action · Blue = Off-the-Shelf · Green = Made-to-Order Navy = dark surface & authority · Gradient = the signature. Load the typeface (one family, nothing else): ============================================================ */ :root{ /* ---------- action (primary) ---------- */ --ds-purple:#744ADC; /* Figma: Purple */ --ds-purple-soft:#8A68E2; /* Figma: Purple Tint 1 - hover, cards on purple band */ --ds-purple-mid:#A084E6; /* Figma: Purple Tint 2 */ --ds-purple-deep:#5B34C0; /* pressed */ --ds-purple-band-end:#5120CB; /* purple band gradient end */ /* ---------- offering accents ---------- */ --ds-blue:#4D8AF2; /* Off-the-Shelf */ --ds-blue-deep:#2B6FE0; /* blue at body size (AA) */ --ds-green:#22C784; /* Made-to-Order */ --ds-green-deep:#1AA870; /* green, large text on light */ --ds-green-ink:#0E7A55; /* green, body text on light */ --ds-green-shade:#0E2E21; /* Figma "Green Shade" - Made-to-Order tier titles on light */ /* ---------- ink (on light) ---------- */ --ds-ink:#0A0A0A; /* Figma: G6 */ --ds-body:#474747; /* body copy */ --ds-muted:#66696A; /* Figma: G5 - meta, captions */ --ds-faint:#9EA4A6; /* Figma: G4 - disabled, placeholder */ /* ---------- surfaces (light) ---------- */ --ds-white:#FFFFFF; --ds-off-white:#FBFBFB; /* DEFAULT page background */ --ds-grey:#F5F5F5; /* Figma: G1 - grey bands, cards, footer */ --ds-grey-2:#F1F4F6; /* cool off-ramp grey - legacy inputs / media placeholder, not Figma G1 */ --ds-line:#E0E2E3; /* Figma: G2 */ --ds-line-2:#C4C7C8; /* Figma: G3 */ /* ---------- dark ---------- */ --ds-navy:#10203C; /* Figma: Blue Shade 2 - footer, authority */ --ds-navy-deep:#0C1A32; /* Figma: Blue Shade */ --ds-near-black:#0A0A0A; /* text + media mattes, NOT a section surface */ --ds-on-dark:#FBFBFB; --ds-on-dark-muted:#9EA4A6; /* ---------- tints (section washes & fills) ---------- */ --ds-tint-blue:#EBF1FC; /* Off-the-Shelf wash */ --ds-tint-blue-2:#E0EAFA; /* filter bar */ --ds-tint-blue-3:#C2D8FA; /* selected chip, secondary button */ --ds-tint-green:#E8EFEC; --ds-tint-green-2:#DBE6E2; /* Made-to-Order card */ --ds-tint-green-3:#BBE6D9; /* step numeral chip */ --ds-tint-purple:#E9E3F5; /* inline CTA card */ --ds-tint-purple-2:#D8CEF0; /* ---------- status (sparing) ---------- */ --ds-red:#FF6B6B; --ds-yellow:#FFD93D; --ds-red-ink:#B03030; /* red at text size (AA on white/red-tint) */ --ds-tint-red:#FFECEC; /* error wash */ /* ---------- gradients ---------- */ --ds-grad-brand:linear-gradient(125deg,#22C784 0%,#4D8AF2 43.86%,#744ADC 100%); --ds-grad-purple:linear-gradient(345deg,#744ADC 0%,#5120CB 100%); --ds-grad-navy:linear-gradient(180deg,#10203C 0%,#0C1A32 100%); /* ---------- type ---------- */ --ds-font:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* Type ladder - ten roles (display stat h2 h3 h4 lead body-lg body caption label). Normalized 2026-08-30: every component size that was hand-set off this ladder (58/44/36/26/21/17/14 and two clamps that duplicated existing roles) now points at a token. Nothing may hand-set a font-size again. */ --ds-fs-display:clamp(30px,5vw,42px); --ds-lh-display:1.2; --ds-fs-stat:clamp(36px,4.5vw,58px); --ds-lh-stat:1; /* big stat numerals */ --ds-fs-h2:clamp(24px,3.2vw,28px); --ds-lh-h2:1.2; /* Figma "Title Large Bold" 28/1.2 (2026-08-24 audit) */ --ds-fs-h3:24px; --ds-lh-h3:1.4; --ds-fs-h4:20px; --ds-lh-h4:1.4; --ds-fs-lead:clamp(18px,2.2vw,24px); --ds-lh-lead:1.4; --ds-fs-body-lg:18px; --ds-lh-body-lg:1.6; --ds-lh-eyebrow:1.4; /* eyebrow = body-lg size at 700, 1.4 */ /* 2026-09-02 (Ron): "all body text 18pt" - body moves 16 -> 18 and merges with body-lg, so running copy, def bodies, stat labels, table cells, form fields and footer links are all one size. The 16px rung is retired; 12px label stays. */ --ds-fs-body:18px; --ds-lh-body:1.6; --ds-fs-label:12px; --ds-lh-label:1.4; /* chips 12/700/1.4 (Figma 4648:2342) */ --ds-fs-caption:14px; --ds-lh-caption:1.4; /* 2026-10-15 (Ron): UI text over video, 400 - the hero's Now playing rail */ /* ---------- radius ---------- */ --ds-r-sm:8px; --ds-r-chip:12px; --ds-r-md:16px; --ds-r-lg:20px; --ds-r-xl:32px; --ds-r-hero:40px; --ds-r-pill:50px; --ds-r-round:200px; --ds-r-panel:80px; /* story / community band - frame 4625:8692 */ /* ---------- shadow (Figma: UI shadow / shadow_2) ---------- */ --ds-sh-ui:0 0 1px rgba(0,0,0,.03),0 2px 2px rgba(0,0,0,.03),0 4px 3px rgba(0,0,0,.02); --ds-sh-card:0 1px 3px rgba(0,0,0,.09),0 3px 5px rgba(0,0,0,.08),0 7px 7px rgba(0,0,0,.05),0 12px 9px rgba(0,0,0,.01); --ds-sh-lg:0 18px 40px rgba(10,10,10,.12); /* ---------- space ---------- */ --ds-s1:4px; --ds-s2:8px; --ds-s3:12px; --ds-s4:16px; --ds-s5:24px; --ds-s6:32px; --ds-s7:48px; --ds-s8:64px; --ds-s9:96px; --ds-s10:128px; /* ---------- layout ---------- Measured off the Figma homepage frame (4221:8029, 1440 wide): content runs x=100..1340 (1240 wide, 100px page margins), the story panel x=32..1408 (1376), and every section opened with 80px of top padding - stepped up to 96 (64 on phones) on 2026-09-29 (Ron, pass 2: "more padding between elements and sections"). A section heading/intro -> its content block also runs one section pad, so heading->content stays half of section->section. */ --ds-container:1240px; --ds-container-wide:1376px; --ds-gutter:clamp(16px,5vw,100px); --ds-section-pad:clamp(64px,7vw,96px); /* ---------- motion ---------- */ --ds-ease:cubic-bezier(.22,.61,.36,1); --ds-dur:220ms; --ds-dur-slow:420ms; /* ---------- v1 aliases (do not use in new work) ---------- */ --ds-dark:#10203C; /* was #0A0A0A - corrected to navy */ --ds-cream:#F5EFE5; /* legacy warm neutral */ --ds-r-lg-legacy:20px; --ds-sh-sm:var(--ds-sh-ui); --ds-sh-md:var(--ds-sh-card); } /* phones: the stat numerals one step up, 36 -> 43 (+20%; Ron, 15 Oct) */ @media (max-width:767px){ :root{--ds-fs-stat:43px} } @media (prefers-reduced-motion:reduce){ :root{--ds-dur:0ms;--ds-dur-slow:0ms} }