# UI Design vocabulary

> Names for every visible piece of an interface.

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.

Source: https://www.juanmnl.com/notes/ui-vocabulary.html

## Frames, Groups & Auto Layout

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.

### Frame

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.

Say: "Put this inside a frame sized to 390×844 (mobile)."

### Group

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).

Say: "Group these icons so they move as one."

### Auto Layout / stack

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.

Say: "Make this an auto-layout frame, vertical, 12px gap, 16px padding."

### HStack / VStack

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

Say: "Wrap the buttons in an HStack, the form in a VStack."

### Constraints / resizing

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

Say: "Pin the close button to the top-right with constraints."

### Component / main · primary

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

Say: "Turn this card into a reusable component."

### Instance

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

Say: "Drop three instances of the button component."

### Variant

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

Say: "Add variants for default / hover / disabled."

### Component set / properties

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

Say: "Expose a boolean prop to show/hide the icon."

### Layer

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

Say: "Rename the layers and order them logically."

### Section / page

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

Say: "Put these flows in a section called 'Onboarding'."

### Mask & boolean

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

Say: "Mask the photo into a circle."

### Detach / flatten

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

Say: "Detach this instance so I can edit it freely."


## Layout & Structure

How the screen is divided. These are the bones everything else sits on.

### Container / wrapper

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

Say: "Wrap the content in a centered container, max-width 1100px."

### Grid

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

Say: "Lay these out in a 3-column responsive grid."

### Stack / vertical flex

Items stacked vertically with consistent spacing between them.

Say: "Stack these vertically with 16px gap."

### Row / horizontal flex

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

Say: "Put these in a row, spaced evenly, vertically centered."

### Sidebar layout

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

Say: "Use a left sidebar nav with the main content on the right."

### Holy grail layout

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

Say: "Header + footer with a 3-column body."

### Hero section

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

Say: "Add a hero with a big headline, subtitle, and CTA."

### Section / band

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

Say: "Break the page into sections with alternating backgrounds."

### Column / split

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

Say: "Make it a two-column split: copy left, image right."

### Masonry

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

Say: "Use a masonry layout for these image cards."


## Navigation

How people move around the product.

### Navbar / top nav · header

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

Say: "Sticky navbar: logo left, links center, CTA right."

### Tab bar

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

Say: "Add tabs for Overview / Activity / Settings."

### Breadcrumb

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

Say: "Add a breadcrumb above the page title."

### Sidebar nav

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

Say: "Left sidebar nav with icon + label items, active state highlighted."

### Drawer / off-canvas

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

Say: "Hamburger opens a drawer that slides in from the left."

### Pagination

Numbered page controls for splitting long lists across pages.

Say: "Paginate the results, 20 per page."

### Dropdown menu

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

Say: "Profile avatar opens a dropdown menu with Settings and Log out."

### Mega menu

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

Say: "Products opens a mega menu grouped into 3 columns."


## Containers & Surfaces

Boxes that hold and reveal content.

### Card

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

Say: "Show each item as a card with image, title, and description."

### Modal / dialog

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

Say: "Open a modal to confirm before deleting."

### Bottom sheet

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

Say: "On mobile, show the options in a bottom sheet."

### Popover

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

Say: "Clicking the icon opens a popover with quick settings."

### Tooltip

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

Say: "Add a tooltip on the icon explaining what it does."

### Accordion

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

Say: "Turn the FAQ into an accordion, one open at a time."

### Panel

A general bordered region grouping related controls or info.

Say: "Group the filters into a panel on the side."

### Tabs (panel)

Tab strip plus the content area that swaps below it.

Say: "Split the detail view into tabbed sections."


## Inputs & Forms

How users give the product information.

### Text field / input

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

Say: "Email text field with label and placeholder."

### Textarea

Multi-line text entry that can grow with content.

Say: "Add a textarea for the description, 4 rows."

### Select / dropdown

Pick one value from a list that opens on click.

Say: "Country picker as a searchable select."

### Checkbox

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

Say: "Checkbox list, users can pick several."

### Radio buttons

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

