---
version: alpha
name: "Spindrift"
description: "Token-first design system reference for Spindrift — a sparkling water brand built on deep forest green, crisp white, and a GT Alpina serif paired with Gotham for honest, fruit-forward freshness."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#215212"          # deep forest green — hero bands, dark surfaces, footer
  surface-elevated: "#f5f9f2" # pale green tint for secondary light panels
  surface-modal: "#ffffff"    # modal/overlay interior

  # Text / ink
  ink: "#215212"              # forest green body text on white — brand-owned, not neutral
  ink-secondary: "#363638"    # near-black for supporting copy
  on-background: "#215212"
  on-surface: "#ffffff"

  # Brand accent
  primary: "#215212"          # forest green — the signature Spindrift stamp
  on-primary: "#ffffff"
  primary-container: "#c8e6b4" # soft spring-green for tinted backgrounds, SKU chips
  primary-light: "#6bbc37"    # fresh lime-green — used for secondary CTAs, active states

  # State / interaction
  text-hover: "#286216"       # darker forest on hover — from dembrandt hover data
  focus-ring: "#6bbc37"       # lime-green focus, high-contrast against white
  focus-tint: "#e8f5e0"       # very light tint for focus area fills

  # Semantic
  success: "#6bbc37"          # lime-green doubles as success signal
  warning: "#f59e0b"
  error: "#c0392b"

  # Borders
  border: "#d4e8c6"           # soft spring-green hairline

  # Shadow tints
  shadow-soft: "#c8ddb8"      # green-tinted ambient shadow, not neutral grey

typography:
  display-hero:
    fontFamily: "'GT Alpina', Georgia, 'Times New Roman', serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.32px
  display:
    fontFamily: "'GT Alpina', Georgia, 'Times New Roman', serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.32px
  heading-section:
    fontFamily: "'GT Alpina', Georgia, 'Times New Roman', serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.32px
  heading-sub:
    fontFamily: "'GT Alpina', Georgia, 'Times New Roman', serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.32px
  heading-ui:
    fontFamily: "'HCo Gotham SSm', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1.36px
  body-large:
    fontFamily: "'HCo Gotham SSm', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.32px
  body:
    fontFamily: "'HCo Gotham SSm', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.32px
  nav-link:
    fontFamily: "'HCo Gotham SSm', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.32px
  button-ui:
    fontFamily: "'HCo Gotham SSm', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.32px
  label-caps:
    fontFamily: "'HCo Gotham SSm', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.7px
  caption:
    fontFamily: "'HCo Gotham SSm', 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.32px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 128px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 35px
    border: 3px solid {colors.primary}
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 35px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 35px
    border: 3px solid {colors.primary-light}
  button-secondary-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 35px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 35px
    border: 3px solid {colors.background}
  button-ghost-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 35px
  button-on-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 35px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: 1px solid {colors.border}
  card-flavor:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    border: 0px solid {colors.border}
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    border: 1px solid {colors.border}
    padding: 16px 24px
---

# Spindrift Design System

## Overview

Spindrift's website opens with an immersive full-bleed hero: real fruit, real photography, lush botanical greens spilling edge to edge — and then a single sentence in an elegant serif typeface: "Hello, Blueberry Lemonade." The brand's honesty proposition ("All real. All Spindrift.") is visible in every design decision. Where many sparkling water brands reach for clinical white minimalism or Gen Z neon energy, Spindrift goes earthy and grounded. The canvas is pure white ({colors.background}), the primary ink is forest green ({colors.primary}), and the signature hero surfaces live in that same deep Pantone-rich green ({colors.surface}). Nothing competes with the fruit.

The typographic system is the brand's most distinctive asset. GT Alpina — a contemporary serif with slightly bracketed strokes and an art-magazine sensibility — carries all headlines at a relaxed weight 400. This is rare in the DTC beverage space, where every other brand shouts with weight 800 condensed sans-serifs. Spindrift whispers. The serifed display type feels like a premium food magazine, like Kinfolk or Bon Appétit, and it tells you before you read a word that this product is thoughtful, not loud. Gotham Small Caps handles all UI and body copy: it's workmanlike, neutral, and ensures GT Alpina's elegance is never watered down by the chrome.

