Synthesized from 8 expert video sources (4.3M+ combined views), Apple HIG, Google Material Design, and Vercel Web Interface Guidelines. Every value is tagged by convergence strength (how many independent sources agree).
Default Mode: Light Monochromatic
Unless the user explicitly requests dark mode or a specific color scheme:
- Light mode — white/near-white backgrounds (#FAFAFA, #FFFFFF)
- Monochromatic palette — one accent color with neutral grays for everything else
- Dark text on light surfaces — primary text #111827, muted text #6B7280
- Single accent — one brand/accent color used at the 10% level (per 60-30-10)
Before You Design
Map User Intent First
- Define the user's primary intent (what they came to accomplish)
- Identify secondary intents (browsing, comparing, exploring)
- Map user flow: entry -> key objective -> completion
- Only add UI elements that serve a defined intent
- Sketch the flow before opening a design tool
Content Before Chrome
- Decide WHAT content to display before HOW to display it
- Write real content, not lorem ipsum — it surfaces layout problems early
- Test with imperfect content: long names, missing images, bright backgrounds behind icons
- Truncate long content with ellipsis; add contrast circles behind icons on variable backgrounds
Respect Layout Conventions
- Information flows top to bottom, left to right
- Navigation at the top of the page
- CTAs are eye-catching and easy to find
- Respect conventions, then differentiate with micro-interactions or unique features
Typography
| Property | Value | Why |
|---|---|---|
| Font families | 1 (max 2 if display + body) | One distinctive sans-serif covers most cases |
| Font sizes | Max 6 landing, max 4 dashboard | Fewer = cleaner hierarchy |
| Font weights | Max 2-3 | Regular + Bold covers 90% of needs |
| Header letter-spacing | -2% to -3% | Tightening large text looks instantly professional |
| Header line-height | 110% to 120% | Tighter than body text |
| Body line-height | 140% to 160% | Standard readability |
| Body font size | 18px responsive baseline | |
| Small text | 14px | |
| Title/H1 | 32px+ (landing pages go larger) | |
| Dashboard max | 24px | Information density demands restraint |
| Numbers | Monospace variant | Prevents layout shift as values change |
The instant-pro hack: Tighten letter-spacing to -2% and drop line-height to 110-120% on any header. Works every time.
Color
The 60-30-10 Rule
- 60% Neutral — white, light gray, background
- 30% Complementary — black, dark gray, text
- 10% Brand — your primary accent color
When everything is your brand color, nothing stands out. Reserve the 10% for what matters.
Building a Color System
- Pick ONE primary brand color
- Lighten it for background variant
- Darken it for text variant
- Add semantic colors: blue = trust/info, red = danger/error, yellow = warning, green = success
- Full system: background, surface, text, text-muted, primary, secondary, accent, semantic + shades
Gradients
- Safe: Same-hue variations (dark green to light green)
- Risky: Two different hues (blue + green) — usually fails
- Best: No gradient. Flat is almost always cleaner.
Spacing
The 8-Point Grid
All spacing values divisible by 4 or 8. Instead of 25px use 24, instead of 11 use 12.
Not because multiples of 8 look better, but because you can always split in half: 32 -> 16 -> 8 -> 4. Automatic consistency.
| Rule | Value |
|---|---|
| Base gap | 32px between major items |
| Desktop columns | 12 |
| Tablet columns | 8 |
| Mobile columns | 4 |
| Mobile spacing | More than desktop, not less |
| Mobile tap target | 44px minimum |
Grouping Is Hierarchy
- Tighter spacing between related elements (group them)
- Wider spacing between separate groups (distinguish them)
- Spacing IS hierarchy — elements closer together are perceived as related
Shadows
| Rule | Value |
|---|---|
| Default shadows | Too strong — always reduce |
| Fix method | Change shadow color to light gray + increase blur |
| Cards | Subtle shadow |
| Popovers/dropdowns | Moderate shadow |
| Modals | Stronger shadow |
| Dark mode | No shadows — use lighter card backgrounds |
| Test | If the shadow is the first thing you notice, it's too strong |
Combine inner + outer shadows for tactile button effects. But most of the time, removing the shadow entirely is the better choice.
Icons
| Rule | Value |
|---|---|
| Size | Match font line-height (24px text = 24px icon) |
| Library | Pick ONE: Lucide, Phosphor, Feather, Flat Icons |
| Style | Same fill type, line weight, corner style |
| Labels | Well-known icons need no labels. Others need tooltips. |
| Pro tip | Different styles OK if in visually separate areas |
Buttons
| Rule | Value |
|---|---|
| Padding | 2:1 width to height |
| Required states | Default, hover, active/pressed, disabled |
| Full states | + focus, loading, error, empty (8 total) |
| Primary + secondary | Filled primary + ghost secondary, side by side |
| Ghost buttons | No background until hover |
| Animation | Buttons should almost always have a small transition |
Corner Radius
Pick ONE radius for small components (8-12px typical) and apply everywhere. Outer radius = inner radius + padding.
Dark Mode
When explicitly designing for dark mode:
- Cards lighter than background (reversed from light mode)
- Borders: lower contrast — light borders are too harsh
- Chips/badges: dim saturation AND brightness; flip for text
- Depth through background lightness, not shadows
- Not just navy/gray — flexibility for deep purples, reds, greens
- Reduce saturation of accent colors to avoid eye strain
- Never pure black (#000) — use near-black (#0f0f0f, #121212, #1a1a1a)
Animation
The Rule
Every animation adds clarity or functionality. Nothing else.
The Spectrum
| Always | Button state transitions |
|---|---|
| Almost always | Navigation collapse/expand |
| Often | Progressive disclosure (search expand, load more) |
| Sometimes | Micro interactions (copy confirmation) |
| Rarely | Page-level transitions |
| Almost never | Scroll-jacking |
| Never | Decorative animation that delays the user |
Progressive Disclosure
Show what's needed, reveal more as required. Load more > infinite scroll.
Senior Insight
Treat multi-screen flows like a movie. The transitions between screens create delight. Static screens are only half the job.
UI Copy
- Clear but short — every word earns its place
- Don't repeat context established by headings
- Labels match actions — button text = what happens on click
- Charts: readable over aesthetic — always include axes, flat-top bars, bar count = data count