AI Vocabulary Guide

Overlays16

Anything that floats above the page and grabs attention — windows, panels, tooltips, alerts. They pause or layer on top of what you were doing.

Dialog

Dialog box

The technical name for a modal that carries a short conversation with the user — a question, a form, a message. Every modal is a dialog; the word 'dialog' just stresses the back-and-forth.

When to use it: Use when the system needs an answer or input before continuing: rename a file, invite a teammate.

Anatomy — Title, description, content slot, footer with primary + secondary buttons.

Alert Dialog

Confirm dialogConfirmation dialog

A stricter dialog used for important or risky decisions. It interrupts you on purpose and usually cannot be dismissed by clicking outside — you must explicitly choose an option.

When to use it: Use before destructive or irreversible actions: deleting an account, canceling a subscription.

Anatomy — Warning title + consequence text + Cancel + a clearly-styled destructive button.

Confirm Dialog

Yes/No dialog

A small dialog that asks you to confirm or cancel one specific action. It is the lighter cousin of the alert dialog, used when the action is reversible.

When to use it: Use for 'Remove this item?' or 'Discard unsaved changes?' moments.

Sheet (Right)

Side panelSlide-overRight drawer

A panel that slides in from the right edge and overlays part of the page. It keeps the main page partly visible so you do not lose your place.

When to use it: Use for secondary tasks alongside the main content: edit details, view a record, filter a list.

Anatomy — Edge it slides from + header + scrollable body + sticky footer actions.

Sheet (Left)

Left drawerNavigation drawer

Same as a right sheet but it slides in from the left. Often used for navigation menus, especially on mobile.

When to use it: Use for the mobile menu or a settings/navigation panel.

Sheet (Bottom)

Bottom sheetAction sheet

A panel that slides up from the bottom of the screen. It is the mobile-friendly way to show options or a short form without leaving the page.

When to use it: Use on mobile for share options, quick actions, or a compact picker.

Drawer

Mobile drawerOff-canvas panel

A general word for a panel that is hidden off-screen and slides into view when needed. Sheets are drawers; the word emphasises the 'pull it out, push it back' behaviour.

When to use it: Use to tuck away navigation or tools that are not needed all the time.

Toast

SnackbarNotification toast

A small message that pops up briefly (often a corner of the screen) to confirm something happened, then fades away on its own. It does not block the page.

When to use it: Use for 'Saved', 'Copied to clipboard', 'Message sent' confirmations.

Anatomy — Icon + short message + optional action (Undo) + auto-dismiss timer.

Alert

Inline messageCallout alert

A coloured box embedded in the page that draws attention to a status: success, warning, error, or info. It sits in the content flow rather than floating.

When to use it: Use to explain a form error, confirm a saved state, or warn about a limitation.

Notification

Notification centerActivity feed

A message about something that happened, collected in a list (bell icon) so you can review it later. Different from a toast, which is fleeting.

When to use it: Use for activity history: mentions, system events, updates.

How people move around the product — bars, menus, breadcrumbs, search. Good navigation answers 'Where am I, and where can I go next?'

Command Palette

Cmd+KQuick switcherSpotlight

A search box (opened with a keyboard shortcut like Cmd+K) that lets you jump anywhere or run any action by typing. It is the fastest way to navigate a complex app.

When to use it: Use in tools where power users want to do everything from the keyboard.

Anatomy — Shortcut to open + search input + grouped, filterable results + keyboard nav.

Combobox

AutocompleteSearchable select

A text box combined with a dropdown: you type to filter a list of options and then pick one. It mixes free typing with a controlled list.

When to use it: Use when a plain select would be too long: country, user, tag pickers.

Tabs

Tab barTabbed navigation

A row of labels where clicking one swaps the panel below without leaving the page. Only one tab's content shows at a time.

When to use it: Use to split related content of one page into sections: Overview, Settings, Activity.

Pagination

PagerPage controls

Controls (1, 2, 3 … Next) that break a long list into pages so it loads and reads in manageable chunks.

When to use it: Use for long search results or tables instead of one endless scroll.

Stepper / Wizard

Step indicatorMulti-step form

