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

The thing being described is…	Open
a design noun — type, color, layout, IA, copy, a component	`references/design-vocabulary.md`
unclear in category, and you need candidates fast	`references/design-terms-index.md`
a motion or visual effect	`references/animation-vocabulary.md`
a frontend behaviour or a browser quirk	`references/engineering-vocabulary.md`

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

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

Core Principles

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.
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.
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.
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.
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.
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.
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.
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

Smell	Fix
"It's sort of like a modal, I guess"	Name it: `Modal` interrupts, `Sheet` slides from a side edge, `Drawer` pulls up from the bottom.
A term returned with no contrast	Append the nearest confusable term and the one-line rule that separates them.
Six candidates listed flat	One primary, then at most 2 ranked alternates with a difference each.
A coined phrase — "grow-from-click animation"	The term is `Origin-aware animation`. Never ship a coined phrase.
The gloss reworded "for clarity"	Quote it. The original wording carries the boundary.
The answer rolls on into how to build it	Stop at the term; hand off to the owning skill.
Renaming the project's `Popup` to `Popover` in code	Give the canonical term, keep the project's identifier.
A spring definition quoted as a spec	Definitions describe; they do not prescribe. Route to `gestures`.

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