---
name: taste-protocol
description: Design taste evaluation and quality standards. Load for design generation, design review, build phase UI work, frontend quality assessment, or any design critique. Defines what "good taste" means — philosophy, specific rules, evaluation checklists, and UX laws.
---

# Taste Protocol

> The single source of truth for what "good taste" means in this system. The generator follows these as directives. The critic evaluates against them. Both reference the same knowledge.

**When to load:** Design generation, design review, build phase UI work, any frontend quality assessment.

**Authors:** Juril (2026-02-13), Michael (2026-02-13), Emil Kowalski extractions (2026-02-15)

---

## Part 1: Taste Philosophy

These are the beliefs that underpin every specific rule below. When a situation arises that no specific rule covers, reason from these principles.

### Taste as Trained Instinct

Taste is not personal preference — it is a trained instinct. The ability to see beyond the obvious and recognize what elevates. In a commoditized market where everything "works," taste is the differentiator.

When evaluating a design, never label things as simply "good" or "bad." Articulate *why* something feels great. Rationalize the gut feeling into a specific observation about a specific choice. "It feels clean" is not valid criticism. "The 8px padding creates consistent rhythm with the 16px grid" is.

### Restraint & Simplification

Every element in an interface must earn its place. If a container, divider, stroke, or label can be removed without losing clarity or function, it should go. Visual weight is a cost, not a feature.

The best interfaces achieve their goals with the fewest visual rules. A screen that establishes four different vertical alignment guides where two would suffice hasn't been edited enough.

Simplification is not subtraction for its own sake. It is the discipline of finding which elements carry the most meaning per unit of visual weight, and removing the rest. Merging four sibling data cards into one scoreboard row doesn't lose information; it strips away the visual cost of three unnecessary containers.

Bounded containers (borders, card outlines, toolbar backgrounds) should only exist when they communicate grouping that spacing alone cannot. Verbose labels are a form of clutter. "Edition Performance" can be "Performance." When context already supplies meaning, words become waste.

### Opinionated Simplicity

Exceptional UX comes from ruthless scope reduction followed by obsessive polish on what's left. A product that does 3 things beautifully beats one that does 30 things adequately. Family's crypto wallet, cmdk, Sonner — all share this philosophy: reduce the surface area, then polish what remains.

For any component or feature, define the smallest possible surface area that solves the core problem, then allocate polish budget to that reduced surface. Micro-interactions, transitions, and animation quality should increase in inverse proportion to feature count.

### Unseen Details Compound

No single detail may be consciously noticed, but their aggregate creates the feeling of quality. Paul Graham: "All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune."

Even if a detail seems too subtle to notice in isolation (e.g., correct transform-origin on a dropdown), implement it anyway. Quality is the sum of imperceptible correctnesses. The test: slow the animation to 0.25x speed. Do the details hold up under scrutiny? Details that break at slow speed indicate shortcuts.

### Consistency as Trust

Inconsistency, even in small details, signals carelessness. A filled icon next to outlined icons, a divider in one list but not its sibling, a stroke on one card but not another. Each mismatch is a tiny crack in the user's trust that someone thought this through.

A visual language is a promise. Once you establish that icons are outlined, that containers use background fills instead of strokes, that metadata appears as tokens, every deviation from that promise requires justification. Unjustified deviation is a bug, not a stylistic choice.

Consistency extends to invisible properties. Stroke weights, icon sizes, shadow depths, color values, and spacing should form a system with explainable relationships. If you can't articulate why your divider is 1px, your icon strokes are 1.5px, and your card borders are 2px, you don't have a system. You have arbitrary values.

### Platform Respect

Platform conventions are borrowed trust. Users arrive with expectations about where primary actions live, how navigation stacks, how modals behave. Violating these conventions without a strong reason costs more than it gains.

Start every architecture decision by asking: what would the platform default give us? An iOS tab bar, a standard table view, a push navigation stack. Establish the most conventional, familiar foundation first. Then optimize from there with clear intent.

### Emotional Intelligence

An interface that ignores the emotional context of its subject matter is negligent. A divorce app that treats legal paperwork like a to-do list, a medical app that presents diagnoses like status updates: these are design failures regardless of how clean the UI looks.

Language is interface design. "Form Preparation" vs. "Your Paperwork." "Generate Summons (JD-FM-3)" vs. "Create your summons document." The words you choose are a design decision with as much impact as your color palette.

Color used without semantic intent creates noise, not energy. Progress indication should be encouraging, not demoralizing. Completed work should recede, not dominate.

Products handling sensitive or stressful processes should define 2-3 guiding emotional attributes (e.g., Trust, Calm, Expertise) before making any visual decisions. Every choice should be testable against those attributes.

### Hierarchy & Focus

