# Allbirds · Design system migration spec

> Source: https://www.allbirds.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of how a minimalist, sustainable brand can use high-quality photography and restrained UI to build trust and clarity.

## 1. Identity DNA

Allbirds' design system functions like a well-crafted pair of its own shoes: the construction is precise, the materials are honest, and every element serves a clear purpose. The identity is defined by a sustainable, natural minimalism, where the system's architecture supports transparency and comfort rather than ornamentation.

**One-liner:** Clean, earthy e-commerce design blending minimalist UI with natural photography.
**Keywords:** sustainable · natural · minimalist · eco-conscious · comfortable
**Analogy:** A modern, sustainable retail brand focused on transparency and natural materials.

## 2. Color

The color system is built on a high-contrast foundation of pure white and deep muted anchors, grounded by earthy neutrals like beige. This creates a natural yet sophisticated feel, avoiding saturation in favor of a palette that feels both clean and organic.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#E0DACF` | card background |
| `--bg-quiet` | `#212121` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#555555` | secondary text |
| `--muted` | `#696969` | placeholder |
| `--muted-soft` | `#4D5559` | weak hint |
| `--accent` | `#2D383D` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High contrast naturals with deep muted anchors

The guiding principle is high-contrast naturals with deep muted anchors, ensuring readability while evoking material authenticity.

## 3. Typography

Typography is categorized into three distinct roles: a humanist sans-serif for display and body copy, a geometric sans for UI labels, and a monospace for secondary elements. This separation establishes a clear typographic voice, balancing approachable reading text with crisp, functional interface type.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.1 | 500 | -0.5px | Hero headlines and primary display text |
| body | 16px | 1.5 | 400 | 0px | Standard body text and UI elements |

**Type rules:**
- Display: Use for hero headlines and main callouts.
- Body: Use for general reading and descriptive text.
- Mono: Use for labels and secondary UI elements.

## 4. Spacing

A consistent 4px base unit establishes the system's spatial rhythm, with generous whitespace between sections to let content breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit with generous whitespace between sections.

## 5. Surfaces

Surface treatment relies on subtle depth through soft, diffuse shadows and minimal 1px borders for separation. The visual effect is one of gentle elevation, keeping the interface light and unobtrusive.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.1) 0px 1px 3px 0px
  - rgba(0,0,0,0.1) 0px 20px 25px -5px
- **Borders:** 1px solid rgba(0,0,0,0.1) for subtle separation.

## 6. Layout

The layout skeleton is anchored by full-width hero sections, often centered with a modal overlay for focused tasks. A spacious 12-column grid structure underpins all compositions, providing flexible scaffolding while maintaining generous margins.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero with centered modal overlay.

## 7. Motion & Interaction

Motion is employed with restraint, favoring smooth, subtle transitions for hover states and background color changes. All properties transition with a cubic-bezier easing, providing clear but unobtrusive feedback on interaction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.37, 0, 0.63, 1)`
- **Patterns:**
  - Smooth transitions for hover states and background colors.

- **Hover:** Subtle background color shift or opacity change.
- **Click:** Direct visual feedback via transform or color.
- **Transition:** All properties transitioned with cubic-bezier easing.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is transparent, approachable, and straightforward, matching the brand's ethos of honesty. Headlines are short, punchy, and benefit-oriented, while calls to action are direct with clear visual weight.

- **Tone:** Transparent, approachable, and straightforward.
- **Headline style:** Short, punchy, and benefit-oriented.
- **CTA style:** Direct and action-oriented with clear visual weight.
- **Avoid:** Jargon-heavy technical language. / Aggressive sales tactics. / Overly complex sentence structures.

### Don'ts
- ❌ don't use neon or highly saturated colors — screenshot shows muted earthy tones like #E0DACF instead
- ❌ don't use heavily condensed fonts — screenshot shows humanist sans-serif and geometric sans categories
- ❌ don't use heavy drop shadows — screenshot shows subtle, soft shadows for elevation
- ❌ don't use cluttered layouts — screenshot shows generous whitespace and a single modal focus
- ❌ don't use all-caps for body text — screenshot reserves uppercase for UI labels and short headings
- ❌ don't use sharp, square corners everywhere — screenshot shows a mix of pill shapes and rounded corners up to 16px

The system deliberately avoids aggressive sales tactics, jargon, and overly complex language, maintaining a tone of straightforward communication.

## System Prompt (paste into AI tool)

```
This is a sustainable e-commerce platform focusing on natural materials and transparency. The visual identity centers on a clean, minimalist aesthetic using a high-contrast palette of pure white (#FFFFFF), soft earthy neutrals (#E0DACF), and deep muted anchors (#212121, #2D383D). Typography relies on a humanist-sans for display and body, paired with a geometric sans for UI labels and a mono for secondary elements. Layout is spacious with a 1280px container and 12-column grid. Critical constraints include avoiding neon or highly saturated colors, resisting overly complex or cluttered layouts, and refraining from using harsh drop shadows or sharp corners. Maintain a transparent, straightforward voice with short, punchy headlines.
```