# Allbirds — DESIGN.md

## Overview
Allbirds runs a warm-minimalism canvas — soft sage neutrals and warm ivory (`#f7f3ed`) with the brand voltage carried by product photography on textured paper-like backgrounds. Type is a humanist serif display (Tiempos / GT Sectra) paired with a clean sans body. The brand never raises its voice; every accent feels like a worn material rather than a digital color.

## Color
- **Primary:** `#1a1a1a` — Soft Black (used for type and CTAs)
- **Canvas:** `#f7f3ed` — Warm Ivory
- **Surface alt:** `#e8e6df` — Sage Bone
- **Accent (signature):** `#9ca890` — Allbirds Sage
- **Accent (warm):** `#c4886f` — Sunbaked Terracotta
- **Ink:** `#1a1a1a`
- **Body:** `#4a4945`
- **Hairlines:** `rgba(26,26,26,0.10)` — barely-visible 1px dividers

## Typography
- **Display:** Tiempos / GT Sectra, weight 400-500 (serif), tracking -0.01em, sizes 48-72px hero
- **Body:** Söhne / Inter, weight 400, 16-17px base, 1.6 line-height
- **Eyebrow caps:** Söhne caps at 12px / weight 500 / 1.5px tracking — used as category eyebrows

## Spacing & rhythm
8-base (8/16/24/32/48/72/96). Section padding 72-96px. Product galleries use 3-up grids with generous 32-48px gutters. Hero band uses asymmetric 5-7 grid (type left, product right) more often than centered.

## Motion signature
180ms ease-out on hover; signature is a slow 600ms scale-down on product photos when hovered (subtle "settling" feel). Add-to-bag triggers a small slide-up confirmation sheet, never a modal.

## Components observed
- `product-card-portrait` (single product photo on warm ivory, hairline border, serif name below)
- `material-story-band` (full-bleed material close-up, sage caps eyebrow)
- `sustainability-spec-card` (carbon footprint number set in big serif numerals)
- `category-filter-bar-mono` (text-only chips, no icons)
- `cta-button-soft-black-fill`
- `quote-band-cream` (large italic-serif quote, no avatar)

## Trademark signals
- Carbon footprint number displayed on every product — set in display-size serif numerals like a price
- Material-name eyebrow caps ("Tree", "Wool", "SugarCane") as the brand's signature taxonomy
- Photography on textured/paper backgrounds, never on plain white
- Serif headlines in apparel — most footwear brands run heavy geometric sans, Allbirds runs literary
- Sage-bone surface for filter and category bands — never pure white, never pure cream

## What they DON'T do
- No emoji in product copy or microcopy
- No urgent sale banners or countdown timers
- No animated product 3D rotations or AR try-on chrome on the main PDP
- No saturated brand colors — every accent reads as a worn material
- No bold-weight display headlines

## Exemplar pages
- https://www.allbirds.com/
- https://www.allbirds.com/pages/our-materials
- https://www.allbirds.com/pages/sustainability
- https://www.allbirds.com/collections/mens-shoes

## When to reference
Reach for Allbirds when the user needs a warm-minimalism e-commerce surface where the materials and craft are the marketing. The serif-on-ivory atmosphere works for any product that wants to feel hand-considered rather than mass-produced — apparel, home goods, food, considered consumer goods.
