How the kit informs the product

Greenridge is a field app: clipboard truth, map pins, and honest freshness. This page documents the CSS token layer (colors, type scale, spacing, radii) and the semantic patterns that ship in the PWA—so design decisions stay traceable to code. It is a standalone reference: the consumer marketing site and in-app navigation do not link here.

Use this when explaining tradeoffs (e.g. sunrise vs day contrast on a dusty phone outdoors, or why availability uses three states, not a binary).

Interactive design kit — browse foundations, atoms, molecules, and organisms in the browser (same UI as npm run stories in the repo).

View interactive design kit

Interactive design kit: Color System foundations showing semantic tokens across Day, Sunrise, Sunset, and Night phases. — Foundations → Color System in the interactive kit: palette and contrast across all four time-of-day phases.

Time-of-day phases

The app mirrors sky state with data-theme-phase on :root. Each phase remaps the same semantic variables (--color-bg, --color-primary, …) so components do not fork—only tokens change. That is how sunset warmth reaches the map chrome and sheet rows without one-off hex in components.

Day

Default field read; mint wash, deep green primary.

Sunrise

Cooler forest floor; amber primary for early light.

Sunset

Warm paper tones; russet primary.

Night

Reduces glare; availability greens shift for contrast on charcoal.

Structure tokens

Spacing uses a 4px / 8pt grid (--space-1 … --space-12), with semantic aliases (--gap-section, --padding-card) so layout stays consistent between map overlays, site cards, and modals. Radii are stepped (--radius-sm … --radius-chip) so chips read as chips and sheets read as sheets.

Spacing scale (excerpt)

Radius scale

Type scale (semantic)

Token	Use in product
`--text-micro`	Map legend pills, AQI label—dense but legible.
`--text-menu`	Bottom nav labels; must stay clear at arm’s length.
`--text-title-md`	Sheet section headers, modal titles.
`--text-display`	Weather temperature, hero numerals—short strings only.

Availability language

Clipboard-derived freshness is uncertain by nature. The kit defines three semantic lanes—fresh, stale, warn—so map badges, site rows, and banners agree. Product copy never promises a reservation; it describes what campers last saw.

Fresh — sheet photo recent; trust the signal, still verify at HQ.

Stale — older snapshot; plan with wider margins.

Conflict / parse issue — treat as unknown until a new photo lands.

Where it shows up

Map & pins — primary green for affordances; muted text for secondary trail copy.
Sites list & filters — surface vs background contrast from --color-surface / --color-bg; section rhythm from --gap-section.
Clipboard upload & parse — stale sheet chrome uses --color-avail-stale-bg / --color-avail-stale-border / --color-avail-stale-text; generic warn callouts use --color-warn-bg.
Bottom nav & touch — --size-touch-min (44px floor) and input font-size floor to avoid iOS zoom traps.

Source of truth

Production tokens live in web/src/index.css (:root and [data-theme-phase]). Storybook-style panels for side-by-side phase review use web/stories/themes.css with .theme-panel.theme-* classes. Foundations stories are under web/stories/stories/foundations.tsx.

This reference page is deployed at /greenridge-design-kit/; the explorable UI lives at /greenridge-design-kit/app/ (Vite app from web/stories). Neither is linked from the marketing homepage or in-app shell by default.