Say: "Radio group for plan: Monthly or Yearly."

### Toggle / switch

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

Say: "Add a toggle to enable dark mode."

### Slider

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

Say: "Price range slider from $0 to $500."

### Stepper

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

Say: "Quantity stepper with + and − buttons."

### Segmented control

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

Say: "Segmented control for Day / Week / Month."

### Search field

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

Say: "Search bar with icon and live filtering."

### Date picker

Calendar UI for choosing a date or range.

Say: "Date range picker for the report filters."

### File upload / dropzone

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

Say: "Add a drag-and-drop file upload zone."


## Buttons & Actions

Naming buttons by hierarchy is the single biggest upgrade to your AI prompts.

### Primary button / CTA

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

Say: "Make 'Save' the primary button."

### Secondary button

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

Say: "Cancel as a secondary (outlined) button."

### Ghost / text button

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

Say: "Make it a ghost button so it's subtle."

### Destructive button

Signals a dangerous/irreversible action, usually red.

Say: "Delete should be a destructive (red) button."

### Icon button

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

Say: "Use icon buttons for edit and delete in each row."

### FAB / floating action button

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

Say: "Add a FAB in the bottom-right to create a new item."

### Button group

Related buttons joined into one connected unit.

Say: "Group the prev/next buttons together."

### Split button

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

Say: "Make Save a split button with a dropdown for other options."


## Data Display

Showing information, status, and identity.

### Table / data grid

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

Say: "Show users in a sortable table with name, role, status."

### List / list item

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

Say: "Render results as a list with avatar, title, and subtitle."

### Badge / count

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

Say: "Add a notification badge with the unread count."

### Tag / chip

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

Say: "Show categories as removable chips."

### Avatar

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

Say: "Show team members as an overlapping avatar stack."

### Progress bar

Horizontal fill showing completion of a task or value.

Say: "Add a progress bar for the upload."

### Stat / metric / KPI

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

Say: "Top row of stat cards: revenue, users, churn."

### Skeleton loader

Gray placeholder shapes that mimic content while it loads.

Say: "Show skeleton loaders while data is fetching."

### Status indicator

### Timeline / activity feed

Chronological list of events connected by a vertical line.

Say: "Show recent activity as a timeline."


## Feedback & Status

How the product talks back, confirmations, warnings, waiting, emptiness.

### Toast / snackbar

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

Say: "Show a success toast after saving."

### Alert (inline)

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

Say: "Show an inline error alert above the form."

### Banner

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

Say: "Add a dismissible announcement banner up top."

### Spinner / loader

Animated indicator for indeterminate waiting.

Say: "Show a spinner while the request is loading."

### Empty state

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

Say: "Design an empty state with an illustration and a CTA."

### Progress / loading bar

A determinate bar showing how far along a process is.

Say: "Add a top loading bar for page transitions."

### Confirmation dialog

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

Say: "Add a confirm dialog before deleting."

### Tooltip / hint

Lightweight guidance pointing at how something works.

Say: "Add helper text under the field."


## Typography

Naming text roles & the type scale gets you consistent hierarchy.

### Type scale

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

Say: "Stick to a consistent type scale."

### Heading (H1,H6)

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

Say: "Make this an H2, not body text."

### Body text

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

Say: "Body text at 16px with 1.6 line-height."

### Caption / label / overline

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

Say: "Add a small uppercase overline above the heading."

### Weight

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

Say: "Make the label semibold, not bold."

### Leading & tracking

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

Say: "Increase line-height and tighten letter-spacing on the headline."

### Truncation / ellipsis

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

Say: "Truncate the title to one line with ellipsis."

### Monospace

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

Say: "Show the code snippet in a monospace block."


## Color & Design Tokens

Tokens are named values (not raw hex). Say "use the danger token," not "make it #f00."

### Primary / brand

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

Say: "Use the brand primary for the main CTA."

### Semantic colors

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

Say: "Errors use the danger color, tips use info."

### Neutral / gray scale

The grays for text, borders, backgrounds and surfaces.

Say: "Build a neutral scale from 50 to 900."