A guided sequence that breaks a big task into numbered steps and shows progress (Step 2 of 4). It keeps long flows from feeling overwhelming.

When to use it: Use for onboarding, checkout, or setup flows with several stages.

Anatomy — Step markers (done / current / upcoming) + connector line + Back/Next.

Anchor / Jump Links

In-page linksTable of contents links

Links that scroll you to a section of the same page instead of loading a new page. They make long pages navigable.

When to use it: Use for a long article or guide with an on-page table of contents.

Data Display17

How information is packaged so it is scannable — cards, tables, badges, lists. The goal is fast comprehension, not decoration.

Card

Content cardPanel card

A bordered, padded container that groups related content (a title, text, an image, a button) into one tappable unit. Cards make grids of items easy to scan.

When to use it: Use to present a collection of comparable things: products, articles, plans.

Anatomy — Optional media + header (title) + body content + footer/actions.

Stat Card / KPI Card

Metric cardKPI tile

A compact card that highlights one number that matters (Revenue, Users) plus a label and often a trend arrow. It turns a dashboard into a glance.

When to use it: Use at the top of dashboards to surface the few metrics that drive decisions.

Data Card

Record card

A card that represents one record from a dataset — a contact, an order, a task — showing its key fields and quick actions.

When to use it: Use as the mobile-friendly alternative to a table row.

Badge

Status badgeLabel

A small coloured label that communicates status or category at a glance (Active, Beta, Paid). Colour carries meaning, so it should be consistent.

When to use it: Use to tag the state of an item without adding a sentence.

Chip / Tag

TagToken

A small rounded element representing a selectable or removable value — a filter, a keyword, a recipient. Chips often have a small × to remove them.

When to use it: Use for selected filters, email recipients, or keyword lists.

Pill

Pill badge

A fully-rounded badge or button shape. 'Pill' describes the shape (rounded ends), not a different function from a badge or chip.

When to use it: Use for soft, friendly labels and toggles where rounded shapes fit the brand.

Avatar

Profile pictureUser image

A small circular image or initials representing a person or entity. When no photo exists it falls back to initials on a coloured background.

When to use it: Use anywhere you attribute content to a user: comments, lists, headers.

Avatar Group

Stacked avatarsFace pile

A row of overlapping avatars showing several people compactly, usually ending in a '+5' chip when there are more than fit.

When to use it: Use to show team members, participants, or collaborators on an item.

Skeleton

Skeleton loaderPlaceholder shimmer

Grey blocks shaped like the content that is loading. They reassure the user that real data is on its way and reduce the feeling of waiting.

When to use it: Use while a card, list, or profile is fetching, instead of a blank screen.

Accordion / Collapsible

ExpanderDisclosure

A list of headers you can expand and collapse to reveal or hide content. It keeps long pages short by showing only what the user asks for.

When to use it: Use for FAQs or settings where most sections stay closed by default.

Carousel

SliderSlideshow

A horizontal strip of items you swipe or click through, showing a few at a time. Use sparingly — content hidden off-screen is often missed.

When to use it: Use for testimonials, featured items, or image galleries on small screens.

Table

Data tableGrid

Rows and columns of structured data with headers, used when users need to compare values across many records or sort and filter them.

When to use it: Use for spreadsheets-like data: orders, users, transactions.

Anatomy — Header row + sortable columns + body rows + optional pagination/selection.

Tree View

TreeFile explorer

A nested, expandable list showing parent/child relationships, like a file explorer. Indentation and arrows reveal the hierarchy.

When to use it: Use for folders, org charts, nested categories, or a site map.

List

List viewItem list

A vertical stack of items, each a row with an icon, text, and maybe an action. Lists are the simplest, most scannable way to show many items.

When to use it: Use for menus, inboxes, settings, or any sequence of similar items.

Description List

Key-value listDetail list

A list of label-and-value pairs (Name: Jane, Plan: Pro) used to show the details of a single record in a readable layout.

When to use it: Use on a detail or profile page to lay out an item's properties.

Timeline

Activity timelineHistory

A vertical sequence of events with timestamps connected by a line, showing what happened in order. It tells a story over time.

When to use it: Use for order tracking, audit logs, or a project history.

Inputs22

