# UI Baseline

> 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.

- Skill: `nulightjens/ui-baseline` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nulightjens/ui-baseline`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nulightjens/ui-baseline/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: nulightjens (https://skillmd.com/u/nulightjens)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nulightjens/ui-baseline

---


# 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
1. Define the user's primary intent (what they came to accomplish)
2. Identify secondary intents (browsing, comparing, exploring)
3. Map user flow: entry -> key objective -> completion
4. Only add UI elements that serve a defined intent
5. Sketch the flow before opening a design tool

### Content Before Chrome
1. Decide WHAT content to display before HOW to display it
2. Write real content, not lorem ipsum — it surfaces layout problems early
3. Test with imperfect content: long names, missing images, bright backgrounds behind icons
4. 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
1. Pick ONE primary brand color
2. Lighten it for background variant
3. Darken it for text variant
4. Add semantic colors: blue = trust/info, red = danger/error, yellow = warning, green = success
5. 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:

1. Cards **lighter** than background (reversed from light mode)
2. Borders: **lower contrast** — light borders are too harsh
3. Chips/badges: dim saturation AND brightness; flip for text
4. Depth through **background lightness**, not shadows
5. Not just navy/gray — flexibility for deep purples, reds, greens
6. Reduce saturation of accent colors to avoid eye strain
7. 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

1. **Clear but short** — every word earns its place
2. **Don't repeat context** established by headings
3. **Labels match actions** — button text = what happens on click
4. **Charts: readable over aesthetic** — always include axes, flat-top bars, bar count = data count