/* ============================================================================ ⚠️ SYNCED COPY — keep in sync with the design-system source of truth: ../GSB Design System/tokens/tokens.css This is the ONE file that defines the GSB look for the whole app. To restyle the site, edit the values here (and mirror them back to the design system). Loaded first in ; every page should consume these via var(--gsb-*). ============================================================================ */ /* ============================================================================ GREEN SHOOT BRANDS — DESIGN TOKENS (v0.1, scaffold) Source of truth: GSB Brand Book v1.0. [BOOK] = value defined in the brand book. [PROPOSED] = sensible default, NOT yet in the book (fills a Tier-4 gap). Lock these via Batch G, then update here. ============================================================================ */ :root { /* ---- BRAND PALETTE [BOOK · slides 23–25] -------------------------------- */ --gsb-paper: #F3EEE3; /* The ground · PMS 9043 · backgrounds */ --gsb-soil-ink: #221E18; /* Warm near-black · all text */ --gsb-shoot-green: #2F6B45; /* Deep botanical · PMS 357 · THE accent */ --gsb-leaf: #82BB90; /* Lighter green · accent on dark only */ /* ---- EXTENDED PALETTE [BOOK · slide 24] · never lead with these --------- */ --gsb-oat: #E8E0D1; --gsb-espresso: #211F19; --gsb-stone: #6F695B; --gsb-clay: #B5532E; /* negative / alert — never red */ --gsb-ochre: #B98B32; /* watch / caution */ --gsb-sage: #3A4A3A; /* waterfall downward moves [slide 54] */ --gsb-oat-dk: #D8CFBA; /* [PROPOSED] darker oat for 4th data series */ /* ---- SEMANTIC ROLES (light surface) ------------------------------------ */ --color-bg: var(--gsb-paper); --color-surface: #FFFFFF; /* [PROPOSED] cards on paper */ --color-border: rgba(34,30,24,0.12); --color-text: var(--gsb-soil-ink); --color-text-muted: var(--gsb-stone); --color-accent: var(--gsb-shoot-green); --color-accent-soft: var(--gsb-leaf); /* ---- SEMANTIC ROLES (dark / "night" surface) [BOOK · reverse] ---------- */ --color-bg-dark: var(--gsb-soil-ink); --color-surface-dark: var(--gsb-espresso); --color-text-dark: var(--gsb-paper); --color-accent-dark: var(--gsb-leaf); /* leaf is the on-dark accent */ /* ---- DATA: CATEGORICAL [BOOK · slide 49] · max 5, IN THIS ORDER -------- */ --data-cat-1: var(--gsb-soil-ink); /* INK — largest series */ --data-cat-2: var(--gsb-shoot-green);/* GREEN — the series that is the story*/ --data-cat-3: var(--gsb-stone); /* STONE */ --data-cat-4: var(--gsb-oat-dk); /* OAT DK */ --data-cat-5: var(--gsb-oat); /* OAT — everything past 5 = "Other"*/ /* ---- DATA: SEMANTIC [BOOK · slide 49] · meaning, not decoration -------- */ --data-positive: var(--gsb-shoot-green); /* ▲ growth, beat, on-plan */ --data-negative: var(--gsb-clay); /* ▼ decline, miss (NEVER red) */ --data-watch: var(--gsb-ochre); /* ▬ flat, at risk */ --data-benchmark: var(--gsb-stone); /* dashed, 60% opacity */ /* ---- USAGE RATIO (reference only) [BOOK · slide 25] -------------------- */ /* paper 60% · soil ink 25% · shoot green 12% · clay+ochre 3% */ /* ---- TYPE FAMILIES [BOOK · slides 27–28] ------------------------------- */ --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; /* 300–500, italic for emphasis, never bold */ --font-body: 'Inter', -apple-system, system-ui, sans-serif; /* 300–700, body at 400 */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* 400/500 · data, labels, figures */ --font-wordmark:'Space Grotesk', sans-serif; /* wordmark ARTWORK only — never live text */ /* ---- TYPE SCALE [PROPOSED — spec in Batch G, slide 28] ---------------- Display/H1 set in Newsreader; H2 Inter 500; Body Inter 400; Caption mono. */ --fs-display: 4.5rem; /* 72px — cover / hero */ --fs-h1: 2.5rem; /* 40px */ --fs-h2: 1.5rem; /* 24px */ --fs-body-lg: 1.125rem; /* 18px — lead paragraphs */ --fs-body: 1rem; /* 16px */ --fs-caption: 0.6875rem;/* 11px — mono labels */ --fs-micro: 0.625rem; /* 10px — footnotes, sources */ --lh-display: 1.04; /* [BOOK · slide 29] tight for display */ --lh-heading: 1.1; /* [PROPOSED] */ --lh-body: 1.6; /* [BOOK · "generous", slide 27] → open to 1.4–1.6 */ --lh-prose: 1.4; /* [BOOK · slide 29] long-form Newsreader prose */ --tracking-tight: -0.02em; --tracking-wordmark:-0.04em; /* [BOOK · slide 18] */ --tracking-label: 0.08em; /* all-caps mono labels */ --lh-wordmark: 0.88; /* [BOOK · slide 18] */ /* ---- SPACING SCALE [PROPOSED — lock in Batch G] · 4px base -------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ /* ---- RADIUS [PROPOSED] · brand is squared & editorial → restrained ------ */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; /* ---- ELEVATION [PROPOSED] · paper-flat brand → use sparingly ------------ */ --shadow-sm: 0 1px 2px rgba(34,30,24,0.06); --shadow-md: 0 4px 12px rgba(34,30,24,0.08); /* ---- BORDERS / RULES [BOOK · hairline rules, 1.5px ink] ----------------- */ --rule-hairline: 1px solid var(--color-border); --rule-ink: 1.5px solid var(--color-text); /* ---- MOTION [PROPOSED — define signature interaction in Batch G] -------- */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---- LAYOUT ------------------------------------------------------------- */ --logo-min-size: 120px; /* [BOOK · slide 19] below this → monogram */ --content-max: 72rem; /* [PROPOSED] reading measure cap */ } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } } /* Tabular figures wherever numbers must align [BOOK · data system] */ .gsb-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }