UI Baseline — Design Values That Separate Pro from Amateur
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
1---2name: ui-baseline3description: Specific UI design values and rules — typography, color, spacing, shadows, icons, buttons, dark mode, animation. Converged from 8 expert sources. Use before writing any UI code.4---56# UI Baseline — Design Values That Separate Pro from Amateur78Synthesized 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).910## Default Mode: Light Monochromatic1112Unless the user explicitly requests dark mode or a specific color scheme:1314- **Light mode** — white/near-white backgrounds (#FAFAFA, #FFFFFF)15- **Monochromatic palette** — one accent color with neutral grays for everything else16- **Dark text on light surfaces** — primary text #111827, muted text #6B728017- **Single accent** — one brand/accent color used at the 10% level (per 60-30-10)1819---2021## Before You Design2223### Map User Intent First241. Define the user's primary intent (what they came to accomplish)252. Identify secondary intents (browsing, comparing, exploring)263. Map user flow: entry -> key objective -> completion274. Only add UI elements that serve a defined intent285. Sketch the flow before opening a design tool2930### Content Before Chrome311. Decide WHAT content to display before HOW to display it322. Write real content, not lorem ipsum — it surfaces layout problems early333. Test with imperfect content: long names, missing images, bright backgrounds behind icons344. Truncate long content with ellipsis; add contrast circles behind icons on variable backgrounds3536### Respect Layout Conventions37- Information flows **top to bottom, left to right**38- Navigation at the **top** of the page39- CTAs are **eye-catching and easy to find**40- Respect conventions, then differentiate with micro-interactions or unique features4142---4344## Typography4546| Property | Value | Why |47|---|---|---|48| Font families | **1** (max 2 if display + body) | One distinctive sans-serif covers most cases |49| Font sizes | **Max 6** landing, **max 4** dashboard | Fewer = cleaner hierarchy |50| Font weights | **Max 2-3** | Regular + Bold covers 90% of needs |51| Header letter-spacing | **-2% to -3%** | Tightening large text looks instantly professional |52| Header line-height | **110% to 120%** | Tighter than body text |53| Body line-height | **140% to 160%** | Standard readability |54| Body font size | **18px** responsive baseline | |55| Small text | **14px** | |56| Title/H1 | **32px+** (landing pages go larger) | |57| Dashboard max | **24px** | Information density demands restraint |58| Numbers | **Monospace** variant | Prevents layout shift as values change |5960**The instant-pro hack:** Tighten letter-spacing to -2% and drop line-height to 110-120% on any header. Works every time.6162---6364## Color6566### The 60-30-10 Rule67- **60% Neutral** — white, light gray, background68- **30% Complementary** — black, dark gray, text69- **10% Brand** — your primary accent color7071When everything is your brand color, nothing stands out. Reserve the 10% for what matters.7273### Building a Color System741. Pick ONE primary brand color752. Lighten it for background variant763. Darken it for text variant774. Add semantic colors: blue = trust/info, red = danger/error, yellow = warning, green = success785. Full system: background, surface, text, text-muted, primary, secondary, accent, semantic + shades7980### Gradients81- **Safe:** Same-hue variations (dark green to light green)82- **Risky:** Two different hues (blue + green) — usually fails83- **Best:** No gradient. Flat is almost always cleaner.8485---8687## Spacing8889### The 8-Point Grid90All spacing values divisible by **4 or 8**. Instead of 25px use 24, instead of 11 use 12.9192Not because multiples of 8 look better, but because you can always split in half: 32 -> 16 -> 8 -> 4. Automatic consistency.9394| Rule | Value |95|---|---|96| Base gap | **32px** between major items |97| Desktop columns | **12** |98| Tablet columns | **8** |99| Mobile columns | **4** |100| Mobile spacing | **More than desktop**, not less |101| Mobile tap target | **44px** minimum |102103### Grouping Is Hierarchy104- Tighter spacing between **related** elements (group them)105- Wider spacing between **separate** groups (distinguish them)106- Spacing IS hierarchy — elements closer together are perceived as related107108---109110## Shadows111112| Rule | Value |113|---|---|114| Default shadows | **Too strong** — always reduce |115| Fix method | Change shadow **color** to light gray + increase **blur** |116| Cards | Subtle shadow |117| Popovers/dropdowns | Moderate shadow |118| Modals | Stronger shadow |119| Dark mode | **No shadows** — use lighter card backgrounds |120| Test | If the shadow is the first thing you notice, it's too strong |121122Combine inner + outer shadows for tactile button effects. But most of the time, removing the shadow entirely is the better choice.123124---125126## Icons127128| Rule | Value |129|---|---|130| Size | Match **font line-height** (24px text = 24px icon) |131| Library | Pick ONE: Lucide, Phosphor, Feather, Flat Icons |132| Style | Same fill type, line weight, corner style |133| Labels | Well-known icons need no labels. Others need tooltips. |134| Pro tip | Different styles OK if in **visually separate areas** |135136---137138## Buttons139140| Rule | Value |141|---|---|142| Padding | **2:1 width to height** |143| Required states | Default, hover, active/pressed, disabled |144| Full states | + focus, loading, error, empty (8 total) |145| Primary + secondary | Filled primary + ghost secondary, side by side |146| Ghost buttons | No background until hover |147| Animation | Buttons should almost always have a small transition |148149---150151## Corner Radius152Pick ONE radius for small components (8-12px typical) and apply everywhere. Outer radius = inner radius + padding.153154---155156## Dark Mode157158When explicitly designing for dark mode:1591601. Cards **lighter** than background (reversed from light mode)1612. Borders: **lower contrast** — light borders are too harsh1623. Chips/badges: dim saturation AND brightness; flip for text1634. Depth through **background lightness**, not shadows1645. Not just navy/gray — flexibility for deep purples, reds, greens1656. Reduce saturation of accent colors to avoid eye strain1667. Never pure black (#000) — use near-black (#0f0f0f, #121212, #1a1a1a)167168---169170## Animation171172### The Rule173Every animation adds **clarity or functionality**. Nothing else.174175### The Spectrum176| Always | Button state transitions |177|---|---|178| Almost always | Navigation collapse/expand |179| Often | Progressive disclosure (search expand, load more) |180| Sometimes | Micro interactions (copy confirmation) |181| Rarely | Page-level transitions |182| Almost never | Scroll-jacking |183| Never | Decorative animation that delays the user |184185### Progressive Disclosure186Show what's needed, reveal more as required. Load more > infinite scroll.187188### Senior Insight189Treat multi-screen flows like a movie. The transitions between screens create delight. Static screens are only half the job.190191---192193## UI Copy1941951. **Clear but short** — every word earns its place1962. **Don't repeat context** established by headings1973. **Labels match actions** — button text = what happens on click1984. **Charts: readable over aesthetic** — always include axes, flat-top bars, bar count = data count
nulightjens