The Vibe Coder’s Visual Dictionary: Master UI/UX Terminology With Technical Explanations & AI Prompts

Definition: Primary global navigation header pinned to the top (or bottom) containing site logo, main route links, search, and profile actions.

UX Rule: Keep under 7 top-level navigation items. Collapse into a hamburger menu below 768px screen width.

Definition: Prominent application header displaying current screen title, back navigation icon, and contextual action icons.

UX Rule: Centers or left-aligns screen title. Replaces hamburger with a back arrow when navigating deeper into a sub-route.

Definition: Compact vertical navigation bar placed on the left side of desktop and tablet screens showing icon-only destinations with short labels.

UX Rule: Ideal for tablets and dashboards between 768px and 1200px width where a full sidebar would consume too much horizontal space.

Definition: Vertical menu panel that slides in from the left or right edge of screen, providing access to multi-level navigation destinations.

UX Rule: Persistent on large desktop monitors (>1280px), but modal (sliding over content with backdrop) on mobile screens.

Definition: Horizontal row of clickable tabs to switch between parallel views or content categories on the same screen level.

UX Rule: Use tabs for switching content views on the same page without navigating to a new URL. Limit to 2–5 tabs per group.

Definition: Secondary navigation trail showing hierarchical position (e.g. Home > Products > Footwear > Running Shoes).

UX Rule: Place directly below top header. All intermediate parent items must be clickable; the current page item remains unlinked.

Definition: Numbered or circular stage indicators guiding users sequentially through a multi-step checkout or onboarding wizard.

UX Rule: Display clear status states: Completed (check icon), Current (highlighted ring), and Upcoming (subtle gray).

Definition: Navigation bar allowing users to traverse discrete pages of data sets (Previous, 1, 2, 3... Next).

UX Rule: Provide explicit previous/next buttons, active page highlighting, and a page size selector (10, 25, 50 rows).

Definition: Circular elevated button pinned above screen content that triggers the primary action (e.g., 'New Post', 'Compose Email').

UX Rule: Only ONE FAB per screen. Pin 16–24px from bottom-right corner. Can expand into a radial speed-dial menu on tap.

Definition: Primary navigation bar anchored to the bottom of mobile screens within easy thumb reach containing 3–5 top-level destinations.

UX Rule: Reserve exclusively for mobile viewports. Include badge counters for unread updates.

Definition: Linear strip of 2–4 mutually exclusive buttons for toggling views or filter modes (e.g. Day | Week | Month).

UX Rule: Use an animated sliding background pill to visually indicate selection transition.

Definition: Large multi-column dropdown panel revealing categorized sub-links, imagery, and promotions on hover.

UX Rule: Use on complex e-commerce or large enterprise websites with deep category trees.

Definition: Overlay window centered over the page that disables background interaction with a backdrop scrim until the user completes the action.

UX Rule: Trap keyboard focus inside modal. Close on Escape key press or clicking outside on the backdrop.

Definition: Floating card or popup window that displays information while still allowing interaction with the main webpage underneath.

UX Rule: Ideal for video picture-in-picture players, live audio players, and floating AI chat bubbles.

Definition: Sheet that slides up from bottom of mobile viewport. Modal dims background; Persistent stays pinned while user works on the screen above.

UX Rule: Include drag handle bar. Support velocity-based swipe-down gesture to dismiss.

Definition: Semi-transparent dark or blurred tint (e.g. `bg-black/50 backdrop-blur-sm`) placed behind an active modal to focus user attention.

UX Rule: Clicking the scrim should automatically cancel and dismiss the active modal overlay.

Definition: Small floating card anchored to a specific trigger element containing interactive controls, forms, or color pickers.

UX Rule: Different from a tooltip because it contains clickable interactive controls and opens on click/tap rather than hover.

Definition: Passive floating label that appears on hover or long-press explaining an icon or abbreviated button.

UX Rule: Must NEVER contain interactive clickable links. Appear after a 300ms hover delay to prevent accidental screen clutter.

Definition: Dark fullscreen overlay displaying an enlarged high-resolution image, video, or document preview with zoom and next/prev controls.

UX Rule: Darken background to 90% opacity. Support keyboard ArrowLeft / ArrowRight navigation.

Definition: Menu positioned at the exact mouse coordinates on right-click (or mobile long-press) offering operations on that specific item.

