UI Design vocabulary

A container with its own bounds, layout rules, and clipping. The foundation of everything, screens, cards, and components are all frames. Like a <div> in code.

Loosely binds layers so they move/scale together. Unlike a frame, it has no layout, padding, or clipping, it's just a selection wrapper (⌘G).

A frame that arranges children in a row or column with set gap, padding, and alignment, resizing as content changes. Figma's version of flexbox; called a "stack" in other tools.

Horizontal stack (row) and vertical stack (column). SwiftUI naming for the direction an auto-layout flows.

Rules pinning a layer to its parent's edges/center as the parent resizes (left, right, top, scale, fixed).

A reusable master element. Edit the main component and every instance updates. The source of truth for buttons, cards, etc.

A live copy of a component placed in your design. Inherits from the main but can override text, color, etc.

Variations of one component packaged together (size, state, type) and switched via properties.

The container holding all variants, exposing props (toggles, dropdowns, text) to configure an instance.

Any single object on the canvas (shape, text, image). The layers panel shows their stacking order & nesting.

Organizational wrappers for the canvas: sections group related frames; pages separate big chunks of a file.

Mask clips a layer to a shape; boolean ops (union, subtract, intersect) combine shapes into one.

Detach breaks an instance's link to its component (becomes plain layers). Flatten merges layers into one shape.

A max-width box that centers content and keeps it from stretching edge-to-edge on wide screens.

Content arranged in rows & columns. Define by column count or by minimum card width that auto-wraps.

Items stacked vertically with consistent spacing between them.

Items in a horizontal line, often with space-between or centered alignment.

A fixed-width navigation/tools panel beside the main content area.

Header, footer, and a 3-column body (left nav, content, right rail), the classic app shell.

The large, attention-grabbing top section of a landing page, headline, subtext, CTA.

A full-width horizontal slice of a page, often alternating background colors.

Two side-by-side halves, e.g. text on the left, image on the right.

A Pinterest-style grid where cards have varying heights and pack tightly.

The persistent bar across the top with logo, links, and key actions.

Switches between views within the same screen. Bottom tabs on mobile, top tabs on desktop.

A trail showing where you are in the hierarchy, with each level clickable.

A vertical list of destinations down the side, often with icons + labels.

A panel that slides in from an edge, common for mobile menus or filters.

Numbered page controls for splitting long lists across pages.

A list of actions/links that appears when you click a trigger.

A large multi-column dropdown for sites with lots of categories.

A self-contained block of related content with its own padding, border/shadow, and corners.

A focused window over a dimmed backdrop that blocks the rest of the UI until dismissed.

A panel that slides up from the bottom (mobile-friendly modal alternative).

A small floating panel anchored to an element, richer than a tooltip, can hold buttons.

Tiny text label on hover/focus that explains an element. No interaction inside.

Stacked rows that expand/collapse to reveal content. Great for FAQs.

A general bordered region grouping related controls or info.

Tab strip plus the content area that swaps below it.

Single-line entry. Has a label, placeholder, and often helper or error text.

Multi-line text entry that can grow with content.

Pick one value from a list that opens on click.

Toggle for independent on/off choices; multiple can be selected.

Pick exactly one from a small set of mutually exclusive options.

Instant on/off control for a setting, applies immediately, no Save needed.

Drag along a track to set a value within a range.

Numeric input with increment/decrement buttons. Good for quantities.

A small set of options shown side-by-side; one selected at a time.

Text input styled with a magnifier icon, often with live results.

Calendar UI for choosing a date or range.

Area to drag-and-drop or browse for files.

The one main action on a screen. Filled, high-contrast, there should usually be only one.

A supporting action. Outlined or subtle so it doesn't compete with the primary.

Lowest-emphasis action, text only, no fill or border.

Signals a dangerous/irreversible action, usually red.

A button that's just an icon, for compact toolbars. Needs a tooltip/label for clarity.

A circular button floating over content for the primary action (e.g. compose, add).

Related buttons joined into one connected unit.

A primary action plus a dropdown caret for related variants (Save / Save as…).

Rows & columns of structured data, often sortable/filterable.

Vertically stacked rows, each with text and maybe an avatar/icon/action.

A small number/dot overlay signaling unread or new items.

Compact labels for categories, filters, or selections (chips can be removable).

