# Design Patterns Reference

## Style Categories

When user requests a specific style, apply these characteristics:

| Style | Key traits | Best for |
|-------|-----------|----------|
| Minimalism | White space, limited palette, thin typography | SaaS, portfolios, docs |
| Glassmorphism | Frosted glass, blur, transparency, subtle borders | Dashboards, modals, cards |
| Neumorphism | Soft shadows, extruded/inset, monochrome base | Settings panels, controls |
| Brutalism | Raw, bold type, harsh colors, exposed structure | Creative agencies, portfolios |
| Bento Grid | Card-based grid, mixed sizes, clean gaps | Feature showcases, dashboards |
| Dark Mode | Dark backgrounds, high-contrast accents, reduced blue light | Dev tools, media, productivity |
| Flat Design | No shadows, solid colors, simple shapes | Mobile apps, icons, infographics |
| Skeuomorphism | Real-world textures, depth, realistic elements | Games, music apps, niche tools |

## Color Palette Selection

Match palette to product type:

| Product type | Primary direction | Accent direction |
|-------------|-------------------|------------------|
| SaaS / Business | Blue, Indigo | Green for success, Orange for CTA |
| E-commerce | Brand-specific | Red/Orange for urgency, Green for trust |
| Healthcare | Teal, Blue | Soft green for positive, warm gray for neutral |
| Finance | Navy, Dark blue | Gold/amber for premium, green for growth |
| Creative / Portfolio | Flexible — match brand personality | High-contrast accent |
| Developer tools | Dark bg, cool grays | Cyan/green for syntax, warm for warnings |

## Typography Pairing Principles

- **Heading + Body**: contrast weight/style (e.g., bold geometric heading + regular humanist body)
- **Max 2 families**: one for headings, one for body. More = visual noise.
- **Scale**: use a modular scale (1.25 or 1.333 ratio) for consistent hierarchy
- **Line height**: 1.5–1.75 for body text, 1.1–1.3 for headings
- **Line length**: 65–75 characters for readability

## Responsive Breakpoints

| Breakpoint | Target | Design approach |
|-----------|--------|----------------|
| 320px+ | Mobile (small) | Single column, stacked, thumb-zone navigation |
| 768px+ | Tablet | 2-column options, expanded navigation |
| 1024px+ | Desktop | Full layout, sidebar options, hover states |
| 1440px+ | Large desktop | Max-width container, wider gutters |

Always design mobile-first, enhance upward.
