claude-plugins/composer/skills/ui-system/references/design-interview.md

# Design system interview — full phase reference

Detailed phases for Part 1 of the ui-system interview. Read this when running
the design-system interview; it expands the phase summaries in SKILL.md.

Each phase: state what's being decided, show the default if there is one, ask
the question(s), confirm the answer back, move on. The user can reply
`default` (accept) or `skip` (mark `<TBD: ...>`) at any phase.

## D1 — Visual posture (one paragraph)

The north star sentence for visual decisions. Don't ask for paragraphs;
ask for adjectives and assemble.

```
Three or four words that describe how this should feel.
Examples: "quiet, dense, monochrome, one accent" / "playful,
generous, expressive type" / "clinical, neutral, accessibility-forward".
```

Compose into a single sentence; show; accept.

## D2 — Color

Batch as a single phase with sub-questions; tight loop.

**D2.1 Brand primary.** If material gave a color, propose it. Else:
```
Pick a brand primary. Either name a hex, name a color
("warm orange", "deep teal"), or name a reference ("Linear's purple",
"Stripe's indigo"). I'll generate the variants from there.
```

**D2.2 Brand secondary.** Optional. `default` = none.

**D2.3 Neutral tone.** Warm / cool / true. One question.
```
For grays, do they feel slightly tan (warm), slightly blue (cool),
or truly neutral (true)? Default: cool.
```

**D2.4 Generate the neutral scale.** Compute 50–950 from the chosen tone
and brand contrast targets. Show the user; offer `default` or "redo with
warmer/cooler/more contrast".

**D2.5 Semantic colors.** Success / warning / error / info. Show defaults
that contrast against both light and dark backgrounds; user accepts or
overrides one at a time.

**D2.6 Dark mode.** yes / no / system-following. Default: system. If yes,
generate the dark token mapping (invert + adjust saturation per token
class) and show.

**D2.7 Accessibility check.** Compute contrast ratios between primary +
neutral pairs. Flag anything below 4.5:1 for body text or 3:1 for UI.
Don't silently accept failures — surface and confirm or adjust.

## D3 — Typography

**D3.1 One family or two?** Default: one.

**D3.2 Family choice.** If user has no preference, offer presets:
- *Modern sans*: Inter (free, broad weights)
- *Humanist*: Source Sans 3 / IBM Plex Sans
- *System stack*: native to OS (free, no load)
- *Editorial*: Inter + Fraunces (display)
- *Technical*: IBM Plex Sans + IBM Plex Mono

**D3.3 Scale base.** 14, 15, 16. Default: 16 (web), 17 (iOS native), 14 (compact dashboards).

**D3.4 Scale ratio.** 1.125 (subtle), 1.2, 1.25 (default), 1.333 (dramatic), 1.5 (display-heavy).

**D3.5 Line-height policy.**
- Display: 1.1–1.2 (tight)
- Body: 1.5 (normal)
- Long-form prose: 1.7 (relaxed)

Defaults usually fine; user can override one of three.

## D4 — Spacing

**D4.1 Base unit.** 4 (default — finer control) or 8 (rougher cadence; iOS native often).

**D4.2 Scale.** Use the standard 12-step (0, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24) — almost always accepted as `default`.

## D5 — Radii

**D5.1 Posture.** sharp (0–4) / tight (4–8) / medium (8–16) / pillowy (16+) / mixed.

**D5.2 Generate sm/md/lg/pill/full.** Show; accept or tweak one.

## D6 — Shadows & elevation

**D6.1 Posture.** flat (none) / subtle / generous.

**D6.2 Scale.** xs/sm/md/lg/xl. Generated from posture; show; accept.

## D7 — Density

**D7.1 Default density.** comfortable (default; web app) / cozy / compact (data-heavy dashboard).

This drives component padding tokens — important enough to ask, easy to forget otherwise.

## D8 — Visual motion

**D8.1 Default duration.** fast (150ms), default (250ms), slow (400ms). Default: default.

**D8.2 Default easing.** standard / accel / decel / custom. Default: standard.

Behavioral motion (when things animate) lives in the interaction interview, not here.

## D9 — Components

Read the entity vocabulary from `ia.md`. Confirm the standard set
(Button, Input, Card, Surface) and ask for project-specific additions found in IA.

For each project-specific component, ask: variants? states? anatomy?
Default to "standard variants only" if user is unsure — better to add
later than over-spec now.

## D10 — Theme variants (skip by default)

Multi-brand / tenant theming usually no for v1. Default: skip.

## D11 — Accessibility tokens

**D11.1 Focus ring.** Style (solid / double / inner-outer) and color (brand / accent / outline-default). Default: solid 2px brand at 60% opacity.

**D11.2 Contrast targets.** Confirm WCAG AA (4.5:1 text, 3:1 UI). AAA optional. Default: AA.