Product Design Language

Design system vocabulary covers the shared terms designers and engineers use to talk about reusable UI: design tokens (named values like colours and spacing), primitives vs. semantic components, variants, states, and slots. Sharing this vocabulary precisely prevents miscommunication — "make it a variant" and "make it a new component" mean very different implementation work, and a team that uses the terms consistently ships faster with fewer handoff mistakes.

Figma annotation language is the precise English used in developer handoff notes: spacing values ("8px gap"), sizing behaviour ("fill container" vs. "hug contents"), constraints ("scales with parent"), and responsive breakpoints ("collapses to 1 column below 768px"). Clear, numeric, unambiguous annotations — rather than vague descriptions — are what let an engineer build a screen without guessing or requesting clarification.

Use the pattern: specific observation + why it matters + a suggestion phrased as a question. Instead of "this looks bad," say "the contrast ratio here is 2.8:1, below the WCAG AA 4.5:1 requirement — could we darken the text?" Cite metrics and standards rather than opinions, and use collaborative openers like "I'd like to explore an alternative approach to…" or "my concern is that…" rather than declarative judgments.

Key terms: WCAG conformance levels (A, AA, AAA), contrast ratio (4.5:1 for normal text at AA), focus indicator (visible outline for keyboard users), touch target size (44×44pt minimum), alt text (when to write it vs. leave it empty for decorative images), and cognitive load (mental effort to use an interface). Citing the exact WCAG success criterion number (e.g., "2.4.7 Focus Visible") in a review makes the requirement checkable, not just a matter of opinion.

A design token is a named variable storing one raw design decision (a colour, a spacing value). A variant is a deliberate, chosen version of a component (primary vs. secondary button) selected by whoever places it. A state is a temporary condition triggered by interaction or system status (hover, focus, disabled, loading, error) — the same variant moves through many states without becoming a different variant.

These describe how a frame resizes: "fixed" means the dimension never changes; "fill container" means it stretches to occupy all available space in its parent (like CSS `width: 100%`); "hug contents" means it shrinks or grows to exactly match its content (like CSS `fit-content`). Annotating a component with these terms tells the developer exactly which CSS sizing strategy to implement.

Primitive tokens store raw values with no meaning (`$blue-600 = #2563eb`). Semantic tokens map a primitive to a meaning (`$color-text-error = $red-600`) and are what change between light and dark themes. Component tokens map a semantic token to one component's specific use (`$button-background-primary`). This three-tier model lets a rebrand or theme change propagate everywhere automatically instead of requiring hundreds of manual edits.

State the exact pixel value and which side of it each layout applies to: "above 768px, 2 columns; at or below 768px, 1 column" — not "it changes around tablet size." Precise breakpoint language prevents bugs at the boundary value and lets engineers implement the exact media query (`min-width` or `max-width`) intended.

Name the deviation explicitly, state the reason, and scope it: "the design deviates from the component library here because this screen needs a wider card to fit the chart legend — treat it as a one-off, not a new variant." Without this, engineers either "fix" intentional exceptions back to the standard, or turn every deviation into an unnecessary new permanent variant.

Start with Design System Vocabulary for foundational terms, then move to Figma Annotation Language and Design Handoff Communication for practical handoff writing. Related topics live in UI/UX Designer and CSS & Frontend Vocabulary.