# 4 · Taste: translating vague words into decisions

Humans describe design with feelings: "clean", "premium", "make it pop".
They know what they mean. You don't. So you pick the most average meaning,
and the human re-prompts: "no, not like that."

This file gives each common word a concrete meaning. Use it in two steps:

1. **Translate:** pick the decisions that match the word.
2. **Say it back:** tell the human which decisions you chose, in one line,
   **before** building. ("By 'clean' I'm taking: one accent colour, generous
   spacing, no shadows, a single typeface.") A wrong reading caught here costs
   nothing.

These are starting points, not laws. If the human or an existing brand says
otherwise, they win.

---

## The dictionary

### "Clean" / "minimal"
- **Do:** one accent colour; neutrals for everything else. Generous space
  (step up one level on the spacing scale). One typeface, two weights.
  Borders *or* shadows, not both. Fewer elements: remove before you add.
- **Don't:** confuse minimal with empty. Hiding labels, icons without text,
  or grey-on-grey contrast is not clean; it's unclear.
- **Ask if unsure:** "Clean like calm and spacious, or clean like dense but
  tidy, a tool for experts?"

### "Modern"
- **Do:** current conventions: system or neo-grotesque sans (Inter, Geist,
  SF), large confident headings, restrained colour, subtle radius (6–12px),
  smooth but short motion (150–250ms).
- **Don't:** use trends as a substitute: glassmorphism, gradient blobs,
  neon glows. "Modern" usually means "not dated", not "trendy".

### "Premium" / "luxury" / "high-end"
- **Do:** more whitespace than feels necessary. Fewer, larger elements.
  Refined type: a serif or a high-contrast display face for headings. Muted,
  deep palette (near-black, off-white, one rich accent). Precise alignment.
  Slower, subtle motion. High-quality imagery or none.
- **Don't:** gold gradients, heavy shadows, lots of badges, crowded content.
  Premium is restraint.

### "Playful" / "fun" / "friendly"
- **Do:** rounder radius (12px+ or full), a warmer palette with 2–3
  colours, a rounded or humanist typeface, conversational copy, illustration,
  gentle bouncy motion on key moments (respect reduced motion).
- **Don't:** sacrifice clarity. Playful labels still need to say what the
  button does. ("Let's go!" → "Create project".)

### "Professional" / "corporate" / "trustworthy"
- **Do:** conventional layout, a blue or neutral palette, clear hierarchy,
  sober copy, visible trust signals (security, contact, real company details),
  consistent alignment.
- **Don't:** go dull and grey. Professional still needs one clear accent and
  a clear primary action.

### "Bold"
- **Do:** big type (a 48px+ hero), strong contrast, saturated accent, large
  blocks of colour, tight composition.
- **Don't:** make everything bold. Bold needs a quiet background to stand on.

### "Calm" / "soft"
- **Do:** low-saturation palette, soft neutrals, generous line height (1.6+),
  minimal motion, no red unless it's a real error.

### "Techy" / "for developers"
- **Do:** monospace for code, data and IDs; dense information; dark mode
  supported; keyboard shortcuts; copy buttons on anything copyable; precise,
  terse copy.
- **Don't:** use terminal aesthetics everywhere. Prose still reads best in a
  proportional font.

### "Editorial"
- **Do:** strong typographic hierarchy; serif headings or body; narrow
  measure (60–70 characters); asymmetric grid; generous margins; images
  given room.

---

## Feedback phrases

| They say | It usually means | Do |
|----------|-----------------|----|
| "Make it pop" | The key element doesn't stand out | Increase contrast **around** it (quieten the rest) before making it louder. |
| "It feels cluttered" | Too many things at equal weight, or too little space | Remove elements; increase space between groups; reduce the number of colours and weights. |
| "It feels empty" | Weak hierarchy, or nothing anchors the eye | Strengthen one focal element; tighten groups; add real content. |
| "Something feels off" | Usually misalignment or inconsistent spacing | Check alignment to one grid and every spacing value against the scale. |
| "More breathing room" | Spacing is too tight | Step every spacing value up one level on the scale. Don't add random padding. |
| "Make it like Stripe / Linear / Apple" | They admire a quality, not the copy | Name the qualities (precise type, restraint, motion polish) and apply those. Never copy their layouts, illustrations or brand. |

---

## Check

- [ ] Every taste word in the request is translated into concrete decisions.
- [ ] You said your translation back before building.
- [ ] Your decisions are in the token file, not scattered as one-off values.