UX Rule: Position menu entirely inside viewport boundaries; flip direction if spawned near screen edges.

Definition: Bottom-anchored modal list presenting 2 or more choice options related to the current task, with a distinct red destructive action and Cancel button.

UX Rule: Place the Cancel button separated at the bottom of the list for easy thumb reach.

Definition: Urgent modal dialog interrupting user workflow to deliver critical information or require explicit confirmation before irreversible actions.

UX Rule: Requires explicit user button click to dismiss; clicking outside on the backdrop does not close an Alert Dialog.

Definition: Floating rounded pill-shaped toolbar pinned at the bottom-center of the viewport containing contextual multi-item actions (e.g., '3 items selected').

UX Rule: Animate appearance using slide-up entrance when items are checked in a list or table.

Definition: Rich card preview appearing on hover over a username or link displaying profile bio, avatar, and follower stats.

UX Rule: Keep open when user moves mouse pointer from the trigger link directly into the hover card body.

Definition: Brief message popping up at the corner or top of the screen confirming an operation (e.g. 'Changes saved successfully').

UX Rule: Auto-dismiss after 3–5 seconds. Stack up to a maximum of 3 active toasts to avoid obstructing content.

Definition: Notification anchored to bottom of viewport informing user of an action and providing a single text action button (e.g., 'UNDO').

UX Rule: Must only contain 1 single direct action button. Disappears automatically after 4–7 seconds.

Definition: Full-width colored box displaying high-priority warnings, system downtime, or success messages.

UX Rule: Use standard color semantics: Green (Success), Blue (Info), Amber/Yellow (Warning), Red (Error).

Definition: Animated gray placeholder wireframes mimicking the exact shape of incoming content, reducing perceived waiting time.

UX Rule: Animate a continuous left-to-right gradient shimmer wave across skeleton boxes to signal active loading.

Definition: Rotating circular ring indicating an ongoing background process of unknown duration.

UX Rule: Use for short actions under 4 seconds. For processes taking longer than 4s, use a determinate percentage progress bar.

Definition: Horizontal bar showing exact percentage completion of a multi-second task such as file uploading or video exporting.

UX Rule: Always pair with readable percentage text (e.g. 'Uploading: 68% (12MB/18MB)').

Definition: Small rounded numerical or status tag positioned on an icon or avatar showing count of unread items.

UX Rule: Truncate large numbers above 99 to `99+` to maintain circular badge dimensions.

Definition: Engaging illustration and headline displayed when a table, folder, or search query contains zero data items.

UX Rule: Never leave a blank white page. Always provide a clear primary Call-to-Action button (e.g. 'Create First Invoice').

Definition: Non-intrusive banner indicating that network connection is lost and application is running from local offline cache.

UX Rule: Automatically disappear with a green 'Back online' toast when network connectivity reconnects.

Definition: Bordered container used in articles and documentation to highlight tips, important notes, or security warnings.

UX Rule: Use subtle tinted background and a thick 4px left accent border.

Definition: Text input field where the placeholder label animates upward into a smaller top caption when the field is focused.

UX Rule: Prevents users from forgetting what input field they are filling after typing text.

Definition: Input field combined with a popup listbox allowing users to type and filter through thousands of options.

UX Rule: Highlight the matching typed characters in the dropdown list items.

Definition: Sequence of single-digit input boxes that automatically advances focus to the next box as digits are typed or pasted.

UX Rule: Support 1-click clipboard paste. Automatically focus previous input on Backspace press.

Definition: Password input with an eye icon button allowing users to toggle between hidden bullet dots (`password`) and plain text (`text`).

UX Rule: Place the toggle icon inside the right edge of the input padding.

Definition: Horizontal track with draggable thumb handles allowing users to select a specific value or price range (Min–Max).

UX Rule: Display live numerical readout above thumb handle as it is dragged.

Definition: Digital equivalent of a physical light switch for turning boolean settings instantly On or Off.

UX Rule: Use switches for instant state changes that do not require clicking a separate 'Save' button.

Definition: Group of square boxes allowing the user to select ZERO, ONE, or MULTIPLE independent options from a list.

UX Rule: Supports 3 visual states: Unchecked, Checked, and Indeterminate (horizontal dash for partial selection).

Definition: Group of circular options where selecting any one option automatically deselects all other options in the group.

