Design system allbirds.com

---
version: alpha
name: "allbirds.com"
description: "Design system extracted from https://www.allbirds.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  surface: "#ece9e2"
  surface-2: "#c9c6c0"
  surface-3: "#e0dacf"
  foreground: "#ffffff"
  muted-foreground: "#000000"
  primary: "#212121"
  on-primary: "#ffffff"
  secondary: "#090c43"
  border: "#ffffff"
typography:
  headline-display:
    fontFamily: "Geograph"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "1.33"
    letterSpacing: "0.6px"
  headline-lg:
    fontFamily: "Self Modern"
    fontSize: "40px"
    fontWeight: 400
    lineHeight: "1.5"
  headline-md:
    fontFamily: "Akkurat Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.33"
    letterSpacing: "0.6px"
  body-md:
    fontFamily: "Geograph"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "1.43"
  label-md:
    fontFamily: "Geograph"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: "0.6px"
  button:
    fontFamily: "Geograph"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.25"
    letterSpacing: "0.3px"
rounded:
  none: "0px"
  full: "9999px"
  xl: "16px"
spacing:
  unit: "4px"
  1: "8px"
  2: "12px"
  3: "16px"
  4: "20px"
  5: "24px"
  6: "32px"
  7: "40px"
  8: "168px"
  9: "188px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "33px"
    padding: "8px 16px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#212121"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "33px"
    padding: "8px 16px"
  button-ghost:
    backgroundColor: "#ece9e2"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "0px"
    height: "26px"
    padding: "0px 0px"
  input:
    backgroundColor: "#ffffff"
    rounded: "9999px"
    height: "42px"
  card:
    backgroundColor: "#ffffff"
    rounded: "0px"
    padding: "0px"
---

# allbirds.com

## Overview

Allbirds: Comfortable, Sustainable Shoes & Apparel: Allbirds: The world’s most comfortable shoes, flats, and clothing made with natural materials like merino wool and eucalyptus. FREE shipping & returns.

Pill-shaped controls, layered shadows for depth, restrained display type at 24px / 400, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 1888 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#ece9e2` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#c9c6c0` | Secondary surface |
| surface-3 | `#e0dacf` | Secondary surface |
| foreground | `#ffffff` | Primary text |
| muted-foreground | `#000000` | Secondary text, captions |
| primary | `#212121` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#090c43` | Secondary accent (blue) |
| border | `#ffffff` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#ece9e2`, `#212121`, `#c9c6c0`, `#e0dacf`, `#a69b8c`, `#5c5658`, `#090c43`.

The accent `#212121` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Geograph** for h1, body, label, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **Self Modern** for h2: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.
- **Akkurat Mono** for h3: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Geograph | 24px | 400 | 1.33 | 0.6px |
| headline-lg | Self Modern | 40px | 400 | 1.5 | normal |
| headline-md | Akkurat Mono | 12px | 400 | 1.33 | 0.6px |
| body-md | Geograph | 14px | 400 | 1.43 | normal |
| label-md | Geograph | 12px | 500 | 1 | 0.6px |
| button | Geograph | 12px | 500 | 1.25 | 0.3px |

Type scale in use: 12px, 14px, 16px, 20px, 24px, 40px. Base body size 14px.

The H1 renders at 24px / 400, right aligned, up to 415px wide, tracking 0.6px. Sample: "Wildly Comfortable. Super Natural.".

## Layout

- Spacing unit: 4px. Scale in use: 8, 12, 16, 20, 24, 32, 40, 168, 188 (px).
- Flex and grid gaps: 4, 8, 12, 16, 20, 32, 40 px.
- Content max width: 1360px, centred.
- Breakpoints: 640px, 768px, 1024px, 1536px, 1920px.
- Header: 0px tall, sticky, background `rgba(0, 0, 0, 0)`; 4 nav links at 16px / 400 (New Arrivals · Shop All).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgb(87, 87, 87) 0px 0px 0px 1px inset, rgb(0, 0, 0) 0px 0px 0px 1px`
- shadow-2: `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- shadow-3: `rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`

