---
title: design-vocabulary
summary: The precise word for each design phenomenon, and where this skill goes deeper. The lexicon behind articulate-precisely. Seeded by Index's articulate module.
tags: [meta, vocabulary, reference, articulation]
---

# Design vocabulary

The skill's working lexicon: the precise word for a design phenomenon, plus where the skill treats it in depth. Use it to name things exactly per [[articulate-precisely]] — in a critique, name the phenomenon; in a request, name the change.

Seeded by *Index*'s articulate module (Emil Kowalski & Glenn Carstens-Peters — [index.how/to/articulate](https://index.how/to/articulate)). The glosses here are this skill's own; `→ [[node]]` points to the node that goes deeper. Terms in **bold** with no arrow are vocabulary the skill adopts but does not yet cover in a dedicated node — name them precisely even where there is no node to open.

## How to use this file

- **Don't read it top to bottom.** Jump to the category, grab the word, follow the arrow if you need depth.
- **One job: stop the agent saying "weird."** If a critique reaches for a vague word ("off," "clean," "modern"), the right word is almost always here.
- **Pair it with the principle.** [[articulate-precisely]] is *why* precision matters; [[review-checklist]] is *what* to scan when reviewing. This file is a naming index, not a rulebook — the rules live in the linked nodes.

## 01 — Typography

How text is set, spaced, and read.

- **Kerning** — space between two specific letters, tuned by hand. Distinct from tracking.
- **Tracking** — uniform letter-spacing across a run; uppercase and small text usually need more. → [[line-length-tracking]]
- **Leading** — line-height; the vertical space between lines. Too tight suffocates, too loose stops reading as a paragraph.
- **Optical kerning** — spacing judged by eye instead of the font's metric tables; closes the gaps the defaults leave.
- **Tabular nums** — fixed-width digits so changing numbers don't jitter in a column. Essential for tables, prices, timers. → [[data-is-content]]
- **Type scale** — a fixed set of sizes (often a ratio) you pick from rather than inventing per use. → [[type-scale-and-rhythm]]
- **Weight** — stroke thickness. Bold is for hierarchy; italic is for linguistic stress or citation, not hierarchy. → [[typography-humanity]]
- **x-height** — height of the lowercase; why two fonts at the same px read as different sizes. → [[typography-humanity]]
- **Cap height** — height of the capitals; with x-height it governs perceived size. Matters when matching a fallback.
- **Ligature** — two glyphs merged to dodge a collision (fi, fl). Decorative ligatures are display-only.
- **Font smoothing** — antialiasing of glyph edges; `antialiased` renders lighter on Mac, worse on non-retina.
- **Text overflow / truncation** — cut at a word boundary with a real ellipsis character, never mid-word. → [[copy-voice]]
- **Hyphenation** — breaking a word across lines; best left to the browser to place.
- **Clamp** — fluid sizing with a min, preferred, and max in one declaration (`clamp()`); scales between breakpoints.
- **Widow** — classically, a paragraph's lone last line carried to the top of the next column or page; colloquially also the lone word left on a last line. `text-wrap: pretty` targets the trailing-word case. → [[line-behavior]]
- **Orphan** — a paragraph's lone first line stranded at the bottom of a column or page — the mirror of a widow. CSS `orphans`/`widows` set the minimums, but support is uneven, so it is often fixed by hand.
- **Font stack** — the ordered fallback list; a size-matched fallback prevents reflow when the web font loads.
- **Line length** — the measure; ~65 characters reads comfortably, wider loses the next line. → [[line-length-tracking]]
- **Variable font** — one file spanning weight/width axes; lets you animate weight without layout shift.
- **Superscript / subscript** — `sup`/`sub` are oversized by default and break line rhythm; size and shift them by hand.

## 02 — Color

How color is defined, mixed, and applied.