UX Rule: Restricts selection to exactly ONE option. Always have one default option selected initially.

Definition: Input popover displaying color spectrum palette and Hex/RGB/HSL text inputs with live preview swatch.

UX Rule: Provide a preset palette of brand theme colors for fast selection.

Definition: Calendar dropdown allowing selection of single dates or date ranges (Start Date to End Date).

UX Rule: Highlight entire span between start and end date with shaded background.

Definition: Dashed border drop area allowing users to drag and drop files from desktop or click to browse files.

UX Rule: Show file preview thumbnail, file size in KB/MB, and linear progress bar during upload.

Definition: Compact pill buttons representing filter attributes that can be toggled on/off to filter data sets.

UX Rule: Include a checkmark icon `✓` inside the pill when selected.

Definition: Expandable multi-line text input field displaying a live character limit counter (e.g., '142/200 characters').

UX Rule: Change counter color to red when user exceeds character limit.

Definition: Numeric input flanked by minus `-` and plus `+` buttons for adjusting quantities in e-commerce carts.

UX Rule: Disable the minus button when quantity reaches minimum allowed value (e.g. 1).

Definition: The most prominent button on a screen styled with highest contrast color to guide the primary user action.

UX Rule: Only ONE primary CTA button per screen view to prevent user confusion.

Definition: Bordered button with transparent or light background for secondary supporting actions (e.g. 'Cancel', 'Export').

UX Rule: Must visually defer to the Primary CTA button.

Definition: Frameless text link styled as a button with zero background or border until hovered.

UX Rule: Use for lowest priority utility actions (e.g. 'Learn More', 'Skip Step').

Definition: Red button indicating an irreversible deletion or destructive operation (e.g. 'Delete Account').

UX Rule: Always pair with a secondary safety confirmation modal or 2-step click protect.

Definition: Button that replaces its text label with a spinning progress indicator while processing an API call.

UX Rule: Disable button pointer clicks while in loading state to prevent duplicate submissions.

Definition: Square or circular button containing only an SVG icon (e.g. Search, Settings, Close `✕`).

UX Rule: Always include an `aria-label` attribute and a hover tooltip for accessibility.

Definition: Two-segment button: left side triggers default action, right dropdown arrow reveals alternative actions.

UX Rule: Divided by a thin vertical line separator.

Definition: Self-contained container grouping related media, headlines, body copy, and actions into a unified visual unit.

UX Rule: Maintain consistent internal padding (16–24px) and subtle border radius.

Definition: Vertically stacked list of headers that expand/collapse to show or hide associated content sections.

UX Rule: Animate chevron icon rotation (`0deg` to `180deg`) on expand.

Definition: Horizontal sliding viewport displaying multiple items or cards with navigation arrows and dot indicators.

UX Rule: Provide touch swipe support on mobile and pause auto-rotation when user hovers.

Definition: Grid displaying structured rows and columns of data with column sorting arrows, search filter, and status tags.

UX Rule: Keep header row sticky when user scrolls down long data tables.

Definition: Overlapping horizontal cluster of circular user photos ending in a `+N` pill indicating remaining team members.

UX Rule: Add 2px white border ring around each avatar so overlapping boundaries remain crisp.

Definition: Vertical line connecting chronological milestone nodes representing project history or audit logs.

UX Rule: Use distinct node icons for events (e.g. green check for verified, blue for note created).

Definition: Indented hierarchical list representation with expandable folders and nested files.

UX Rule: Use keyboard ArrowRight (expand) and ArrowLeft (collapse) navigation.

Definition: Dashboard card highlighting a key performance metric (e.g. '$48,000 MRR') with percentage delta trend badge (`+14%`).

UX Rule: Color code trends: Green for positive increase, Red for negative drop.

Definition: Slide-up bottom sheet or right-side drawer containing multi-category filters (Price, Size, Brand, Rating).

UX Rule: Include 'Clear All' and sticky 'Apply Filters (N results)' button at the bottom.

Definition: Compact bottom sheet containing radio button choices for sorting product lists (Newest, Price: Low to High).

UX Rule: Apply sort order immediately on tap without requiring a secondary confirmation button.

Definition: Side drawer or bottom sheet showing full metadata, notes, and timeline of a clicked item without leaving page.

