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:
1 parent
e3738f2b3e
commit
76c4c5b4fe
233 files changed
+54886
-1
No files matched your search
@@ -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
|
||||
Reference in new issue
Block a user