Everything the user types, picks, or toggles. Clear labels, helpful errors, and the right control for the data make forms painless.

Input

Text fieldText box

A single-line box for typing short text such as a name or email. It is the most common form control.

When to use it: Use for short free-text values: names, emails, search terms.

Anatomy — Label + the box + placeholder + helper text + error message.

Textarea

Multi-line input

A larger box for typing several lines or paragraphs of text. It usually grows or scrolls as you type.

When to use it: Use for messages, descriptions, comments, or notes.

Select

Dropdown selectPicker

A control that opens a list so you can choose exactly one option. It saves space by hiding the choices until needed.

When to use it: Use for one choice from a known, short-to-medium list: country, plan, status.

Multi-select

Multiple selectTag input

Like a select, but you can pick several options at once. Chosen values usually appear as removable chips.

When to use it: Use for choosing multiple tags, recipients, or filters.

Checkbox

Tick box

A box you tick on or off for an independent yes/no choice. Several checkboxes can be checked at the same time.

When to use it: Use for opt-ins, agree-to-terms, or selecting many items.

Checkbox Group

Multi-checkbox

A set of related checkboxes under one label where the user can tick any combination, including none or all.

When to use it: Use for 'select the features you want' style multi-choice questions.

Radio

Radio button

A round selector where only one option in the group can be chosen — picking a new one clears the previous.

When to use it: Use for a single choice among a few visible options: shipping speed, plan tier.

Radio Group

Option group

The set of radio buttons that belong together so only one can be active at a time. The group, not each button, holds the answer.

When to use it: Use whenever exactly one option from a small set must be selected.

Switch / Toggle

ToggleOn/off switch

A sliding on/off control for a setting that takes effect immediately, like a light switch. No Save button needed.

When to use it: Use for instant settings: dark mode, notifications on/off.

Slider

Range input

A track with a handle you drag to pick a value within a range. It is good for approximate values where exactness is not critical.

When to use it: Use for volume, price range, opacity, or zoom.

Range Slider

Dual sliderMin-max slider

A slider with two handles to choose a lower and upper bound, defining a band rather than a single value.

When to use it: Use for price-from–to or date-from–to filters.

Date Picker

Calendar picker

A control that opens a calendar so you can click a date instead of typing it, preventing format mistakes.

When to use it: Use for booking dates, deadlines, or birthdays.

Date Range Picker

Date rangePeriod picker

A calendar that lets you choose a start and end date together, highlighting the span between them.

When to use it: Use for reports, analytics ranges, or stay/booking periods.

Time Picker

Clock picker

A control for selecting an hour and minute, often paired with a date picker for scheduling.

When to use it: Use for appointment times, reminders, or event start times.

File Upload / Dropzone

DropzoneFile pickerUpload area

An area where you can click to browse or drag-and-drop files. It usually shows progress and a preview of what was added.

When to use it: Use for avatars, document uploads, or attachments.

Anatomy — Drop area + browse button + file list with progress + remove.

Search Input

Search boxSearch bar

A text input dedicated to searching, usually with a magnifier icon and often live results as you type.

When to use it: Use to filter a list or query a dataset quickly.

OTP Input

One-time codePIN input

A row of single-character boxes for entering a short verification code, where focus jumps automatically to the next box.

When to use it: Use for 2-factor codes and email/SMS verification.

Form

Web form

A group of inputs collected together to capture and submit data as one unit, with validation before it is accepted.

When to use it: Use for sign-up, contact, checkout, settings — anything the user submits.

Anatomy — Fields + labels + helper/error text + submit button + validation rules.

Field

Form fieldForm control

One labelled unit inside a form: the label, the input, its helper text, and its error message treated as a single block.

When to use it: Use as the building block when designing or describing a form's layout.

Label

Field label

The short text that names what an input is for. A proper label is clickable and read aloud by screen readers, so it is not optional.

When to use it: Use on every input — placeholder text is not a substitute for a label.

Helper Text

Hint textDescription text

A short line under an input giving guidance or format hints (e.g. 'We will never share your email'). It lowers errors before they happen.

When to use it: Use to pre-empt confusion about format, rules, or privacy.

Validation Error

Field errorInline error

