Color Palette
Colors
Light Mode
Dark Mode
Typography
Fonts
DM Sans
system-ui, -apple-system, Segoe UI, sans-serif
Khand
Arial Narrow, Impact, sans-serif
Khand
Arial Narrow, Impact, sans-serif
Patrick Hand
Comic Sans MS, cursive
The quick brown fox
17pxThe quick brown fox
194.4pxThe quick brown fox
136.8pxThe quick brown fox
100.8pxComponents
Design System
rgba(0, 0, 0, 0.25) 0px -20px 60px 0px
rgba(43, 20, 32, 0.28) 0px 24px 60px 0px, rgba(43, 20, 32, 0.06) 0px 0px 0px 1px
rgba(43, 20, 32, 0.12) 0px 6px 24px 0px
Voice & Tone
Personality
Visual Energy
Design Era
contemporary
Emotional Tone
professional
Target Audience
general audience
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/aroniaceae.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.