- **sRGB** — the legacy default space; every hex value lives here. Narrower gamut than modern screens can show.
- **P3** — a wider gamut most current displays support; reaches greens and reds sRGB cannot describe.
- **OKLCH** — a perceptually uniform space; equal lightness actually looks equally bright. Best for generating palettes.
- **Alpha** — the transparency channel. An alpha border recedes into the surface; a solid hex sits on top of it.
- **Semantic token** — a color named for its job, not its value (`--border-subtle`, not `#e0e0e0`). → [[using-design-md]]
- **Contrast ratio** — luminance difference of foreground to background; WCAG wants 4.5:1 body, 3:1 large/UI. → [[contrast-and-color-scheme]]
- **Tinted neutral** — a grey with a slight hue bias; pure `#808080` reads as a placeholder, a tint reads as chosen. → [[color-monochromatic]]
- **Saturation** — a color's intensity; a fully-saturated brand hue that sings on a light page can buzz on a dark one — drop it roughly a quarter to settle it.
- **Chroma** — OKLCH's perceptually-accurate saturation. Reduce chroma for a light tint; reducing opacity instead just greys it. → [[color-monochromatic]]
- **Gradient** — a transition between colors; built in OKLCH it stays vivid where sRGB/HSL go grey at the midpoint.
- **Opacity vs visibility** — `opacity:0` still takes space and catches clicks; `visibility:hidden` kills interaction but keeps space.
- **Dark mode** — surfaces built dark, brightest at the top of the layer stack; light tokens rarely translate directly. → [[dark-mode]]
- **Blending** — how a layer mixes with what is beneath. Multiply darkens, Screen lightens, Overlay does both.

## 03 — Iconography

How icons are drawn and balanced.

- **Stroke weight** — icon line thickness; it has to scale with size or it disappears small and looks frail large. → [[icon-systems]]
- **Optical centre** — where a shape *looks* centred vs where it mathematically is; a play triangle must nudge right. → [[icon-systems]]
- **Filled vs outlined** — two styles signalling state; filled often means active/selected, outlined means default. → [[icon-systems]]
- **Cap style** — how a stroke ends, square or round; rounded ends usually read intentional in UI, blunt square ends can look like an untuned default.
- **Pixel hinting** — nudging paths onto the pixel grid at small sizes so a 16px glyph doesn't turn to mush.
- **Icon library** — a single family tuned to one size, weight, and corner radius; pulling glyphs from a second set — however close — leaves small inconsistencies that pile up. → [[icon-systems]]
- **Icon size system** — the defined sizes (12/16/20/24/48) each ideally drawn for its context, not scaled from one master.
- **Meaning collision** — the same icon doing two jobs (a star for favourite *and* rating); users learn neither.
- **Contextual swap** — switching outlined↔filled to mark a state change; only works if the convention is consistent.
- **Breathing room** — the deliberate spacing between a glyph and its text (start ~6–8px); design it as a property of the component, not whatever the flex gap happens to leave.
- **Unified weight** — icon stroke matched to the adjacent text weight, so they read as one family. → [[icon-systems]]
- **Metaphor accuracy** — whether the glyph still means what it depicts (a floppy disk for save) as the audience ages.

## 04 — Layout

How space and structure organise a page.

- **Border radius** — corner rounding; an inner radius = outer radius − padding, or the gap shows. → [[border-radius]]
- **Gap** — space between flex/grid children, set on the parent; unlike margin it leaves no trailing space.
- **Negative space** — the empty area that gives a layout its edges and steers the eye; packing things tighter erases the structure the eye was reading, it doesn't add content.
- **Flexbox** — the row/column layout model controlling direction, alignment, and grow/shrink.
- **Auto layout** — Figma's flexbox: elements that space themselves and resize with content.
- **Layout shift** — content jumping as the page loads (images, fonts, reorders); reserve space to prevent it. → [[sticky-and-scroll-tells]]
- **Overflow** — what happens past a container's bounds; `hidden` clips silently and breaks child sticky positioning.
- **Sticky positioning** — scrolls then pins at a threshold; a parent with `overflow:hidden` silently breaks it. → [[sticky-and-scroll-tells]]
- **Aspect ratio** — fixed width:height; setting it reserves space before media loads and prevents layout shift.
- **Viewport units** — units relative to the window; `dvh` accounts for mobile browser chrome that `vh` ignores. → [[viewport-custom-design]]
- **Safe area** — the screen region clear of notches and home indicators; fixed bottom chrome must inset for it. → [[viewport-custom-design]]
- **Max-width** — a cap on container width so lines don't stretch unreadable on wide screens. → [[line-length-tracking]]
- **Breakpoint** — where layout changes; set it where the content breaks, not at assumed device widths. → [[viewport-custom-design]]
- **Responsive** — a layout that adapts via fluid sizing, flexible media, and breakpoints. The web baseline.
- **Grid** — a column system organising layout; 12 is conventional, 8 often suits simpler layouts.
- **Asymmetry** — columns or elements weighted on purpose rather than mirrored; the imbalance is what carries energy. A perfectly balanced grid is safe and usually inert. → [[visual-imperfection]]
- **Baseline grid** — horizontal rhythm from body line-height; great for editorial, usually overkill in product UI.
- **Z-index** — stacking order on a plane; modals, tooltips, dropdowns need explicit values or they clip behind. → [[tray-rules]]

