/* ============================================================================ SPREEAI design system — token contract Version 2.0 · September 14, 2026 Source of truth: Figma file "Design System" https://www.figma.com/design/336bGaal4YVGEqc67Fd9nM/Design-System Library key prefix: lk-56c64cfa72f13d… Collections: Colors · Shape · Typography EVERY NAME BELOW IS A REAL VARIABLE IN THAT FILE. The names were read out of the design system itself, not invented, so a token here maps one-to-one onto something a designer can point at in Figma. THE VALUES ARE NOT HAND-COPIED. Run figma-tokens-to-css.mjs against a Figma variables export and it fills in this file. That keeps Figma the owner of the values. The moment someone types a hex into a component instead, the system starts drifting again, which is how the cream got in. node figma-tokens-to-css.mjs ./figma-variables.json \ -o ./spreeai-design-tokens.css Until that runs, the fallbacks below apply. They come from the SPREEAI brand standards, which agree with the design system on structure but have not been reconciled value-by-value. Treat them as placeholders, not as truth. ========================================================================= */ /* ---------------------------------------------------------------------------- COLOR · Surface — what a thing sits on Figma: Colors / Surface -------------------------------------------------------------------------- */ :root { --ds-surface-greys-background: #F2F2F2; --ds-surface-greys-primary: #FFFFFF; --ds-surface-greys-secondary: #F2F2F2; --ds-surface-greys-tertiary: #ABABAB; --ds-surface-greys-light: #FFFFFF; --ds-surface-greys-disabled: #F2F2F2; --ds-surface-greys-transparent-black-5: rgba(10, 10, 10, 0.05); --ds-surface-greys-transparent-black-10: rgba(10, 10, 10, 0.10); --ds-surface-greys-transparent-black-25: rgba(10, 10, 10, 0.25); --ds-surface-greys-transparent-black-50: rgba(10, 10, 10, 0.50); --ds-surface-greys-transparent-black-75: rgba(10, 10, 10, 0.75); --ds-surface-greys-transparent-white-10: rgba(255, 255, 255, 0.10); --ds-surface-greys-transparent-white-25: rgba(255, 255, 255, 0.25); --ds-surface-greys-transparent-white-50: rgba(255, 255, 255, 0.50); --ds-surface-greys-transparent-white-75: rgba(255, 255, 255, 0.75); --ds-surface-brand-primary: #0A0A0A; --ds-surface-brand-secondary: #5A5A5A; --ds-surface-brand-tertiary: #ABABAB; --ds-surface-brand-disabled: #F2F2F2; --ds-surface-frosted: rgba(255, 255, 255, 0.60); /* ---------------------------------------------------------------------------- COLOR · Element — the thing itself: text, icon, glyph Figma: Colors / Element -------------------------------------------------------------------------- */ --ds-element-greys-primary: #0A0A0A; --ds-element-greys-secondary: #5A5A5A; --ds-element-greys-tertiary: #ABABAB; --ds-element-greys-light: #F2F2F2; --ds-element-greys-white: #FFFFFF; --ds-element-brand-primary: #0A0A0A; --ds-element-brand-secondary: #5A5A5A; --ds-element-on-brand-primary: #FFFFFF; --ds-element-on-brand-secondary: #F2F2F2; /* Status. The four-state system agreed Sep 8 and repeated Sep 10: success, on track, caution, action needed. The design system carries Success / Warning / Error / Available. Map them, do not invent a fifth. */ --ds-element-success-primary: #128012; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-element-success-secondary: #DFFBDF; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-element-warning-primary: #8B6900; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-element-warning-secondary: #FFF7DD; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-element-error-primary: #D32F2F; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-element-error-secondary: #FFF3F3; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-element-available-primary: #2C63A1; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-element-available-secondary: #DDEDFF; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ /* ---------------------------------------------------------------------------- COLOR · Border Figma: Colors / Border -------------------------------------------------------------------------- */ --ds-border-default: rgba(10, 10, 10, 0.12); --ds-border-strong: #0A0A0A; --ds-border-width-default: 1px; /* CONFIRM: the file also carries "divider / 1px", while the brand standards say 0.5px. See README. */ /* ---------------------------------------------------------------------------- SHAPE · Radius Figma: Shape / Radius -------------------------------------------------------------------------- */ --ds-radius-none: 0; --ds-radius-sm: 8px; --ds-radius-md: 16px; --ds-radius-lg: 24px; --ds-radius-xl: 12px; /* verified from design-system-main _tokens.scss (Danel, Sep 17): modal corner 0.75rem */ --ds-radius-full: 9999px; /* ---------------------------------------------------------------------------- SHAPE · Elevation Figma: Shape / Shadow, Surface/frosted, Shape/Blur/Button Elevation exists in the design system, but only for layers that genuinely float above the page: modal, dropdown, toast, frosted sign-in button. It is not a card treatment. A card separates with surface and space. -------------------------------------------------------------------------- */ --ds-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.24); /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-shadow-floating: 0 16px 48px rgba(10, 10, 10, 0.16); /* portal extension - not defined in the design system */ --ds-blur-button: 12px; /* CONFIRM — Figma description: "Background blur radius for frosted/glass button surfaces (e.g. SSO sign-in buttons)" */ /* ---------------------------------------------------------------------------- TYPOGRAPHY Figma: Desktop/* and Mobile/* type styles. One family: Afacad. Weights in the file: Regular 400, Medium 500, SemiBold, Bold 700. -------------------------------------------------------------------------- */ --ds-font-family: 'Afacad', system-ui, sans-serif; --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; /* Desktop scale — Figma: Desktop/Heading 0–4, Body, Button, Input, Small 1–2 */ --ds-desktop-heading-0-size: 40px; /* CONFIRM */ --ds-desktop-heading-1-size: 32px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-desktop-heading-2-size: 28px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-desktop-heading-3-size: 22px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-desktop-heading-4-size: 24px; /* portal extension - the design system defines no heading 4 */ --ds-desktop-body-size: 16px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-desktop-button-size: 16px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-desktop-input-size: 16px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-desktop-small-1-size: 14px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-desktop-small-2-size: 12px; /* portal extension - not defined in the design system */ /* Mobile scale — Figma: Mobile/Heading 1–4, Body, Button, Input, Captions */ --ds-mobile-heading-1-size: 32px; /* verified from design-system-main _tokens.scss (Danel, Sep 17): only heading 0 steps down on mobile */ --ds-mobile-heading-2-size: 28px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-mobile-heading-3-size: 22px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-mobile-heading-4-size: 20px; /* portal extension - the design system defines no heading 4 */ --ds-mobile-body-size: 16px; /* verified from design-system-main _tokens.scss (Danel, Sep 17) */ --ds-mobile-captions-size: 12px; /* portal extension - not defined in the design system */ /* There is no second typeface in the product design system. Afacad carries both display and body. Big Caslon is a brand-2.0 proposal and is not approved for product. Do not introduce a serif into portal UI. */ } /* ---------------------------------------------------------------------------- SEMANTIC ALIASES Short names for the twelve things components actually reach for. Components should use these, not the raw DS names, so a DS rename touches one file. -------------------------------------------------------------------------- */ :root { --spree-surface-page: var(--ds-surface-greys-background); --spree-surface-raised: var(--ds-surface-greys-primary); --spree-surface-subtle: var(--ds-surface-greys-secondary); --spree-surface-inverse: var(--ds-surface-brand-primary); --spree-surface-disabled: var(--ds-surface-greys-disabled); --spree-ink-primary: var(--ds-element-greys-primary); --spree-ink-secondary: var(--ds-element-greys-secondary); --spree-ink-tertiary: var(--ds-element-greys-tertiary); --spree-ink-inverse: var(--ds-element-on-brand-primary); --spree-status-success: var(--ds-element-success-primary); --spree-status-ontrack: var(--ds-element-available-primary); --spree-status-caution: var(--ds-element-warning-primary); --spree-status-critical: var(--ds-element-error-primary); --spree-border-width: var(--ds-border-width-default); --spree-border-color: var(--ds-border-default); --spree-border: var(--spree-border-width) solid var(--spree-border-color); --spree-radius-sm: var(--ds-radius-sm); --spree-radius-md: var(--ds-radius-md); --spree-radius-lg: var(--ds-radius-lg); --spree-font: var(--ds-font-family); --spree-text-body: var(--ds-desktop-body-size); --spree-text-small: var(--ds-desktop-small-1-size); /* Toast — Rule 2 of the standards layer */ --spree-toast-size: var(--ds-desktop-body-size); --spree-toast-leading: 1.2; --spree-toast-tracking: 0; --spree-toast-min-width: 320px; --spree-toast-max-width: 440px; --spree-space-2: 8px; --spree-space-3: 12px; --spree-space-4: 16px; --spree-space-6: 24px; } /* ---------------------------------------------------------------------------- THE NEUTRAL RULE The design system states it directly, in the file: "Product / white-label stays on neutral black / white / grey only" That single line settles several of the open portal items at once. A cream background is not a taste disagreement, it is out of system. So is the blue focus ring on the notifications close control. Brand colour belongs to marketing surfaces; product surfaces are neutral, and colour is reserved for status, where it carries meaning. -------------------------------------------------------------------------- */