Reference

Glossary

The vocabulary of interface craft, defined plainly. Search by term or meaning, or filter by area.

26 terms

Foundations

UI / UX: UI is what a person sees and operates; UX is the whole experience of reaching their goal.

OKLCH: A perceptual color space that makes consistent, accessible color scales easier to build.
Type scale: A deliberate set of font sizes with consistent ratios.
Visual hierarchy: Using size, weight, color, and space to order what the eye sees first.

Atomic design: Composing interfaces from small primitives up to whole pages.
Design system: A shared, documented set of tokens, components, and rules that keep a product coherent at scale.
Design token: A named design decision (a color, space, duration) stored as data so it can be reused and themed.

Choreography: Coordinating multiple animated elements so motion reads as one intentional sequence.
Easing: How an animation's speed changes over time.
Lottie / Rive: Formats and tools for shipping vector animation; Rive adds interactive state machines.
Micro-interaction: A small, self-contained feedback moment — a toggle, a like, a refresh.
Scroll-driven animation: Animation tied to scroll position rather than to time.
Spring: Physics-based motion that can overshoot and settle, rather than following a fixed curve.

Container query: Styling a component based on its own container's size rather than the viewport.
View Transitions: A browser API for animating between UI states or pages.

ARIA: Attributes that add accessibility semantics where native HTML can't; used sparingly, after semantic HTML.
Reduced motion: A user preference (prefers-reduced-motion) to minimize animation for comfort and safety.
WCAG: The Web Content Accessibility Guidelines; the standard for accessible web content.

Cognitive fluency: The ease of processing information; easier-to-process often reads as more trustworthy.
CRO: Conversion rate optimization — improving the share of visitors who complete a goal.
Fitts's law: Targets that are bigger or closer are faster to hit.
Hick's law: More choices slow a decision down.

Agentic UI: Interfaces where an AI agent takes multi-step actions on the user's behalf.
BYO-key: “Bring your own key”: the user supplies their own provider credentials, kept in their browser.
Generative UI: Interface generated or assembled at runtime by a model from a declarative spec.
MCP: A protocol for connecting models to tools and apps; relevant to tool-driven UI.