Learn the terms that turn intuition into precise prompts.
Badge
A compact label element used for status, categorization, or counts.
Components
Button
A clickable element that triggers a discrete action — the primary affordance for user intent.
Card
A contained surface grouping related content into a scannable, self-contained unit.
Checkbox
A boolean input for selecting multiple independent options from a list.
Dropdown
An expandable list of selectable options revealed on trigger.
Input Field
A text entry area where users provide data — the core of any form.
Modal
An overlay dialog that interrupts the current view to demand user attention or input.
Tabs
A navigation pattern that switches between distinct content panels within the same view.
Toggle Switch
An on/off control that takes immediate effect without requiring a submit action.
Tooltip
A small label that appears on hover or focus to provide supplementary information.
Bento Grid
Mixed-size cards arranged in a grid to create visual hierarchy.
Layout
Card Grid
Evenly spaced cards in a structured, uniform grid.
Centered Layout
Content aligned in a narrow centered column for focused reading.
Dashboard Layout
Multi-panel layout combining navigation, widgets, charts, and data tables.
Full-Width Layout
Content spans edge-to-edge across the screen.
Hero Section
Top section with headline, supporting text, and primary action.
List View
Content stacked vertically in rows for dense, scannable information.
Masonry Grid
Cards of varying height arranged without fixed rows, like brickwork.
Sidebar Layout
Fixed side navigation with a scrollable content area beside it.
Split Layout
Two sections side-by-side, often 50/50, balancing content and imagery.
Blur
An element transitions with a focus change — either blurring out or sharpening into clarity.
Motion
Delay
A pause before an animation begins — used to sequence or stagger elements.
Duration
The total time an animation takes from start to finish.
Easing
The acceleration curve of an animation — controlling whether it starts fast, ends slow, or bounces.
Fade
An element transitions in or out by changing its opacity from 0 to 1 or vice versa.
Hover Animation
A visual effect triggered when a user's cursor enters an interactive element.
Rotate
An element spins or pivots around a defined origin point.
Scale
An element grows or shrinks, typically as an entrance effect or an interactive feedback.
Slide
An element moves in from an edge of its container or the screen.
Staggered Animation
A group of elements animate sequentially with a small delay between each, creating a flowing entrance.
Brutalist
Raw, unpolished design with bold typography, hard edges, and intentional tension.
Styles
Dark Mode
UI primarily designed for dark backgrounds to reduce eye strain and create a focused aesthetic.
Editorial
Typography-led, magazine-inspired layout with strong grid discipline and varied text sizing.
Flat Design
Two-dimensional style with no shadows, gradients, or depth cues — just clean shapes and color.
Glassmorphism
Translucent frosted-glass surfaces with blur, creating a layered, depth-rich aesthetic.
Material Design
Google's design system based on physical paper metaphors — layered surfaces, shadows, and motion.
Minimalist
Simple design with few elements, generous whitespace, and restrained color.
Monochrome
A single-hue palette using tonal variations (light to dark) for all hierarchy and contrast.
Neo-Brutalism
Modern take on brutalism with bright colors, thick black borders, and bold offset shadows.
Neumorphism
Soft UI style using subtle light and dark shadows to create a raised, extruded look.
Display Font
A stylized, expressive typeface intended for large headings — not body copy.
Typography
Font Weight
The stroke thickness of a typeface, ranging from Thin (100) to Black (900).
Hierarchy
The visual order of text from most to least important — typically headline → subheading → body → caption.
Letter Spacing
Uniform space added between all characters in a word or block of text.
Line Height
Vertical spacing between lines of text — affects readability and visual density.
Monospace
Every character occupies equal horizontal space — optimized for code and technical identifiers.
Readability
How easily and comfortably a reader can parse text at a glance.
Sans-serif
Font without decorative terminal strokes — clean, modern, and highly legible at small sizes.
Serif
Font with small decorative strokes (serifs) at the ends of characters — conveys tradition and authority.
Text Contrast
The luminance difference between text and its background — a key accessibility requirement.
Confirmation Dialog
A prompt asking users to explicitly confirm an action — especially irreversible ones.
UX Patterns
Empty State
The UI shown when a section has no data yet — an opportunity to guide or delight.
Error State
UI shown when an operation fails — communicating what went wrong and how to recover.
Filtering
Narrowing a content set based on one or more criteria, applied non-destructively.
Infinite Scroll
Content loads automatically as the user scrolls toward the bottom of the list.
Onboarding Flow
A guided sequence of steps that helps new users understand and set up a product.
Pagination
Content split into discrete, numbered pages that users navigate explicitly.
Progressive Disclosure
Showing only essential information initially, revealing detail as the user needs or requests it.
Search + Results
An input field paired with a dynamic results list — the core of any find-and-navigate pattern.
Sorting
Reordering a content set by a chosen attribute — alphabetical, date, relevance, etc.
