---
name: Allbirds
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#555555"
  tertiary: "#2D383D"
  neutral: "#696969"
  bg-soft: "#E0DACF"
  bg-quiet: "#212121"
  muted-soft: "#4D5559"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Clean, earthy e-commerce design blending minimalist UI with natural photography.

*A modern, sustainable retail brand focused on transparency and natural materials.*

## Colors

High contrast naturals with deep muted anchors

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#555555`)** — uses `ink-soft` token
- **Accent (`#2D383D`)** — uses `accent` token
- **Muted (`#696969`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

Full-width hero with centered modal overlay.

*Rhythm:* Consistent 4px base unit with generous whitespace between sections.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Solid filled buttons with slight border radius.
- **card:** Clean cards with large product photography.
- **chip:** Minimalist labels with uppercase text.
- **input:** Standard form inputs with clear focus states.
- **hero:** Large lifestyle photography with centered text overlay.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```