## Shapes

- Buttons: 9999px
- Inputs: 9999px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, full 9999px, xl 16px

## Components

### Button, primary

Background `#212121`, text `#ffffff`, border 1px solid #212121, radius 9999px, height 33px, padding 8px 16px, 12px / 500, uppercase. Sample label: "Shop Womens".

### Button, secondary

Background `#ffffff`, text `#212121`, border 1px solid #ffffff, radius 9999px, height 33px, padding 8px 16px, 12px / 500, uppercase. Sample label: "SHOP MEN".

### Button, ghost

Background transparent (it sits on `#ece9e2`, so place it on that colour), text `#000000`, border none, radius 0px, height 26px, padding 0px 0px, 16px / 500, uppercase. Sample label: "Best Sellers".

### Input

Height 42px, background `#ffffff`, border 1px solid #212121, radius 9999px, 16px text, padding 10px 80px.

### Card

Background `#ffffff`, border none, radius 0px, padding 0px, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px`. Typical size about 531×900px.

### Link

Colour `#212121`, no underline at rest, weight 500.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1420px | 1124px | 16px | 24px, 1 line, right | 0px, 2 links | media behind/overlapping text | 2→1 col; 4→4 col; 2→1 col | content-width |
| laptop 1024px | 1004px | 708px | 16px | 24px, 1 line, right | 0px, 2 links | media behind/overlapping text | 2→1 col; 4→4 col; 2→1 col | content-width |
| tablet 768px | 748px | 452px | 16px | 24px, 1 line, right | 0px, hamburger (Open main menu) | media behind/overlapping text | 2→1 col; 4→4 col; 2→1 col | content-width |
| phone 390px | 370px | 42px | 16px | 24px, 2 lines, left | 0px, hamburger (Open main menu) | text only | 4→4 col; 2→1 col; 2→1 col | 3 full-width |

- H1 goes 24px → 24px (100%), 1 → 2 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 0px → 0px.
- Hero: media behind/overlapping text → text only.
- Card grids: 4 columns → 4 columns on phones (gap 10px → normal).
- Body text stays 16px at every width.
- Phone side gutter 42px.
- 3 buttons stretch full-width on phones.

## Interaction & Motion

118 elements carry transitions; typical 0.2s with cubic-bezier(0.37, 0, 0.63, 1), mostly on opacity, color, background-color. No running keyframe animations at rest.

- Hover on button-primary ("SHOP MEN"): no visible change; cursor pointer; transition background-color, color, border-color, opacity | 0.2s, 0.2s, 0.2s, 0.2s | cubic-bezier(0.37, 0, 0.63, 1), cubic-bezier(0.37, 0, 0.63, 1), cubic-bezier(0.37, 0, 0.63, 1), cubic-bezier(0.61, 1, 0.88, 1) | delay 0s, 0s, 0s, 0s.
- Hover on button-secondary ("SHOP WOMEN"): no visible change; cursor pointer; transition background-color, color, border-color, opacity | 0.2s, 0.2s, 0.2s, 0.2s | cubic-bezier(0.37, 0, 0.63, 1), cubic-bezier(0.37, 0, 0.63, 1), cubic-bezier(0.37, 0, 0.63, 1), cubic-bezier(0.61, 1, 0.88, 1) | delay 0s, 0s, 0s, 0s.
- Hover on nav-link ("New Arrivals"): no visible change; cursor pointer; transition opacity | 0.2s | cubic-bezier(0.37, 0, 0.63, 1).
- Focus on button-primary: element did not take focus.
- Tooltip triggers exist (21 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- No dropdown menus found in the header.
- 24 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#212121` for actions and focus; never paint large areas with it.
- Do keep body text at 14px in Geograph.
- Do match corner radii per element class (buttons 9999px, cards 0px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.
- Note: Body text contrast is 1.0:1 against the page background (below 4.5:1).