design git:20260609.051dd65A

Immutable. This exact content is served forever at /api/v1/blob/bc4f0f9e4f2b37f8.

---
name: design
description: Modern web design principles for building pages via mcpwp — typography, color palettes, card styling, responsive layouts, hero sections. Use before building or redesigning pages.
user-invocable: true
---

# Page Design Guide

Modern web design principles for building pages via mcpwp. $ARGUMENTS = style or project context.

## 2026 Design Principles

### Layout
- Generous whitespace: 80-120px section padding, 40-60px between elements
- Full-width sections alternating with boxed content (max 1200px)
- Mobile-first: stack to single column below 768px

### Typography
- One font family, two weights max
- Hero: 48-72px headlines, body: 18-20px
- Line height: 1.1-1.2 headlines, 1.5-1.7 body

### Cards
- Border radius: 12-16px
- Box shadow: `0 4px 20px rgba(0,0,0,0.08)`
- Hover: `translateY(-4px)` + deeper shadow, 0.3s ease
- Internal padding: 30-40px

### Color Palettes

**Dark Tech:** Primary #6366F1 | Accent #22D3EE | BG #0F172A | Text #F8FAFC
**Clean SaaS:** Primary #2563EB | Accent #F59E0B | BG #FFFFFF | Text #1E293B
**Bold Startup:** Primary #DC2626 | Accent #FBBF24 | BG #18181B | Text #FAFAFA
**Nature/Calm:** Primary #059669 | Accent #8B5CF6 | BG #F0FDF4 | Text #1C1917

### Hero Best Practices
- One headline (what it does, not what it is)
- One subheadline (1-2 sentences)
- One primary CTA (action verb)
- Dark or gradient background
- No clutter

### Feature Grid
- 3 columns desktop, 1 mobile
- Icon + title + description per card
- Left-aligned text
- Equal card heights via flex

### Responsive Card Widths
- 3-col: 30% desktop, 47% tablet, 100% mobile
- 2-col: 47% desktop, 100% mobile
- 4-col: 22% desktop, 47% tablet, 100% mobile

### Don't
- Walls of text without whitespace
- Center-align body text
- Multiple CTAs per section
- Auto-playing video backgrounds
- Stock photo heroes
- Carousel sliders for important content