Larkspur

Colophon

The design system,
on display

Every token, specimen, and motion rule the site runs on, laid out in the open. Build one of these for anything you care about.

01

Color

OKLCH throughout. Paper neutrals carry the room, the periwinkle accent carries the buttons, and moss, clay, and gold mark the season notes. The dark theme remaps the same tokens.

Paperoklch(0.955 0.012 95)
Inkoklch(0.24 0.018 60)
Larkspuroklch(0.52 0.11 285)
Mossoklch(0.5 0.08 150)
Clayoklch(0.6 0.11 45)
Goldoklch(0.75 0.1 85)
Sunkenoklch(0.925 0.016 92)
Late servicedark theme bg

02

Type

Fraunces speaks, Inter works. One variable file each, self-hosted, five clamp() steps that scale with the reader's own font size.

--text-hero / clamp(3.2rem, 2rem + 6.5vw, 7.5rem) / 0.94 line

Eat what the valley is having.

--text-2xl / clamp(2rem, 1.5rem + 2.4vw, 3.25rem)

One field, one river, one fire.

--text-lg / display weight 480

Section heading, fourth scale

--text-md / body, 1.75 line, 62ch measure

Body text runs at the reading measure cooks use for recipes: long enough to think in, short enough to follow at a counter with flour on your hands.

--text-xs / 0.22em tracking / uppercase

The eyebrow, smallest voice in the room

03

Motion

Three timing curves, one stagger system, and a hard promise: everything collapses to instant states under prefers-reduced-motion.

The wipe
300ms / scaleX
The spring
ease with overshoot
The tilt
perspective, 8deg
Entrances

One observer, staggered children

IntersectionObserver with a 15% threshold and an 8% bottom margin. Children take a --reveal-delay of 80ms per index, capped at 240ms so nothing waits on nothing.

Scroll-driven

CSS animation-timeline, enhanced only

Parallax figures and grow bars ship behind @supports (animation-timeline: view()) and disappear gracefully where the browser says no.

Reduced motion

Instant, not absent

Reveals render in their final state, the marquee slows to a crawl instead of stopping, and the scroll cue goes still. Motion is a preference, not a dependency.

04

Components

The reusable parts, live from the same classes the site uses.

Buttons

A paper panel wipes across from the left on hover. Disabled buttons sit at 55% opacity with pointer events off.

Dietary marks

GF V Now seating Posted 8:47 am

Small state-bearing chips: superscript dietary marks, season notes with the dot, and the dashed report stamp.

Cards

Dish card

II

Lifts 4px on hover, border deepens, shadow follows.

States

3px accent ring on focus, clay on invalid.

05

The rules

Every component reads variables, never the theme. Two fonts, no exceptions. Colors carry meaning only through tokens. Motion transforms and opacity only, nothing that costs layout. One accent; gold, moss, and clay are season notes, not decoration. Every control has designed hover, focus, active, loading, empty, and error states before it ships.

The full system lives in assets/css/main.css?v=1.0.2, organized in cascade layers so a future build can fork the tokens and keep the bones. That is the point of writing it down.