---
name: Allbirds
tagline: Oatmeal-canvas eco-minimalism — Geograph sans on warm #ece9e2, sharp corners, natural-green accent.
updated_at: 2026-05-28T23:12:59.511Z
published_at: 2026-05-28T23:12:59.511Z
author: webdesignhot
source_url: https://www.allbirds.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [retail]
tags: [light, minimal, sans, commerce, sustainable]
preview_swatch: ['#ece9e2', '#3a6b52', '#000000']
related: [patagonia]
description: 'Allbirds is what a sustainability-first shoe brand looks like when it decides the calm is the product. The canvas is warm oatmeal `#ece9e2` — never pure white, never bright — a soft natural paper tone that reads like undyed merino wool. Body and headings both run in Geograph, a custom humanist sans, at restrained sizes: the homepage h1 is only 24px/400, because photography carries the weight and type stays quiet. Text is true black `#000000`; corners are square (0px radius everywhere); the accent is a single muted natural green `#3a6b52` reserved for eco-credible moments. Where Patagonia chose cream + red + Futura, Allbirds chose oatmeal + natural-green + Geograph: understated, earthy, and confident enough to whisper.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-muted
  border: border
  ring: border-brand
colors:
  bg: '#ece9e2'
  bg-soft: '#f4f2ec'
  bg-deeper: '#e2ded4'
  bg-warm: '#f0ede5'
  surface: '#ffffff'
  surface-soft: '#f7f5ef'
  surface-deeper: '#e6e2d8'
  brand: '#3a6b52'
  brand-hover: '#2f5743'
  brand-pressed: '#264634'
  brand-deep: '#1c3527'
  brand-tint: '#dfe8e1'
  on-brand: '#ffffff'
  charcoal: '#2a2a2a'
  charcoal-soft: '#444444'
  text: '#000000'
  text-strong: '#000000'
  text-muted: '#555555'
  text-soft: '#767676'
  text-faint: '#a6a39b'
  text-on-brand: '#ffffff'
  link: '#000000'
  link-hover: '#3a6b52'
  selected-bg: '#dfe8e1'
  border: '#d6d2c8'
  border-strong: '#b9b4a7'
  border-soft: '#e4e0d6'
  border-brand: '#3a6b52'
  clay: '#c08457'
  success: '#3a6b52'
  warning: '#c08457'
  danger: '#a3402f'
  info: '#3a6b52'

