design

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