Hang Tight! Routing to checkout...
patagonia.com“A stark, utilitarian interface that prioritizes clarity and function over decoration. The brand communicates a sense of calm efficiency and technical precision, using high-contrast monochrome elements to guide the user without distraction.”
Color Palette
Colors
Typography
Fonts
AvenirNextLTW02-Medium
Helvetica, Arial, Verdana, sans-serif
Avenir Next LT W02 Bold
Helvetica, Arial, Verdana, sans-serif
Avenir Next W02 Light
Helvetica, Arial, Verdana, sans-serif
Helvetica
Avenir Next W02 Light
Helvetica, Arial, Verdana, sans-serif
The quick brown fox
16pxThe quick brown fox
23pxThe quick brown fox
14pxVoice & Tone
Personality
Visual Energy
Design Era
contemporary-minimal
Emotional Tone
calm-efficient
Target Audience
Users seeking frictionless, reliable interactions who value clarity and speed over entertainment or luxury signaling.
Comparable Brands
Brand Rules
Dos & Don'ts
Do
- Use Avenir Next LT W02 Bold (700) for all headings in uppercase, ensuring strong visual hierarchy.
- Use AvenirNextLTW02-Medium (400) for primary body text to maintain readability and a modern feel.
- Apply a strict monochrome color palette: #ffffff for backgrounds and #000000 for text and primary interactive elements.
- Implement a base spacing unit of 2px for all margins and padding to ensure precise, grid-aligned layouts.
- Use short, imperative phrases for CTAs (e.g., 'Sit tight') to indicate status or action without fluff.
- Avoid all decorative effects: no box-shadows, no gradients, and no border-radius on interactive elements (sharp corners).
- Use Helvetica (700) as a system fallback for headings if Avenir Next is unavailable, maintaining the uppercase convention.
- Keep copy simple and jargon-free, focusing on matter-of-fact communication with rare use of exclamations.
Don't
- Do not use emojis in any marketing copy or UI text; the brand relies on plain language.
- Do not apply box-shadows or gradients to buttons, cards, or any UI component; maintain a flat design.
- Do not use rounded corners (border-radius > 0) or pill-shaped buttons; keep all shapes sharp and geometric.
- Do not use title case or sentence case for headings; strictly enforce uppercase for all heading levels.
- Do not use serif fonts or light font weights for body text; stick to sans-serif (Avenir/Helvetica) at 400 weight.
- Do not use vibrant or multi-color palettes; avoid any color other than black and white for primary branding.
- Do not use long, descriptive sentences for CTAs; keep action phrases short and imperative.
- Do not use decorative dividers or ornamental icons; rely on spacing and typography for structure.
Design Assets
Visual Elements
How to use this file
1. Save this file as DESIGN.md in your project root (sibling to README.md).
2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.
3. Validate or export tokens with the official CLI:
npx @google/design.md lint DESIGN.md npx @google/design.md export --format tailwind DESIGN.md
Developer Access
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/patagonia.com \
-H "x-api-key: ev_your_key"
# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
-H "x-api-key: ev_your_key"
# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
-H "x-api-key: ev_your_key"Extract your own brand kit
Get colors, fonts, voice, and personality from any website in seconds. Open source.