The visual approach
Allbirds runs on #212121 — a near-black background that sits just warm enough to avoid pure void. Text is #ffffff, secondary information drops to #b3b3b3, and interactive elements reverse to #000000 on white surfaces. The palette stops there. No accent teal, no sustainability green, no product photography gradients bleeding into the chrome. The brand's environmental story gets told through copy and product, not through tokenized color metaphor.
Typography follows the same discipline. The system sans-serif stack handles all UI text — section headings set at 13px / 700 / uppercase, body at 14px / 400, navigation at 14px / 500. The only custom typeface is a script reserved for the logo, rendered at 32px / 400. No display type, no editorial hierarchy, no font pairing theatrics. The design system defines six text styles and stops.
The component vocabulary is nav, footer, form. That's the entire list in the token documentation. No card variants, no modal flavors, no button taxonomy. This is not an oversight or an incomplete design system export — it's the whole interface. Three components do all the structural work, and motion does the rest.
What works
The restraint creates space for a motion system that would feel busy in a more decorative UI. Footer sections fade in as they enter the viewport (300–400ms ease-out). The chat button waits until 60% scroll, then appears with a 250ms opacity transition. Links shift from neutral-400 to white over 200ms ease-out. Social icons — outlined circles — fill and scale from 1.0 to 1.05 over 250ms on hover. The CTA button darkens and lifts via box-shadow, also 200ms. Email inputs transition border color on focus, placeholders fade. Icon buttons (search, cart, user, help) scale to 1.1 in 150ms.
Every interaction has a timing value, an easing function, and a clear before/after state. The motion vocabulary is larger than the component vocabulary. Button press gets an active state with scale(0.98) for 100ms. The country selector dropdown expands with fade + translateY(-4px → 0) over 200ms on a cubic-bezier curve. The header goes sticky with backdrop-blur(8px) after you scroll past the hero, transitioning over 300ms. Overlays assume the same 8px blur with a bg-black/40 fade-in. Navigation mega-menus slide down at 250ms with staggered child reveals.
This is not a design system that documents motion as an afterthought. The motion tokens are as specific as the color tokens, and they do more work. A white button on a dark background is just geometry until hover adds the shadow lift and the 200ms ease-out. The three-component vocabulary scales because every interactive surface has a choreographed entrance, exit, and idle state.
The dark theme does two things well. It hides the edges of the viewport — no hard stop where content meets browser chrome — so the site feels spatially larger than it is. And it makes the product photography (shoes, apparel, all shot on white) pop without requiring design intervention. Light background would need containment, borders, or cards. Dark background just puts a white-lit product in space and steps back.
What a builder can borrow
Start with fewer components. If you're defining card, card-compact, card-bordered, card-image, card-shadow before you've shipped a page, you're front-loading decisions that motion and layout can defer. Allbirds proves that nav, footer, and form can cover an e-commerce homepage if the interaction layer is strong enough.
Document motion with the same rigor as color. Not "add a nice hover effect" but "scale 1.0 to 1.1, 150ms ease-out, on icon buttons only." The brief specifies backdrop-blur(8px) twice — once for the sticky header, once for overlays. That's a token. bg-black/40 for overlay backgrounds is a token. translateY(-4px → 0) with a cubic-bezier for dropdowns is a token. If you're not versioning and naming these, they'll drift across components and the system will feel loose even if the layout is tight.
Use dark backgrounds to simplify product photography treatment. If your content is high-contrast (light products, white packaging, bright apparel), a #212121 canvas eliminates the need for shadows, borders, or background fills. The product contrast is the design.
Prefer scroll-triggered reveals over auto-play. The footer fade-in at viewport entry and the chat button at 60% scroll both respond to user action (scrolling) rather than timers. The interaction feels faster because the user caused it, even though the animation takes 300ms.
Reserve your one custom typeface for the one thing that never changes: the wordmark. Everything else can run on system fonts if the scale and weight are disciplined. Allbirds uses a script logo and a sans-serif UI, and the gap between them is the entire brand personality. You don't need a typeface for that gap — you need restraint everywhere else.