Allbirds brand guide - v0 by Vercel

Build a premium single-page brand guide website for Allbirds (sustainable shoe company). Use Inter font, Tailwind CSS. Sticky left sidebar nav with smooth scrolling.

COLORS: #8FAE6E (Soft Green/primary), #A8A099 (Warm Gray), #F5F0EB (Off-White/background), #5B8C7A (Eucalyptus Teal/accent), #3C3C3C (Charcoal/text).

Include these sections with a minimal, editorial, high-end brand book feel:

HERO: Full-height. Large "Allbirds" title, "Tread Lighter" tagline, "Brand Guidelines — 2026" subtitle. Simple SVG bird silhouette decoration.
BRAND OVERVIEW: Brand Promise, Elevator Pitch (comfortable shoes from merino wool, eucalyptus, sugarcane with carbon footprint labeling), Mission, Vision, 5 Core Values as cards (Sustainability First, Radical Transparency, Simplicity, Comfort Without Compromise, Curiosity & Innovation).
LOGO USAGE: SVG bird logo placeholder shown in 4 variations (light bg, dark bg, green, teal). DO/DON'T grid with ✓/✗ for correct/incorrect usage.
COLOR PALETTE: Large swatches with names, HEX codes, usage descriptions for all 5 colors.
TYPOGRAPHY: "Aa" display, alphabet, weight specimens (300-700), H1-H6 scale, heading/body/caption examples.
IMAGERY STYLE: Mood board grid with labeled placeholder boxes. DO/DON'T imagery examples.
TONE & VOICE: Voice description, personality traits as pills (Approachable, Honest, Optimistic, Playful, Purposeful), 3 audience-specific copy example cards.
DO'S AND DON'TS: Two columns, green ✓ for Do's, red ✗ for Don'ts. 6 do items, 7 don't items.
BRAND EXPRESSION: Channel cards (Website, Social Media with Instagram/Twitter/LinkedIn/TikTok, Marketing, Advertising, Content Strategy).
KEY MESSAGING: 4 pillar cards ("Made from Nature", "Know Your Footprint", "Comfort Meets Purpose", "Tread Lighter"). Supporting taglines.
FOOTER: "Allbirds Brand Guide — Confidential © 2026"

Nav: active=#5B8C7A, inactive=#A8A099. Responsive. Subtle animations.

Show full message

48d ago

Now I have the design inspiration. Let me build the full brand guide. I'll start with the globals.css and layout, then build all the components.

Now let me build all the files simultaneously:

Now let me build all the section components:

Now let's put it all together in the main page:

Now let me verify all the component files were created correctly and check for any issues:

All files look great. Let me also verify the globals.css and layout.tsx are correct:

Everything is wired up perfectly. Here's what was built:

11 fully-realized sections split into 10 dedicated components plus a sticky sidebar navigator:

Sidebar — Smooth scroll detection with active indicator dot, mobile hamburger toggle with overlay, brand label + confidential footer badge
Hero — Full-height dark charcoal section with large Allbirds title in thin weight, SVG bird silhouette decorations, "Tread Lighter" in brand green, and a scroll pulse indicator
Brand Overview — Brand Promise & Elevator Pitch cards, Mission/Vision duo, and 5 Core Value cards with hover lift
Logo Usage — 4 SVG bird logo variants (light/dark/green/teal), clear space diagram, and ✓/✗ Do/Don't grid
Color Palette — Large horizontal swatch cards showing each of the 5 brand colors with HEX, role, Pantone, usage notes, and a palette strip
Typography — "Aa" display on charcoal bg, alphabet specimen, 5 weight specimens, full H1–H6 scale, and 3 use-case examples
Imagery — Mood board grid with labeled placeholders, imagery Do's & Don'ts columns
Tone & Voice — Voice description, 5 personality trait pills, voice spectrum sliders, and 3 audience-specific copy cards
Do's & Don'ts — Two-column green ✓ / red ✗ cards with titles and descriptions
Brand Expression — 5 channel cards (Website, Social Media with sub-channels, Marketing, Advertising, Content Strategy)
Key Messaging — 4 pillar cards with alternating light/dark backgrounds + master tagline showcase
Footer — SVG bird mark, nav links, confidential label, faded "Tread Lighter." in background

