Terminology
Shared definitions for common terms across the product team.
About this page
This page collects short, shared definitions for words that can mean different things to different people in a product team. Use it as a reference when you write, talk about work, or name things in the design system and product.
Definitions
Component
A reusable UI building block with defined structure, states, and behaviour. It does not own product-specific flows or business rules.
Examples
- Button
- Checkbox
- Card
- Section title
- Sheet
- Text field
Design system
A shared set of guidelines, components, and tokens that helps the team build products in a consistent way.
Examples
- Component library with buttons, cards, and forms
- Colour, spacing, and typography tokens
- Rules for when to use each component
Design token
A small, named value that encodes a design decision and can be reused in code and design tools.
Levels
- Global tokens are raw values.
- Semantic tokens give values meaning in context.
- Component tokens are semantic tokens scoped to a specific component and state.
Examples
- Colour tokens, such as
color.background.surfaceorcolor.text.muted - Spacing tokens, such as
space.2orspace.4 - Radius tokens, such as
radius.smorradius.lg
Primitive
A low-level building block that other components and patterns are built from.
Examples
- Layout containers such as stack and grid wrappers
- Base input fields without labels or validation
- Typography styles like body text, caption, or heading
Pattern
A repeatable solution to a common user problem, often made from several components.
Examples
- Sign-in flow with email and password fields, error messages, and success feedback
- Filter panel with checkboxes, sliders, and clear-all action
- Checkout summary with item list, totals, and primary action button
Template
A pre-structured layout that shows what content and components a page should contain, but not the final content itself.
Examples
- Product detail page template
- Dashboard template with header, sidebar, and main content
- Form page template with title, description, and form area
Page
A complete screen or document that combines templates, patterns, components, and real content.
Examples
- Account settings page
- Cart page in the online store
- Help article page
Interaction state
The visual and behavioural change of a component based on what the user does or what the system reports.
Examples
- Hover, focus, active, and disabled states for a button
- Error, success, and loading states for a form
- Selected and unselected states for a checkbox or tab
Breakpoint
A predefined screen width where the layout or component behaviour changes to keep the interface usable.
Examples
- Mobile breakpoint where the menu turns into a drawer
- Tablet breakpoint where cards move from one to two columns
- Desktop breakpoint where navigation moves from a drawer to a full header