The message shown when an entry is invalid, explaining what is wrong and how to fix it. Good errors are specific, not just 'Invalid'.

When to use it: Use to guide the user to a correct submission without guesswork.

Actions & Buttons11

The things users click to make something happen. Hierarchy (which button is loudest) tells people what to do next.

Primary Button

CTA buttonMain action

The most visually prominent button on a screen, marking the single action you most want the user to take. There should usually be only one per view.

When to use it: Use for the main goal: Sign up, Save, Continue, Buy.

Secondary Button

Outline button

A less prominent button (often outlined) for actions that matter but are not the main goal, so it does not compete with the primary.

When to use it: Use for 'Cancel', 'Back', or an alternative path next to a primary action.

Ghost Button

Text buttonTertiary button

A button with no fill or border until you hover it — just text. It is the quietest button, for low-emphasis actions.

When to use it: Use for minor actions in toolbars or repeated row actions.

Destructive Button

Danger buttonDelete button

A button styled in a warning colour (usually red) to signal an irreversible or risky action so users pause before clicking.

When to use it: Use for Delete, Remove, Cancel-subscription — usually behind a confirm.

Icon Button

Icon-only button

A small square or round button showing only an icon. It saves space but always needs a tooltip or hidden label so its meaning is clear.

When to use it: Use in dense toolbars: edit, delete, more, close.

FAB (Floating Action Button)

Floating button

A round button that floats above the content (often bottom-right) for the single most important action on a screen, common on mobile.

When to use it: Use for the primary create action: New message, Add item.

Split Button

Dropdown button

A button with a main action plus an attached arrow that opens related variations of that action.

When to use it: Use for 'Save' with a menu offering 'Save as draft', 'Save and close'.

Button Group

Toolbar group

A set of related buttons joined visually into one unit, signalling that they belong to the same family of actions.

When to use it: Use for alignment controls, view switchers, or paired actions.

Segmented Control

Toggle groupView switcher

A row of options inside a single track where exactly one is highlighted. It is a compact way to switch a view or mode.

When to use it: Use for List/Grid, Day/Week/Month, or Light/Dark mode switches.

Loading Button

Busy buttonPending button

A button that shows a spinner and disables itself after you click it, so you know it is working and cannot double-submit.

When to use it: Use on any button that triggers a request that takes time.

Kbd (Keyboard Shortcut)

KeycapShortcut chip

A small key-shaped label (like ⌘K) showing a keyboard shortcut. It teaches power-user speed without extra explanation.

When to use it: Use next to menu items and in command palettes to advertise shortcuts.

Feedback & States12

How the product tells you what is happening — loading, empty, error, success. Good feedback removes uncertainty.

Spinner / Loader

Loading spinnerActivity indicator

A small spinning icon that says 'working, please wait' when the system has no progress percentage to show.

When to use it: Use for short, unknown-length waits like a form submit.

Progress Bar

Progress indicator

A bar that fills up to show how far along a task is. It is honest about how much waiting is left, which reduces frustration.

When to use it: Use for uploads, multi-step processing, or onboarding completion.

Linear / Circular Progress

Ring progressRadial progress

Progress shown as a filling line (linear) or a filling ring (circular). Same meaning, different shape chosen to fit the layout.

When to use it: Use circular for compact tiles, linear for full-width steps.

Empty State

Blank stateNothing-here state

What a screen shows when there is no data yet: a friendly explanation, an illustration, and a clear next step instead of a blank void.

When to use it: Use the first time a user opens an empty inbox, list, or dashboard.

Anatomy — Icon/illustration + headline + one sentence + primary action.

Zero State

First-run state

The very first experience before the user has done anything. It is an onboarding-oriented empty state that teaches the product's value.

When to use it: Use to convert a brand-new user with a guided first action.

Error State

Failure state

What a screen shows when something went wrong: a plain-language reason and a way to recover (retry, go back), never a raw technical dump.

When to use it: Use when a page or action fails so the user is not stuck.

Loading State

Pending state

The interim view while data is on its way — a spinner or skeleton — so the screen never looks broken or frozen.

When to use it: Use between requesting data and showing it.

Success State

Confirmation stateDone state

A clear positive confirmation that an action worked, often with a checkmark and the next logical step.

