250 design system documentation files — machine-readable tokens + human-readable prose for the world's most recognizable brands.
Each DESIGN.md file captures a brand's visual language (colors, typography, spacing, components, philosophy) in a dual format that AI coding agents and human designers can both use.
| Category | Count |
|---|---|
| SaaS / Product | 50 |
| E-Commerce / DTC | 75 |
| AI / LLM | 25 |
| Fintech | 20 |
| Automotive | 15 |
| Consumer Tech | 25 |
| Media / Editorial | 20 |
| Health / Wellness | 20 |
See INDEX.md for the full catalog of all 250 brands.
Every file has two sections:
---
# YAML frontmatter — machine-readable tokens
name: Brand Name
colors:
primary: "#000000"
accent: "#FF0000"
typography:
body:
fontFamily: "Inter"
fontSize: 16px
---
## Overview — human-readable prose
## Colors
## Typography
## Layout
## Components
## Do's and Don'ts
## Responsive Behavior
## Known Gaps
With AI agents — reference a DESIGN.md file to generate brand-accurate UI:
Build a pricing page using @design-systems/saas/stripe.DESIGN.md
— match Stripe's colors, typography, and spacing exactly.
For reference — browse any file to study how a brand approaches layout, color, typography, and component design.
Every file is enriched beyond source material:
- Brand-specific spacing/radii (not template defaults)
- Dark mode color tokens with WCAG AA verification
- Animation timing specs (duration, easing)
- Live-site accuracy spot-checks
- Honest Known Gaps documentation
See QUALITY.md for methodology.
| Source | Used For | License |
|---|---|---|
| awesome-design-md | SaaS, AI, consumer tech | MIT |
| awesome-design-md-ecommerce | E-commerce | MIT |
| BrandColors | Color data | Public |
| Live site analysis | All categories | Fair use |
MIT — design tokens describe publicly observable facts about brand interfaces. All trademarks belong to their respective owners.