UX Rule: Enables fast inspection of multiple rows in a table without tedious back-and-forth page navigation.

Definition: Outermost wrapper div constraining webpage content to a readable maximum width (e.g. `max-w-7xl mx-auto px-4`).

UX Rule: Prevents text lines from stretching too wide on ultra-wide 4K monitors, maintaining readability.

Definition: Padding boundaries ensuring UI content does not collide with physical device hardware (iPhone camera notch, Dynamic Island, Home Bar).

UX Rule: Use CSS `env(safe-area-inset-top)` and `env(safe-area-inset-bottom)` on sticky headers and footers.

Definition: Layering multiple visual elements directly on top of each other along the depth Z-axis (e.g. badge over image).

UX Rule: Establish strict Z-index scale: Base (0), Elevated (10), Sticky Nav (40), Backdrop (45), Modal (50), Toast (60).

Definition: Downward touch drag gesture at top of list revealing a circular spinner that reloads data feed.

UX Rule: Provide resistance physics and haptic vibration feedback when threshold is reached.

Definition: Horizontal swipe gesture on a table or list row revealing red Trash and green Archive buttons underneath.

UX Rule: Provide immediate visual confirmation and an 'Undo' snackbar toast.

Definition: Pressing and holding finger on screen for 500ms to reveal quick contextual preview menu.

UX Rule: Pair with brief device haptic vibration tick to notify user the gesture was registered.

Definition: Multi-slide intro carousel introducing core value propositions to newly registered users with 'Get Started' CTA.

UX Rule: Limit to 3 punchy slides with illustrations and an optional 'Skip' button in top-right.

Definition: Central workspace landing page featuring high-level KPI cards, recent activity charts, and primary action shortcuts.

UX Rule: Organize layout in an F-pattern: highest priority summary stats in top-left quadrant.

Definition: Friendly fallback page shown when requested URL does not exist, providing search bar and 'Return Home' button.

UX Rule: Never show raw browser server error codes. Use friendly visual art and clear navigation paths back to safety.

Definition: High-contrast colored outline ring appearing around buttons and inputs when navigated via keyboard Tab key.

UX Rule: Never remove `outline: none` without providing a custom accessible `ring-2 ring-teal-500` replacement.

Definition: Micro-interaction where an element elevates slightly (`-translate-y-1 shadow-lg`) when hovered with mouse pointer.

UX Rule: Keep transition duration fast (150–250ms) with `ease-out` timing curve.

Definition: Visual styling (reduced opacity 50%, gray background, `cursor-not-allowed`) indicating an element cannot be clicked.

UX Rule: Provide a tooltip explaining WHY the button is disabled (e.g. 'Please enter valid email first').

Definition: Systematic named corner curves (e.g., `rounded-none: 0px`, `rounded-md: 6px`, `rounded-2xl: 16px`, `rounded-full: 9999px`).

UX Rule: Maintain consistent corner radius hierarchy throughout all cards, inputs, and modals.

Definition: Systematic drop shadows representing how high an element floats above the background surface in 3D space.

UX Rule: Higher Z-index elements (Modals, Toasts) cast larger, softer, more dispersed drop shadows.

Definition: Animation curve modeling real-world physical spring stiffness and damping, producing natural organic bounce.

UX Rule: Feels significantly more human and satisfying than rigid linear mathematical timings.

Definition: Sequential visual cascade where multiple list items or cards fade into view one after another with a 50ms interval.

UX Rule: Keep total sequence under 400ms so users do not feel delayed waiting for content to render.

Definition: Instant floating search modal invoked by ⌘K / Ctrl+K allowing keyboard navigation across pages, documents, and actions.

UX Rule: Support fuzzy search ranking and keyboard ArrowUp / ArrowDown navigation.

Definition: Bottom pinned or floating consent modal informing users about cookie tracking with Accept All and Customize options.

UX Rule: Must provide equal visual weight for 'Reject Non-Essential' to comply with GDPR / DPDP standards.

Definition: Header bar that remains pinned to top of viewport as user scrolls, transitioning to a blurred glass background.

UX Rule: Add `backdrop-blur-md` and a thin border bottom when `window.scrollY > 20`.

Definition: Top visual banner on a landing page featuring bold value proposition headline, proof badge, and primary CTA.

UX Rule: Keep core headline under 10 words. Place primary CTA button above the 600px fold line.