UI Design vocabulary
Vocabulary
Names for every visible piece of an interface, with mini demos, so you can describe what you want without guessing.
Juan M. Cornejo
Notes, no. 05
Names for every visible piece of an interface, with mini demos, so you can describe what you want without guessing. Buttons, fields, surfaces, navigation, feedback, motion, and more.
1UI Design vocabulary
Part 00
The building blocks of the canvas itself, how design tools (Figma, Sketch, XD) organize what you draw. Use these and an AI knows structure, not just appearance.
The building blocks of the canvas itself, how design tools (Figma, Sketch, XD) organize what you draw. Use these and an AI knows structure, not just appearance.
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.
Part 01
How the screen is divided. These are the bones everything else sits on.
A photo importer with its regions named by kind. Import 10 Files is the one primary action.
How the screen is divided. These are the bones everything else sits on.
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.
Part 03
Boxes that hold and reveal content.
Boxes that hold and reveal content.
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.
Part 04
How users give the product information.
A plate generator’s controls, named by kind. The panel’s own words are Spanish.
How users give the product information.
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.
Part 05
Naming buttons by hierarchy is the single biggest upgrade to your AI prompts.
Naming buttons by hierarchy is the single biggest upgrade to your AI prompts.
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…).
Part 06
Showing information, status, and identity.
Showing information, status, and identity.
| Name | Role | Status |
|---|---|---|
| Ada | Admin | Active |
| Lin | Editor | Away |
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.
Part 07
How the product talks back, confirmations, warnings, waiting, emptiness.
How the product talks back, confirmations, warnings, waiting, emptiness.
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.
Part 08
Naming text roles & the type scale gets you consistent hierarchy.
Naming text roles & the type scale gets you consistent hierarchy.
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.
Part 09
Tokens are named values (not raw hex). Say "use the danger token," not "make it #f00."
Tokens are named values (not raw hex). Say "use the danger token," not "make it #f00."
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.
Part 10
The invisible structure. Most "off" designs are really spacing problems.
The invisible structure. Most "off" designs are really spacing problems.
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).
Part 11
Every interactive element has multiple looks. Naming them prevents "why doesn't it react?"
Every interactive element has multiple looks. Naming them prevents "why doesn't it react?"
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).
Part 12
How things move. Name the motion and the easing for results that feel right.
How things move. Name the motion and the easing for results that feel right.
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).
Part 13
Whole-screen archetypes. Naming the pattern saves a paragraph of description.
Whole-screen archetypes. Naming the pattern saves a paragraph of description.
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.
Part 14
When you want a vibe, these adjectives steer the look far better than "modern" or "clean."
When you want a vibe, these adjectives steer the look far better than "modern" or "clean."
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.
Elsewhere
another notebook Frontend vocabulary
Web design vocabulary
Frontend vocabulary