An editable image view that shows its current picture and accepts a replacement dragged or pasted straight into it.
The words interfaces are made of.
A linked dictionary of design and UI vocabulary: every term with a live demo. Working with AI agents is mostly about knowing the vocabulary; here is where you learn to say exactly what you mean.
1124 terms · 4087 aliases · 54 tags · a demo on every page
Featured
A row or grid of customer logos used as social proof, usually flattened to one colour so no brand dominates.
Collecting many similar alerts into one summary rather than delivering each, so the count rises but the number of interruptions does not.
A raw palette value named for what it is, like blue-500, sitting under the semantic layer that names colours for what they do.
A translucent or gradient layer laid over imagery or behind a dialog, dimming what is beneath so text on top clears contrast or so focus moves forward.
A scanning shape where the eye jumps to isolated words scattered down the page, hunting a keyword, a link or a number rather than reading anything.
A brief, self-dismissing message that appears at a screen edge to confirm an action or report status without interrupting the user's flow.
The register for screens read from a couch: focus-driven navigation with a remote, oversized type and cards, horizontal rails, and safe margins for TV overscan.
Dragging a selection across one chart to highlight the same records in every linked view.
The A, AA, or AAA tier a WCAG success criterion sits in, and the tier a product claims, which is what people mean when they say a design is AA.
The line or highlighted gap drawn during a drag to show exactly where the item will land if it is released now.
The visible outline drawn around the element that currently holds keyboard focus, showing where the next keypress will land.
By category
- component208 terms
A named piece of interface you can point at, place, and reuse.
- layout143 terms
How a page arranges its regions, and what governs the arrangement.
- pattern161 terms
A recurring answer to a recurring problem, larger than any one component.
- aesthetic65 terms
A named visual style, with a period and a set of moves.
- interaction85 terms
What a reader does, and how the interface answers.
- motion100 terms
Change over time, and the vocabulary for describing it.
- typography118 terms
Type, and the measurements and conventions that set it.
- color89 terms
Colour as a system: palettes, roles, contrast, and schemes.
- surface21 terms
The finish on a shape: its corners, its edges, its depth, its texture.
- accessibility134 terms
Terms that exist so an interface works for everyone.
By tag
- a11y12
- ai12
- assistive-tech61
- auth18
- canvas24
- commerce25
- consent10
- content-design57
- dark pattern17
- dataviz30
- depth54
- design-tools23
- devtools12
- dragging43
- editorial59
- email15
- errors38
- fonts60
- forms68
- gamification9
- grids37
- i18n14
- icons25
- illustration32
- keyboard41
- media38
- menus39
- messaging22
- microinteraction16
- navigation49
- onboarding17
- overlays49
- perceived-performance34
- perception118
- platform-registers56
- pointer44
- progress21
- responsive web design6
- retro50
- screen-size39
- scroll42
- search16
- selection20
- sound17
- spacing36
- tables18
- text-editing19
- theming36
- time20
- tokens46
- touch55
- wcag49
- web-platform93
- windowing34
Every term
1124The whole vocabulary, A to Z. For aliases, see the glossary.
a
- Abbreviation
- Accent color
- Access key
- Accessibility annotation
- Accessibility grouping
- Accessibility overlay
- Accessibility trait
- Accessibility tree
- Accessible authentication
- Accessible description
- Accessible name
- Accordion
- Achievement badge
- Acid graphics
- Action list
- Action sheet
- Active descendant
- Activity feed
- Adaptive layout
- Additive animation
- Additive colour
- Address autocomplete
- Affordance
- Afrofuturism
- Agenda view
- Alert dialog
- All caps
- Alpha channel
- Alpha compositing
- Alt text
- Analogous colors
- Anchor positioning
- Anti-design
- Anti-pattern
- Anticipation
- APCA
- Aperture
- App bar
- App shell
- App shortcut
- App silhouette
- Applied filters
- Aqua
- Arc motion
- ARIA notify
- aria-hidden
- Art Deco
- Art Nouveau
- Ascender
- Aspect ratio box
- Asymmetric easing
- Atomic live region
- Attract mode
- Attribute editor
- Audio control
- Audio description
- Auditory icon
- Aurora UI
- Autofill
- Autoplay
- Autosave
- Avatar
- Avatar group
- Axis
b
- Back to top
- Badge
- Banner
- Baseline
- Baseline grid
- Bauhaus style
- Bento grid
- Bevel and emboss
- Bidirectional text
- Biophilic design
- Blame view
- Blend mode
- Blockquote
- Bottom navigation
- Bottom sheet
- Bounce
- Box
- Braille display
- Brand color
- Breadcrumbs
- Breakout
- Breakpoint
- Broken grid
- Browse mode
- Brushing
- Brutalist web design
- Bubble toolbar
- Bulk actions
- Bulletproof button
- Busy state
- Button
- Button group
- Button versus link
- Bypassing pattern
c
- Calendar
- Callout
- Canonical layout
- Cap height
- CAPTCHA
- Captions
- Card
- Card flip
- Card grid
- Caret
- Carousel
- Cascader
- Cassette futurism
- Categorical palette
- Ch unit
- Chamfer
- Change of context
- Character counter
- Character key shortcuts
- Chart
- Chart annotation
- Chart aspect ratio
- Chart description
- Chart legend
- Chartjunk
- Chat bubble
- Check answers
- Checkbox
- Chevron
- Chip
- Chorded shortcut
- Chroma
- Chrome
- Chunking
- Claymorphism
- Click-through
- Cloning
- Close button
- Cluster
- CMYK
- Coach mark
- Code editor
- Cognitive load
- Collapsing toolbar
- Color alias
- Color banding
- Color coding
- Color font
- Color gamut
- Color harmonization
- Color harmony
- Color interpolation
- Color picker
- Color ramp
- Color role
- Color scheme
- Color space
- Color stop
- Color temperature
- Color theme
- Color token
- Color vision deficiency
- Color well
- Color wheel
- color-mix()
- Column drop
- Column offset
- Column resizer
- Combobox
- Command palette
- Commitment pattern
- Common region
- Comparison prevention
- Comparison table
- Complementary colors
- Complication
- Compositor-only animation
- Compound grid
- Concentric corner radius
- Confetti burst
- Confirmation dialog
- Confirmation page
- Confirmshaming
- Conformance level
- Conic gradient
- Consistent help
- Consistent identification
- Constructivism
- Container
- Container color
- Container query
- Container transform
- Containing block
- Content choreography
- Content shelf
- Context menu
- Contextual alternates
- Contrast ratio
- Contribution graph
- Conversational interface
- Cookie consent banner
- Copy button
- Corner radius
- Corporate Memphis
- Count-up animation
- Countdown timer
- Counter
- Cover
- Crossfade
- Cubic bezier
- Curb cut effect
- Current page indicator
- currentColor
- Cursor follower
- Cursor pagination
- Cyberpunk UI
d
- Damping
- Dark mode
- Dark mode email
- Dark pattern
- Dashboard grid
- Data grid
- Data table
- Data-ink ratio
- Date picker
- Date range picker
- De Stijl
- Dead zone
- Debounce
- Deck
- Deconstructed pancake
- Decorative image
- Deformable UI
- Delay
- Density
- Density independent pixel
- Descender
- Description list
- Detent
- Device posture
- Did you mean
- Diegetic interface
- Diff viewer
- Digital collage
- Digital rain
- Dimensionality
- Direct labeling
- Direct manipulation
- Directionality
- Disclosure
- Disclosure triangle
- Disguised ad
- Display cutout
- Dissolve
- Dithering
- Diverging palette
- Divider
- Dock
- Dock magnification
- Dolly and zoom
- Dot grid background
- Double click
- Double opt-in
- Double tap
- Drag and drop
- Drag autoscroll
- Drag handle
- Drag preview
- Drag threshold
- Drag to create
- Drag to reorder
- Dragging alternative
- Drawer
- Drill-down navigation
- Drip pricing
- Drop cap
- Drop indicator
- Drop zone
- Dropdown
- Dual axis
- Duotone
- Duration
- Dwell activation
- Dynamic Type
e
- E-ink aesthetic
- Earcon
- Easing
- Easter egg
- Edge routing
- Edge swipe
- Edge to edge
- Editorial web design
- Elevation
- Elevation overlay
- Em
- Em dash
- Emergency exit button
- Emoji picker
- Emoji presentation
- Emphasis level
- Empty state
- En dash
- Endowed progress
- Entrance animation
- Error bar
- Error identification
- Error message
- Error page
- Error summary
- Escape gesture
- Exit animation
- Expandable row
- Expanded state
- Explore by touch
- Express checkout
- Eyebrow
- Eyedropper
f
- F pattern
- Faceted filter
- Faceted search
- Fade
- Fade through
- Fake door
- Fake scarcity
- Fake social proof
- Fake urgency
- Fallback font
- False bottom
- Faux bold
- Feature gate
- Feature spotlight
- Feed layout
- Feedforward
- Fictional user interface
- Fieldset
- Figure
- File attachment
- File upload
- Fill mode
- Filmstrip
- Fine print
- First rule of ARIA
- First run experience
- First-line indent
- Fisheye view
- Fitts's law
- Flame graph
- Flash of inaccurate color theme
- Flashing content
- Flat 2.0
- Flat design
- Fling
- FLIP
- Float animation
- Floating action button
- Floating label
- Flowchart
- Fluid grid
- Fluid hybrid
- Fluid space scale
- Fluid typography
- Focal point
- Focus appearance
- Focus delegation
- Focus follows mouse
- Focus management
- Focus not obscured
- Focus order
- Focus plus context
- Focus ring
- Focus trap
- Focus visible
- Focusable disabled
- Focusable scroll region
- FOFT
- FOIT
- Follow-through
- Font metric override
- Font pairing
- Font smoothing
- Font stack
- Font subsetting
- Font weight
- Force touch
- Forced colors mode
- Forced continuity
- Forgiving format
- Form
- FOUT
- Frame rate
- Friend spam
- Frozen column
- Frutiger Aero
- Frutiger Metro
- Full bleed
- Functional need
g
- Gamut mapping
- Gantt chart
- Gauge
- Generative UI
- Ghost button
- Ghost click
- Glassmorphism
- Glitch aesthetic
- Global navigation
- Gloss
- Glyph
- Goal gradient
- Golden ratio
- Gooey effect
- Grabber
- Grade
- Gradient
- Gradient border
- Gradual engagement
- Grainy gradient
- Graph layout
- Grid lanes
- Group label
- Grunge design
- Guest checkout
- Gutenberg diagram
- Gutter
h
- Half-leading
- Halftone
- Hamburger menu
- Hand-drawn UI
- Hanging indent
- Hanging punctuation
- Haptic feedback
- Has popup
- HCT
- Header association
- Heading
- Heading hierarchy
- Height animation
- Help drawer
- Helper text
- Hero
- Hex color
- Hidden but focusable
- Hidden gesture
- Hinting
- Hit slop
- Hit testing
- Hold to confirm
- Holographic foil
- Holy grail layout
- Home indicator
- Honeypot field
- Hover
- Hover card
- Hover intent
- Hover lift
- Hoverable, dismissible, persistent
- Hub and spoke
- HUD panel
- Hue
- Hue shift
- Hydration
- Hyperreal 3D
- Hyphenation
- Hyphenation ladder
i
- Icon
- Icon button
- Icon font
- Icon morph
- Identicon
- Image
- Image comparison slider
- Image well
- Images of text
- Imposter
- Increased contrast
- Inert
- Infinite canvas
- Infinite scroll
- Initial focus
- Ink trap
- Inline autocomplete
- Inline edit
- Inline validation
- Input group
- Input mask
- Input purpose
- Inspector
- Interaction color step
- Interactive transition
- Interest invoker
- Interface metaphor
- Interpolation
- Interruptible animation
- Interstitial
- Intrinsic web design
- Invalid state
- Inverse color
- Inverted colors
- Invoker command
- Isometric illustration
- Italic
j
k
l
- Label association
- Label in name
- Labor illusion
- Landmark
- Language attribute
- Large text threshold
- Lasso selection
- Lawn mower pattern
- Layer cake pattern
- Layout grid
- Layout margins
- Layout shift
- Layout shifter
- Layout thrashing
- Lazy loading
- Lazy registration
- Leaderboard
- Leading
- Legibility
- Letterboxing
- Letterpress text
- Ligature
- Light dismiss
- light-dark()
- Lightbox
- Lightness
- Line clamp
- Line drawing animation
- Line focus
- linear() easing
- Lining figures
- Link
- Link purpose
- Liquid Glass
- List
- List detail
- List virtualization
- Listbox
- Live activity
- Live region
- Load more
- Local navigation
- Logical properties
- Logo cloud
- Long description
- Long press
- Long shadow
- Look and pinch
- Lorem ipsum
- Lottie
- Low poly
m
- Magazine layout
- Magic link
- Magic tap
- Magnetic button
- Marching ants
- Marking menu
- Marking pattern
- Marquee
- Masonry
- Material 3 Expressive
- Material You
- Maximalism
- Measure
- Meatball menu
- Media controls
- Media object
- Mega menu
- Memphis design
- Mention autocomplete
- Menu bar
- Menu bar extra
- Menu button
- Mesh gradient
- Meter
- Metered paywall
- Metro
- Mica
- Microcopy
- Microinteraction
- Microsurvey
- Mid-century modern
- Middle click
- Miller columns
- Mini cart
- Minimalism
- Minimap
- Misdirection
- Mixed state checkbox
- Mobile first
- Mockup
- Modal dialog
- Modal presentation
- Model selector
- Modifier key
- Modular grid
- Modular scale
- Momentum scrolling
- Monochromatic palette
- Monospace
- Morph transition
- Morphing control
- Mostly fluid
- Motion actuation
- Motion blur
- Motion choreography
- Motion path
- Motion token
- Mouse gesture
- Multi column layout
- Multi select
- Multi-touch
- Multi-window mode
- Multimodal interface
n
- Nagging
- Name, role, value
- Named color
- Named grid areas
- Named instance
- Natural language interface
- Navigation bar
- Navigation menu
- Navigation rail
- Neo-skeuomorphism
- Neon glow
- Nested interactive
- Neubrutalism
- Neumorphism
- Neutral palette
- New Wave design
- No results state
- Node graph
- Node port
- Non-breaking space
- Non-text contrast
- Notification center
- Notification digest
- Nudge
o
- Object fit
- Oblique
- Obstruction
- Off canvas
- Offline indicator
- OKLCH
- Oldstyle figures
- On-color
- Onboarding checklist
- Onboarding tour
- One thing per page
- One-time code login
- Opacity
- OpenType features
- Operational transparency
- Optical alignment
- Optical kerning
- Optical size
- Optimistic UI
- Orbit
- Orbit animation
- Order summary
- Organic blob
- Orientation lock
- Origin-aware animation
- Ornament
- Orphan
- Outline color
- Overflow menu
- Overloaded command
- Overscan safe area
- Overscroll
- Overshoot
- Oversized typography
- Overview plus detail
- Owned element
p
- Page break
- Page curl
- Page header
- Page indicator
- Page title
- Page transition
- Pagination
- Pan
- Pancake stack
- Pane
- Pangram
- Parallax
- Parenting
- Particle background
- Passkey
- Password reveal toggle
- Password strength meter
- Pause, stop, hide
- Paywall
- Perceptual duration
- Perceptual uniformity
- Permission priming
- Petite caps
- Picture in picture
- Pilcrow
- PIN input
- Pinch to zoom
- Pixel art UI
- Pixel density
- Placeholder as label
- Plain language
- Playhead
- Point size
- Pointer cancellation
- Pointer capture
- Pointer gestures
- Pointer lock
- Politeness level
- Pop art style
- Pop in
- Popconfirm
- Popover
- Popover arrow
- Positive tabindex
- POUR
- Predictive back
- Preselected opt-in
- Presence indicator
- Presentation role
- Presentational children
- Press-drag-release
- Pressed state
- Pressure sensitivity
- Preview text
- Prime mark
- Primitive color token
- Print stylesheet
- Priority plus navigation
- Privacy zuckering
- Progress bar
- Progress ring
- Progressive blur
- Progressive disclosure
- Progressive image loading
- Progressive profiling
- Progressive reduction
- Prompt input
- Pronunciation
- Property filter
- Prototype
- Proximity
- Psychedelic style
- Pull quote
- Pull to refresh
- Pulse
- Push notification
- Push transition
q
r
- Radial menu
- Radio group
- Rag
- Rage click
- Raised cap
- RAM technique
- Range select
- Range slider
- Rating
- Rating prompt
- Reaction picker
- Read aloud
- Read receipt
- Readability
- Reader mode
- Reading flow
- Reading order
- Reading progress
- Recurring event
- Reduced motion
- Reduced transparency
- Redundant entry
- Reference line
- Reflow
- Relative color syntax
- Relative luminance
- Relative timestamp
- Required field indicator
- Resize handle
- Resize text
- Responsive upscaling
- Responsive web design
- Retro film aesthetic
- Retro web design
- Retro-futurism
- Reveal animation
- Review cursor
- Ribbon
- Rich text editor
- Rich text toolbar
- Ripple
- Risograph style
- River
- Roach motel
- Role description
- Rotate gesture
- Rotor
- Route announcement
- Roving tabindex
- RTL mirroring
- Ruby annotation
- Rule builder
- Rule of thirds
- Runt
s
- Safe area
- Sans-serif
- Saturation
- Save for later
- Scaffold
- Scanlines
- Scarcity indicator
- Scheduler
- Scope bar
- Screen curtain
- Screen magnification
- Screen reader
- Scrim
- Scroll anchoring
- Scroll chaining
- Scroll container
- Scroll edge fade
- Scroll hijacking
- Scroll lock
- Scroll pinning
- Scroll snap
- Scroll spy
- Scroll-linked animation
- Scroll-triggered animation
- Scrollbar
- Scrollbar color
- Scrollytelling
- Scrubber
- Scrubbing
- Scrubby slider
- Search field
- Secondary click
- Seed color
- Segmented control
- Select
- Select all across pages
- Selection card
- Selection color
- Selection follows focus
- Selection handle
- Semantic color
- Semantic HTML
- Semantic zoom
- Sender name
- Sensory characteristics
- Sentence case
- Sequential palette
- Serif
- Set size and position
- Shade
- Shake
- Shake to undo
- Share sheet
- Shared axis
- Shimmer
- Show more toggle
- Sidebar
- Sidenote
- Sign language interpretation
- Signature pad
- Signed distance field
- Signifier
- Site footer
- Situational disability
- Skeleton screen
- Skeuomorphism
- Skip link
- Slash command
- Slide to confirm
- Slide transition
- Slider
- Sliding indicator
- Small caps
- Small multiples
- Smart app banner
- Smart defaults
- Smart guides
- Smart quotes
- Smooth scrolling
- Snapping
- Sneak into basket
- Social login
- Social proof
- Soft delete
- Soft hyphen
- Solarpunk
- Sonification
- Sort indicator
- Sort state
- Spacer
- Spacing scale
- Spanned layout
- Sparkline
- Spatial navigation
- Spatial UI
- Specular highlight
- Speculative loading
- Speed dial
- Spinner
- Split button
- Split screen layout
- Split view
- Split-flap animation
- Splitter
- Spotlight hover
- Spotted pattern
- Spring animation
- Spring loading
- Squash and stretch
- Squircle
- sRGB
- Stack
- Stacking cards
- Stacking context
- Stagger
- Stat
- State layer
- Static color
- Status bar
- Status color
- Status message
- Steampunk
- Step indicator
- Stepped animation
- Stepper
- Steps left
- Sticky add to cart
- Sticky footer
- Sticky header
- Sticky hover
- Sticky sidebar
- Stories
- Streak
- Streaming announcement
- Strikethrough
- Structured format
- Styled alt text
- Stylistic set
- Subgrid
- Subject line
- Submenu
- Subtractive colour
- Superfamily
- Superscript
- Supporting pane
- Surface color
- Surface tint
- Swash
- Swatch
- Swipe
- Swipe actions
- Swipe deck
- Swipe to dismiss
- Swiss style
- Switch
- Switch access
- Switcher
- Symbol support
- Syntax highlighting
- Synthwave
- System color keyword
- System font
t
- Tab stop
- Tabbable
- Table of contents
- Table-based layout
- Tabs
- Tabular figures
- Tag
- Tag input
- Tap
- Tap delay
- Target spacing
- Tearsheet
- Terminal aesthetic
- Terrazzo
- Text area
- Text balancing
- Text box trim
- Text columns
- Text field
- Text spacing
- The fold
- Three-way merge
- Throttle
- Thumb zone
- Thumbnail
- Tick marks
- Time picker
- Time zone display
- Timeline
- Timeout warning
- Tint
- Tinted neutral
- Tiny tweaks
- Title bar
- Title case
- Tittle
- Toast
- Tofu
- Toggle button
- Toggle group
- Toggletip
- Toolbar
- Tooltip
- Top layer
- Top shelf
- Touch target
- Touch target size
- Trace viewer
- Track
- Tracking
- Transactional email
- Transcript
- Transfer list
- Transparency checkerboard
- Tree grid
- Tree select
- Tree view
- Triadic color scheme
- Trick wording
- True black theme
- Truncated axis
- Truncation
- Tween
- Type scale
- Type specimen
- Type to confirm
- Typeahead
- Typeface
- Typewriter effect
- Typing indicator
- Typographic color
- Typographic hierarchy
- Typography token
u
v
w
x
y
z
#
For agents
The whole dictionary is machine-readable: terms.json carries every term, alias and relation as data, llms.txt maps the site and llms-full.txt lists every term with its definition, and every term page has a .md twin at /{slug}.md.