48d ago

Build a premium single-page brand guide website for Allbirds (sustainable shoe company). Use Inter font, Tailwind CSS. Sticky left sidebar nav with smooth scrolling.

COLORS: #8FAE6E (Soft Green/primary), #A8A099 (Warm Gray), #F5F0EB (Off-White/background), #5B8C7A (Eucalyptus Teal/accent), #3C3C3C (Charcoal/text).

Include these sections with a minimal, editorial, high-end brand book feel:

HERO: Full-height. Large "Allbirds" title, "Tread Lighter" tagline, "Brand Guidelines — 2026" subtitle. Simple SVG bird silhouette decoration.
BRAND OVERVIEW: Brand Promise, Elevator Pitch (comfortable shoes from merino wool, eucalyptus, sugarcane with carbon footprint labeling), Mission, Vision, 5 Core Values as cards (Sustainability First, Radical Transparency, Simplicity, Comfort Without Compromise, Curiosity & Innovation).
LOGO USAGE: SVG bird logo placeholder shown in 4 variations (light bg, dark bg, green, teal). DO/DON'T grid with ✓/✗ for correct/incorrect usage.
COLOR PALETTE: Large swatches with names, HEX codes, usage descriptions for all 5 colors.
TYPOGRAPHY: "Aa" display, alphabet, weight specimens (300-700), H1-H6 scale, heading/body/caption examples.
IMAGERY STYLE: Mood board grid with labeled placeholder boxes. DO/DON'T imagery examples.
TONE & VOICE: Voice description, personality traits as pills (Approachable, Honest, Optimistic, Playful, Purposeful), 3 audience-specific copy example cards.
DO'S AND DON'TS: Two columns, green ✓ for Do's, red ✗ for Don'ts. 6 do items, 7 don't items.
BRAND EXPRESSION: Channel cards (Website, Social Media with Instagram/Twitter/LinkedIn/TikTok, Marketing, Advertising, Content Strategy).
KEY MESSAGING: 4 pillar cards ("Made from Nature", "Know Your Footprint", "Comfort Meets Purpose", "Tread Lighter"). Supporting taglines.
FOOTER: "Allbirds Brand Guide — Confidential © 2026"

Nav: active=#5B8C7A, inactive=#A8A099. Responsive. Subtle animations.

Now I have the design inspiration. Let me build the full brand guide. I'll start with the globals.css and layout, then build all the components.

Now let me build all the files simultaneously:

Now let me build all the section components:

Now let's put it all together in the main page:

Now let me verify all the component files were created correctly and check for any issues:

All files look great. Let me also verify the globals.css and layout.tsx are correct:

Everything is wired up perfectly. Here's what was built:

11 fully-realized sections split into 10 dedicated components plus a sticky sidebar navigator:

Sidebar — Smooth scroll detection with active indicator dot, mobile hamburger toggle with overlay, brand label + confidential footer badge
Hero — Full-height dark charcoal section with large Allbirds title in thin weight, SVG bird silhouette decorations, "Tread Lighter" in brand green, and a scroll pulse indicator
Brand Overview — Brand Promise & Elevator Pitch cards, Mission/Vision duo, and 5 Core Value cards with hover lift
Logo Usage — 4 SVG bird logo variants (light/dark/green/teal), clear space diagram, and ✓/✗ Do/Don't grid
Color Palette — Large horizontal swatch cards showing each of the 5 brand colors with HEX, role, Pantone, usage notes, and a palette strip
Typography — "Aa" display on charcoal bg, alphabet specimen, 5 weight specimens, full H1–H6 scale, and 3 use-case examples
Imagery — Mood board grid with labeled placeholders, imagery Do's & Don'ts columns
Tone & Voice — Voice description, 5 personality trait pills, voice spectrum sliders, and 3 audience-specific copy cards
Do's & Don'ts — Two-column green ✓ / red ✗ cards with titles and descriptions
Brand Expression — 5 channel cards (Website, Social Media with sub-channels, Marketing, Advertising, Content Strategy)
Key Messaging — 4 pillar cards with alternating light/dark backgrounds + master tagline showcase
Footer — SVG bird mark, nav links, confidential label, faded "Tread Lighter." in background

48d ago