When to use it: Use after checkout, sign-up, or completing a flow.

Skeleton Loader

Content placeholder

Loading state made of grey shapes that mirror the real layout, so the page feels fast and stable when content arrives.

When to use it: Use instead of a spinner when the layout is known in advance.

Optimistic UI

Optimistic update

Showing the result of an action instantly — before the server confirms — and quietly correcting it only if it fails. It makes apps feel instant.

When to use it: Use for likes, toggles, and reorder actions where failure is rare.

Inline Validation

Live validation

Checking a field as the user finishes it and showing the result right there, instead of waiting for submit. It catches mistakes early.

When to use it: Use for email format, password strength, username availability.

Callout

Note boxAdmonition

A highlighted box (info, tip, warning) that pulls one important note out of the surrounding text so it is not missed.

When to use it: Use in docs and forms for tips, prerequisites, or warnings.

Layout & Structure12

The skeleton that holds everything — containers, grids, sections, headers. Structure is invisible when done right and obvious when wrong.

Container

WrapperContent width

An invisible box that caps how wide content can get and centres it, so text stays readable on huge screens.

When to use it: Use as the outer wrapper of every page section for consistent width.

Grid (12-column)

Layout gridColumn grid

An invisible 12-column scaffold that elements snap to, so spacing and alignment stay consistent across the whole product.

When to use it: Use to align cards, sidebars, and content predictably and responsively.

Flex / Stack

FlexboxStack layout

A way to lay items in a row or a column with even spacing that flexes to the available space. 'Stack' usually means the vertical version.

When to use it: Use for toolbars, button rows, or vertically spaced form fields.

Section

Page sectionBand

A full-width horizontal band of a page with its own purpose and generous vertical padding, separating one idea from the next.

When to use it: Use to break a long landing page into digestible chapters.

Hero

Hero sectionAbove the fold

The big first section of a page with the headline, a short pitch, and the main call to action. It has seconds to communicate the value.

When to use it: Use at the top of landing pages to state the promise and the next step.

Bento Grid

Bento box layout

A grid of differently-sized tiles (like a bento lunchbox) that mixes big and small cards into one balanced, modern layout.

When to use it: Use on feature or marketing pages to give items visual hierarchy.

Masonry

Pinterest layoutBrick layout

A grid where items of different heights pack tightly like bricks, removing the gaps a strict grid would leave.

When to use it: Use for image galleries or cards of varying length.

Split View

Two-paneMaster-detail

A screen divided into two linked panes — usually a list on the left and the selected item's detail on the right.

When to use it: Use for inboxes, file managers, or settings with a list and a detail.

Two-Column

2-col layout

A layout that places content in two side-by-side columns, often main content plus a sidebar of secondary info.

When to use it: Use for articles with a table of contents, or content + filters.

UX Patterns16

Repeatable solutions to common experience problems — onboarding, disclosure, confirmation, undo. Patterns are why good products feel familiar.

Onboarding

First-time experienceSetup flow

The guided first experience that takes a new user from signed-up to getting value, removing friction one step at a time.

When to use it: Use to get users to their first success quickly and reduce early churn.

Tour

Product tourWalkthrough

A sequence of highlighted tips that walks a user through key parts of the interface the first time they arrive.

When to use it: Use to introduce a complex dashboard without a manual.

Coachmark

HotspotSpotlight tip

A single contextual hint pointing at one feature, often a dot or callout that says 'try this'. It teaches in the moment.

When to use it: Use to announce one new or under-used feature without a full tour.

Aha Moment

Activation momentFirst value

The instant a user first truly understands the product's value. Everything in onboarding should aim to reach it fast.

When to use it: Use as the north-star metric to optimise activation and retention.

Progressive Disclosure

Show moreReveal on demand

Showing only what is needed now and revealing advanced options on request. It keeps interfaces simple without removing power.

When to use it: Use for advanced settings hidden behind 'More options'.

Affordance

Perceived action

A visual hint that tells you how to use something — a button looks pressable, a field looks typeable. Strong affordances make UIs self-explanatory.

When to use it: Use intentionally so users know what is interactive without instructions.

Signifier

Visual cue