At any given moment, the interface should make it obvious what the user's current job is. If every task demands equal visual attention, the interface has abdicated its responsibility to guide.

Primary actions must look like primary actions. Progressive disclosure is an act of respect. Visual weight should be proportional to importance.

### Craft & Detail

Small refinements compound. Any single change (tightening padding, aligning stroke widths, removing a redundant divider) may seem preferential in isolation. Together, they reduce visual weight, unify the visual language, and elevate the interface from "fine" to "considered."

Optical balance matters more than mathematical precision. Padding that is numerically equal can still feel unbalanced because of the visual weight of the elements it surrounds.

The difference between a functional component and a crafted component is how it handles edge cases, transitions, and invisible moments. Most work ships at levels 1-3 because people stop pushing, not because they've run out of room to improve.

### Confidence & Identity

Default-looking AI styling (generic purple gradients, standard chat bubbles, unbranded help buttons) signals that the interface was assembled, not designed. AI-powered features must use the product's established visual system, not their own.

A confident visual language takes stances. Scarcity creates emphasis. An interface that uses its accent color for everything communicates nothing.

Animation style is part of brand identity. Cohesion makes animation feel "right" — the easing, duration, and style must match the overall design language. A bouncy spring animation on a serious enterprise dashboard is a cohesion failure. A rigid linear animation on a playful consumer app is equally wrong. There is no universal "correct" value — only what's cohesive.

### Design Engineering as Discipline

The gap between design and implementation is where taste dies. Design engineering closes that gap by making the person who cares about the detail also the person who implements it.

The generator and the critic should evaluate the *implemented* output, not just the mockup. A design that looks correct in a static comp but uses wrong easing, incorrect transform-origin, or janky animation in implementation has failed.

Compare the designed intent to the implemented output at 0.25x speed. Are the curves identical? Are the origins correct? Does the timing match? Any deviation is a quality gap.

### Depth of Exploration

Your first instinct is almost always shallow. The real insights emerge when you stay with it longer.

Noticing is the foundational skill. "It feels off" is an observation. "The stroke weight on the toolbar icons is 1.5px while everything else is 1px, and the color is #666 while the others are #999" is a diagnosis. Taste lives in the gap between observation and diagnosis.

Before optimizing any solution, question the assumption it's built on. "How do we make photo selection easier?" is a worse question than "Why does the user need to select photos at all?"

Conceptual range means exploring structurally different approaches, not variations of the same idea. Three different numpad layouts show depth on one concept. A numpad, a preset button group, a slider, and a gamified interaction show range across concepts.

---

## Part 2: Specific Rules

Concrete, testable directives. Follow these when generating. Flag violations of these when critiquing.

### Visual Consistency

- Use a single icon style per interface (filled, outlined, duotone, etc.), with consistent stroke width and color treatment. Never mix styles in the same view.
- Limit an interface to two dominant vertical alignment rules. Section headers, content, and list items should share a consistent left edge.
- Standardize divider usage within a view. Pick one approach (dividers or spacing-only) and apply it to all sibling lists.
- Use consistent stroke weights across all icons and line elements. If icons use 1.5px strokes, borders and dividers should relate proportionally.
- Icons serving the same functional role should share a single color. Reserve color differences for semantic meaning, not decoration.
- Card styles (shadow, border, radius, background) must be consistent across sibling elements. Each variation must map to a distinct semantic meaning.
- Maintain consistent styling for elements with similar functions. All primary CTAs share visual treatment. All form inputs share styling. Visual similarity signals functional similarity.

### Layout & Spacing

- On iOS, place the primary action on the right side of the toolbar, visually emphasized. Secondary actions go on the left.
- Do not use visual containers (borders, backgrounds) on toolbars unless they serve a functional grouping purpose. Prefer floating buttons.
- Ensure padding is optically balanced, not just mathematically equal. Verify with your eyes after applying the numbers.
- Merge sibling data cards into a single container when possible. A scoreboard of four separate cards should become a single row or unified card.
- Match the vertical gap between all sibling sections. Inconsistent gaps between same-level elements create visual imbalance.
- Use whitespace to define relationships. Related items should be closer together than unrelated items. Group form fields by topic, cluster related buttons, separate distinct sections with more space.
- Use subtle backgrounds or borders to group related content when whitespace alone is insufficient (dense layouts, similar content).

### Typography

