/* ============================================================================= GARDE BRAND TOKENS — v0.1 (2026-05-20) ----------------------------------------------------------------------------- Single source of truth for the Garde cellar app's visual identity. Every value here is observed in the Phase 3.1 mockup set (/agent-aa1dca6c431526927/static/garde-*.html) and the Saison base stylesheet (css/styles.css). No invented values. USAGE - Authoritative for all Garde-branded surfaces. - Composes ON TOP of Saison's css/styles.css (the original mockups inherit --bg, --card, --text*, --border, --serif, --sans from there). This file overrides Garde-specific things and adds tokens the mockups inlined. - Reference tokens, NOT raw hex/px. See research/garde-design-tokens-*.md for the "do-not-hardcode" list. NAMING - All tokens prefixed `--garde-` to namespace away from Saison. - The original mockups used `--g-*` for inlined overrides. Those are deliberately renamed here for clarity; the doc explains the mapping. DARK MODE - The mockups never demonstrate dark mode. Burgundy on dark backgrounds needs a deliberate ramp (the current burgundy will mud out against near-black). Deferred. See doc §4. ========================================================================== */ :root { /* ─── COLOUR · PRIMARY (BURGUNDY) ───────────────────────────────────── The single most-decision-sensitive value. Chris flagged this as an open question in design-decisions.md §1. If he picks a different burgundy, ONLY this block changes — every consumer reads through `--garde-color-primary*`. ------------------------------------------------------------------ */ --garde-color-primary: #5C2D3A; /* Deep Burgundy — body, FAB, active nav, CTAs */ --garde-color-primary-hover: #3A202A; /* Dark Plum — used as :hover on primary */ --garde-color-primary-active: #3A202A; /* same as hover; mockups don't distinguish */ --garde-color-primary-tint: #F2E6E8; /* Tinted bg for hover surfaces, selected cards, pills */ --garde-color-primary-border: #D9BFC4; /* Light burgundy border (add-bottle disambiguation) */ /* Translucent burgundy for FAB drop shadow. Token form of rgba(92,45,58,…). */ --garde-color-primary-shadow: rgba(92, 45, 58, 0.45); /* ─── COLOUR · SURFACES & TEXT (INHERITED FROM SAISON) ──────────────── Garde reuses Saison's neutral palette wholesale. These tokens ALIAS the Saison values for consumers who want a self-contained Garde-only token set (e.g. if Garde ever forks the stylesheet). ------------------------------------------------------------------ */ --garde-color-bg: #F9F7F2; /* Cream — page background */ --garde-color-bg-elevated: #FFFFFF; /* Card / sheet / modal surface */ --garde-color-bg-subtle: #FFF5F4; /* Very-pale burgundy wash — sign-out hover */ --garde-color-text-primary: #2B2E24; /* Body text, headlines */ --garde-color-text-secondary: #5C6152; /* Producer, sub copy, meta on cards */ --garde-color-text-tertiary: #666A5A; /* Captions, group labels, placeholders — WCAG AA on cream */ --garde-color-border: #DDD9CE; /* Default card/input border */ --garde-color-border-strong: #1A1A1A; /* Sparse use — high-contrast outlines on dark thumbs */ /* ─── COLOUR · STATUS PALETTE ───────────────────────────────────────── Drinking-window verdicts. Each has a foreground + a tinted background pair. Names follow CELLAR semantics (the home-screen vocabulary) — the drink-flow's "young/right/past" are mapped onto the same tokens in the utility section below. Decision in the mockups (drink.html): the "past it" verdict uses a MUTED BRICK, not a stop-sign red, so it pairs with burgundy without fighting. Preserved here. ------------------------------------------------------------------ */ --garde-color-status-now: #B5860D; /* Amber — "Drink now" */ --garde-color-status-now-bg: #FFF8E6; /* (cellar used #FFF6E0; standardising on #FFF8E6 — see doc §6) */ --garde-color-status-peak: #5B8C5A; /* Green — "At peak" / "Just Right" */ --garde-color-status-peak-bg: #EAF1E6; --garde-color-status-hold: #6F7A8A; /* Slate — "Not yet" / "Too Young" / "Hold" */ --garde-color-status-hold-bg: #ECEEF1; --garde-color-status-past: #9A3A2E; /* Muted brick — "Past it" */ --garde-color-status-past-bg: #FBE9E4; /* ─── COLOUR · SEMANTIC FEEDBACK ────────────────────────────────────── Generic success/warning/danger, used outside the drinking-window verdict system (form validation, toasts, etc.). Mockups reuse the status hues for these — kept consistent here. ------------------------------------------------------------------ */ --garde-color-success: #5B8C5A; /* Same as status-peak */ --garde-color-warning: #B5860D; /* Same as status-now */ --garde-color-danger: #9A3A2E; /* Same as status-past */ --garde-color-danger-soft: #FFE8E5; /* Recording-state mic background */ /* ─── COLOUR · CURVE ZONES (PHASE 3.2 — DRINKING-WINDOW VIZ) ───────── Three fill colours under the curve, plus the today-marker line. Reasoning (see design-decisions.md §16): - "approaching" reuses the status-hold slate family. Cool, asks the user to wait. Stays calm and out of the way. - "at_peak" reuses the status-peak green family. The single moment the curve is "the right colour" — warm and inviting against the cool flanks. - "past" is a faded burgundy wash (NOT the status-past brick). The brick reads as a verdict ("you missed it"); for a window that's *trending* past peak we want elegiac, not alarmist. - "today-marker" is dark plum — the burgundy-hover token — because it must contrast against all three zone fills. The fills are intentionally low-saturation (0.35-0.55 alpha-style hues) so the curve line stays the primary read. ------------------------------------------------------------------ */ --garde-color-curve-approach: #C9D2DD; /* Pale slate — "give it time" */ --garde-color-curve-approach-dk: #6F7A8A; /* Slate line — matches status-hold */ --garde-color-curve-peak: #BFD6BC; /* Soft sage — "drink now" */ --garde-color-curve-peak-dk: #5B8C5A; /* Peak line — matches status-peak */ --garde-color-curve-past: #D9BFC4; /* Faded burgundy wash — "drink soon" */ --garde-color-curve-past-dk: #9A6F77; /* Muted burgundy line — fading */ --garde-color-curve-line: #3A202A; /* Dark plum — the curve stroke itself */ --garde-color-curve-axis: #B8B3A4; /* Warm grey — axis ticks + grid */ --garde-color-curve-today: #3A202A; /* Today marker line — dark plum */ --garde-color-curve-today-fill: #5C2D3A; /* Today marker dot fill — burgundy */ /* ─── COLOUR · PROVENANCE BADGES (PHASE 3.2) ───────────────────────── Four window-data provenance styles. Each pairs with a render treatment on the curve itself (solid/dashed line, badge copy). Reasoning (see design-decisions.md §17): - sourced → highest confidence → burgundy on burgundy tint. This is the "default" badge; uses brand colour. - winery_site → high confidence but biased → slate (neutral, not wrong, just "consider the source"). - modelled → AI estimate → amber (the same warning hue used for low-confidence OCR fields elsewhere in Garde). - user_adjusted → green (success/agency — you made this). ------------------------------------------------------------------ */ --garde-color-prov-sourced: #5C2D3A; /* Burgundy — same as primary */ --garde-color-prov-sourced-bg: #F2E6E8; /* Burgundy tint */ --garde-color-prov-winery: #6F7A8A; /* Slate */ --garde-color-prov-winery-bg: #ECEEF1; /* Slate tint */ --garde-color-prov-modelled: #B5860D; /* Amber */ --garde-color-prov-modelled-bg: #FFF8E6; /* Amber tint */ --garde-color-prov-user: #5B8C5A; /* Green */ --garde-color-prov-user-bg: #EAF1E6; /* Green tint */ /* ─── COLOUR · CROSS-APP (SAISON) ───────────────────────────────────── When Saison content appears INSIDE Garde, it wears Saison's colours. Documented rule in design-decisions.md §6. Do not use these for native Garde elements. ------------------------------------------------------------------ */ --garde-color-saison: #4A6741; /* Saison green */ --garde-color-saison-hover: #3A5032; /* Saison green dark */ --garde-color-saison-tint: #EEF3E8; /* Saison green soft bg */ --garde-color-saison-border: #C4D4B0; /* Saison green border */ --garde-color-saison-deep: #2C3E2D; /* Saison icon-tile top of gradient */ --garde-color-secondary: #C86B4F; /* Saison terracotta — used on "save 25%" badges */ /* ─── COLOUR · BOTTLE THUMBNAILS ────────────────────────────────────── CSS-only stand-ins for bottle photography. Three variants observed (red / white / rosé). The gradient stops are duplicated across three mockup files — tokenised here once. ------------------------------------------------------------------ */ --garde-bottle-red: linear-gradient(170deg, #3A202A 0%, #5C2D3A 70%, #7A4350 100%); --garde-bottle-white: linear-gradient(170deg, #C9B26B 0%, #E0CC85 70%, #F0E2A8 100%); --garde-bottle-rose: linear-gradient(170deg, #C97A8A 0%, #E69CA8 100%); /* Hero gradient — onboarding only. Documented for parity, not reuse. */ --garde-hero-cellar: linear-gradient(170deg, #2A1118 0%, #3A202A 30%, #5C2D3A 65%, #7A4350 88%, #A06773 100%); /* ─── TYPOGRAPHY · FAMILIES ─────────────────────────────────────────── Shared with Saison. Crimson Pro for editorial weight (headlines, bottle names), Cabin for utility text (UI labels, meta). `--garde-font-mono` is reserved for future tabular data (vintage ranges, prices) — not currently used in mockups. ------------------------------------------------------------------ */ --garde-font-display: 'Crimson Pro', Georgia, serif; --garde-font-body: 'Cabin', system-ui, sans-serif; --garde-font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ─── TYPOGRAPHY · SIZE SCALE ───────────────────────────────────────── Observed sizes in mockups: 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 36, 38, 48. This is too many. Distilled to a deliberate 9-step scale that maps every observed value to its nearest token. 8px and 10px are kept out (8px only used inside bottle-thumb-label; treat as a constant not a scale step). ------------------------------------------------------------------ */ --garde-text-xs: 11px; /* nav labels, group headers, status pills, meta */ --garde-text-sm: 12px; /* small meta, captions */ --garde-text-base: 13px; /* default body — chips, account links */ --garde-text-md: 14px; /* primary body, list items, btn label */ --garde-text-lg: 16px; /* CTA label, inputs (16px avoids iOS zoom) */ --garde-text-xl: 18px; /* headline body, suggestion headlines */ --garde-text-2xl: 22px; /* card titles, header titles, summary tile numbers */ --garde-text-3xl: 28px; /* step headlines, paywall headline */ --garde-text-hero: 36px; /* onboarding headline only */ /* ─── TYPOGRAPHY · WEIGHTS ──────────────────────────────────────────── Crimson Pro loaded at 400/500/600; Cabin at 400/500/600. The mockups never use 700 on display type — 700 appears only on small badges (e.g. greens-add-btn check glyph). Tokenised for clarity. ------------------------------------------------------------------ */ --garde-weight-regular: 400; --garde-weight-medium: 500; --garde-weight-semibold: 600; --garde-weight-bold: 700; /* ─── TYPOGRAPHY · LINE HEIGHTS ─────────────────────────────────────── Observed: 1, 1.05, 1.1, 1.12, 1.18, 1.2, 1.4, 1.45, 1.5, 1.55. Distilled to a 4-step scale. ------------------------------------------------------------------ */ --garde-leading-tight: 1.12; /* hero & step headlines */ --garde-leading-snug: 1.2; /* card titles, mid-size serif */ --garde-leading-normal: 1.4; /* short paragraphs */ --garde-leading-relaxed: 1.55; /* sub copy, longer body */ /* ─── SPACING SCALE (4px base) ──────────────────────────────────────── The mockups use, in practice: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 28, 32, 40, 56. Rationalised to a 12-step 4px-base scale. 14px and 18px are kept as named tokens because both appear ≥10 times and removing them would force noisy migration. ------------------------------------------------------------------ */ --garde-space-0: 0; --garde-space-1: 2px; --garde-space-2: 4px; --garde-space-3: 6px; --garde-space-4: 8px; --garde-space-5: 10px; --garde-space-6: 12px; --garde-space-7: 14px; /* card padding; mockup-observed */ --garde-space-8: 16px; /* default container padding */ --garde-space-9: 18px; /* header padding; mockup-observed */ --garde-space-10: 20px; --garde-space-11: 24px; --garde-space-12: 32px; /* ─── RADII ──────────────────────────────────────────────────────────── Observed: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 50%. Distilled. Note that the mockups use 14/18/20 for "card-ish" things with no clear scale; standardising on: - sm for inputs, search fields, small pills - md for filter chips, status pills, summary tiles - lg for cards (bottle cards, recipe cards) - xl for hero cards, modal sheets - full for circles (FAB, dots) ------------------------------------------------------------------ */ --garde-radius-xs: 2px; --garde-radius-sm: 6px; --garde-radius-md: 12px; --garde-radius-lg: 20px; --garde-radius-xl: 24px; --garde-radius-pill: 999px; --garde-radius-full: 50%; /* ─── SHADOWS ────────────────────────────────────────────────────────── Four distinct shadow recipes in the mockups: 1. The Saison soft shadow (used on most cards). 2. The Saison/Garde signature offset shadow (used on primary CTAs). 3. The dual-shadow FAB (soft glow + offset solid). 4. The inset radio-ring trick (used for filled-circle radio buttons). ------------------------------------------------------------------ */ --garde-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --garde-shadow-md: 0 4px 14px var(--garde-color-primary-shadow); --garde-shadow-offset: 4px 4px 0 var(--garde-color-primary); /* primary CTA */ --garde-shadow-fab: 0 4px 14px var(--garde-color-primary-shadow), 3px 3px 0 var(--garde-color-primary-hover); --garde-shadow-inset-ring: inset 0 0 0 3px var(--garde-color-bg-elevated); /* Legacy aliases — kept so doc §3 "use the named scale" rule still works for casual consumers who think in sm/md/lg. */ --garde-shadow-lg: var(--garde-shadow-fab); /* ─── TRANSITIONS ────────────────────────────────────────────────────── Observed: 0.1s (tap-scale), 0.15s (most state changes), 0.2s, 0.3s, 0.4s ease (progress fills), 0.8s (spinner). ------------------------------------------------------------------ */ --garde-transition-fast: 0.1s ease; /* tap-scale, immediate feedback */ --garde-transition-base: 0.15s ease; /* default state changes */ --garde-transition-slow: 0.3s ease; /* progress bars */ --garde-transition-progress: width 0.4s ease;/* width-animated bars */ /* ─── LAYOUT CONSTANTS ───────────────────────────────────────────────── Mobile-first viewport sizing observed throughout. ------------------------------------------------------------------ */ --garde-app-max-width: 480px; --garde-nav-height: 56px; --garde-nav-clearance: 100px; /* main bottom padding to clear nav + safe area */ } /* ============================================================================= UTILITY CLASSES (DEMONSTRATION ONLY, 3 of) ----------------------------------------------------------------------------- These exist to PROVE the tokens compose. They are NOT a framework. Real components should be authored inline in each screen's