Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/color-theory.md

@@ -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