typography:
  display:
    family: '"Geograph", system-ui, -apple-system, "Helvetica Neue", sans-serif'
    weights: [400, 500, 600]
  body:
    family: '"Geograph", system-ui, -apple-system, "Helvetica Neue", sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 56, weight: 500, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    display-lg:      { size: 40, weight: 500, lineHeight: 1.1,  tracking: '-0.015em', family: display }
    h1:              { size: 24, weight: 400, lineHeight: 1.2,  tracking: '-0.005em', family: display }
    h2:              { size: 22, weight: 500, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h3:              { size: 18, weight: 500, lineHeight: 1.3,  tracking: '0',        family: display }
    h4:              { size: 16, weight: 500, lineHeight: 1.35, tracking: '0',        family: body }
    eyebrow:         { size: 11, weight: 500, lineHeight: 1.2,  tracking: '0.12em',   family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.6,  tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    button:          { size: 14, weight: 500, lineHeight: 1.0,  tracking: '0.02em',   family: body }
    caption:         { size: 12, weight: 400, lineHeight: 1.4,  tracking: '0.01em',   family: body }

radius:
  none: 0
  micro: 0
  sm: 0
  md: 0
  lg: 0
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]

layout:
  page-width: 1440
  prose-width: 680
  header-height: 64

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 360
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  card: '0 1px 4px rgba(0, 0, 0, 0.05)'
  card-hover: '0 4px 14px rgba(0, 0, 0, 0.08)'
  modal: '0 20px 56px rgba(0, 0, 0, 0.16)'

accessibility:
  contrast-text-on-bg: 17.3
  contrast-text-on-brand: 6.0
  focus-ring: '2px solid #3a6b52 + 2px outset gap'
  reduced-motion-honored: true

components:
  button-primary: { bg: text, text: on-brand, padding: '14px 28px', radius: 0, font: button }
  button-secondary: { bg: transparent, text: text, padding: '13px 27px', radius: 0, border: '1px solid text' }
  button-accent: { bg: brand, text: on-brand, padding: '14px 28px', radius: 0, font: button }
  button-ghost: { bg: transparent, text: text, padding: '10px 0', radius: 0 }
  card: { bg: surface, radius: 0, padding: 20, border: '1px solid border-soft' }
  pill: { bg: surface-deeper, text: text, radius: pill, padding: '4px 12px', font: 'label' }
  input: { bg: surface, border: '1px solid border-strong', text: text, radius: 0, padding: '13px 16px', focus-border: brand }

lineage:
  summary: 'Allbirds'' visual system grows from its founding premise — a New Zealand merino-wool runner sold direct-to-consumer with sustainability as the headline, not the footnote. The oatmeal canvas `#ece9e2` is a deliberate rejection of the bright-white DTC tech aesthetic; it reads like undyed natural fiber and lowers the visual temperature of the whole page. Geograph, a humanist sans by Schick Toikka, replaced earlier system-font stacks to give the brand a calm, slightly editorial voice without shouting. Type is kept small and quiet (homepage h1 is just 24px) because full-bleed product and lifestyle photography is the primary instrument. Corners are square — 0px radius across buttons, cards, and inputs — which reads honest and material rather than playful or tech-rounded. The palette stays earthy: oatmeal, charcoal black, a single muted natural green for eco-credible accents, and warm neutral borders. The result is the Silicon-Valley-meets-natural-materials look that defined a wave of 2016-era sustainable DTC brands, executed with unusual restraint.'
  influences:
    - { name: 'Geograph (Schick Toikka)', role: 'humanist sans display + body typeface', url: 'https://schick-toikka.com/geograph' }
    - { name: 'Dieter Rams / Braun functionalism', role: 'restrained, material-honest minimalism', url: 'https://en.wikipedia.org/wiki/Dieter_Rams' }
    - { name: 'Muji', role: 'natural-material, no-logo calm-retail aesthetic', url: 'https://www.muji.com' }
    - { name: 'Everlane', role: 'transparency-first DTC minimalism contemporary', url: 'https://www.everlane.com' }
    - { name: 'Patagonia', role: 'sustainability-led outdoor-apparel peer', url: 'https://www.patagonia.com' }
---

## 1. Visual Theme & Atmosphere

Allbirds is what a sustainability-first shoe brand looks like when it decides the calm is the product. The canvas is **warm oatmeal** `#ece9e2` — never pure white, never bright — a soft natural-paper tone that reads like undyed merino wool. It lowers the visual temperature of the entire page, so the moment you arrive the experience feels quiet, breathable, and slightly editorial rather than transactional. The brand trusts its photography and its materials to do the talking; the interface simply gets out of the way.

Typography is deliberately small and restrained. Both display and body run in **Geograph**, a humanist sans, and the homepage `h1` is only **24px at weight 400** — remarkable for an e-commerce hero, where most brands push 48–80px. Allbirds inverts that instinct: type recedes, full-bleed product and lifestyle photography advances. Headlines often sit in white over imagery (the live hero h1 computes to `#ffffff` over a photo), so the type system is designed to be legible against both the oatmeal canvas and rich photographic backgrounds.

Corners are **square** — 0px radius everywhere. Buttons, cards, inputs, and image frames all use hard right angles. This is a material-honest decision, not a stylistic accident: square corners read like cut wool felt or trimmed paper rather than glossy app chrome. It aligns Allbirds with functionalist, natural-material design lineages (Muji, Braun) and away from the rounded, bubbly DTC-tech look it could easily have defaulted to.

The palette stays earthy and disciplined: oatmeal canvas, true-black text, warm neutral borders, and a single **muted natural green** `#3a6b52` held in reserve for eco-credible moments — sustainability badges, carbon-footprint callouts, "Better Than Leather" highlights, hover accents. Where Patagonia chose cream + red + Futura, Allbirds chose **oatmeal + natural-green + Geograph**. The brand is confident enough to whisper.

The overall atmosphere is *calm-credible*. Generous whitespace, soft contrast between canvas and surface, almost no shadow, no gradients, no decoration. Everything signals "we spent the budget on the wool, not the website" — which is exactly the trust Allbirds wants to build.

**Key Characteristics:**
- Warm oatmeal canvas `#ece9e2` — never pure white
- True-black text `#000000` (17.3:1 on canvas)
- Geograph humanist sans for display *and* body
- Restrained type sizing — homepage h1 only 24px/400
- Square corners — 0px radius across all UI
- Single muted natural-green accent `#3a6b52` for eco moments
- Photography-led: full-bleed product + lifestyle imagery carries the page
- Charcoal `#2a2a2a` as secondary neutral for solid CTAs
- Near-zero shadow, no gradients, no decoration
- Light-only canvas — the oatmeal IS the brand

## 2. Color Palette & Roles

### Canvas (Primary)
- **Background** (`#ece9e2`): warm oatmeal — the signature canvas. Never substitute pure white.
- **Background Soft** (`#f4f2ec`): lifted oatmeal for alternating sections.
- **Background Deeper** (`#e2ded4`): recessed bands and footer.

### Text
- **Text** (`#000000`): true black for body, headings, links. Maximum legibility on oatmeal.
- **Text Muted** (`#555555`): secondary copy, captions, metadata.
- **Text Soft** (`#767676`): placeholder and disabled text.
- **Text on Brand** (`#ffffff`): white over green or charcoal solids.

### Brand — Natural Green (accent, supplied)
- **Brand** (`#3a6b52`): muted natural green — eco badges, sustainability callouts, link hover, focus ring.
- **Brand Hover** (`#2f5743`), **Pressed** (`#264634`), **Deep** (`#1c3527`).
- **Brand Tint** (`#dfe8e1`): selection wash and accent surface.

### Charcoal (neutral CTA)
- **Charcoal** (`#2a2a2a`): solid primary buttons default to near-black charcoal, not green.
- **Charcoal Soft** (`#444444`): hover/pressed state for charcoal solids.

### Surfaces
- **Surface** (`#ffffff`): card and modal surfaces that lift gently from oatmeal.
- **Surface Soft** (`#f7f5ef`): subtle tinted card on oatmeal.
- **Surface Deeper** (`#e6e2d8`): pills and tag chips.

### Borders
- **Border** (`#d6d2c8`): warm neutral hairline — default divider.
- **Border Strong** (`#b9b4a7`): input borders and emphasis.
- **Border Soft** (`#e4e0d6`): faint card outline.
- **Border Brand** (`#3a6b52`): focus and active states.

### Semantic
- **Success** (`#3a6b52`): natural green — reuses brand.
- **Warning** (`#c08457`): warm clay/terracotta — stays inside the earthy palette.
- **Danger** (`#a3402f`): muted brick red for errors only.
- **Info** (`#3a6b52`): green.

## 3. Typography Rules

### Font Family
- **Display**: Geograph (Schick Toikka), a humanist sans. Falls back to `system-ui` → `-apple-system` → Helvetica Neue.
- **Body**: Geograph at 16px line-height 1.55 — the same family as display; weight and size carry hierarchy, not a contrasting face.
- **Mono**: system mono stack, used only for SKU/order codes.
- No serif. The brand is sans-only.

### Hierarchy

| Role | Font | Size | Weight | LH | Tracking |
|------|------|------|--------|-----|----------|
| display-hero | Geograph | 56 | 500 | 1.05 | -0.02em |
| display-lg | Geograph | 40 | 500 | 1.1 | -0.015em |
| h1 | Geograph | 24 | 400 | 1.2 | -0.005em |
| h2 | Geograph | 22 | 500 | 1.25 | -0.005em |
| h3 | Geograph | 18 | 500 | 1.3 | 0 |
| h4 | Geograph | 16 | 500 | 1.35 | 0 |
| eyebrow | Geograph | 11 | 500 | 1.2 | 0.12em UPPER |
| body-lg | Geograph | 18 | 400 | 1.6 | 0 |
| body | Geograph | 16 | 400 | 1.55 | 0 |
| body-sm | Geograph | 14 | 400 | 1.5 | 0 |
| label | Geograph | 13 | 500 | 1.4 | 0.02em |
| button | Geograph | 14 | 500 | 1.0 | 0.02em |
| caption | Geograph | 12 | 400 | 1.4 | 0.01em |
| price | Geograph | 16 | 500 | 1.2 | 0 |
| nav-link | Geograph | 14 | 500 | 1.0 | 0.01em |
| footer-link | Geograph | 13 | 400 | 1.5 | 0 |

### Principles
- **Geograph for everything** — one humanist sans for display and body; no contrasting typeface.
- **Restrained sizing** — the homepage h1 is only 24px/400; let photography, not type, carry the hero.
- **Weight, not size, signals importance** — 400 vs 500 vs 600 does most of the hierarchy work.
- **Tight tracking on large display** (-0.015 to -0.02em); near-zero on body.
- **Light eyebrow tracking** (~0.12em) on uppercase labels — restrained, not the heavy 0.20em of louder brands.
- **Mixed-case throughout** — uppercase reserved for small eyebrows and labels only.
- **White headlines over photography** are first-class: the type system is tuned for legibility on both oatmeal and image backgrounds.
- **Generous body line-height** (1.55–1.6) keeps long copy calm and readable.

## 4. Component Stylings

### Buttons (4 variants — all 0px radius)

**Primary** — solid charcoal/black:
- bg `#2a2a2a` (near-black), text white, 14px Geograph 500
- Padding 14×28, **radius 0** (square)
- Hover: bg `#000000`
- The default storefront CTA ("Shop Now", "Add to Cart") is dark, not green.

**Accent** — natural green:
- bg `#3a6b52`, text white, 14px Geograph 500, **radius 0**
- Hover: bg `#2f5743`
- Reserved for sustainability/eco-CTAs ("Shop Tree", "Our Footprint").

**Secondary** — bordered:
- bg transparent, text `#000000`, 1px solid `#000000` border, **radius 0**
- Hover: bg `#000000`, text white (fill-on-hover)
- Padding 13×27 to account for the 1px border.

**Ghost / text-link**:
- bg transparent, text `#000000`, no border, padding 10×0
- Underline-on-hover or color shift to brand green `#3a6b52`.

### Cards
- bg white `#ffffff` (lifts subtly from oatmeal) or transparent on oatmeal for product tiles
- **radius 0** (square), padding 20
- 1px soft border `#e4e0d6` or no border with near-zero shadow
- Product card: full-bleed square image top, name in 16px Geograph 500, price 16px 500, swatch dots below

### Badges / Tags / Pills
- **Eco badge**: green tint bg `#dfe8e1`, text `#1c3527`, 11px UPPER 0.12em, square corners
- **Sale tag**: charcoal bg `#2a2a2a`, white text, square
- **Material pill** (size/color selector): bg `#e6e2d8`, text black, pill radius `9999` (the *one* place rounding is allowed, for chip selectors)
- **"New" / "Best Seller"**: small uppercase label, no background, brand-green text

### Inputs / Forms
- bg white `#ffffff`, 1px solid `#b9b4a7` border, **radius 0** (square)
- Padding 13×16, text `#000000`, placeholder `#767676`
- Focus: border `#3a6b52` (natural green) + 2px outset focus gap
- Labels above field, 13px Geograph 500; errors in `#a3402f`

### Navigation
- 64px header, oatmeal `#ece9e2` bg with a hairline `#d6d2c8` bottom border on scroll
- Allbirds wordmark left (black), top-level nav center (Men / Women / Sale), search + account + cart right
- Nav links 14px Geograph 500, mixed case, underline or green-tint hover
- Mega-menu drops on hover with oatmeal panel, category columns, and a featured product image

## 5. Layout Principles

### Spacing System
- Base unit 4px; scale `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128]`
- Sections breathe at 64–128px vertical rhythm — generous, calm cadence

### Grid & Container
- Page max-width 1440px; content gutters scale with viewport
- Product grids: 4-up at desktop, 2-up at tablet, 2-up (or 1-up for editorial) at mobile
- Prose / editorial copy capped at ~680px for readability

### Whitespace Philosophy
- Whitespace is the primary design material. Generous margins around every block let the oatmeal canvas read as intentional, not empty. Nothing crowds; the calm is the product.

### Section Cadence
- Full-bleed photographic hero → product category bands → sustainability/story block → editorial → footer
- Alternate `bg` and `bg-soft`/`bg-deeper` bands to segment without hard rules
- Hero headline often overlaps photography, set in white, anchored low-left or centered

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| None | 0 | **default** — buttons, cards, inputs, image frames |
| Micro | 0 | (collapsed to 0 — the brand is square) |
| Standard | 0 | (collapsed to 0) |
| Pill | 9999 | size/material selector chips only — the sole exception |

The radius system is intentionally degenerate: nearly everything is **0px**. The single sanctioned exception is the pill-shaped size/material selector chip. This squareness is a core brand signal — material-honest, functionalist, distinctly *not* tech-rounded.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 | flat — no shadow | default; cards on oatmeal rely on border, not lift |
| 1 | `0 1px 4px rgba(0,0,0,0.05)` | resting card on white sections |
| 2 | `0 4px 14px rgba(0,0,0,0.08)` | card hover / dropdown |
| 3 | `0 20px 56px rgba(0,0,0,0.16)` | modal, cart drawer |

### Shadow Philosophy
Shadows are minimal, soft, and strictly neutral (black-based, very low opacity). Most of the interface is flat — separation comes from the oatmeal-vs-white contrast and hairline borders, not elevation. Never use colored or tinted shadows. The brand reads grounded and material, so things sit *on* the surface rather than float above it.

## 8. Interaction & Motion

- **Easing**: standard `cubic-bezier(0.4, 0, 0.2, 1)` for most transitions.
- **Durations**: fast 150ms (hover/color), standard 240ms (dropdowns, drawers), slow 360ms (page/section reveals).
- **Buttons**: color/border crossfade on hover (charcoal → black, secondary fill-on-hover), no transform, no scale.
- **Cards**: subtle shadow lift (Level 1 → 2) and image zoom (~1.03 scale) on hover; image overflow clipped square.
- **Nav mega-menu**: 240ms fade + slight slide-down; hover bridge prevents flicker.
- **Cart drawer**: slides in from right at 360ms with backdrop fade.
- **Photography**: occasional slow Ken-Burns drift (8–12s) on hero imagery; no aggressive parallax.
- **Page transitions**: gentle fade; nothing flashy.
- **Reduced motion**: `prefers-reduced-motion: reduce` disables image zoom, Ken-Burns, and slide animations; falls back to instant opacity changes.

## 9. Accessibility & A11y

### Computed Contrast Pairs
- **Text on canvas**: `#000000` on `#ece9e2` = **17.3:1** — AAA (large and small text).
- **White on brand green**: `#ffffff` on `#3a6b52` = **6.0:1** — AA (AAA for large text).
- **Brand green on canvas**: `#3a6b52` on `#ece9e2` = **5.0:1** — AA for text, fine for UI/icons.
- **White on charcoal CTA**: `#ffffff` on `#2a2a2a` = **15.3:1** — AAA.
- **Muted text on canvas**: `#555555` on `#ece9e2` = **6.8:1** — AA.

### Focus, Keyboard & ARIA
- Focus indicator: 2px solid `#3a6b52` ring with a 2px outset gap; never remove outline.
- Full keyboard navigability through nav, mega-menu, product grid, and cart drawer; trap focus inside the cart/modal.
- Product swatches use `role="radiogroup"` with named `aria-label`s ("Color: Natural Grey"); size pills are radio buttons.
- Decorative full-bleed photography marked `aria-hidden` / empty `alt`; product imagery carries descriptive `alt`.
- Cart drawer is `role="dialog"` with `aria-modal="true"` and an accessible label.
- Reduced-motion honored (see Section 8).

## 10. Responsive Behavior

| Breakpoint | Width | Behavior |
|------------|-------|----------|
| mobile | <640 | 2-up product grid (1-up editorial); hamburger nav; hero h1 24→20 |
| tablet | 640–1024 | 2-up grid; condensed nav |
| desktop | 1024–1280 | 4-up grid; full center nav + mega-menu |
| wide | 1280+ | 4-up grid, 1440px max container |

- **Touch targets**: minimum 44×44px on buttons, swatches, and nav items.
- **Header** collapses to logo + hamburger + cart on mobile; search becomes a full-screen overlay.
- **Mega-menu** becomes an accordion drawer on mobile.
- **Images** stay square-cropped and full-bleed; hero photography reflows to portrait crop on narrow viewports.
- **Cart** is a right drawer on desktop, full-screen sheet on mobile.

## 11. Content & Voice

### Tone
**Calm, candid, eco-credible.** Friendly but never gimmicky; confident enough to be brief. Copy explains materials and footprint plainly ("Made with merino wool", "Our carbon footprint: 7.1 kg CO₂e") and lets the facts carry the trust.

### Microcopy patterns
- Primary CTA: **"Shop Now"** / **"Add to Cart"**
- Eco CTA: **"Our Footprint"** / **"Why Wool"**
- Sign-up: **"Join the flock"** (lightly playful, sparingly used)
- Errors: **"Hmm, something went wrong. Please try again."**
- Empty cart: **"Your cart is empty — let's fix that."**

### CTA verb conventions
- **Shop / Add / Explore / Discover / Learn**
- Avoid: high-pressure urgency ("Hurry", "Last chance"), exclamation overload, and tech-jargon.

## 12. Dark Mode & Theming

**Light-only on web.** The warm oatmeal canvas `#ece9e2` *is* the brand — a dark variant would erase the single most recognizable signal. No dark theme is offered on the production site; theming is limited to alternating oatmeal section bands (`bg` / `bg-soft` / `bg-deeper`) and the white surface lift on cards.

## 13. Lineage & Influences

Allbirds' visual system grows from its founding premise — a New Zealand merino-wool runner sold direct-to-consumer with sustainability as the headline, not the footnote. The oatmeal canvas `#ece9e2` is a deliberate rejection of the bright-white DTC-tech aesthetic; it reads like undyed natural fiber and lowers the visual temperature of the whole page. Geograph, a humanist sans, gives the brand a calm, slightly editorial voice without shouting, and is used for both display and body — weight and size, not a contrasting face, carry hierarchy.

Square corners (0px radius everywhere) align Allbirds with functionalist, material-honest design lineages — Dieter Rams' Braun, Muji's no-logo natural-material calm — and away from the rounded, bubbly look it could easily have defaulted to. The earthy palette (oatmeal, charcoal, a single natural green) and photography-led layout place it firmly in the 2016-era sustainable-DTC wave alongside Everlane and, in spirit, Patagonia — but executed with unusual restraint.

**Named influences:**
- **Geograph (Schick Toikka)** — the humanist sans that defines the type voice
- **Dieter Rams / Braun functionalism** — restrained, material-honest minimalism
- **Muji** — natural-material, no-logo calm retail
- **Everlane** — transparency-first DTC minimalism contemporary
- **Patagonia** — sustainability-led outdoor-apparel peer

## 14. Do's and Don'ts

### Do
- **Use warm oatmeal `#ece9e2` as the canvas** — it is the signature.
- **Keep type small and restrained** — homepage h1 at 24px/400 is correct, not a bug.
- **Use Geograph (humanist sans) for both display and body.**
- **Keep corners square — 0px radius** on buttons, cards, and inputs.
- **Let full-bleed photography carry the hero**; set headlines in white over imagery.
- **Reserve natural green `#3a6b52` for eco/sustainability moments** and accents.
- **Default solid CTAs to charcoal/black**, not green.
- **Use weight (400/500/600), not size jumps, to build hierarchy.**
- **Keep shadows minimal and neutral**; lean on oatmeal-vs-white contrast and hairlines.
- **Write candid, material-first copy** ("Made with merino wool").

### Don't
- **Don't use pure white as the page background.** Oatmeal is the brand.
- **Don't round corners** (except the one pill-shaped size selector).
- **Don't blow up headline sizes** to 48–80px — the brand keeps type quiet.
- **Don't add a contrasting display typeface** — Geograph does both roles.
- **Don't make green the default button color** — it's an accent, not the workhorse.
- **Don't use gradients, glows, or colored shadows.**
- **Don't oversaturate or filter photography into something glossy** — keep it natural.
- **Don't add urgency or high-pressure sales microcopy.**
- **Don't crowd the layout** — whitespace and calm are the product.
- **Don't ship a dark mode** — it erases the oatmeal signature.

## 15. Agent Prompt Guide

### Quick Color Reference
- bg (oatmeal): `#ece9e2`
- bg-soft: `#f4f2ec`
- text: `#000000`
- text-muted: `#555555`
- brand (natural green): `#3a6b52` / hover `#2f5743`
- charcoal CTA: `#2a2a2a` / hover `#000000`
- surface (card): `#ffffff`
- border: `#d6d2c8`
- on-brand: `#ffffff`
- danger: `#a3402f`

### Example Component Prompts

> Build an Allbirds-style hero: warm oatmeal `#ece9e2` canvas with a full-bleed natural lifestyle photo. Headline "Comfort, naturally" in white Geograph 24px weight 400 (small, restrained), anchored low-left. Primary CTA "Shop Now" — square 0px-radius, charcoal `#2a2a2a` bg, white 14px Geograph 500 text, padding 14×28.

> Design a product card: white `#ffffff` surface, **0px radius (square)**, full-bleed square product image on top, name "Wool Runner" in 16px Geograph 500, price "$98" in 16px 500 below, three round color-swatch dots. No shadow at rest; subtle lift + 1.03 image zoom on hover.

> Build a sustainability callout block: oatmeal `bg-soft #f4f2ec`, an eco badge with green tint `#dfe8e1` bg and `#1c3527` text reading "CARBON NEUTRAL" in 11px UPPER 0.12em, a 22px Geograph 500 heading, body copy in 16px Geograph 400, and an accent CTA "Our Footprint" — square, natural-green `#3a6b52` bg, white text.

> Design an input field: white bg, 1px `#b9b4a7` border, **0px radius**, 13×16 padding, black text, label "Email" above in 13px Geograph 500. Focus state: 2px natural-green `#3a6b52` border.

> Render the storefront nav: 64px oatmeal `#ece9e2` header, black wordmark left, center links "Men / Women / Sale" in 14px Geograph 500 mixed case, search + account + cart icons right, hairline `#d6d2c8` bottom border on scroll.

### Iteration Guide

1. **Start from the oatmeal canvas `#ece9e2`** — if it looks white, it's wrong.
2. **Shrink the type** — keep the h1 around 24px/400; don't let it balloon.
3. **Square every corner** — remove all border-radius except the size-selector pill.
4. **Make photography do the work** — full-bleed natural imagery, white headlines over it.
5. **Default CTAs to charcoal/black; spend green sparingly** on eco moments only.
6. **Use Geograph everywhere**; vary weight, not typeface, for hierarchy.
7. **Strip shadows and gradients** — rely on oatmeal-vs-white contrast and hairlines.
8. **Keep copy candid and calm** — material-first, no urgency, no exclamation spam.

---

*Theme-toggle audit: score=0, signals=[none]*