Create a single-page Allbirds brand guide that looks like a digitized brand book PDF. No navigation bar or menus — this is a document, not a website. Clean white background, generous whitespace, max-width 1100px centered, accent color Eucalyptus Green #4A7C59.
Sections with subtle "01", "02" numbering:
01 COVER: Full viewport. "Allbirds Brand Guide" title, "Tread Lighter" subtitle, organic decorative element, intro about founding in 2016.
02 BRAND FOUNDATION: Purpose, Vision, 5 Core Values, Brand Promise quote.
03 COLOR PALETTE: 9 LARGE swatches in 3x3 grid (Allbirds White #FFFFFF, Natural Cream #F5F0EB, Eucalyptus Green #4A7C59, Wool Gray #B0A999, Trino Blue #3A6B8C, SweetFoam Sand #D4C5A9, Carbon Black #2C2C2C, Sunset Coral #E07A5F, Sky Mist #C8D6DF) with names, hex codes, usage notes.
04 TYPOGRAPHY: GT America headings, Neue Haas Grotesk body, Freight Text editorial — with rendered samples.
05 VOICE AND TONE: Voice traits, tone contrasts, do's and don'ts.
06 KEY MESSAGING: Tagline, elevator pitch, 3 pillars, audience messages.
07 TARGET AUDIENCES: 3 persona cards (Mindful Maya, Practical Pete, Activist Anika).
08 BRAND EXPRESSION: Imagery, logo usage, aesthetic guidelines.
Footer: "Allbirds Brand Guide — Confidential — 2026"
Now let me build the full brand guide page:
Now let me build all the components and update the styles:
Now let me create all the section components:
Now let me write the main page:
Now let me add a subtle outer wrapper styling to globals.css to make it feel like a PDF document on a gray background:
Now let me also add some top/bottom padding to the body so the document floats on the gray:
Now let me verify the layout.tsx is correct with the new fonts:
The fonts need className variables applied to body. Let me fix that:
The Allbirds brand guide is complete. Here's what was built across 8 distinct sections:
Architecture: 8 standalone React components (CoverSection, BrandFoundation, ColorPalette, TypographySection, VoiceTone, KeyMessaging, TargetAudiences, BrandExpression) assembled in page.tsx — no navigation, just a document flow.
Design decisions: The page floats as a white document (max-width 1100px, box-shadowed) on a warm gray #ECEAE6 background — exactly like a high-fidelity PDF viewer. Section separators use a subtle warm-gradient rule, Inter handles all sans-serif UI copy, and Lora stands in for the editorial serif typeface throughout pull quotes and specimens.
Key highlights: The 3×3 color grid shows every swatch at full 192px height with hex codes overlaid in contrast-appropriate colors; the Voice & Tone section has a live strikethrough "we are not" column; the three persona cards are color-coded per audience archetype; and the logo usage section demonstrates all four approved background applications. All Eucalyptus Green #4A7C59 branding is consistent across accent lines, section labels, and the footer border.