Naming

Naming What You're Looking At

Someone describes a thing they can see but cannot name — "the bouncy bit when a popover opens", "the gap between two specific letters", "it fires on every keystroke". Return the exact term, its gloss, and the one term it is most often confused with. Then stop. This is a reverse dictionary, not a design opinion: it never rules on whether the thing should exist, how long it should take, or which curve it should use. The moment an answer needs a number, you have left this skill.

The sibling to stay clear of is design-critique. Both turn a vague feeling into words, but design-critique looks at one rendered screen and produces a falsifiable rule about that screen; naming looks at nothing, matches a description against a closed glossary, and returns a word that is true everywhere. "This dashboard feels cheap" is design-critique. "What's it called when it resists and snaps back at the edge" is naming — the answer is Rubber-banding, and the turn is over.

Read what the project already calls things before you answer. If the codebase ships a component named Popup, a token named --ease-drawer, or a hook named useSheet, give the canonical term and then say which local identifier it maps to — never open a rename. A glossary answer is for the conversation; the project's vocabulary is load-bearing in imports, tests, and design files, and correcting it is a refactor nobody asked for. The exception runs the other way: when the project has two names for one thing, say so, because that is a real defect the user can act on.

Quick Reference

Open design-terms-index.md first whenever the description does not obviously land in one category — it is a flat list of all 188 term names grouped by the 12 categories, cheap to scan, and it exists to stop you loading the full 12-category vocabulary blind. Open design-vocabulary.md as soon as you have a candidate term, because the index carries names only and the gloss is the answer. Open animation-vocabulary.md when the description contains a verb of movement or a feel word — "springy", "slides off", "draws itself in", "resists". Open engineering-vocabulary.md when the description is a symptom rather than a sight — "it fires too often", "the page jumps", "my z-index doesn't work".

The Lookup

1. Decide which of the four files owns the description, using the table above.
2. Narrow by category (letters → Typography; a label stuck to something → Components; edge resistance → Feedback & Interaction).
3. Read the matching gloss. Read the gloss of the nearest confusable term too.
4. Answer: term, verbatim gloss, contrast. Stop.

Core Principles

1. Lead with the term and cap the answer at three. One primary match plus at most 2 alternates, each with a one-line note on how it differs. A naming question wants a name; six candidates is the same as no answer. Exception: an explicit either/or ("badge or tag?") names two terms, and both get a full gloss plus the rule that separates them.

2. Quote the gloss verbatim; never paraphrase. The wording is doing the disambiguation work — "the space between two specific characters" is the entire distinction between kerning and tracking, and a paraphrase drops it. Exception: spelling. design-vocabulary.md is written in British English (centre, organise); match the user's locale on spelling only, never on wording.

3. Always surface the contrasting term. The value of a vocabulary is in the boundaries, not the words: Kerning/Tracking, Badge/Tag, Tooltip/Popover, Opacity/Visibility, Modal/Sheet/Drawer, Voice/Tone, Chroma/Saturation, Variables/Tokens, WCAG/APCA, Morph/Crossfade, Debounce/Throttle. Exception: a term with no near neighbour in the glossary — Rubber-banding has none, and manufacturing a contrast for it is noise.

4. Never coin a term. An invented phrase is worse than "there isn't one", because the user will repeat it to a designer who has never heard it. Say no listed term fits, then describe the effect in glossary words — "that's a stagger of scale-in entrances". Exception: a name standardized outside the glossary — a CSS feature like @starting-style, a WCAG success criterion — is cited to its spec, not coined.

5. Route by the user's frame, not by keyword. Easing, Stagger, and Spring appear in both design-vocabulary.md (Motion) and animation-vocabulary.md. If they are describing something they intend to build, animation-vocabulary.md wins; if they are trying to talk about a design, design-vocabulary.md wins. Exception: when design-terms-index.md and design-vocabulary.md disagree, design-vocabulary.md is correct, always — the index is a map, not a source.

6. A gloss is a definition, never guidance. animation-vocabulary.md defines Spring in terms of tension, mass, and damping because that is what the word means; the house parameterization is { duration, bounce }. Quote the definition to name the thing, and do not let it leak into a recommendation. Exception: the user explicitly asks which parameterization to use — that is a gestures question, so hand it over rather than answering from the glossary.

7. The term ends the turn. "What's it called" is not "build it", and continuing into implementation is how a one-word answer becomes an unrequested diff. Exception: one message asks both ("what's it called, and add it") — give the term in a single line, then load the owning skill: motion for a curve or duration, transitions for choreography, surfaces for a shadow, perf for jank.

8. Say the glosses are house-written when asked where they come from. The seed is index.how — 188 terms across 12 categories, by Emil Kowalski and Glenn Carstens-Peters, arriving fall 2026. The product is unreleased, so nothing here can be checked against it and every gloss in these references is house-written. Exception: terms owned by a standards body — WCAG, APCA, sRGB, P3, OKLCH — are cited to the standard, not to the house.

Smell / Fix

Output Format

**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.

Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.

Term bolded, gloss verbatim, alternates only when they genuinely compete. No preamble, no closing offer to implement.

Checklist

• The right one of the four references was opened, and it was opened before answering
• The gloss is verbatim, not paraphrased
• The contrasting term is named, or the term genuinely has no near neighbour
• At most one primary plus two alternates
• No coined term; if nothing fits, that was said plainly
• No duration, curve, or size appears anywhere in the answer
• The project's existing identifier was mapped, not corrected
• The turn ends at the term