## 05 — Interaction

How elements respond to input.

- **Affordance** — the cue a control gives about how to operate it; a raised edge says press, an underline says click. Strip the cue and the user is left to experiment.
- **Hover state** — the change on cursor-over; confirm interactivity with cursor + color, not color alone. → [[hover-states-subtle]]
- **Focus state** — the keyboard-focus indicator; never delete it, replace it. → [[accessibility-baseline]]
- **Active state** — the pressed change; a small scale or color shift, or the button feels dead. → [[responsive-feedback]]
- **Disabled state** — non-interactive; a muted token is more reliable than opacity, which can pass or fail contrast. → [[accessibility-baseline]]
- **Cursor** — the pointer contract: pointer = clickable, text = selectable, default = static. The wrong one lies.
- **Pointer events** — whether an element catches input; `none` makes a decorative layer present but click-through.
- **Optimistic update** — update the UI before the server confirms; feels instant, needs a rollback path. → [[optimistic-updates]]
- **Debounce** — delay a function and reset on each trigger; stops a request per keystroke (~300ms is common).
- **Touch target** — the tappable area; 44×44px minimum, even when the visible element is smaller. → [[accessibility-baseline]]
- **Copy to clipboard** — needs visible confirmation (a checkmark for a beat) or users click it again thinking it failed. → [[responsive-feedback]]
- **Skip link** — a visually-hidden link, revealed on focus, that jumps past nav to main content. → [[accessibility-baseline]]
- **Hydration mismatch** — server HTML and the first client render disagree (a theme, a date, a stored toggle), so the page flashes or React throws; set persisted state before first paint. → [[ui-polish-pass]]
- **FOUC** — flash of unstyled (or wrongly themed) content before styles or fonts apply; a blocking theme script and preloaded fonts prevent it. → [[performance-discipline]]
- **Light dismiss** — closing an overlay by clicking outside or pressing Escape, without a dedicated button; popovers and menus expect it, destructive dialogs often shouldn't. → [[keyboard-patterns]]
- **Race condition** — two async results landing out of order, so an older response overwrites a newer one (search-as-you-type); cancel or ignore stale requests. → [[optimistic-updates]]
- **Passive listener** — a `touchstart`/`wheel` handler marked `{ passive: true }`, promising not to call `preventDefault`, so scrolling never waits on script. → [[performance-discipline]]

## 06 — Motion

How things move and transition. The largest cluster in this skill — see [[animation-decision-framework]] first.