- Establish a strict type scale (e.g., 1.25 or 1.333 ratio) and use no more than 3-4 sizes across the entire interface.
- Weight variation (regular, medium, semibold) should do more work than size variation.
- Line height for body text should be 1.5-1.7; for headings, 1.1-1.3.
- Use Inter, Geist, or system fonts for UI; serif or display fonts only for marketing surfaces.
- Reserve decorative or display typefaces for page-level titles only. Section headers should use the body typeface at a different size/weight.
- Style category labels and metadata as tokens (pill/chip shapes) to visually differentiate them from user-entered content. Metadata should read as secondary: smaller, lower contrast.
- Use monospace or tabular-nums for numeric values that change dynamically (counters, sliders, percentages) to prevent layout jitter.
- When embedding labels inside interactive controls, ensure they're large enough to read comfortably at the control's scale.
- **Typography hierarchy test:** Screenshot the page and squint. Can you identify the hierarchy purely from type size and weight? If you need color or decorative elements to understand the information architecture, the typography isn't working hard enough.

### Animation & Motion

#### Core Principles

- **The interface should feel like it's listening.** Every user action deserves immediate feedback to create a sense of responsiveness.
- **Great animations feel natural** because they mimic the continuous, physics-based motion of the physical world. Nothing in nature appears or disappears instantly.
- **Speed should scale with frequency.** Animations seen hundreds of times per day become friction.
- **Animations must be earned.** Over-animating creates fatigue and dilutes impact. Pacing through the experience matters.
- **Performance is non-negotiable.** A beautiful animation at 30fps is worse than no animation at 60fps.

#### Animation Timing

- **Default easing: `ease-out`** for enter/exit animations (fast start, slow end). Never use `ease-in` for UI animations — it starts slow, making everything feel sluggish.
- **Maximum duration: 300ms** for standard UI interactions. For high-frequency actions (keyboard-initiated, repeated list interactions), remove animation entirely.
- The built-in CSS curves are usually too weak; use custom cubic-bezier curves from resources like easings.co for more energetic motion.
- **Test:** Compare the same animation at the same duration with `ease-in` vs `ease-out`. If the `ease-out` version doesn't feel noticeably faster, the curve isn't aggressive enough.
- **Test:** Imagine using this element 100 times in a day. Does the animation still feel delightful or does it feel like waiting? If the latter, cut it.

#### Animation Origins & Transforms

- **Never animate from `scale(0)`.** Use a minimum initial scale of 0.9 or higher (Emil uses 0.93). This makes enter animations feel like the element was always there, just smaller.
- **Always set `transform-origin`** to match the trigger's position relative to the animated element. The CSS default is `center`, which is wrong for almost every popover, dropdown, and menu. Use Radix/Base UI CSS variables for automatic origin-awareness (`--radix-dropdown-menu-content-transform-origin`).
- **Animate only `transform` and `opacity`** (composite-only properties). Never animate `padding`, `margin`, `width`, `height` (triggers layout).
- When the main thread is busy (e.g., page load), use hardware-accelerated CSS animations or WAAPI instead of JS-driven animation libraries.
- **Test:** Open a popover and slow the animation to 0.25x. Does it scale from the trigger? Or from its own center? Center = wrong.

#### Physics & Springs

- **Default to spring-based animations** for state changes and layout transitions. Spring parameters (stiffness, damping, mass) create motion that feels alive. Reserve duration-based animations for simple opacity and hover effects.
- For decorative mouse-tracking interactions (not functional data displays), use spring interpolation (`useSpring` from Motion/Framer Motion) rather than directly binding to mouse coordinates. The spring adds physical believability through momentum and settling.
- **Test:** Move the mouse quickly across the interactive area and stop. Does the visual element snap to its final position (bad) or settle with a slight overshoot (good)?
- **Test:** Does the animation feel like it has weight and momentum, or does it feel like a mathematical interpolation between two states?

#### Interruptibility & State

- **Animations must be interruptible** — if a user triggers a state change mid-animation, the new animation should pick up smoothly from the current interpolated value.
- Use CSS transitions (inherently interruptible) over CSS keyframe animations (not interruptible). Framer Motion/Motion supports interruptible animations natively.
- **Test:** Trigger an animation, then immediately reverse it before it completes. Does it reverse smoothly from its current position, or does it jump/glitch?

#### Interaction Feedback

- **Add `scale(0.97)` on `:active` state** for clickable elements. This gives tactile feedback that the press was registered.
- **Test:** Click every interactive element. Does each one acknowledge the press visually before completing its action? No dead zones.

#### Tooltips & Sequential Elements

- Tooltips should have an initial hover delay (to prevent accidental activation), but once any tooltip in a group is open, **subsequent tooltips should appear instantly** with no delay and no animation. Target the `data-instant` attribute and set `transition-duration: 0ms`.
- **Test:** Hover over one tooltip, then quickly sweep to adjacent tooltips. Is there a second delay? There shouldn't be.

#### Transitions & Crossfades

