/* ========================================================================== THE SPARK — design tokens. This file is the app's design authority. ========================================================================== Source of truth for every value here: Admin/prelim-designs/stitch_get_quoted_spark_rewards/the_spark/DESIGN.md Reference implementations (structure only, never their Tailwind classes): the sibling code.html files in that folder. WHICH DESIGN SYSTEM (ADR-008) — this trips people up, so plainly: Referrer web app ............ The Spark. THIS FILE. Call centre and admin ....... The Spark, functional subset. The --cc-* block at the bottom of this file. Invoices, contracts, PDFs, decks, business writeups .... Imperial Emerald / Bronze / Fraunces, from design/design-tokens.css per .agents/AGENTS.md. NOT this file, and nothing from there belongs in the app. Those two systems are incompatible by design and serve different audiences. `.agents/AGENTS.md` governs documents only; it predates the build and comes from the negotiation phase. RULES 1. Hardcoded colour values are prohibited everywhere except this file. In app.css, in templates, in inline styles: every colour is a var(--…). There is a validation command for this in the Phase 0 plan, Task 0.4. 2. Add a token rather than a one-off value. If a screen needs a colour that is not here, either it should use one that is, or the system is missing something — and then it gets added here, with a comment. 3. Values marked "derived" are not in DESIGN.md. They were computed to fill a gap the source leaves open, and a designer may correct them freely. ========================================================================== */ :root { /* ====================================================================== COLOUR DESIGN.md carries two layers that do not entirely agree: a Material-generated token table in the frontmatter, and prose naming the five brand colours. Where they conflict, the prose and the reference screens win, because that is what was approved. The one documented conflict: the frontmatter sets `surface: #faf8ff`, a cool lilac white, while the prose specifies a "warm cream base" called Cloud Cream and every reference screen sets `background-color: #FFF9F0`. Warm cream it is. The rest of the palette is warmed to match. ====================================================================== */ /* --- Brand palette, by its prose name ------------------------------- */ --spark-cloud-cream: #fff9f0; /* the stage everything sits on */ --spark-zest-yellow: #ffc53d; /* brand moments, progress, the "spark" */ --spark-zest-deep: #795900; /* Zest at text weight, on cream */ --spark-coral-pop: #fe6756; /* primary actions, and nothing else */ --spark-ink-navy: #121a36; /* all primary text — never pure black */ --spark-mint-spark: #34d399; /* closed deals, rewards redeemed */ --spark-grape-fizz: #6d3bd7; /* badges, social proof, gamified layers */ /* --- Surfaces -------------------------------------------------------- */ --color-surface: var(--spark-cloud-cream); --color-surface-card: #ffffff; /* cards pop forward off the cream */ --color-surface-alt: #fdf4e8; /* derived: cream, one step deeper */ --color-surface-sunken: #f7edde; /* derived: wells, inset rows */ --color-surface-inverse: #272f4d; /* frontmatter inverse-surface */ --color-on-surface-inverse: #eff0ff; /* --- Text ------------------------------------------------------------ */ --color-on-surface: var(--spark-ink-navy); --color-on-surface-muted: #4f4634; /* frontmatter on-surface-variant, warm */ --color-on-surface-faint: #817662; /* frontmatter outline, as tertiary text */ /* --- Lines ----------------------------------------------------------- */ --color-outline: #817662; --color-outline-variant: #d3c5ae; /* hairlines, dividers */ /* --- Primary = Zest Yellow ------------------------------------------ Ink Navy on Zest is 11.0:1. The frontmatter's #715200 is 4.65:1 — legal but needlessly tight, so it is kept only for decorative labels. */ --color-primary: var(--spark-zest-yellow); --color-on-primary: var(--spark-ink-navy); --color-primary-strong: var(--spark-zest-deep); --color-primary-soft: #ffdea0; /* frontmatter primary-fixed */ --color-on-primary-soft: #5c4300; /* frontmatter on-primary-fixed-variant */ /* --- Secondary = Coral Pop — primary CTAs only ---------------------- Ink Navy on Coral is 6.0:1. White on Coral is 2.5:1 and fails, which is why the prose specifies Ink Navy text on the primary button. */ --color-secondary: var(--spark-coral-pop); --color-on-secondary: var(--spark-ink-navy); --color-secondary-strong: #af2e24; /* frontmatter secondary, for hover */ --color-secondary-soft: #ffdad5; --color-on-secondary-soft: #8d150f; /* --- Tertiary = Grape Fizz — badges and streaks ---------------------- */ --color-tertiary: var(--spark-grape-fizz); --color-on-tertiary: #ffffff; --color-tertiary-container: #d7c5ff; --color-on-tertiary-container: #6631cf; /* 4.6:1 on the container */ /* --- Success = Mint Spark ------------------------------------------- The one brand colour the frontmatter omits; taken from the reference screens, with a dark green added for text since #34d399 is far too light to read on. */ --color-success: var(--spark-mint-spark); --color-success-container: #d1fae5; --color-on-success-container: #065f46; /* 7.4:1 on the container */ /* --- Warning --------------------------------------------------------- */ --color-warning: #e69a00; --color-on-warning: #ffffff; --color-warning-container: #ffdea0; --color-on-warning-container: #5c4300; /* --- Error ----------------------------------------------------------- */ --color-error: #ba1a1a; --color-on-error: #ffffff; --color-error-container: #ffdad6; --color-on-error-container: #93000a; /* --- Shadow tint ---------------------------------------------------- Ink Navy as raw channels, so shadows can vary opacity without restating the colour. Shadows are navy-tinted, never neutral grey — DESIGN.md calls it "ambient light hitting a thick piece of paper". */ --shadow-rgb: 27 35 64; /* ====================================================================== TYPOGRAPHY — the full scale from DESIGN.md, verbatim. Each step is a size / line-height / weight / tracking set. Use the composite --text-*-font shorthands where you want all four at once. ====================================================================== */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Money, referral codes and counts. "Receipt-like", so rewards feel earned. */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* display-lg */ --text-display-size: 2.5rem; /* 40px */ --text-display-line: 3rem; /* 48px */ --text-display-weight: var(--weight-extrabold); --text-display-tracking: -0.02em; /* headline-lg, with the mobile step DESIGN.md specifies separately */ --text-headline-lg-size: 2rem; /* 32px */ --text-headline-lg-line: 2.5rem; /* 40px */ --text-headline-lg-tracking: -0.01em; --text-headline-lg-mobile-size: 1.75rem; /* 28px */ --text-headline-lg-mobile-line: 2.125rem; /* 34px */ /* headline-md */ --text-headline-md-size: 1.5rem; /* 24px */ --text-headline-md-line: 2rem; /* 32px */ --text-headline-md-weight: var(--weight-bold); /* body-lg / body-md */ --text-body-lg-size: 1.125rem; /* 18px */ --text-body-lg-line: 1.75rem; /* 28px */ --text-body-md-size: 1rem; /* 16px */ --text-body-md-line: 1.5rem; /* 24px */ /* derived: captions and helper text, below DESIGN.md's smallest body step */ --text-body-sm-size: 0.875rem; /* 14px */ --text-body-sm-line: 1.25rem; /* 20px */ /* number-xl / number-md — always mono */ --text-number-xl-size: 2rem; /* 32px */ --text-number-xl-line: 2rem; /* 32px */ --text-number-xl-weight: var(--weight-semibold); --text-number-md-size: 1rem; /* 16px */ --text-number-md-line: 1.25rem; /* 20px */ --text-number-md-weight: var(--weight-medium); /* label-caps — the only tracked-out, uppercase step */ --text-label-size: 0.75rem; /* 12px */ --text-label-line: 1rem; /* 16px */ --text-label-weight: var(--weight-bold); --text-label-tracking: 0.05em; /* ====================================================================== SPACING — 8px base, exactly the DESIGN.md scale ====================================================================== */ --space-xs: 4px; --space-base: 8px; --space-sm: 12px; --space-md: 24px; /* card padding, and the gap between related things */ --space-lg: 40px; /* section breaks */ --space-xl: 64px; --space-gutter: 16px; --space-container: 20px; /* generous, so content breathes on cream */ /* ====================================================================== RADII — "extreme roundness and organic flow" ====================================================================== */ --radius-sm: 0.5rem; --radius: 1rem; --radius-md: 1.5rem; /* 24px — cards, inputs. The signature radius. */ --radius-lg: 2rem; --radius-xl: 3rem; --radius-full: 9999px; /* buttons are always pills */ /* ====================================================================== ELEVATION — soft diffusion, never hard lines Interactive depth is a SINK, not a lift: pressing something scales it to 0.98 and softens its shadow, like pressing thick paper. ====================================================================== */ --shadow-soft: 0 8px 30px rgb(var(--shadow-rgb) / 6%); --shadow-sunk: 0 4px 15px rgb(var(--shadow-rgb) / 4%); --shadow-lifted: 0 12px 40px rgb(var(--shadow-rgb) / 10%); --shadow-nav: 0 -8px 30px rgb(var(--shadow-rgb) / 6%); /* The Spark Ring: every avatar wears a 2px Zest halo. */ --shadow-spark-ring: 0 0 0 2px var(--color-primary), 0 0 10px rgb(255 197 61 / 50%); /* Input focus is a Zest halo, not a border colour change. */ --shadow-focus: 0 0 0 3px rgb(255 197 61 / 45%); /* ====================================================================== MOTION — "bouncy and alive", but nothing that costs legibility ====================================================================== */ --duration-fast: 100ms; --duration-base: 200ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Overshoots slightly — for arrivals only, never for exits. */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --press-scale: 0.98; /* ====================================================================== LAYOUT ====================================================================== */ /* DESIGN.md: 640px max readable width, so a desktop browser still feels like the intimate mobile app it was designed as. */ --content-max: 640px; --nav-height: 5.5rem; /* 88px — bottom nav, including its safe-area padding */ --z-nav: 50; --z-modal: 100; --z-toast: 150; } /* ========================================================================== CALL-CENTRE AND ADMIN SUBSET (ADR-008) Same palette, same type scale, same tokens — different geometry. Agents work this screen for eight hours: delight is a cost there, not a benefit. So the cream goes neutral, the radii shrink, the spacing tightens, and the mascot and decorative animation are absent entirely. Applied by putting `class="cc"` on — see templates/base_staff.html. ========================================================================== */ .cc { /* Muted surfaces: warm-neutral rather than cream, so eight hours of it does not fatigue. Derived — DESIGN.md does not cover this surface. */ --cc-surface: #f5f3f0; --cc-surface-card: #ffffff; --cc-surface-header: #ffffff; --cc-surface-row-alt: #faf8f5; /* zebra striping in dense tables */ --cc-surface-hover: #f0ece6; /* Tighter geometry. Nothing is a pill except a status chip. */ --cc-radius-sm: 0.25rem; --cc-radius: 0.5rem; --cc-radius-md: 0.75rem; /* Density: roughly half the referrer app's breathing room. */ --cc-density-xs: 2px; --cc-density-sm: 6px; --cc-density-md: 12px; --cc-density-lg: 20px; --cc-row-height: 2.5rem; /* Dense tables read better a step down, and the console is desktop-only. */ --cc-text-size: 0.875rem; --cc-text-line: 1.25rem; /* Flatter: one hairline instead of a soft shadow. */ --cc-border: 1px solid var(--color-outline-variant); --cc-shadow: 0 1px 3px rgb(var(--shadow-rgb) / 8%); /* The console is a working tool, not a mobile app. */ --content-max: none; }