A user's picture or initials. Multiple overlapped = an avatar stack/group.

Horizontal fill showing completion of a task or value.

A big number with a label and trend, for dashboards.

Gray placeholder shapes that mimic content while it loads.

A colored dot/pill showing state (online, error, pending).

Chronological list of events connected by a vertical line.

A brief message that pops up and auto-dismisses, usually a corner.

A colored box giving info/success/warning/error, placed inline with content.

A full-width message strip at the top of the page or section.

Animated indicator for indeterminate waiting.

What shows when there's no data, icon, message, and a way forward.

A determinate bar showing how far along a process is.

A modal asking the user to confirm before a consequential action.

Lightweight guidance pointing at how something works.

The fixed set of font sizes used across the UI (e.g. 12 / 14 / 16 / 20 / 32).

Hierarchical titles. H1 is the page title; H2/H3 are sections.

Default reading text. Usually 14 to 16px with comfortable line-height.

Small supporting text, labels above fields, captions under images, tiny overlines above headings.

How thick the strokes are. Used to create emphasis without changing size.

Leading = line spacing. Tracking = letter spacing. Both affect readability & density.

Cutting overflowing text with "…" to keep layouts tidy.

Fixed-width font for code, numbers, or technical content.

Your main brand color, used for primary actions and accents.

Colors with meaning: success, warning, danger/error, info.

The grays for text, borders, backgrounds and surfaces.

Lighter (tint) and darker (shade) steps of one hue for states & hierarchy.

Layering tokens: background (page), surface (cards), foreground (text/icons).

See-through versions of a color for overlays, hovers, and disabled states.

A smooth blend between colors, linear or radial.

Two themes driven by the same tokens so colors swap automatically.

Space inside an element, between its border and content.

Space outside an element, pushing neighbors away.

Even spacing between items in a flex/grid layout.

A consistent set of spacing steps (4, 8, 12, 16, 24, 32…) used everywhere.

How rounded corners are, from sharp to fully circular (pill).

Drop shadows that imply how "high" an element floats above the page.

Screen-width thresholds where the layout changes (mobile / tablet / desktop).

The width:height proportion of an element (1:1, 16:9, 4:3).

The normal, untouched appearance.

When the cursor is over it, usually a subtle color/lift change.

When selected via keyboard/click, shows a focus ring (key for accessibility).

The moment of being clicked/tapped or the currently selected item.

Not interactive, faded and non-clickable.

An in-progress state, often a spinner replacing the label.

A field that failed validation, red border plus a message.

Indicates the current choice in a set (cards, options, rows).

A smooth change between two states (color, size, position) over a duration.

Animating opacity to make elements appear/disappear softly.

Moving an element in from an edge (drawers, sheets, toasts).

Growing or shrinking, often for pop-in or hover emphasis.

The acceleration curve, ease-in-out, spring, bounce, that makes motion feel natural.

A raise + shadow (or glow) on hover to signal interactivity.

Background and foreground scroll at different speeds for depth.

A tiny purposeful animation responding to an action (a checkmark popping, heart filling).

Overview screen of stats, charts, and recent activity at a glance.

A list on one side; selecting an item shows its details on the other (like email).

An endlessly scrolling stream of posts/cards.

Grouped rows of options, each with a label and a control.

A flow split into sequential steps with a progress indicator.

Side-by-side plan cards, often with one "most popular" highlighted.

A focused, centered form for sign in / sign up.

A header with identity + key info, then tabs/sections of details.

Lots of whitespace, few colors, restrained type. "Less, but better."

Frosted, semi-transparent blurred panels over colorful backgrounds.

Soft, extruded shapes with dual inner/outer shadows, looks "pressed into" the surface.

Raw, high-contrast, bold borders, monospace, intentionally "undesigned."

No shadows or gradients, solid colors and simple shapes.

Google's system: elevation shadows, bold color, ink ripples.

Mimics real-world textures and objects (leather, paper, knobs).

Magazine-like: strong typography, big imagery, generous columns.

Rounded shapes, bright colors, bouncy motion, friendly tone.

Dense, information-rich, conservative palette, tables everywhere.

Dark surfaces, glowing accents, high contrast.

Nostalgic, gradients, pixel fonts, chrome, early-web energy.