Menu
Unified UI/UX design principles — 12 masters distilled into one actionable reference
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | ui-ux |
| description | Unified UI/UX design principles — 12 masters distilled into one actionable reference |
Distilled from 12 design masters: Norman (usability), Ive (visual), Frost (components), Rams (philosophy), Wroblewski (mobile), Duarte (motion), Buxton (interaction), Kruzeniski (typography), Curtis (tokens), Cooper (personas), Mall (collaboration), and modern frontend aesthetics.
Less, but better (Rams). Every element earns its place or gets removed.
Polite software (Cooper): remembers preferences, doesn't ask the same question twice, anticipates needs, admits mistakes gracefully, never blames the user.
Eliminate excise — work that doesn't advance the user's goal:
| Excise Type | Example | Fix |
|---|---|---|
| Navigation | 5 clicks for one task | Flatten, direct access |
| Input | Re-entering known data | Auto-fill, remember choices |
| Confirmation | "Are you sure?" for reversible actions | Undo instead |
| Output | Raw data the user must interpret | Present meaningful info |
/* Neutral scale — use for 90% of UI (Ive) */
--gray-50: #f9fafb; /* Backgrounds */
--gray-100: #f3f4f6; /* Alt backgrounds */
--gray-200: #e5e7eb; /* Borders, dividers */
--gray-400: #9ca3af; /* Placeholder text */
--gray-500: #6b7280; /* Secondary text */
--gray-600: #4b5563; /* Body text */
--gray-800: #1f2937; /* Headings (not pure black) */
/* ONE accent color, used sparingly (Rams: max 3 colors) */
--accent: #3b82f6;
--accent-hover: #2563eb;
--accent-light: #eff6ff;
/* Semantic — fixed meanings */
--success: #10b981;
--warning: #f59e0b;
--error: #ef4444;
Rules: Never use #000000 for text. Body text is --gray-600, not primary. One accent color throughout the entire app.
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05); /* Cards at rest */
--shadow-2: 0 4px 6px rgba(0, 0, 0, 0.07); /* Hover, dropdowns */
--shadow-3: 0 10px 15px rgba(0, 0, 0, 0.1); /* Modals */
--shadow-4: 0 20px 25px rgba(0, 0, 0, 0.15); /* Popovers */
Depth layers bottom-to-top: background > content surface > interactive elements > overlays > alerts (Ive).
/* 4px base unit — never use arbitrary values (Rams) */
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
--space-8: 32px; --space-10: 40px; --space-12: 48px;
--space-16: 64px;
--radius-sm: 4px; /* Buttons, inputs */
--radius-md: 8px; /* Cards, panels */
--radius-lg: 12px; /* Modals */
--radius-full: 9999px; /* Pills, avatars */
/* Nested elements decrease radius (Ive) */
Type IS the interface (Kruzeniski). Well-designed typography eliminates need for visual chrome — size creates hierarchy, weight creates emphasis, space creates grouping.
--text-xs: 12px; /* Captions, timestamps */
--text-sm: 14px; /* Labels, secondary */
--text-base: 16px; /* Body (never smaller) */
--text-lg: 18px; /* Lead paragraphs */
--text-xl: 20px; /* H4, card titles */
--text-2xl: 24px; /* H3, section headers */
--text-3xl: 30px; /* H2 */
--text-4xl: 36px; /* H1 */
--text-5xl: 48px; /* Display/hero */
--font-normal: 400; /* Body */
--font-medium: 500; /* Labels, nav */
--font-semibold: 600; /* Headings */
--font-bold: 700; /* Hero only, rare */
/* Line height: tighter for headings, looser for body */
--leading-tight: 1.25; /* Headings */
--leading-normal: 1.5; /* Body (minimum) */
/* Letter spacing: tighten large, widen small */
.display { letter-spacing: -0.02em; }
.heading { letter-spacing: -0.01em; }
.caps { letter-spacing: 0.05em; }
Rules:
max-width: 65ch#000000 for text--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
Atomic Design (Frost): atoms → molecules → organisms → templates → pages.
| Level | What | Example |
|---|---|---|
| Atoms | HTML elements + styles | Button, input, label, icon |
| Molecules | Simple component groups | Search field (icon + input + button) |
| Organisms | Complex standalone sections | Site header, product grid, card |
| Templates | Page layouts, content-agnostic | Article layout, dashboard shell |
| Pages | Templates + real content | The actual screen |
Rules:
.btn--success not .special-checkout-button.card (block), .card__title (element), .card--featured (modifier)Global → Semantic → Component
/* Global: raw values */
--color-blue-500: #3b82f6;
/* Semantic: purpose aliases */
--color-primary: var(--color-blue-500);
/* Component: specific usage */
--button-color: var(--color-primary);
Tokens are contracts. Changes break consumers. Version them semantically.
| Action | Response Time | Type |
|---|---|---|
| Button click | < 100ms | Visual state change |
| Form validation | On blur | Inline error |
| API call start | Immediate | Loading indicator |
| API call success | On complete | Auto-dismiss success |
| API call failure | On complete | Persistent error |
Time to target = f(distance, size). Implications:
.touch-target {
min-width: 44px;
min-height: 44px;
}
/* 8px minimum gap between targets */
.button + .button {
margin-left: 8px;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* NEVER outline: none without replacement */
/* Tab order: logical, top-to-bottom, left-to-right */
Bad: "Error", "Invalid input", "Something went wrong" Good: "Email must include @ symbol", "Password must be at least 8 characters"
Rules: say what went wrong, say how to fix it, place message near the problem, use red + icon (for colorblind users).
Mobile first (Wroblewski): start with smallest screen, then add. Desktop is mobile with more space.
/* Base styles = mobile */
.container { padding: 16px; }
@media (min-width: 640px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
| Mobile | Tablet | Desktop |
|---|---|---|
| 1 column | 2 columns | 3-4 columns |
| Bottom nav | Bottom nav or sidebar | Sidebar |
| Full-width cards | Card grid | Card grid + filters |
┌─────────────────────┐
│ Hard to reach │ ← Settings, nav
│ Natural reach │ ← Content
│ Easy (thumb) │ ← Primary actions
└─────────────────────┘
Primary actions in bottom 1/3. Destructive actions NOT in easy zone.
email, tel, number, date (triggers correct keyboard)[Full name] not [First] [Last].bottom-nav {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom); /* iPhone notch */
}
Max 5 items. Icons + labels (not just icons). Active state visible.
Animation is communication, not decoration (Duarte). If "it looks cool" is the reason — remove it.
--duration-instant: 50ms; /* Button press */
--duration-fast: 150ms; /* Hover states */
--duration-normal: 300ms; /* Cards, modals */
--duration-slow: 500ms; /* Page transitions */
/* NOTHING over 500ms */
--ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* Entering */
--ease-in: cubic-bezier(0.4, 0.0, 1, 1); /* Exiting */
--ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); /* On-screen moves */
/* NEVER linear for UI motion */
Rules:
prefers-reduced-motion@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
aria-label on icon-only buttons@media (hover: none) {
/* Touch device — no hover effects */
.button:hover { background: inherit; }
}
Avoid generic AI aesthetics (frontend-design):
Never: Inter/Roboto/Arial as defaults, purple gradients on white, predictable cookie-cutter layouts, same design every time.
Instead: Choose a bold aesthetic direction and execute with precision. Typography that has character. Dominant colors with sharp accents. Unexpected layouts — asymmetry, overlap, generous negative space. Atmosphere through gradient meshes, noise textures, layered transparencies.
Match implementation to vision: maximalist needs elaborate animation; minimalist needs precision spacing and subtle detail.
prefers-reduced-motion respected| Pattern | Why It's Bad | Fix |
|---|---|---|
| Gradient buttons | Dated, less accessible | Solid accent color |
| Multiple accent colors | Confused hierarchy | Pick one |
| 13px body text | Fails accessibility | 16px minimum |
| Full-width paragraphs | Exhausting to read | max-width: 65ch |
| Placeholder as label | Disappears on input | Real label above |
| Hover-only menus | Unusable on touch | Tap to open |
| Removing focus outline | Unusable with keyboard | Style it, don't remove |
| "Are you sure?" everywhere | Trains users to ignore | Undo instead |
| Modal on modal | Trapped, confusing | Redesign flow |
| > 500ms animations | Feels slow, blocking | Speed up |
| Linear easing | Robotic, unnatural | ease-out / ease-in |
| Hamburger for primary nav | Hidden = unused | Bottom nav |
| Animation without purpose | Decoration, not communication | Remove or justify |
| Pure black text (#000) | Harsh, vibrates on screens | Use #1f2937 |
| Over-the-wall handoff | No feedback loop | Hot potato collaboration |
Audit a project against a canon's rules and checklist. Read-only — produces prioritized report without fixing. Works with any canon (nextjs, sql, typescript, etc.).
Lens home base - status, help, and setup
Plan and build a new feature with quality gates.
Simple changes done right. Make the change, clean up after yourself, report what happened.
Review against canons + quality gate, fix findings, verify. Claude-native — no external models.
Plan and improve existing code with quality gates.