An explicit signal that points to where an action is — an underline on a link, a chevron, a handle. It makes an affordance noticeable.

When to use it: Use to make hidden interactions discoverable (drag handles, expanders).

Optimistic Update

Instant feedback

The pattern of reflecting a change immediately and reconciling with the server in the background, so the app feels instantaneous.

When to use it: Use for toggles, likes, drag-and-drop reordering.

Destructive Confirmation

Type-to-confirmDanger gate

An extra friction step before an irreversible action — confirming, or typing the name — so it cannot happen by accident.

When to use it: Use before deleting an account, a project, or production data.

Undo Pattern

Undo toastSoft delete

Letting an action happen instantly but offering a short window to undo it, instead of asking 'are you sure?' up front. It is faster and forgiving.

When to use it: Use for delete/archive in lists where speed matters.

Empty State CTAs

Actionable empty state

Turning a 'nothing here' screen into momentum by pairing the explanation with the exact button that fills it.

When to use it: Use so a new user's first screen invites action, not confusion.

Form Validation Strategy

On-blur vs on-submit

The decision of when to validate: as the user leaves a field (on-blur), live as they type, or only at submit. The right mix reduces frustration.

When to use it: Use on-blur for format checks, on-submit for cross-field rules.

Mobile-First

Mobile-first design

Designing the small-screen experience first, then enhancing for larger screens. It forces priorities and prevents desktop-only thinking.

When to use it: Use as the default approach so the product works for the majority on phones.

Responsive Breakpoints

BreakpointsMedia queries

The screen widths where the layout rearranges (phone → tablet → desktop). They are the rules that keep the design usable at any size.

When to use it: Use to decide when columns stack, menus collapse, or text resizes.

Confirmation Dialog vs Inline Confirm

Confirm choice

Choosing between a blocking dialog and a lightweight inline 'Sure? Yes/No' that appears in place. Inline is faster for low-risk actions.

When to use it: Use inline confirm for row deletes; a dialog for account-level risk.

Systemic & Design Tokens21

The invisible rules that make a product feel consistent — colours, spacing, type, shadows, z-index. Tokens are the DNA of a design system.

Design Token

TokenStyle variable

A named value (like 'primary colour' or 'spacing-4') used everywhere instead of raw numbers. Change the token once and the whole product updates.

When to use it: Use so brand changes are one edit, not a thousand find-and-replaces.

Primary Color

Brand colourAccent

The signature colour used for the most important actions and brand moments. Overusing it dilutes its meaning.

When to use it: Use sparingly for primary buttons, key links, and focus highlights.

Background / Foreground

Base colours

Background is the page's base surface; foreground is the main text colour on it. Their contrast is the foundation of readability.

When to use it: Use as the base pair every other colour is layered on.

Muted / Accent

Subtle / highlight

Muted is a low-emphasis colour for secondary text and surfaces; accent is a supporting highlight colour distinct from the primary.

When to use it: Use muted for captions and dividers, accent for subtle emphasis.

Border / Ring

Outline / focus ring

Border is the subtle line separating surfaces; ring is the visible halo around a focused element that keyboard users rely on.

When to use it: Use a consistent border token for cards/inputs and a clear ring for focus.

Color Scale

Colour rampShade scale

A range of shades of one colour (50 → 900) so you always have a lighter or darker version that still belongs to the system.

When to use it: Use for hover states, backgrounds, and accessible text variants.

Typography Scale

Type scaleFont scale

A fixed set of font sizes with clear jumps between them, so headings and body text relate harmoniously instead of being arbitrary.

When to use it: Use to keep hierarchy consistent across every page.

Spacing Scale

4/8 systemSpacing system

A set of allowed spacing values (usually multiples of 4 or 8). Sticking to it makes whitespace feel rhythmic instead of random.

When to use it: Use for all margins and padding so the layout breathes consistently.

Radius Scale

Corner radiusRounding

The standard set of corner roundness values. Consistent radii make the product feel like one coherent family.

When to use it: Use the same radius tokens for buttons, cards, and inputs.

Shadow Scale

ElevationDepth

A graduated set of drop shadows that signal how 'lifted' an element is. Higher elevation = more shadow = more importance or interactivity.