What makes Spindrift's design system cohesive is its restraint. The color palette is genuinely narrow — forest green, white, lime green, and then the photographs do the rest. Product photography of real blueberries, lemons, raspberries, and pineapples supplies the color variation that other brands inject via flat SKU palette tiles. The system trusts its product imagery. Buttons are pill-shaped with a confident 3px stroke border. Shadows are faint and green-tinted ({colors.shadow-soft}), never stark. The overall experience feels like standing in a farmer's market — fresh, credible, a little premium, nothing artificial.

**Key Characteristics:**
- GT Alpina serif at weight 400 for all display — editorial calm over DTC energy
- Forest green (`{colors.primary}`) as primary text AND brand color — ink and accent are the same family
- Full-bleed botanical photography as the primary color-delivery mechanism
- Crisp white canvas (`{colors.background}`) — zero cream warmth, just fresh and clean
- Pill buttons (`{rounded.pill}`) with 3px border weight — confident, not minimalist ghost borders
- Lime-green secondary accent (`{colors.primary-light}`) for active states and secondary CTAs
- Gotham Small Caps (`{typography.body}`) for all UI — grounded sans-serif foil to the serifed headlines
- Generous vertical section rhythm — 64–96px between major content bands
- Uppercase tracking on small labels (`{typography.label-caps}` at 0.7px) for structured metadata
- Very soft green-tinted shadow system (`{colors.shadow-soft}`) — depth without drama
- Breakpoints down to 376px with modal email-capture overlays
- Tailwind CSS arbitrary-value utility system under the hood

## Colors

### Primary
- **Forest Green** (`{colors.primary}`): The brand's signature — serves simultaneously as button background, body ink, and hero surface. Its dual role as ink and accent is what makes the design feel so owned. No other color plays this dual role.
- **Pure White** (`{colors.background}`): The default canvas. Clean, unwarmed — lets the photography and the forest green do the tonal work.
- **Deep Forest Surface** (`{colors.surface}`): The dark mode twin of the primary green, used for hero backgrounds, promotional bands, and the footer. Rich but not black.

### Brand Accent
- **Lime Green** (`{colors.primary-light}`): The livelier sibling of forest green — used for secondary CTAs, focus rings, success states, and active indicators. Lighter, more energetic, but still botanical.
- **Spring Green Tint** (`{colors.primary-container}`): A pale, desaturated green for chip backgrounds, SKU selection surfaces, and badge fills. Keeps the green family without competing with primary.

### Text States
- **Hover Forest** (`{colors.text-hover}`): A slightly darker shade of forest green for hover states — the system dims rather than shifts hue on interaction.
- **Near-Black Secondary** (`{colors.ink-secondary}`): Used for supporting body copy where pure forest green feels too brand-prominent.

### Borders & Surfaces
- **Soft Green Border** (`{colors.border}`): 1px hairline borders on cards, inputs, and dividers. Low-contrast, botanical.
- **Pale Green Panel** (`{colors.surface-elevated}`): Secondary light sections — a barely-there green wash that avoids pure white but keeps the botanical palette.

### Shadows
- **Green Shadow Tint** (`{colors.shadow-soft}`): All elevation uses a muted green shadow rather than neutral grey. The most distinctive technical detail in the system — shadows feel alive, not inert.

## Typography