- **Blur can bridge visual discontinuity** where easing and timing alone fail. If a crossfade or state transition feels "off" after trying multiple easings and durations, add a subtle `filter: blur(2px)` during the transition.
- For tab highlight animations where both a background indicator and text color need to change simultaneously, use **`clip-path`** to create a single unified transition rather than animating color and position independently.
- **Test:** Scrub through the transition frame-by-frame. Are two distinct states visible simultaneously? If yes, blur can help blend them.
- **Test:** Slow the tab transition to 0.1x. Does the highlight bar movement and the text color change feel like one unified motion? Or two separate things happening at the same time?

#### Accessibility

- **Always implement `prefers-reduced-motion`** media query. When reduced motion is preferred, replace spatial animations (slide, scale, bounce) with opacity-only transitions. Never remove feedback entirely — just make it less vestibularly challenging.
- **Test:** Enable "Reduce Motion" in OS settings. Does the interface still communicate state changes, just without spatial movement?

#### Animation Evaluation Questions

Before adding any animation, ask:
1. Does this enrich the information on the page or indicate a state change?
2. How often will the user see it?
3. Does the animation's personality match the rest of the page?

Never animate keyboard-initiated actions. Raycast has no animations and it feels right because every interaction happens hundreds of times per day.

**Screen animation budget:** Count the number of distinct animations on a single screen. If more than 2-3 are active or triggered in a typical flow, the screen is probably over-animated.

### Dark Mode & Color