- **Easing** — the speed curve of an animation; a custom cubic-bezier almost always beats the CSS built-ins. → [[easing-curves]]
- **Ease-out** — fast then slow; the default for things entering the screen. → [[easing-curves]]
- **Ease-in** — slow then fast; for things leaving. On an entrance it feels reluctant. → [[easing-curves]]
- **Ease-in-out** — slow-fast-slow; for moves across the screen (a toggle, a sliding card). Overkill for simple enter/exit.
- **Stagger** — list items animating in sequence (~40ms apart); all-at-once reads as a flash. → [[stagger-choreography]]
- **Duration** — UI is sub-300ms; hovers ~150ms, buttons 100–160ms, >400ms with no feedback looks broken. → [[duration-table]]
- **Transition property** — animate only `transform` and `opacity`; `all` catches layout props and janks. → [[transform-opacity-only]]
- **Reduced motion** — the `prefers-reduced-motion` preference; any significant movement must honour it. → [[prefers-reduced-motion]]
- **Skeleton shimmer** — a gradient sweep on a skeleton to suggest activity; must respect reduced motion. → [[empty-loading-states]]
- **Spring** — physics-based easing that overshoots and settles; reads more alive than a fixed curve. → [[spring-animations]]
- **Choreography** — timing several animations as one phrase so attention lands in one place; uncoordinated motion just scatters the gaze. → [[stagger-choreography]]
- **Enter vs exit asymmetry** — enter decelerates in, exit accelerates away; a reversed enter feels like arriving backwards. → [[compose-subtract-asymmetry]]
- **Shared axis transition** — motion direction reflects spatial relationship: forward animates right, back animates left. → [[fly-not-teleport]]
- **Motion as feedback** — press-compress, error-shake, success-draw: the motion *is* the response, not decoration. → [[responsive-feedback]]
- **GPU compositing** — transform/opacity run on the GPU and skip layout recalc; animating width/top forces reflow per frame. → [[transform-mastery]]

### Motion: the finer words

When "make it animate" is the whole prompt, the agent guesses. One of these names usually settles which of several animations is meant.

