# Allbirds

따뜻한 샌드(#ece9e2)와 어스 톤 팔레트로 지속가능성을 시각화한 오가닉 이커머스 — 자연스러움이 곧 프리미엄이다.

- taxonomy: organic-natural · earth-tones, sand-background, sustainable, lifestyle-photo, ecommerce, warm-neutral, nature-inspired · complexity=medium
- page types: ecommerce, landing, marketing
- best for: 지속가능 패션·뷰티 이커머스, 자연 감성 라이프스타일 브랜드, D2C 제품 랜딩, 웰니스·아웃도어 서비스
- avoid for: 하이테크 SaaS 대시보드, 다크 네이티브 앱, 브루탈리스트 아트 사이트, 게이밍 플랫폼
- provenance: website (Allbirds: Comfortable, Sustainable Shoes & Apparel) — confidence: colors=computed-css, typography=computed-css, radius=computed-css, color_roles=vision-inferred, taxonomy=vision-inferred, dark=vision-inferred, light=computed-css

## Design rules

# Allbirds — Design Specification
## Overview
Allbirds' ecommerce is organic-natural. Warm sand (#ece9e2) canvas, charcoal (#212121) text, muted earth tones. Full-bleed lifestyle photos. Medium-weight typography with uppercase letterspaced labels. Squared buttons, minimal product cards. Natural, warm, sustainable.
## Color Architecture
- Sand #ece9e2 = primary background
- Charcoal #212121 = main text
- Muted greens/browns/taupes = secondary palette
## Agent Prompt Guide
> Sand background, charcoal text, earth tones. Lifestyle photos. Medium-weight fonts, uppercase labels, squared buttons. Natural and warm.
## Known Gaps
- Apercu font proprietary (DM Sans fallback)
- Country selector modal captured in screenshot
- Dark mode synthesized


## Tokens (theme.css — use these values verbatim, do not re-derive)

```css
/* Allbirds — theme.css (generated, do not edit) */
:root {
  --radius: 0px;
  --radius-selector: 4px;
  --radius-field: 4px;
  --font-sans: Apercu, Helvetica Neue, Arial, sans-serif;
  --font-mono: monospace;
  --spacing: 8px;
  --shadow: 0px 1px 16px 0px color-mix(in oklab, oklch(0.5 0.02 80) 6%, transparent);
  --ks-display-weight: 500;
  --background: oklch(0.934 0.010 87.5);
  --foreground: oklch(0.248 0.000 23.8);
  --card: oklch(1.000 0.000 0);
  --card-foreground: oklch(0.248 0.000 23.8);
  --popover: oklch(1.000 0.000 0);
  --popover-foreground: oklch(0.248 0.000 23.8);
  --primary: oklch(0.248 0.000 23.8);
  --primary-foreground: oklch(0.934 0.010 87.5);
  --secondary: oklch(0.695 0.025 75.8);
  --secondary-foreground: oklch(0.248 0.000 23.8);
  --muted: oklch(0.900 0.008 87);
  --muted-foreground: oklch(0.636 0.007 295.4);
  --accent: oklch(0.500 0.080 150);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.850 0.008 87);
  --input: oklch(0.920 0.005 87);
  --ring: oklch(0.248 0.000 23.8);
}

.dark {
  --background: oklch(0.200 0.008 80);
  --foreground: oklch(0.934 0.010 87.5);
  --card: oklch(0.250 0.008 80);
  --card-foreground: oklch(0.934 0.010 87.5);
  --popover: oklch(0.250 0.008 80);
  --popover-foreground: oklch(0.934 0.010 87.5);
  --primary: oklch(0.934 0.010 87.5);
  --primary-foreground: oklch(0.200 0.008 80);
  --secondary: oklch(0.350 0.015 75);
  --secondary-foreground: oklch(0.800 0.010 87);
  --muted: oklch(0.300 0.008 80);
  --muted-foreground: oklch(0.600 0.010 87);
  --accent: oklch(0.500 0.080 150);
  --accent-foreground: oklch(1.000 0.000 0);
  --destructive: oklch(0.577 0.215 27.3);
  --border: oklch(0.350 0.008 80);
  --input: oklch(0.300 0.008 80);
  --ring: oklch(0.934 0.010 87.5);
}
```

## Golden example (exemplar.html — match this structure and token usage)

```html
<section style="background: var(--background); color: var(--foreground); padding: 4rem 2rem; text-align: center;">
  <p style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); margin-bottom: 0.5rem;">ALL NEW COLLECTION</p>
  <h1 style="font-size: 3rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 1rem;">Wildly Comfortable.<br>Super Natural.</h1>
  <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
    <a href="#" style="display: inline-block; background: var(--primary); color: var(--primary-foreground); padding: 0.75rem 1.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; text-decoration: none;">Shop Men</a>
    <a href="#" style="display: inline-block; background: var(--primary); color: var(--primary-foreground); padding: 0.75rem 1.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; text-decoration: none;">Shop Women</a>
  </div>
</section>
<section style="background: var(--card); padding: 3rem 2rem;">
  <div style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;">
    <div>
      <div style="width: 100%; aspect-ratio: 1; background: var(--secondary); margin-bottom: 0.75rem;"></div>
      <p style="font-weight: 500; font-size: 0.875rem; margin: 0 0 0.25rem;">Tree Runner</p>
      <p style="color: var(--muted-foreground); font-size: 0.875rem; margin: 0;">$98</p>
    </div>
    <div>
      <div style="width: 100%; aspect-ratio: 1; background: var(--muted); margin-bottom: 0.75rem;"></div>
      <p style="font-weight: 500; font-size: 0.875rem; margin: 0 0 0.25rem;">Wool Runner</p>
      <p style="color: var(--muted-foreground); font-size: 0.875rem; margin: 0;">$110</p>
    </div>
    <div>
      <div style="width: 100%; aspect-ratio: 1; background: var(--secondary); margin-bottom: 0.75rem;"></div>
      <p style="font-weight: 500; font-size: 0.875rem; margin: 0 0 0.25rem;">Tree Dasher</p>
      <p style="color: var(--muted-foreground); font-size: 0.875rem; margin: 0;">$135</p>
    </div>
    <div>
      <div style="width: 100%; aspect-ratio: 1; background: var(--muted); margin-bottom: 0.75rem;"></div>
      <p style="font-weight: 500; font-size: 0.875rem; margin: 0 0 0.25rem;">SuperLight</p>
      <p style="color: var(--muted-foreground); font-size: 0.875rem; margin: 0;">$125</p>
    </div>
  </div>
</section>
```

## Apply

- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/allbirds.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `<style>` tag and follow the exemplar's markup pattern.
- dark mode: toggle the `.dark` class (both variants are in the tokens above).
- before finishing: re-check every Don't in the Design rules section above against your output.