- **Design dark mode first** for developer-facing products. The dark surface communicates seriousness and focus. Light mode should work well but doesn't need to be the lead.
- **Background:** Near-black (hsl 220-230, 10-15%, 8-12%), not pure black (#000).
- **Text:** Off-white (90-95% lightness), not pure white (#fff). Reserve pure white for interactive highlights.
- **Accents:** Use low-saturation accent colors on dark backgrounds. Saturated colors on dark surfaces create visual vibration.
- **Test:** Does the dark mode feel native, or like an inversion of the light mode? If borders, shadows, and subtle gradients that work in light mode break in dark mode, it was designed light-first. True dark-first design has its own tonal system.

### Data Visualization & Tables

- Remove vertical grid lines from charts by default. Use a hover-triggered vertical indicator line instead.
- Limit x-axis labels on time-series charts to 4-5 key dates per month.
- Align chart accent colors with the product's overall color language, not arbitrary defaults.
- On summary views, show only 3-5 key columns. Detailed data belongs in the drill-down/detail view.
- Reuse established iconography as table column headers when icons already have semantic meaning from elsewhere on the page.
- Use row background fills to indicate relative performance instead of tiny inline progress bars when column width is constrained.
- Replace separate domain text with favicons in link tables for instant visual recognition.

### Information Architecture (Mobile)

- Start mobile app architecture by asking: what would default iOS/Android give us? Use platform conventions as a baseline.
- For linear, multi-phase processes, group tasks into phases and use phases as root navigation. Never present a flat list of 40+ items.
- Evaluate whether a tab bar is appropriate. If secondary features merely support the core flow rather than being peers, they don't belong in a tab bar. Move supporting features to contextual placements.
- For linear processes, auto-expand the current phase and collapse completed phases. Use a subtle card-stack effect to hint at completed phases.
- Use sheet modals instead of full-screen pushes for short task details. Bottom sheets keep the user anchored and create tighter feedback loops.
- Interactive controls should be placed in thumb-friendly zones on mobile. Frequently used actions belong within easy reach.

### Emotional & Contextual Design

- Match the interface's emotional register to the product's subject matter. Sensitive products need warm neutrals, calm typography, generous whitespace.
- Define 2-3 guiding emotional attributes before establishing a visual language. Every visual decision should be testable against these attributes.
- Use warm, human language in task names and labels. "Your Paperwork" not "Form Preparation."
- For long processes, chunk progress into phases, not raw task counts. Never show "10 / 47 tasks complete."
- Set expectations for time and effort on individual tasks. Include time estimates and brief explanations of purpose.
- Completed steps should visually recede. Collapse or dim completed work so it never draws more attention than remaining tasks.
- Celebrate meaningful milestones. When users complete significant tasks or phases, acknowledge progress with positive feedback—a success state, encouraging copy, or subtle animation.
- Design exceptional onboarding completion and final success states. First impressions (onboarding) and final moments (task completion) disproportionately shape user perception.

### Visual Language

- Express friendliness through corner radius, not color or illustration. Fully rounded CTAs lean friendly; sharp-capped icon strokes lean precise. Mixing these intentionally creates character; mixing them accidentally creates confusion.
- Contrast rounded containers with sharp, bold icons for precision and authority.
- Use a warm neutral palette with heavy use of off-whites for calm interfaces. Reserve pure white for focused content areas. Use one bright accent color sparingly.
- Prefer subtle layer blurring and background-color cards over strokes and shadows for container separation.
- Never use generic AI styling (purple gradients, default chatbot aesthetics). AI features must use the product's established color system.
- Container treatment communicates personality: strokes say "technical," shadows say "elevated," background-color differentiation with subtle blurring says "soft and approachable." Choose intentionally.
- Invest in micro-interactions and polished animations. Users perceive interfaces with thoughtful motion design as more professional and trustworthy.
- Use a cohesive color system with clear hierarchy. Establish primary, secondary, and accent colors. Reserve accent color for key actions—scarcity creates emphasis.

### Component Craft: Sliders

- Consolidate slider elements into a single row: label on the left, value on the right, all within the track itself.
- Make the full slider track the drag target, not just a small handle.
- Show a subtle drag handle only on hover/active states. Scale it in on the x-axis for a crafted entrance.
- Implement value dodge: when the drag handle approaches a label or value, fade and scale the handle down to avoid visual collision.
- Clamp the handle to a minimum position at 0% instead of letting it vanish off the left edge.
- Add subtle tick marks on hover for spatial awareness (e.g., 8 ticks splitting the track into 10 segments).
- Implement snap-to-decile on click with generous hit targets. Drag allows continuous fine control.
- Use spring animations for snap transitions on click. Dragging should remain instant for direct feedback.
- Make the numeric value editable via text input on a slight delay (~800ms) for precision control.
- Implement rubber banding at slider boundaries with diminishing returns and a dead zone.

### Interactive & Delight

- For interactive card elements, implement perspective tilt that follows the cursor with spring-smoothed 3D rotation. Scale up slightly on hover with a lift shadow.
- When using sound for interaction feedback, cycle through 3+ sound variations in round-robin to avoid monotony. Fire sounds on a distance-based debounce (~40px of drag movement).
- Provide animated hints for non-standard interactions. Show a brief looping gesture animation that dismisses automatically once the user begins interacting.
- All interactive elements must provide hover and active state feedback. No control should feel inert when the user interacts with it.
- Provide immediate visual feedback for all interactions. Button press states, hover effects, and loading indicators should appear within 100ms.
- Use optimistic UI updates. Show the expected result immediately, then rollback if the operation fails.

### Process & Exploration

- Before committing to a UI pattern, generate 3+ structurally different approaches. A numpad, preset buttons, a slider, and a gamified input are different directions. Three numpad layouts are just depth on one direction.
- Question the fundamental assumption before optimizing the interaction. "Why does the user need to do this at all?" is often a better question than "How do we make this easier?"
- After choosing a direction, push through at least 5 levels of progressive refinement. Most work ships at levels 1-3. Levels 4+ require discovery and invention, not just polish.
- Expose key visual parameters (duration, easing, spacing, shadow, blur, radius, scale) as real-time adjustable controls during iteration.
- Choose the simplest solution that solves the problem. Default to the approach requiring fewest user decisions, steps, or interface elements—unless complexity serves a clear purpose.

---

## Part 3: Evaluation Checklist

Use these as pass/fail checks when critiquing a design. Each maps directly to the rules above.

### Visual System

- [ ] All icons share the same style, stroke width, and color treatment
- [ ] No more than 2 dominant vertical alignment rules
- [ ] Divider treatment is consistent across all sibling lists/tables
- [ ] Stroke weights are consistent across icons, borders, and dividers (no more than 2 distinct weights without intentional hierarchy)
- [ ] Card styles are consistent across sibling elements
- [ ] Spacing between same-level sections is uniform (no gaps differing by more than 4px)
- [ ] Design system documented (spacing scale, color palette, typography, component patterns)

### Layout

- [ ] Platform conventions followed (iOS: primary action on right)
- [ ] Toolbar containers serve a functional grouping purpose (or are removed)
- [ ] Padding within containers is optically balanced (top padding doesn't exceed bottom by more than 50%)
- [ ] Sibling data that belongs together is merged into single containers
- [ ] Touch targets minimum 44×44px on mobile

### Typography

- [ ] Type scale is strict (1.25 or 1.333 ratio), no more than 3-4 sizes
- [ ] Weight variation does more work than size variation
- [ ] Line height: 1.5-1.7 for body, 1.1-1.3 for headings
- [ ] Display/decorative typefaces reserved for page-level titles only
- [ ] Metadata is visually distinct from user-entered content (token styling, reduced size, lower contrast)
- [ ] Dynamic numeric values use tabular figures or monospace
- [ ] No redundant subtitles or verbose headers restating contextual information
- [ ] **Squint test passes:** Hierarchy identifiable from type size/weight alone

### Animation & Motion

- [ ] Default easing is `ease-out`, never `ease-in`
- [ ] Animation duration ≤300ms for standard UI interactions
- [ ] No animations on high-frequency actions (keyboard shortcuts, repeated list actions)
- [ ] No elements animate from `scale(0)` (minimum 0.9+)
- [ ] `transform-origin` matches trigger position, not default center
- [ ] Only `transform` and `opacity` animated (no layout properties)
- [ ] Animations are interruptible (smooth reversal mid-animation)
- [ ] `prefers-reduced-motion` implemented (spatial → opacity-only)
- [ ] Clickable elements have `scale(0.97)` on `:active`
- [ ] Sequential tooltips instant after first (no second delay)
- [ ] Animation personality matches brand personality
- [ ] Screen has ≤2-3 distinct animations in typical flow
- [ ] **0.25x speed test passes:** Details hold up under scrutiny

### Dark Mode

- [ ] Dark mode designed first (not inverted from light)
- [ ] Background is near-black (hsl 220-230, 10-15%, 8-12%), not #000
- [ ] Text is off-white (90-95% lightness), not pure #fff
- [ ] Accent colors are low-saturation on dark backgrounds
- [ ] Borders, shadows, gradients work natively in dark mode

### Data & Content

- [ ] No persistent vertical grid lines on charts
- [ ] X-axis labels limited to 4-5 for monthly time-series views
- [ ] Chart colors aligned with product palette
- [ ] Summary tables show max 3-5 columns (detail lives in drill-down)
- [ ] No tiny inline progress bars in narrow columns

### Hierarchy & Focus

- [ ] User's next action is immediately clear without scanning the full page
- [ ] Primary CTA is visually distinct from all secondary/tertiary actions
- [ ] Completed work is visually recessive (dimmed, collapsed, reduced)
- [ ] Long processes are chunked into phases, not shown as flat lists
- [ ] Tasks/phases include time estimates and purpose context
- [ ] Decision points limited to 5-7 options maximum

### Emotional Register

- [ ] Visual language matches the emotional weight of the subject matter
- [ ] Task labels use warm, human language (not clinical/form-like)
- [ ] Progress framed encouragingly (phase completion, not raw task counts)
- [ ] AI features use the product's own color system, not generic AI aesthetics
- [ ] Accent color used sparingly (scarcity = emphasis)
- [ ] Color used semantically, not decoratively
- [ ] Milestone celebrations present for significant completions

### Component Craft

- [ ] Interactive controls respond to user presence (hover, active, focus states)
- [ ] Controls handle edge cases gracefully (boundary clamping, label dodging, precision alternatives)
- [ ] Spring animations for indirect actions (clicks); instant feedback for direct manipulation (drag)
- [ ] Sound/animation varies organically (no mechanical repetition)
- [ ] Non-standard interactions include animated hints
- [ ] Visual feedback appears within 100ms of interaction

### User Control & Error Handling

- [ ] Undo available for destructive or important actions
- [ ] Exit paths obvious in multi-step flows (Cancel, Back, X buttons visible)
- [ ] Error messages in plain language (no error codes)
- [ ] Errors explain what happened AND how to fix it
- [ ] Color + icon + text used for errors (not color alone)
- [ ] User progress auto-saved in multi-step flows

### Process Quality

- [ ] 3+ structurally different approaches explored before committing
- [ ] Fundamental assumption ("should this exist?") was questioned
- [ ] Refinement pushed past level 3 for core components
- [ ] Key parameters tunable in real-time during iteration

---

## Part 4: Refinement Questions

When a design passes the checklist but still doesn't feel right, ask these questions to identify what's missing.

### Reduction
- Can anything be removed from this screen without losing meaning or function?
- Is any text restating something the context already communicates?
- Are these sibling elements really siblings? Should they share a container?
- Does this toolbar container serve a functional purpose, or is it just adding visual weight?

### Consistency
- Is every visual difference between elements intentional and meaningful?
- Does this screen follow a consistent visual language, or do some elements feel like they came from a different interface?
- Are spacing values between same-level sections consistent?
- If I swapped any two divider, stroke, or shadow treatments on this page, would the inconsistency be noticeable? If not, they should already match.

### Hierarchy
- If a new user saw this screen for the first time, would they know what to do next within 3 seconds?
- Is the primary action the most visually prominent element?
- Is completed work receding or competing? Does finishing a task make the screen feel lighter or heavier?
- Is this summary view showing data that belongs in the detail view?

### Emotional Fit
- Does this interface match the emotional state of the person using it?
- Would the language make a stressed, overwhelmed user feel supported or bureaucratized?
- Does the progress indication encourage or demoralize?
- If I showed this to someone unfamiliar with the product, could they guess its emotional register from the visuals alone?

### Craft & Polish
- Is the padding optically balanced, or just mathematically equal?
- Does this interactive element acknowledge the user's presence?
- Have the edge cases been handled? What happens at 0%? At 100%? When the label is long?
- Would a spring animation feel better than an instant transition here?
- Do sounds and animations feel organic and varied, or mechanical and repetitive?

### Animation Quality
- Slow the animation to 0.25x speed. Do the details hold up under scrutiny?
- Is the origin correct? Is the easing appropriate? 
- Does any element appear to materialize from a zero-dimensional point?
- Does the animation feel like it's responding to me, or performing for me?
- Does the animation's personality match the rest of the page?
- For tab/crossfade transitions: do highlight movement and color change feel like one unified motion or two separate things?

### Exploration & Depth
- Is this the first idea, or was it selected from structurally different alternatives?
- Was the underlying assumption questioned? Does the user actually need to perform this action?
- On a scale of 1-10, what level of refinement has this reached? What would level N+1 look like?
- What would I notice if I spent 10 more minutes just looking at this?

---

## Part 5: UX Laws & Behavioral Psychology

The psychological foundations that explain *why* the taste principles work. Reference these when making decisions or explaining rationale.

### Cognitive Load Laws

**Hick's Law** — Decision time increases with number/complexity of choices.
- Limit decision points to 5-7 options maximum
- Use smart defaults and progressive disclosure
- Save advanced options for secondary screens

**Miller's Law** — Working memory holds 7±2 items.
- Break content into groups of 5-7 related items
- Use visual grouping (spacing, containers) to create clear boundaries
- Progressive disclosure for complex forms: 5-7 fields per step

**Tesler's Law** — Complexity cannot be reduced, only moved.
- Handle complexity in the system, not the interface
- Smart defaults and backend processing absorb complexity
- Progressive complexity for power users: simple defaults, advanced options accessible but hidden

### Memory & Attention Laws

**Serial Position Effect** — First and last items are remembered best.
- Place critical information at extremes of lists/menus
- Position key items first or last in feature lists
- Primary CTAs at top or bottom of scrollable content, not buried in middle

**Von Restorff Effect** — Distinct items are remembered.
- Primary CTA must be visually distinct from all others
- Use visual distinction strategically, not decoratively
- Every difference should communicate meaning

**Zeigarnik Effect** — Incomplete tasks are remembered better than complete ones.
- Save user progress automatically in multi-step flows
- Show "Resume where you left off" prompts
- Visual indicators for incomplete tasks (badges, progress rings)
- Reminder notifications for unfinished important flows

### Motivation & Progress Laws

**Goal-Gradient Effect** — Effort increases as goal approaches.
- Show progress explicitly: "Step 3 of 5" or "75% complete"
- Update progress indicators in real-time
- Increase positive feedback as users near completion ("Almost there!")

**Peak-End Rule** — Experiences judged by peak moment and ending.
- Celebrate meaningful milestones with positive feedback
- Design exceptional onboarding completion states
- Make endings memorable—the final success state matters disproportionately

**Parkinson's Law** — Tasks expand to fill available time.
- Set clear time expectations: "Takes 2 minutes"
- Use timers strategically for time-sensitive actions
- But use sparingly—artificial urgency erodes trust

### Perception Laws

**Aesthetic-Usability Effect** — Beautiful designs seem more usable.
- Invest in micro-interactions and polished animations
- Small refinements compound into perceived quality
- Optical balance matters more than mathematical precision

**Doherty Threshold** — Productivity soars when response <400ms.
- Provide immediate visual feedback within 100ms
- Use optimistic UI updates
- Skeleton loaders, instant feedback make apps feel snappy

### Gestalt Principles

**Proximity** — Near objects group together.
- Related items closer together than unrelated
- Use whitespace to define relationships

**Similarity** — Similar elements perceived as grouped.
- Consistent styling for elements with similar functions
- Visual similarity signals functional similarity

**Common Region** — Shared boundaries create groups.
- Use subtle backgrounds or borders when spacing insufficient
- Bounded containers only when spacing alone can't communicate grouping

### Choice Architecture

**Paradox of Choice** — More options = harder decisions = lower satisfaction.
- Provide curated defaults and recommendations (3-5 choices)
- Hide additional options in "Show more"
- Use smart defaults aggressively—pre-select the most common choice

**Paradox of the Active User** — Users don't read manuals.
- Design for immediate usability without instructions
- Non-standard interactions need animated hints
- Use empty states as teaching moments

---

## Part 6: Nielsen's Usability Heuristics

Quick-reference for the 10 heuristics with actionable directives.

### H1: Visibility of System Status
- Always show current state clearly (loading, success, error)
- Real-time feedback for ongoing processes (progress bars, status badges)
- Consistent status indicators across the product
- Never leave users wondering what's happening

### H2: Match Between System and Real World
- Use user vocabulary, not system vocabulary ("Available balance" not "Ledger balance")
- Present information in natural, logical order (conversational flow, not database structure)
- Use metaphors users already understand (trash cans, folders, shopping carts)

### H3: User Control and Freedom
- Undo for destructive or important actions
- Obvious exit paths in multi-step flows
- Keyboard shortcuts for power users (Cmd+Z, ESC, keyboard navigation)

### H4: Consistency and Standards
- Document your design system
- Every deviation from established patterns requires justification
- Consistency extends to invisible properties (spacing, shadows, stroke weights)

### H5: Error Prevention
- Constraints and validation prevent errors before they happen
- Disable invalid options, use appropriate input types
- Guardrails for dangerous actions (confirmations, warnings, previews)
- Design forgiving interfaces (auto-save, typo correction, flexible formats)

### H6: Recognition Rather Than Recall
- Show options instead of requiring memory (dropdowns, autocomplete, recent items)
- Icons should have text labels in primary navigation
- Provide context for decisions at the moment of choice

### H7: Flexibility and Efficiency of Use
- Keyboard shortcuts for common actions
- Allow customization (favorites, custom dashboards, saved filters)
- Dual-path experiences: guided wizards for novices, bulk actions for experts

### H8: Aesthetic and Minimalist Design
- Remove every element that doesn't serve a clear purpose
- Use progressive disclosure to hide complexity
- Show essential information upfront, tuck advanced details away

### H9: Help Users Recognize, Diagnose, and Recover from Errors
- Error messages in plain language (no codes)
- Explain what happened AND how to fix it
- Never blame the user ("Email addresses need an @ symbol" not "Invalid input")
- Color + icon + text for errors (accessible to colorblind users)

### H10: Help and Documentation
- Contextual help where users need it (inline tooltips, "Learn more" links)
- Help searchable and task-oriented ("How do I..." questions)
- Empty states as documentation opportunities

---

## Part 7: Implementation Standards

Technical requirements for maintaining quality in production.

### Design System Foundation
- **Component Library:** shadcn/ui (Radix UI primitives, full accessibility)
- **Styling:** Tailwind CSS utility-first with consistent spacing/typography scales
- **Architecture:** Atomic Design (atoms → molecules → organisms → templates → pages)
- **Dark Mode:** Support via design tokens, not hardcoded colors

### Accessibility Standards (WCAG 2.1 Level AA)

| Requirement | Standard |
|-------------|----------|
| Color Contrast | 4.5:1 normal text, 3:1 large text |
| Touch Targets | 44×44px minimum |
| Keyboard Navigation | All interactive elements accessible |
| Screen Reader | Proper ARIA labels, semantic HTML, focus management |
| Motion Sensitivity | Respect `prefers-reduced-motion` |
| Error Indication | Color + icon + text (never color alone) |

### Performance Budgets

| Metric | Target |
|--------|--------|
| First Contentful Paint | <1.8s |
| Largest Contentful Paint | <2.5s |
| Time to Interactive | <3.8s |
| Visual feedback | <100ms after interaction |
| Animation frame rate | 60fps (never below 30fps) |

### State Handling
- Loading states: Skeleton loaders (not spinners)
- Empty states: Teaching moments ("What belongs here and how to add it")
- Error states: Plain language + solution + accessible color treatment
- Success states: Celebrate appropriately for the action's significance

---

## Known Gaps (Future Additions)

*Areas identified for future expansion:*

- Color Systems — palette construction, contrast ratios, semantic color tokens
- Typography Systems — font pairing, responsive type
- Layout Foundations — grid systems, breakpoints, responsive behavior, content density
- Form Design — input behavior, validation patterns, error handling, multi-step forms
- Navigation Patterns — breadcrumbs, sidebars, command palettes, search patterns (beyond mobile IA)
- Content Strategy — voice, tone, microcopy, writing guidelines, internationalization considerations
- Responsive & Adaptive Design — mobile-to-desktop transitions, component adaptation, touch vs pointer
- Iconography — icon design principles, sizing systems, when to use icons vs text
- Illustration & Imagery — style guidelines, when to use illustration, photography treatment

## Learnings

### 2026-02-16 | N/A | Research: Functional Animation Over Decoration (2026 Trend)
- **Issue:** 2026 animations must be functional, not decorative. "Scroll triggers, button ripples, animated states" guide users through interfaces. Cinematic hero transitions giving brands "living presence."
- **Recommendation:** Audit existing landing pages for decorative-only animations. Replace with functional animations: scroll-triggered reveals, button scale on :active, hover state transitions.