- **Fade / scale in / slide in / pop in** — four different entrances: opacity only; growing from ~0.95 to 1 together with a fade; arriving from an edge; overshooting the final size and settling. A pop is a spring with bounce, so keep it for celebratory moments. → [[never-scale-from-zero]], [[spring-animations]]
- **Reveal** — a clip-path or mask uncovers content in place, so nothing moves. → [[clip-path-tricks]]
- **Origin-aware animation** — a popover or menu grows out of the control that opened it (its `transform-origin` set to the trigger), not out of its own centre. → [[transform-mastery]]
- **Transform origin** — the anchor a scale or rotation pivots on. Wrong for nearly every popover by default. → [[transform-mastery]]
- **Skew / 3D tilt / perspective** — slanting the axes; rotating in X or Y for depth; how close the virtual viewer sits (a lower value exaggerates the depth). Use them sparingly: a tilt card is a marketing-surface move, not a product one. → [[marketing-vs-product-ui]]
- **Keyframes / interpolation (tween)** — the stops you author versus the frames the engine fills in between them.
- **Stepped animation** — jumps between discrete states (`steps()`), as a countdown or a sprite does; smooth easing would be wrong there.
- **Fill mode** — whether an element holds an animation's first or last frame outside its active time (`forwards` keeps the end state).
- **Orchestration** — sequencing several animations so they read as one gesture; it is the plan, and [[stagger-choreography]] is one technique inside it.
- **Asymmetric easing** — a curve that accelerates and decelerates at different rates. Real motion is asymmetric, which is why `ease-in-out` often reads mechanical. → [[easing-curves]]
- **Linear** — constant speed. Right for spinners, marquees and progress tied to time; wrong for anything that starts or stops. → [[easing-curves]]
- **Velocity / momentum** — how fast and which way something moves at the moment you touch it, and motion that keeps going after the input ends. A spring inherits velocity; a tween restarts from zero. → [[gesture-momentum]]
- **Stiffness · damping · mass** — the three spring dials: how hard it pulls, how fast it loses energy, how heavy it is. Name the dial instead of saying "bouncier". → [[spring-animations]]
- **Interruptible animation** — it can be redirected mid-flight and curves toward the new target instead of jumping or finishing first. CSS transitions retarget; keyframe animations restart. → [[spring-animations]]
- **Crossfade / morph / layout animation** — two elements swapping in one spot; one shape becoming another; an element animating to its new size or position instead of snapping. → [[cross-blur-transitions]], [[morphing-icons]], [[fly-not-teleport]]
- **Continuity / shared element transition** — before and after are visibly the same object (a thumbnail grows into the card it opens), so the user never loses the thread. → [[fly-not-teleport]]
- **Direction-aware transition** — forward slides one way and back slides the other. Also called a shared-axis transition (above).
- **Scroll reveal / scroll-driven animation** — content animating as it enters the viewport, versus animation whose progress *is* the scroll position. The first is usually decoration. → [[sticky-and-scroll-tells]]
- **Page transition / view transition** — animation between routes; the browser's View Transitions API morphs the elements two states share. → [[fly-not-teleport]]
- **Press feedback / ripple / hold to confirm** — a scale-down while held (~0.97); a circle spreading from the tap point (Material's idiom, foreign elsewhere); a fill that completes while the button is held, guarding destructive actions. → [[responsive-feedback]], [[destructive-actions]]
- **Number ticker / typewriter** — digits rolling to a value (with tabular figures, or the width jitters); text appearing one character at a time. Both read as gimmicks when used for routine updates. → [[line-length-tracking]]
- **Mask** — like clip-path, but the edge can fade. A mask fade is how overflowing animated content gets clipped softly without breaking the animation. → [[clip-path-tricks]]
- **Frame rate / dropped frame / jank** — frames drawn per second (60 is the floor and 120 is common); a frame that missed its deadline; the visible stutter of several in a row. → [[performance-discipline]]
- **Layout thrashing** — reading and writing layout in alternation, or animating width, height, top or left, so the browser re-lays the page out every frame. → [[transform-opacity-only]], [[debugging-animations]]
- **Opacity vs visibility** — `opacity: 0` keeps both the space and the clicks; `visibility: hidden` keeps the space and drops the clicks; `display: none` drops both. Fading something out leaves invisible click targets behind unless you also set `pointer-events: none` or `visibility`.
- **Filled vs outlined (contextual swap)** — outlined icons for the default state and filled ones for active or selected, applied as one rule everywhere or not at all. → [[icon-systems]]

## 07 — Accessibility

How interfaces work for everyone. The baseline is non-negotiable — see [[accessibility-baseline]].

- **WCAG** — the contrast standard most teams use; AA is 4.5:1 body, 3:1 large/UI. → [[contrast-and-color-scheme]]
- **APCA** — a newer perceptual contrast model accounting for size and weight; sometimes disagrees with WCAG.
- **Screen reader** — reads the UI aloud; navigates by DOM order, headings, and ARIA roles, not visual layout. → [[accessibility-baseline]]
- **Tab order** — the keyboard focus sequence; should match reading order, broken when DOM and visual order diverge.
- **Prefers color scheme** — the media query for system theme; the right way to honour dark mode without a custom toggle. → [[dark-mode]]
- **aria-label** — an accessible name for a control with no visible text; describe the action ("Search"), not the icon.
- **Focus trap** — keeping keyboard focus inside an open modal so it can't escape to the page behind. → [[tray-rules]]
- **DOM order** — the HTML sequence screen readers follow; reordering visually with CSS desyncs seen from read.
- **Semantic HTML** — the right element for the job; a `button` gets keyboard, focus, and role for free, a `div` does not.
- **Label association** — tying a `label` to its input via `for`/`id` so clicking the label focuses the field. → [[forms-validation]]
- **Color-only state** — color as the sole signal (a red border) is invisible to colorblind users; always pair with icon or text.

## 08 — Information architecture

How content is structured and found.

- **Progressive disclosure** — reveal complexity as the user goes deeper instead of dumping it all on one screen.
- **Navigation** — the system for moving between areas; labels should match how users describe things, not internal naming.
- **Mental model** — the assumptions a user already holds about how a thing behaves; architecture that fits them feels obvious, architecture that fights them makes users feel stupid.
- **Hierarchy** — the deliberate ordering of importance; with none, every element shouts equally and the user hears nothing.
- **Empty state** — the no-content-yet view; explain why and offer the first action. "No data" ends the journey. → [[empty-loading-states]]
- **Error state** — what shows on failure; say what broke and a specific way to recover. → [[states-are-the-work]]
- **Onboarding** — the best kind delivers value immediately; one completed action beats a watched tour. → [[delight-impact-curve]]
- **Confirmation dialog** — a gate before a destructive action; describe what is lost, keep safe and destructive far apart.
- **Wayfinding** — the signals (breadcrumbs, active nav, titles, URL) that say where you are and where you can go. → [[url-as-state]]
- **Signpost** — an element whose sole job is to orient (a section header, a step counter); you only notice it once it's gone.
- **Labelling** — the wording on nav and categories; when users search for something they should have browsed to, the query is a receipt for a mislabel.
- **Depth** — levels of nav to reach content; past three, users lose track — add wayfinding or flatten.
- **Search as escape hatch** — high search volume for browsable things is a sign the IA failed, not that search needs work.
- **Content inventory** — a complete list of everything before restructuring; skipping it just moves broken content.
- **Card sorting** — a research method: real users cluster items the way they expect to find them, exposing where the team's labels and the user's expectations split.

## 09 — Copywriting

How words guide and reassure. The skill's voice work lives in [[copy-voice]].

- **Microcopy** — the small text (labels, errors, placeholders) that outsizes its length in how trustworthy a product feels. → [[copy-voice]]
- **CTA** — the primary action label; "Save changes" outperforms "Submit." Own the action, don't apologise for it. → [[copy-voice]]
- **Error message** — name what went wrong and how to fix it; "Invalid input" names nothing. → [[forms-validation]]
- **Placeholder** — hint text that vanishes on typing; it cannot replace a label — the reminder is gone when needed.
- **Sentence case** — cap only the first word and proper nouns — the UI default; capitalising Every Word gives microcopy a stiff, contractual tone.
- **Front-loading** — lead with the word that carries the meaning, because eyes grab the first token and move on; "3 errors" lands before "There were some problems with your submission" finishes. → [[copy-voice]]
- **Inline error** — the message next to the offending field; a top-of-form summary makes users hunt. → [[forms-validation]]
- **Voice** — a product's fixed character in language — warm or clinical, plain or technical. Voice is the constant; tone is what flexes by moment.
- **Tone** — how the voice adapts to the moment (encouraging in onboarding, careful around destructive actions).
- **Success message** — specific and brief ("Saved", not "Done"); often neglected, never a press release.
- **Destructive language** — say "Delete"/"Remove" plainly; softening a permanent action ("clear", "reset") misleads.
- **Scannability** — copy built for the glance: lead with the outcome, keep clauses short, stay active. Most UI text is skimmed, not read — write for that.
- **Truncation strategy** — where and how overflowing text gets cut; a heading, a nav label, and a body line each want a different cut rule, never one global ellipsis. → [[copy-voice]]
- **Contextual help** — one sentence placed at the moment of need; cheaper than a tooltip (hover) or docs (navigate).
- **Numeric formatting** — `1,000` vs `1000`, `3.5k` vs `3,500`; consistency matters more than the convention, match the locale. → [[data-is-content]]

## 10 — Tools

How design is made and shared.

- **Design system** — shared components, tokens, patterns, and guidelines; a living product, not a static doc. → [[using-design-md]]
- **Source of truth** — the one place a team defers to; increasingly the codebase, not the Figma file. → [[using-design-md]]
- **Variables** — named, reusable values updated from one place; change once, everything referencing it updates.
- **Tokens** — design decisions as named variables both tools and code reference; what makes a system portable. → [[using-design-md]]
- **Visual language** — the cohesive color/type/shape/motion/tone that makes a product recognisable without its name. → [[marketing-vs-product-ui]]
- **Artboard / Frame** — a named canvas for a screen or component; Figma frames also define clipping and auto layout.
- **Prototype** — an interactive mockup to test a flow; fidelity should match the question being asked.
- **Handoff** — design moving to engineering; done well it is shared tokens and an available designer, not guesswork. → [[using-design-md]]
- **Redline / annotation** — measurements and notes on a design to communicate intent; less needed with a shared system. → [[agentation-workflow]]
- **Moodboard** — a reference collection to align on direction; the best ones make an argument, the worst are Pinterest. → [[taste-is-trained]]
- **HiDPI / Retina** — 2×+ pixel-density screens; assets, icons, and borders must account for 2× and sometimes 3×.
- **Open Graph** — the share-preview metadata (image, title, description); the first impression for most who don't visit.
- **Skeuomorphism** — modelling an interface on a physical object (a leather calendar, a legal-pad notes app) to borrow familiarity. Shadows and gradients alone are depth, not skeuomorphism.

## 11 — Analysis

How design decisions are measured.

- **A/B test** — two variants run live to measure which wins; only as good as the metric chosen.
- **Heatmap** — a visualisation of clicks/taps/scroll; spots affordance problems and content nobody reaches.
- **Session recording** — replayed footage of one real user's path; where an aggregate heatmap blurs, a recording puts a face on the moment someone gave up — much harder to dismiss.
- **Funnel** — the staged path to a goal (sign-up, checkout, activation); every step that sheds users is a problem to diagnose, not a law of nature.
- **Conversion** — the moment a visitor takes the desired action; design moves it via clarity, trust, and friction.
- **Bounce rate** — share who leave without acting; high on a key page signals an expectation mismatch.
- **Retention** — how many return after the first visit; harder and more important than acquisition.
- **Churn** — the rate at which existing users leave — retention read backwards; a rising number is the product admitting it no longer earns the return visit.
- **NPS** — likelihood-to-recommend, 0–10; a blunt instrument, widely used as a rough satisfaction signal.
- **Scroll depth** — how far down users actually read; content below the fold reaches fewer than assumed. → [[sticky-and-scroll-tells]]

## 12 — Components

The building blocks. Their state behaviour is where craft lives — see [[states-are-the-work]]. For the pairs people confuse, see [[component-confusables]].

- **Button** — the primary trigger; needs distinct default/hover/active/focus/disabled/loading, one primary per view. → [[hover-default-imperative]]
- **Input** — a text field; needs a persistent label above it, not just a placeholder, and a distinct state each. → [[forms-validation]]
- **Textarea** — a multi-line input; same state treatment as a single-line field. → [[forms-validation]]
- **Select** — a one-of-many dropdown; the native element is accessible but hard to style, customs need keyboard care.
- **Checkbox** — a binary toggle; clicking the label should toggle it, not just the box. → [[forms-validation]]
- **Radio group** — exactly one of a set; distinct from checkboxes, which allow several.
- **Switch** — an on/off with immediate effect; for settings that apply without a save.
- **Slider** — a value within a range; update live on drag, not only on release.
- **Modal / Dialog** — an overlay that interrupts and demands attention; trap focus, make the background inert. → [[component-confusables]]
- **Sheet** — a panel sliding from a screen edge; same focus and dismissal rules as a modal. → [[component-confusables]]
- **Drawer** — a bottom sheet pulled up from the base; a common mobile dialog replacement. → [[component-confusables]]
- **Popover** — a click-anchored overlay that *can* hold interactive content (links, buttons). Not a tooltip. → [[component-confusables]]
- **Tooltip** — a hover label that *cannot* hold interactive content; if you need a link inside, use a popover. → [[component-confusables]]
- **Toast** — a temporary auto-dismissing notification; duration should track reading time, not a flat 2s. → [[sonner-principles]]
- **Badge** — a small label attached to another element and read-only; numeric implies a count. → [[component-confusables]]
- **Tag** — a label the user can pick up, toggle, or remove — it categorises and it's interactive. A badge is pinned on; collapsing the two hides a real difference. → [[component-confusables]]
- **Accordion** — stacked expand/collapse sections; good for FAQs, not a substitute for tabs when comparing.
- **Tabs** — switches between related views in one space; for filtering the same content, not navigating unrelated sections.
- **Stepper** — a multi-step flow showing progress; show the steps upfront to set expectations.
- **Carousel** — a horizontal scroll row; on desktop often a sign the layout wasn't solved. The first item gets the attention.
- **Navigation menu** — top-level or flyout structure; labels reflect how users think, not how it was built.
- **Sidebar** — persistent edge navigation; works when users move between sections often.
- **Breadcrumb** — a location trail in a hierarchy; navigate back at depth without the browser button. → [[url-as-state]]
- **Pagination** — page controls for lists too long to load at once; infinite scroll is the tradeoff alternative.
- **Skeleton** — a placeholder holding content's shape while it loads; better than a spinner for list/page loads. → [[empty-loading-states]]
- **Spinner** — an indeterminate loader; fine for short action waits, a skeleton wins for page/list loads. → [[empty-loading-states]]
- **Avatar** — a small user image; needs a fallback (initials or icon) when the image fails. → [[avatar-systems]]
- **Card** — a contained surface grouping content; inner radius < outer, and a fully-linked surface kills text selection. → [[cards-design]]
- **Data table** — a row/column grid; right-align numbers with tabular nums — alignment does zebra-striping's job. → [[data-is-content]]
- **Combobox** — a typeable input whose list narrows with each character; feels like free text but only lets the user land on a valid option.
- **Command menu** — a keyboard-triggered search for navigating or acting; for power users avoiding the mouse.
- **Progress** — a bar for a determinate process; for unknown durations use a spinner instead.
- **Separator** — a visual divider; often overused where spacing would do the same job.

## 13 — Sound

The words for what an interface sounds like. This category is the skill's own extension of the Index module; see [[MOC-sound]].

- **Transient** — the sharp onset of a sound; the part you sync to a frame. → [[sound-motion-sync]]
- **Earcon** — a short abstract tone whose meaning is learned (rising = success); distinct from an *auditory icon*, which imitates a real sound. → [[sound-palette]]
- **Contour** — the pitch shape of a sound over time: rising, falling, flat. Carries meaning before timbre does. → [[sound-palette]]
- **Timbre / material** — what the sound is *made of* — wood, glass, breath. A product has one. → [[sound-palette]]
- **Envelope (ADSR)** — attack, decay, sustain, release; UI sounds are nearly all attack and decay. → [[sound-spec]]
- **Tail** — the decay after the event; the first thing to cut. → [[sound-spec]]
- **Dry / wet** — without / with reverb; UI sounds are dry. → [[sound-generation-elevenlabs]]
- **One-shot / loop** — a sound that plays once vs one that sustains a state (processing, recording). → [[sound-spec]]
- **Sprite** — several sounds in one file addressed by offset; one decode for the whole family. → [[sound-spec]]
- **LUFS / dBFS / true peak** — perceived loudness, sample level, and the reconstructed peak; the three numbers a spec names. → [[sound-spec]]
- **Ducking** — lowering one track (a bed) while another (a hit, a voice) plays. → [[launch-video-music]], [[sound-from-motion]]
- **Pre-roll** — silence before a file's transient; a sync bug disguised as an asset. → [[sound-motion-sync]]
- **Whoosh / riser / stinger / braam** — the motion-graphics vocabulary: movement, tension build, a brand hit, a cinematic drone. Product UI uses none of them. → [[launch-video-sound]]
- **Audio-haptic harmony** — Apple's term for sound, haptic, and visual describing the same physical event at the same instant. → [[sound-motion-sync]]

## 14 — Launch film

The words for a rendered film's editorial choices. Like Sound, this category is the skill's own extension of the Index module; see [[MOC-launch-video]].

- **Register** — the editorial mode that fixes a film's cut rate, stillness and loudness; pick it before anything else. → [[launch-video-registers]]
- **Poster frame** — 1-4 frames of the finished title or hero at t = 0, then a cut; it fixes the autoplay thumbnail. → [[launch-video-structure]]
- **Cut the curve** — HyperFrames' lateral hard cut taken at peak speed: the exit accelerates into the cut and the entry decelerates out of it on mirrored curves, so the speed is equal on both sides. Inside a HyperFrames project the stamped eases win ([[hyperframes-reconciliation]]). → [[launch-video-seams]]
- **Scale cut** — scale changed by a cut rather than a zoom: a one- or two-frame jump of ~2-3× on the element being read. → [[launch-video-cuts]]
- **Subtractive punctuation** — the low end or the whole mix taken away just before a key beat, so the reveal lands on something withheld. → [[launch-video-sound]]

## Sources

- *Index — Say Precisely What You Mean*, Emil Kowalski & Glenn Carstens-Peters — [index.how/to/articulate](https://index.how/to/articulate). The 188-term articulate module this lexicon is seeded from; the canonical reference, arriving fall 2026. Glosses here are this skill's own.
- Launch film terms: HKTITAN's launch-film corpus (Skale and acclaimed films, measured 2026-09-28, `docs/research/launch-films/`) and heygen-com/hyperframes `.agents/skills/cut-the-curve/SKILL.md` (Apache-2.0, repo-internal).
- Cross-linked throughout to this skill's own clusters: [[MOC-philosophy]], [[MOC-motion]], [[MOC-surface]], [[MOC-typography]], [[MOC-components]], [[MOC-layout]], [[MOC-anti-patterns]], [[MOC-sound]], [[MOC-launch-video]].