A held key firing repeatedly after an initial delay, which is how arrow keys scroll and backspace deletes more than one character.
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 browsing layout of side-by-side columns where selecting an item in one column fills the next with its children, keeping the whole path visible.
The band at the top of a screen carrying the page title, its context, and the actions that apply to the page as a whole.
How comfortably a body of text can be read at length, a property of the setting: size, measure, leading, and contrast.
The system panel of destinations and actions for sending the current item elsewhere, populated by whatever apps are installed.
The colour of a plane that content sits on, defined as a set of stacked levels so a card on a page and a sheet on a card are told apart by value.
Warning the reader that edits will be lost before a navigation or close is allowed to proceed, and offering to save or discard first.
A perceptual contrast algorithm proposed for WCAG 3 that scores a text and background pair as an Lc value and takes font size and weight into account.
A shortcut whose keys are held down together like a chord, in contrast to one typed as a sequence of separate presses.
Tufte's measure of chart economy: the share of ink that would be missed if erased, with everything else a candidate for deletion.
A tool that turns the cursor into a sampler so a colour can be picked from anywhere on screen, usually with a magnified preview of the pixel under it.
Blurring a group of shapes and then crushing the blur back to a hard edge so overlapping elements merge into one liquid silhouette as they move apart and together.
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.