Allbirds Design System

Allbirds' storefront is built on one observation: a footwear brand whose entire value proposition is natural materials (merino wool, eucalyptus tree fiber, sugarcane) cannot ship a chrome that contradicts the product. The canvas is a warm natural-white (`#ece9e2`) declared in `--color-natural-white-60` and used as the page background — one degree off pure white, tinted toward unbleached cotton fiber rather than screen pixels. Ink is a warm graphite (`#212121`) declared in `--color-black` and used 332 times as text and 323 times as 1px hairlines, never the pure `#000000` that would feel pharmaceutical against the natural canvas. The four brand voltages are material tones: dusty mauve `#a57e75`, muted sky `#879aab`, olive `#9e8949`, warm taupe `#d1b0a4` — each appearing in fewer than three component backgrounds, each pulled directly from the dye-lot the company runs on its wool.

This page packages the storefront into a DESIGN.md file written to the Google Labs open specification. Inside: 19 color tokens grouped into ink, canvas, hairline, semantic, and material-voltage layers; 11 Geograph + Self Modern typography roles built around a 12px / 16px Geograph workhorse and one Self Modern serif moment at 40px reserved for product-name displays like "Canvas Cruiser"; a 5-step radius vocabulary that's effectively two values (full pill at 9999px on every interactive surface, 16px on cards); an 8-step spacing scale anchored on the page's observed 4px / 8px / 12px / 16px / 32px rhythm; and 22 component entries covering the announcement bar, the top nav, the region-modal lightbox, the 4-up product strip, the Pantone editorial collaboration card, the Self Modern product-name card, the newsletter capture pill, and the footer link cluster.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Allbirds' material-honesty discipline — the warm canvas, the pill-shaped CTA, the Geograph nav with `0.3px` uppercase tracking, the single Self Modern serif moment, the Akkurat Mono caption — rather than a generic footwear-template with rounded-rect buttons and saturated accents. Reference tokens directly in Tailwind config or CSS variables when you want one specific value; every hex, font, radius, and spacing entry is a quoted literal you can paste into a `theme.extend` block. The reason this system rewards study is that most direct-to-consumer footwear brands ship pill CTAs and call the work done — Allbirds inverts the convention twice: the pill is the only rounded element in a flat-shadow chrome, and the brand voltage is delegated to four material tones rather than one saturated accent, so the pigment narrates the shoe's composition instead of decorating the page.