### Tints & shades

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

Say: "Use a lighter tint of the primary for the hover state."

### Surface / background / foreground

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

Say: "Cards sit on surface; page uses background."

### Opacity / alpha

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

Say: "Use the primary at 10% opacity for the chip background."

### Gradient

A smooth blend between colors, linear or radial.

Say: "Give the hero a subtle linear gradient background."

### Dark / light mode

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

Say: "Support dark and light mode via tokens."


## Spacing & Sizing

The invisible structure. Most "off" designs are really spacing problems.

### Padding

Space inside an element, between its border and content.

Say: "Add 16px padding inside the card."

### Margin

Space outside an element, pushing neighbors away.

Say: "Add more margin between sections."

### Gap

Even spacing between items in a flex/grid layout.

Say: "Set a 24px gap between grid items."

### Spacing scale

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

Say: "Use an 8px spacing scale."

### Border radius

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

Say: "Use a 12px radius on cards, pill-shaped buttons."

### Elevation / shadow

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

Say: "Raise the modal with a larger elevation shadow."

### Breakpoints / responsive

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

Say: "Single column on mobile, 3 columns on desktop."

### Aspect ratio

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

Say: "Keep thumbnails at a 16:9 aspect ratio."


## States & Interaction

Every interactive element has multiple looks. Naming them prevents "why doesn't it react?"

### Default / rest

The normal, untouched appearance.

Say: "This is the default/rest state."

### Hover

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

Say: "On hover, darken slightly and lift 1px."

### Focus

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

Say: "Add a visible focus ring for keyboard users."

### Active / pressed

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

Say: "Active state fills with the primary color."

### Disabled

Not interactive, faded and non-clickable.

Say: "Disable Submit until the form is valid."

### Loading

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

Say: "Show a loading spinner in the button while submitting."

### Error / invalid

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

Say: "Show an error state with a message below the field."

### Selected / checked

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

Say: "Highlight the selected plan card with a border."


## Motion & Effects

How things move. Name the motion and the easing for results that feel right.

### Transition

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

Say: "Transition the color over 150ms on hover."

### Fade in / out

Animating opacity to make elements appear/disappear softly.

Say: "Fade the modal in over 200ms."

### Slide

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

Say: "Slide the panel in from the right."

### Scale / zoom

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

Say: "Scale the card up slightly on hover."

### Easing

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

Say: "Use an ease-out curve, not linear."

### Hover lift / glow

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

Say: "On hover, lift the card with a soft shadow."

### Parallax

Background and foreground scroll at different speeds for depth.

Say: "Add a subtle parallax to the hero background."

### Micro-interaction

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

Say: "Add a little check animation when the task completes."


## Page Patterns

Whole-screen archetypes. Naming the pattern saves a paragraph of description.

### Dashboard

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

Say: "Build a dashboard with KPI cards on top and a chart below."

### Master,detail

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

Say: "Use a master-detail layout: list left, detail right."

### Feed

An endlessly scrolling stream of posts/cards.

Say: "Make it an infinite-scroll feed of cards."

### Settings page

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

Say: "Settings page grouped into sections with toggles."

### Wizard / multi-step

A flow split into sequential steps with a progress indicator.

Say: "Make onboarding a 3-step wizard with a progress bar."

### Pricing page

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

Say: "3-tier pricing with the middle plan highlighted."

### Auth / login

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

Say: "Centered login card with email, password, and SSO buttons."

### Detail / profile page

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

Say: "Profile page: avatar header, then tabbed sections."


## Style & Aesthetic Words

When you want a vibe, these adjectives steer the look far better than "modern" or "clean."

### Minimal

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

### Glassmorphism

Frosted, semi-transparent blurred panels over colorful backgrounds.

### Neumorphism

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

### Brutalist

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

### Flat

No shadows or gradients, solid colors and simple shapes.

### Material

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

### Skeuomorphic

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

### Editorial

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

### Playful

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

### Corporate / enterprise

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

### Dark / moody

Dark surfaces, glowing accents, high contrast, like this page.

### Retro / Y2K

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