design-systems: add 74 brand DESIGN.md files (VoltAgent/awesome-design-md)

- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc.
- 147 files: DESIGN.md + README.md per brand (~2.1 MB)
- Each DESIGN.md contains structured brand analysis (colors, typography, components)
- Updated 00-overview.md with new design-systems directory
This commit is contained in:
neo committed 2026-06-21 20:40:35 +05:00
1 parent e3738f2b3e
commit 76c4c5b4fe
233 files changed
+54886 -1

No files matched your search

+60
View File
@@ -0,0 +1,60 @@
---
title: Color Theory for Web
description: Understanding color harmony, contrast, and psychological impact.
tags: [color, theory, psychology, contrast, harmony]
---
# Color Theory for Web
## Color Harmony Models
### Monochromatic (Safe)
- Single hue with tints/shades
- Use: backgrounds, subtle UI
- Example: `#0a0a0a` → `#1a1a1a` → `#2a2a2a`
### Analogous (Natural)
- Colors next to each other on wheel
- Use: gradients, section backgrounds
- Example: `#6366f1` → `#8b5cf6` → `#a78bfa`
### Complementary (Bold)
- Opposite colors on wheel
- Use: CTAs, accent elements
- Example: `#6366f1` + `#f59e0b`
### Triadic (Vibrant)
- Three colors 120° apart
- Use: feature cards, badges
- Example: `#6366f1` + `#10b981` + `#f59e0b`
## Color Roles
| Role | Ratio | Purpose | Example |
|------|-------|---------|---------|
| Background | 60% | Canvas | `#0a0a0a` |
| Surface | 30% | Cards, sections | `#111111` |
| Accent | 10% | CTA, links, highlights | `#6366f1` |
## WCAG Contrast Ratios
| Level | Ratio | Use Case |
|-------|-------|----------|
| AA Normal | 4.5:1 | Body text (16px) |
| AA Large | 3:1 | Headings, icons >24px |
| AAA | 7:1 | Critical information |
## Psychological Color Mapping
- **Blue (#6366f1)**: Trust, technology, reliability
- **Green (#10b981)**: Success, growth, action
- **Orange (#f59e0b)**: Warning, urgency, attention
- **Red (#ef4444)**: Error, danger, delete
- **Purple (#8b5cf6)**: Creativity, premium, AI
- **Cyan (#06b6d4)**: Innovation, futuristic, data
## Anti-Patterns
- Never use more than 3 accent colors
- Never put accent color on text without checking contrast
- Never use pure `#000000` or `#ffffff`
- Never ignore dark/light mode variants