### Font Family
- **Display**: GT Alpina — a contemporary serif by Grilli Type with slightly bracketed strokes, moderate contrast, and an editorial quality. No variable axis exposed; all weights loaded discretely. Fallbacks: `Georgia, 'Times New Roman', serif`.
- **UI / Body**: HCo Gotham SSm (Screen Smart variant of Hoefler & Co.'s Gotham) — optimized for screen rendering at small sizes. Fallbacks: `'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif`.
- **Tracked Caps System**: Gotham SSm at 14px, weight 500, uppercase, 0.7px tracking — used for section labels, metadata callouts, and ingredient declarations.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero headline — "Hello, Blueberry Lemonade." Maxes at 80px / GT Alpina weight 400 |
| `display` | Section-level headlines, major callouts — 64px / GT Alpina |
| `heading-section` | Mid-page section heads — 48px / GT Alpina |
| `heading-sub` | Sub-section heads, callout modules — 36px / GT Alpina |
| `heading-ui` | Gotham-rendered utility heads — 34px / 500, for non-editorial structured sections |
| `body-large` | Hero subheadlines, intro paragraphs — 18px / Gotham 400 |
| `body` | Standard reading text — 16px / Gotham 400 |
| `nav-link` | Navigation links — 16px / Gotham 400 |
| `button-ui` | Button labels — 18px / Gotham 500 |
| `label-caps` | Uppercase section labels, metadata tags — 14px / Gotham 500, tracked 0.7px |
| `caption` | Fine print, legal, product metadata — 12px / Gotham 400 |

### Principles
- **Serif confidence at low weight**: GT Alpina at weight 400 is the whole editorial voice. Never bold the serif — that would betray the measured, credible tone.
- **Slight negative tracking on display**: All GT Alpina sizes run at -0.32px tracking (or tighter at large sizes), creating a slightly compact, well-lettered block that reads composed rather than loose.
- **Gotham is the straight man**: Wherever GT Alpina is expressive, Gotham is neutral. No expressive weights in UI copy, no display-weight buttons.
- **Uppercase for structure, never for emphasis**: Tracked caps (`{typography.label-caps}`) appear only in structural metadata roles (ingredient callouts, category labels, nav utility items) — never to shout.
- **Tight line-height on display**: GT Alpina display styles run at 1.0–1.1, giving headlines a composed, magazine-spread stacking rather than airy whitespace.

## Layout

### Spacing System
Base unit: 8px. The spacing scale is declared in the `spacing:` token block above.

Spindrift's spacing personality is generous at the section level — 64–96px vertical padding per major band lets product photography breathe — and disciplined at the component level. Internal component padding stays tight (16px inputs, 24px cards) so the page reads as open landscape punctuated by focused modules.

### Grid & Container
- Max content width: approximately 1440px (Tailwind-driven arbitrary values)
- Hero: full-bleed photography background, centered heading + modal-style CTA overlay
- Product grid: likely 3–4 columns desktop → 2 tablet → 1 mobile (standard Shopify/Tailwind grid)
- Navigation: centered wordmark with utility links left and cart/location right at desktop
- Content sections: alternating forest-green and white bands, always full-bleed backgrounds

### Whitespace Philosophy
- **Photography as whitespace**: Full-bleed botanical imagery creates visual breathing room without relying on empty white panels. The images are spacious; the text can be brief.
- **Generous section padding**: Major section bands carry 64–96px vertical padding. The page never feels rushed.
- **Concentrated module density**: Modals, email capture overlays, and product cards stay compact — padding 16–24px. The contrast between open photography and focused modules is part of the pacing.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, photography sections, body text |
| Subtle (Level 1) | `0 2px 8px rgba(33, 82, 18, 0.06)` | Cards in default state, nav bar |
| Card (Level 2) | `0 4px 16px rgba(33, 82, 18, 0.08)` | Product cards, flavor tiles |
| Elevated (Level 3) | `0 8px 24px rgba(33, 82, 18, 0.10)` | Modal overlays, email capture pop-ups |
| Focus Ring | `0 0 0 3px {colors.focus-ring}` | Keyboard focus on buttons and inputs |

**Shadow Philosophy**: Spindrift's shadows are uniformly green-tinted, derived from the forest-green primary (`rgba(33, 82, 18, ...)`). This is a deliberate rejection of neutral-grey drop shadows. The effect is that even at small opacity, depth feels organic — like the shadow a leaf casts, not a flat paper UI element. Elevation is used sparingly: the site is largely flat, relying on photography contrast for visual hierarchy. Shadows appear only where interactive lift or modal separation is genuinely needed.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Input fields, full-bleed section bands |
| `sm` | 4px | Tight badges, small UI chrome |
| `md` | 8px | Secondary card insets |
| `lg` | 16px | Product cards, feature callout containers |
| `pill` | 9999px | All CTA buttons, email capture buttons, selector chips |

Spindrift's shape system is binary at the extremes: sharp for inputs and edge-to-edge content, pill for all CTAs. The `lg` (16px) radius appears on cards and panels. The 3px border weight on pill buttons is load-bearing — it gives the otherwise-minimal form enough visual presence to read as confident rather than ghostly.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Forest green fill, white text, pill radius, 3px border. The primary CTA throughout: "Shop Now", "Sign Me Up", "Add to Cart". Weight 500 Gotham at 18px. Padding 12px 35px — wide, confident.
- **`button-secondary`** — White fill, green text, lime-green 3px border. The "What's Inside" variant — used when two equal-weight CTAs appear side by side on a dark or photography surface.
- **`button-ghost`** — White fill, green text, white 3px border (invisible on white backgrounds, visible on green surfaces). For minimal CTAs that don't need visual competition.
- **`button-on-dark`** — White fill, forest-green text, pill radius. Appears on deep-green footer and hero surfaces where the primary green button would disappear.

### Cards

- **`card`** — White background, 1px soft-green border, 16px radius, 24px padding. Used for product callouts, editorial content cards.
- **`card-flavor`** — Pale green tint (`{colors.surface-elevated}`), 16px radius, 24px padding. For flavor-specific UI modules and feature highlights.

### Inputs

- **`input`** — White background, no border (email capture fields in the modal strip borders entirely), no radius. Clean form fields that don't compete with the photography background.
- **`input-focus`** — Focus state adds lime-green border color. No box-shadow glow — just a clean border swap.

### Badges / Tags

- **`badge`** — Spring green container (`{colors.primary-container}`), forest green text, 14px Gotham 500 uppercase, 0.7px tracking, pill radius, 4px 10px padding. Used for flavor labels, category chips, and ingredient callouts.

### Navigation

- White surface, forest green wordmark, Gotham 400 16px for links. Promo announcement bar above: forest green background, white Gotham 14px centered copy. Mobile: hamburger collapse with full-screen overlay.

## Do's and Don'ts

### Do
- Use GT Alpina at weight 400 for all display copy — the editorial calm IS the brand voice
- Apply `{colors.primary}` (forest green) as both ink and CTA — the dual role is intentional, not accidental
- Use real fruit photography as the primary color injection — don't supplement with flat color palettes
- Use 3px border on pill buttons — the weight carries the button without fill on dark surfaces
- Set lime green (`{colors.primary-light}`) only for secondary CTAs and focus states — it's the energy valve, not the primary stamp
- Apply uppercase tracking (`{typography.label-caps}`, 0.7px) for structural metadata labels only — never for emphasis in body copy
- Tint all shadows with forest green (`rgba(33, 82, 18, ...)`) — never neutral grey
- Use full-bleed dark green bands (`{colors.surface}`) for hero and promotional sections — the green surface IS the brand personality at scale
- Keep section padding generous (64–96px) — the experience should feel like a deep breath, not a dense catalog

### Don't
- Don't bold GT Alpina — weight 400 is the only display weight; increasing it destroys the editorial signal
- Don't introduce warm neutrals (cream, ivory) — Spindrift's white is pure, not warmed
- Don't use sharp corners on buttons — `{rounded.pill}` is non-negotiable for all CTAs
- Don't add a wide SKU flat-color palette as UI tiles — photography delivers the flavor variation; flat tiles would undermine the brand's "real ingredients" proposition
- Don't reduce the 3px button border to 1px — thinner borders feel ghost-like rather than confident
- Don't use black as ink — `{colors.primary}` (forest green) is the text color on white; black reads off-brand
- Don't apply Gotham in weights above 500 — the body/UI family should stay measured alongside the serif display
- Don't use the lime-green accent (`{colors.primary-light}`) as a hero or background color — it's a secondary accent, not a primary brand surface
- Don't add decorative illustration or flat icons — the system is built on photography; illustration competes with the credibility premise

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <376px | Single-column, hero text drops to ~36px, CTA stacks vertically |
| Mobile | 376–767px | Full-bleed photo hero, stacked layout, modal email capture |
| Tablet | 768–991px | Two-column product grid, hero type scales to ~52px |
| Desktop | 992–1440px | Full nav, 3–4 column grid, 80px hero display |
| Large Desktop | >1440px | 1440px container max, photography dominates proportionally |

### Touch Targets
- Pill buttons: minimum 44px tap height via 12px top/bottom padding on 18px type
- Product cards: full tile is tappable — no nested tap zones within tiles
- Nav links: 44px minimum height with generous vertical padding
- Email input + submit button appear as a horizontal pair on desktop, stacked on mobile

### Collapsing Strategy
- **Nav**: Horizontal links collapse to hamburger below ~992px; full-screen overlay menu on mobile
- **Hero**: Full-bleed photography maintained at all breakpoints; headline and CTA centered overlay
- **Product grid**: 3–4 columns → 2 → 1 progressively; flavor photography always preserved at full bleed within card
- **Section padding**: 96px desktop → 64px tablet → 32px mobile
- **Display type**: 80px desktop → ~52px tablet → ~36px mobile; weight 400 maintained throughout

### Image Behavior
- Photography is full-bleed at every breakpoint — no art direction crop changes, images scale responsively
- Botanical fruit imagery on dark green surfaces maintains color fidelity across screen sizes
- No retina/2x art direction detected — standard responsive srcset patterns via Shopify CDN

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` (pure white)
- Hero/Dark surface: `{colors.surface}` (forest green)
- Primary text + CTA: `{colors.primary}` (forest green `#215212`)
- Secondary accent: `{colors.primary-light}` (lime green `#6bbc37`)
- Focus ring: `{colors.focus-ring}`
- Border: `{colors.border}` (soft green hairline)
- Shadow tint: `rgba(33, 82, 18, 0.08)`

### Example Component Prompts

- "Build a Spindrift hero section with a full-bleed botanical photography background and a deep forest green overlay (`{colors.surface}`, ~60% opacity /* estimated */). Center the headline using GT Alpina weight 400, 80px, line-height 1.1, letter-spacing -0.32px, white text. Below it place a forest green pill button (`{colors.primary}`, `{rounded.pill}`, 12px 35px padding, 3px border, 18px Gotham 500) and a ghost pill button (white fill, green text, 3px white border). Gap 16px between buttons."
- "Design a Spindrift product card on white (`{colors.background}`), 16px radius, 1px `{colors.border}` border, 24px padding. Product image top, flavor name below in GT Alpina 36px weight 400 forest green, supporting copy in 16px Gotham 400. Primary CTA: forest green pill button, full-width inside card."
- "Create a Spindrift email capture modal — white background, centered, max-width 480px, 24px padding, 16px radius, shadow `0 8px 24px rgba(33, 82, 18, 0.10)`. Headline in GT Alpina 48px weight 400, `{colors.ink}`. Email input borderless, 16px 32px padding, 16px Gotham. Submit button: full-width forest green pill, 'Sign Me Up', 18px Gotham 500 white."
- "Build a Spindrift footer on deep green (`{colors.surface}`), white text (`{colors.on-surface}`), Gotham 400 16px for links, 12px for legal. Logo centered or left-aligned at full opacity white. Newsletter input as a borderless white field with a lime-green pill submit button (`{colors.primary-light}`, `{colors.primary}` text, 12px 35px padding)."
- "Design a Spindrift flavor badge: pale green background (`{colors.primary-container}`), forest green text (`{colors.primary}`), 14px Gotham 500 uppercase, 0.7px letter-spacing, `{rounded.pill}` radius, 4px 10px padding. Use for flavor chips like 'Blueberry Lemon', 'Raspberry Lime'."
- "Create a Spindrift section header: full-bleed white band, 96px vertical padding, GT Alpina heading in `{colors.ink}` at 64px weight 400 line-height 1.0, letter-spacing -0.32px. Supporting text 18px Gotham 400 below at 24px gap. Lime-green focus ring (`{colors.focus-ring}`) on interactive elements."

### Iteration Guide

1. Start with pure white canvas (`{colors.background}`) and forest green text (`{colors.primary}`) — the system reads immediately before any accent is applied
2. Introduce photography early — it carries all color variation; resist adding flat color tiles to compensate for absent imagery
3. GT Alpina weight 400 for every headline, at every size — adding boldness breaks the editorial register
4. All CTAs are pills (`{rounded.pill}`) with 3px borders — never 1px ghost borders, never sharp-cornered
5. Reserve lime green (`{colors.primary-light}`) for secondary CTAs and focus rings only — the primary stamp is always deep forest green
6. Use the dark green surface (`{colors.surface}`) for hero bands and footer — the alternation between white and deep green is the page rhythm
7. Shadow all elevation with `rgba(33, 82, 18, ...)` at low opacity — never neutral grey

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Spindrift. Brand names and trademarks belong to their respective owners.