Designer With Taste

Designer With Taste

Design philosophy distilled from 212 real-world design principle sets — Dieter Rams, Nielsen, Don Norman, Maeda, Apple, Google Material, GOV.UK, Airbnb, Spotify, Figma, and 202 others.

Reference Files

Read the relevant reference file(s) BEFORE designing. Multiple files may apply.

Quick-Reference: Design Token Starter

Use assets/tokens.css as a starting point for any new interface. It contains a complete design token system (spacing, type, color, motion, elevation) ready to import.

Use templates/component-starter.html for a batteries-included HTML starter with semantic markup, accessible patterns, and the token system pre-loaded.

I. THE FOUNDATIONAL STANCE

Before any pixel or line of code, internalize these four meta-principles that recur across virtually all 212 sources:

1. Design is for people, not screens

UX starts and ends with people (Erik Dahl). You're designing an experience that helps someone accomplish something meaningful (Joshua Porter). Talk to users, watch them, have empathy. What they ask for isn't always what they need (GOV.UK).

2. Every decision needs a rationale

"Because it's trendy" is never good enough (UX Axioms). Every element, color, animation, and word must earn its place. If you can't articulate why something exists, remove it. Dieter Rams: concentrate on the essential.

3. Simplicity is the hardest work

Making something look simple is easy. Making something simple to use is much harder (GOV.UK). Simplicity is subtracting the obvious and adding the meaningful (John Maeda). Don't push complexity onto users — absorb it yourself.

4. Taste is pattern recognition plus courage

Taste means knowing when to follow convention (consistency builds trust) and when to break it (differentiation creates delight). Have strong opinions, hold them loosely, validate with humans.

II. THE 12 PILLARS — QUICK REFERENCE

Full details in references/pillars.md. Here's the cheat sheet:

PILLAR 1: Hierarchy & Focus

One primary action per screen. Visual hierarchy is the skeleton. Eliminate before organizing. Progressive disclosure. (Whitney Hess, Degreed, Apple, Nielsen)

PILLAR 2: Consistency & Familiarity

Internal consistency (same action = same result). External consistency (respect platform norms). Be consistent, not uniform (GOV.UK). Design systems are lego boxes. (Don Norman, Spotify, Atlassian)

PILLAR 3: Feedback & Responsiveness

Every action gets a response. Show system status always. Motion communicates relationships. UIs are conversations — close feedback loops. (Shneiderman, Apple, Material Design, Nielsen)

PILLAR 4: Accessibility & Inclusion

Design for the full spectrum — permanent, temporary, situational disabilities. Provide comparable experiences. Don't sacrifice clarity for elegance. (WCAG, Paciello Group, GOV.UK, NHS)

Non-negotiable minimums:

• 4.5:1 contrast ratio for text
• Keyboard navigable, visible focus indicators
• Semantic HTML (headings, landmarks, buttons)
• 16px minimum body text, 1.5 line-height
• prefers-reduced-motion respected
• Screen-reader tested

PILLAR 5: Content & Language

Use the user's language, not jargon. Content-first design (real text, not lorem ipsum). Tone is interface. Error messages: what happened + why + how to fix. (NHS, GOV.UK, Bristol Council)

PILLAR 6: Typography & Visual Craft

Typography creates hierarchy without effort. Choose fonts with character. Consistent grid + baseline. White space is structure, not emptiness. (Material Design, Edenspiekermann, Apple)

Type system:

Display:  32-48px bold     |  Subtitle: 18-20px medium
Title:    24-28px semibold  |  Body:     16px regular, 1.5lh
Caption:  13-14px regular   |  Overline: 11-12px uppercase

Spacing scale (8px base):
4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 96 | 128

PILLAR 7: Color & Emotion

Every color serves a function. Dominant + accent beats even distribution. Design for emotion. Support both dark and light themes. (Rams, MUJI, UX Axioms, Schlatter)

PILLAR 8: Motion & Delight

Motion explains relationships, not decorates. One orchestrated moment > scattered micro-interactions. Physics, not math (ease curves, springs). (Material Design, Calm Technology, Apple)

Timing: Micro: 100-150ms | Small: 200-250ms | Medium: 300-400ms | Large: 400-600ms

PILLAR 9: Error Prevention & Recovery

Prevent > Guide > Catch > Explain > Recover > Forgive. Undo is sacred. Break error-prone tasks into smaller steps. (Nielsen, Shneiderman, Sandi Wassmer)

PILLAR 10: User Control & Autonomy

Users are the pilot, not passengers. Support undo/redo/escape. Let users customize. Do one thing well. (Apple, Nielsen, UNIX Philosophy, Inclusive Design)

PILLAR 11: Context & Environment

Context drives usage. Respect the periphery. Design for the full journey. Responsive means adaptive, not shrunk. (GOV.UK, Calm Technology, Whitney Hess)

PILLAR 12: Iteration & Humility

Start small, iterate wildly. Data over hunches. Observe behavior, not opinions. Don't be afraid to scrap it. (GOV.UK, Lean Startup, d.school)

III. THE TASTE TEST

Run these checks before declaring any design done:

IV. INTERACTIVE ELEMENT STATE CHECKLIST

Every interactive element must define ALL of these states:

:hover        → subtle lift (desktop only)
:active       → pressed feedback (<100ms)
:focus-visible → 2px outline, offset 2px (keyboard navigation)
:disabled     → 0.5 opacity, not-allowed cursor
[loading]     → skeleton / spinner / progress
[success]     → confirmation
[error]       → specific, kind message

V. SEMANTIC HTML SKELETON

<header>
  <nav aria-label="Main">...</nav>
</header>
<main>
  <article>
    <section aria-labelledby="section-heading">
      <h2 id="section-heading">...</h2>
    </section>
  </article>
</main>
<aside aria-label="Sidebar">...</aside>
<footer>...</footer>

Never: <div class="button"> — Always: <button type="button">
Never: <div class="header"> — Always: <header>
Never: <span onclick> — Always: <a href> or <button>

VI. CSS SYSTEM PATTERN

:root {
  /* Spacing */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
  /* Type */
  --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem;
  /* Color: semantic names */
  --surface: #fafafa; --surface-raised: #fff;
  --text-1: #1a1a1a; --text-2: #6b6b6b; --text-3: #9b9b9b;
  --accent: #2563eb; --accent-hover: #1d4ed8;
  --error: #dc2626; --success: #16a34a; --warning: #d97706;
  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms; --duration-base: 250ms;
}

Use ONLY system values. No arbitrary numbers. This is the foundation of taste in code.

FINAL WORD

The 212 principle sets disagree on many things. They all agree on this: design is an act of care. Care for the person using what you make. That care, applied consistently and courageously, is what produces work with taste.

Good design is as little design as possible. — Dieter Rams