When to use it: Use to show layering: cards low, dropdowns higher, modals highest.

Z-Index Scale

Stacking orderLayer order

The agreed numbering for what stacks above what (content < dropdown < modal < toast). It prevents overlays fighting each other.

When to use it: Use a token scale so a tooltip never hides behind a modal by accident.

Grid System

Layout system

The shared rules for columns, gutters, and margins that every screen aligns to, giving the whole product a calm, ordered feel.

When to use it: Use as the alignment contract between design and development.

Breakpoint

Responsive threshold

A specific screen width where the layout rules change. Named breakpoints (sm, md, lg) keep responsive behaviour predictable.

When to use it: Use named tokens instead of arbitrary pixel values for responsiveness.

Density

CompactnessInformation density

How tightly packed the interface is. High density suits power tools (lots on screen); low density suits casual or mobile use.

When to use it: Use a comfortable density by default and offer compact for power users.

States (Hover/Focus/Active/Disabled)

Interaction states

The different looks an element takes: resting, hovered, focused, pressed (active), and disabled. Every interactive element needs all of them defined.

When to use it: Use to make interactions feel responsive and to show what is unavailable.

Visual Hierarchy

HierarchyEmphasis order

Arranging size, weight, colour, and spacing so the eye lands on the most important thing first and follows a deliberate path.

When to use it: Use to guide attention: one clear headline, one primary action per view.

Contrast Ratio

Colour contrastWCAG contrast

A number measuring how readable text is against its background. Accessibility standards require at least 4.5:1 for normal text.

When to use it: Use to verify text is legible for everyone, including low-vision users.

Whitespace

Negative spaceBreathing room

The empty space around and between elements. It is not wasted — it groups related things and gives the design clarity and calm.

When to use it: Use generously to reduce clutter and improve comprehension.

Rhythm

Vertical rhythmSpacing rhythm

The consistent, repeating spacing between elements down a page. Even rhythm makes long pages feel composed rather than chaotic.

When to use it: Use consistent section and element spacing for a polished feel.

Theme (Dark/Light)

Colour schemeMode

A complete swap of the colour set (dark or light, or brand variants) achieved by changing tokens, not rebuilding screens.

When to use it: Use to respect user preference and reduce eye strain.

CSS Variable

Custom propertyDesign variable

The technical container that stores a design token in the browser so the whole product can read and switch values live.

When to use it: Use as the mechanism behind theming and consistent tokens.

Code-Adjacent (for non-devs)8

The few engineering words you will hear in product conversations — component, prop, variant, design system — explained without jargon.

Component

UI componentBuilding block

A reusable piece of interface built once and used everywhere — a button, a card, a search bar. Fixing it in one place fixes it everywhere.

When to use it: Use the word when discussing what to reuse instead of redesign.

Variant

Style variantVersion

A predefined version of a component — a button can have primary, secondary, and ghost variants — sharing the same behaviour but a different look.

When to use it: Use to ask for 'the destructive variant' instead of custom styling.

Prop

PropertySettingParameter

A setting you pass to a component to change it — its size, its label, whether it is disabled. Props are the knobs of a building block.

When to use it: Use to specify behaviour precisely: 'the small, disabled button'.

Slot

Content placeholderChildren

A reserved space inside a component where you drop your own content — a card's body is a slot you fill with anything.

When to use it: Use to understand why a component can hold arbitrary content flexibly.

Composition

Component composition

Building a complex interface by nesting small components inside bigger ones, like LEGO. It is why design systems scale.

When to use it: Use to explain why new screens are assembled, not hand-built each time.

Atomic Design

Atoms/Molecules/Organisms

A way of organising components from smallest to largest: atoms (button), molecules (search bar), organisms (header). It keeps a system tidy.

When to use it: Use as shared language for how the design system is structured.

Storybook

Component catalogue

A living catalogue where every component and its variants are shown in isolation, so designers and developers review them without the full app.

When to use it: Use to review and approve components before they reach production.

Design System

Component libraryUI kit

The complete, governed set of tokens, components, and rules that guarantees the product looks and behaves consistently everywhere.

When to use it: Use as the single source of truth that speeds up and aligns the team.