Browse
Every term by category, names only, so the whole vocabulary fits in one scroll. Each category page has the same list with definitions. A term has exactly one category, because a term is one kind of thing. For the groupings that cut the other way, see the facets; for one alphabetical list of every name and alias, see the glossary.
component
196 terms, with definitions →A named piece of interface you can point at, place, and reuse.
- Accordion
- Action list
- Action sheet
- Alert dialog
- App bar
- App shortcut
- Attribute editor
- Avatar
- Avatar group
- Axis
- Badge
- Banner
- Bottom navigation
- Bottom sheet
- Breadcrumbs
- Bubble toolbar
- Button
- Button group
- Calendar
- Callout
- CAPTCHA
- Card
- Carousel
- Cascader
- Character counter
- Chart
- Chart annotation
- Chart legend
- Chat bubble
- Checkbox
- Chevron
- Chip
- Close button
- Coach mark
- Code editor
- Color picker
- Color well
- Column resizer
- Combobox
- Command palette
- Comparison table
- Complication
- Confirmation dialog
- Copy button
- Data grid
- Data table
- Date picker
- Date range picker
- Description list
- Disclosure
- Disclosure triangle
- Divider
- Dock
- Drag handle
- Drawer
- Dropdown
- Emergency exit button
- Emoji picker
- Error bar
- Error message
- Expandable row
- Eyedropper
- Faceted filter
- Fieldset
- Figure
- File attachment
- File upload
- Filmstrip
- Floating action button
- Floating label
- Form
- Gauge
- Ghost button
- Grabber
- Hamburger menu
- Helper text
- Hover card
- HUD panel
- Icon
- Icon button
- Identicon
- Image
- Image comparison slider
- Image well
- Inline edit
- Input group
- Input mask
- Kebab menu
- Keyboard key
- Keyboard shortcuts dialog
- Knob
- Lightbox
- Link
- List
- Listbox
- Live activity
- Meatball menu
- Media controls
- Mega menu
- Menu bar
- Menu bar extra
- Menu button
- Meter
- Minimap
- Modal dialog
- Model selector
- Multi select
- Navigation bar
- Navigation menu
- Navigation rail
- Notification center
- Ornament
- Overflow menu
- Page indicator
- Pagination
- Password reveal toggle
- PIN input
- Playhead
- Popconfirm
- Popover
- Popover arrow
- Presence indicator
- Progress bar
- Progress ring
- Prompt input
- Property filter
- Push notification
- QR code
- Quick settings tile
- Radial menu
- Radio group
- Range slider
- Rating
- Reaction picker
- Reference line
- Relative timestamp
- Resize handle
- Ribbon
- Rich text editor
- Rich text toolbar
- Scope bar
- Scrollbar
- Scrubber
- Search field
- Segmented control
- Select
- Selection card
- Share sheet
- Show more toggle
- Signature pad
- Slider
- Sort indicator
- Sparkline
- Speed dial
- Spinner
- Split button
- Splitter
- Stat
- Step indicator
- Stepper
- Submenu
- Switch
- Tabs
- Tag
- Tag input
- Tearsheet
- Text area
- Text field
- Thumbnail
- Tick marks
- Time picker
- Timeline
- Title bar
- Toast
- Toggle button
- Toggle group
- Toggletip
- Toolbar
- Tooltip
- Track
- Transfer list
- Tree grid
- Tree select
- Tree view
- Typing indicator
- Utility bar
- Video player
- Virtual keyboard
- Watermark
- Waveform
- Welcome mat
- Wheel picker
- Widget
- Window controls
- Wizard
- Zebra striping
How a page arranges its regions, and what governs the arrangement.
- 12 column grid
- 8 point grid
- Adaptive layout
- Anchor positioning
- App shell
- App silhouette
- Aspect ratio box
- Baseline grid
- Bento grid
- Box
- Breakout
- Breakpoint
- Broken grid
- Bypassing pattern
- Canonical layout
- Card grid
- Chart aspect ratio
- Chrome
- Cluster
- Column drop
- Column offset
- Commitment pattern
- Common region
- Compound grid
- Container
- Container query
- Containing block
- Content choreography
- Content shelf
- Cover
- Dashboard grid
- Deconstructed pancake
- Density
- Density independent pixel
- Device posture
- Display cutout
- Edge to edge
- F pattern
- Feed layout
- Fisheye view
- Fluid grid
- Fluid space scale
- Focal point
- Focus plus context
- Frozen column
- Full bleed
- Global navigation
- Golden ratio
- Grid lanes
- Gutenberg diagram
- Gutter
- Hero
- Holy grail layout
- Home indicator
- Imposter
- Infinite canvas
- Inspector
- Intrinsic web design
- Justified gallery
- Kanban board
- Keyline
- Lawn mower pattern
- Layer cake pattern
- Layout grid
- Layout margins
- Layout shift
- Layout shifter
- Letterboxing
- List detail
- Local navigation
- Logical properties
- Logo cloud
- Magazine layout
- Marking pattern
- Masonry
- Media object
- Miller columns
- Mobile first
- Modular grid
- Mostly fluid
- Multi column layout
- Multi-window mode
- Named grid areas
- Object fit
- Off canvas
- Optical alignment
- Overscan safe area
- Overview plus detail
- Page break
- Page header
- Pancake stack
- Pane
- Picture in picture
- Pixel density
- Proximity
- RAM technique
- Responsive upscaling
- Responsive web design
- RTL mirroring
- Rule of thirds
- Safe area
- Scaffold
- Scroll container
- Scroll snap
- Semantic zoom
- Sidebar
- Sidenote
- Site footer
- Small multiples
- Spacer
- Spacing scale
- Spanned layout
- Split screen layout
- Split view
- Spotted pattern
- Stack
- Stacking context
- Status bar
- Sticky footer
- Sticky header
- Sticky sidebar
- Subgrid
- Supporting pane
- Switcher
- Text columns
- The fold
- Thumb zone
- Tiny tweaks
- Top layer
- Universal navigation
- Utility navigation
- Viewport
- Visual balance
- Whitespace
- Window size class
- Z pattern
- Zigzag layout
A recurring answer to a recurring problem, larger than any one component.
- 10-foot UI
- Achievement badge
- Activity feed
- Address autocomplete
- Applied filters
- Autosave
- Back to top
- Bulk actions
- Chartjunk
- Check answers
- Comparison prevention
- Confirmation page
- Confirmshaming
- Cookie consent banner
- Countdown timer
- Cursor pagination
- Dark pattern
- Data-ink ratio
- Did you mean
- Diegetic interface
- Direct labeling
- Direct manipulation
- Disguised ad
- Drag preview
- Drag to reorder
- Drill-down navigation
- Drip pricing
- Drop indicator
- Dual axis
- Empty state
- Endowed progress
- Error summary
- Express checkout
- Faceted search
- Fake scarcity
- Fake social proof
- Fake urgency
- False bottom
- Feature gate
- Feature spotlight
- First run experience
- Forced continuity
- Forgiving format
- Friend spam
- Generative UI
- Goal gradient
- Gradual engagement
- Guest checkout
- Help drawer
- Honeypot field
- Hub and spoke
- Infinite scroll
- Inline autocomplete
- Inline validation
- Interface metaphor
- Interstitial
- Lazy loading
- Lazy registration
- Leaderboard
- List virtualization
- Load more
- Magic link
- Mention autocomplete
- Metered paywall
- Microsurvey
- Mini cart
- Misdirection
- Morphing control
- Multimodal interface
- Nagging
- Natural language interface
- No results state
- Notification digest
- Obstruction
- Offline indicator
- Onboarding checklist
- Onboarding tour
- One thing per page
- One-time code login
- Optimistic UI
- Order summary
- Passkey
- Password strength meter
- Paywall
- Permission priming
- Preselected opt-in
- Priority plus navigation
- Privacy zuckering
- Progressive disclosure
- Progressive image loading
- Progressive profiling
- Progressive reduction
- Pull to refresh
- Quick return header
- Quick view
- Rating prompt
- Read receipt
- Reading progress
- Roach motel
- Rule builder
- Save for later
- Scarcity indicator
- Scroll edge fade
- Scroll hijacking
- Scroll spy
- Scrollytelling
- Select all across pages
- Skeleton screen
- Slash command
- Smart app banner
- Smart defaults
- Sneak into basket
- Social login
- Social proof
- Soft delete
- Steps left
- Sticky add to cart
- Stories
- Streak
- Structured format
- Swipe deck
- Swipe to dismiss
- Table of contents
- Trick wording
- Truncated axis
- Type to confirm
- Typeahead
- Undo
- Unsaved changes guard
- Zero state
- Zero UI
interaction
76 terms, with definitions →What a reader does, and how the interface answers.
- Access key
- Affordance
- Brushing
- Caret
- Chorded shortcut
- Click-through
- Context menu
- Dead zone
- Debounce
- Double click
- Double tap
- Drag and drop
- Drag autoscroll
- Drag threshold
- Drop zone
- Dwell activation
- Edge swipe
- Fitts's law
- Fling
- Focus follows mouse
- Force touch
- Ghost click
- Haptic feedback
- Hit slop
- Hit testing
- Hold to confirm
- Hover
- Hover intent
- Key repeat
- Key sequence
- Keyboard shortcut
- Lasso selection
- Light dismiss
- Long press
- Look and pinch
- Marking menu
- Microinteraction
- Middle click
- Modifier key
- Momentum scrolling
- Mouse gesture
- Multi-touch
- Nudge
- Orbit
- Overscroll
- Pan
- Pinch to zoom
- Pointer capture
- Pointer lock
- Press-drag-release
- Pressed state
- Pressure sensitivity
- Quasimode
- Range select
- Rotate gesture
- Roving tabindex
- Scroll anchoring
- Scroll chaining
- Scroll lock
- Scrubbing
- Scrubby slider
- Secondary click
- Selection follows focus
- Selection handle
- Shake to undo
- Signifier
- Smart guides
- Snapping
- Spring loading
- Sticky hover
- Swipe
- Swipe actions
- Tap
- Tap delay
- Throttle
- Touch target
Change over time, and the vocabulary for describing it.
- 3D tilt
- Additive animation
- Anticipation
- Arc motion
- Asymmetric easing
- Attract mode
- Bounce
- Card flip
- Cloning
- Collapsing toolbar
- Compositor-only animation
- Confetti burst
- Container transform
- Count-up animation
- Crossfade
- Cubic bezier
- Cursor follower
- Damping
- Delay
- Dimensionality
- Directionality
- Dissolve
- Dock magnification
- Dolly and zoom
- Duration
- Easing
- Entrance animation
- Exit animation
- Fade
- Fade through
- Fill mode
- FLIP
- Float animation
- Follow-through
- Frame rate
- Gooey effect
- Height animation
- Hover lift
- Icon morph
- Interactive transition
- Interpolation
- Interruptible animation
- Jank
- Jiggle mode
- Ken Burns effect
- Keyframe
- Layout thrashing
- Line drawing animation
- linear() easing
- Lottie
- Magnetic button
- Marching ants
- Marquee
- Modal presentation
- Morph transition
- Motion blur
- Motion choreography
- Motion path
- Motion token
- Orbit animation
- Origin-aware animation
- Overshoot
- Page curl
- Page transition
- Parallax
- Parenting
- Particle background
- Perceptual duration
- Pop in
- Predictive back
- Pulse
- Push transition
- Reveal animation
- Ripple
- Scroll pinning
- Scroll-linked animation
- Scroll-triggered animation
- Shake
- Shared axis
- Shimmer
- Slide transition
- Sliding indicator
- Smooth scrolling
- Split-flap animation
- Spotlight hover
- Spring animation
- Squash and stretch
- Stacking cards
- Stagger
- Stepped animation
- Tween
- Typewriter effect
- Velocity skew
- View progress timeline
- View transition
- Wipe
- Yo-yo loop
- Zoom transition
typography
116 terms, with definitions →Type, and the measurements and conventions that set it.
- Abbreviation
- All caps
- Aperture
- Ascender
- Baseline
- Bidirectional text
- Blockquote
- Cap height
- Ch unit
- Color font
- Contextual alternates
- Counter
- Deck
- Descender
- Drop cap
- Dynamic Type
- Em
- Em dash
- Emoji presentation
- En dash
- Eyebrow
- Fallback font
- Faux bold
- First-line indent
- Fluid typography
- FOFT
- FOIT
- Font metric override
- Font pairing
- Font smoothing
- Font stack
- Font subsetting
- Font weight
- FOUT
- Glyph
- Grade
- Half-leading
- Hanging indent
- Hanging punctuation
- Heading
- Hinting
- Hyphenation
- Hyphenation ladder
- Icon font
- Ink trap
- Italic
- Justified text
- Kerning
- Kinetic typography
- Leading
- Legibility
- Ligature
- Line clamp
- Lining figures
- Lorem ipsum
- Measure
- Modular scale
- Monospace
- Named instance
- Non-breaking space
- Oblique
- Oldstyle figures
- OpenType features
- Optical kerning
- Optical size
- Orphan
- Pangram
- Petite caps
- Pilcrow
- Point size
- Prime mark
- Pull quote
- Rag
- Raised cap
- Readability
- River
- Ruby annotation
- Runt
- Sans-serif
- Sentence case
- Serif
- Signed distance field
- Small caps
- Smart quotes
- Soft hyphen
- Strikethrough
- Stylistic set
- Superfamily
- Superscript
- Swash
- System font
- Tabular figures
- Text balancing
- Text box trim
- Title case
- Tittle
- Tofu
- Tracking
- Truncation
- Type scale
- Type specimen
- Typeface
- Typographic color
- Typographic hierarchy
- Typography token
- Underline
- Variable font
- Variation axis
- Vertical rhythm
- Vertical writing mode
- Web font
- Widow
- Word break
- Word spacing
- X-height
- Zero-width space
Colour as a system: palettes, roles, contrast, and schemes.
- 60-30-10 rule
- Accent color
- Alpha channel
- Alpha compositing
- Analogous colors
- APCA
- Blend mode
- Brand color
- Categorical palette
- Chroma
- CMYK
- Color alias
- Color banding
- Color gamut
- Color harmonization
- Color harmony
- Color interpolation
- Color ramp
- Color role
- Color scheme
- Color space
- Color stop
- Color temperature
- Color theme
- Color token
- Color wheel
- color-mix()
- Complementary colors
- Conic gradient
- Container color
- Contrast ratio
- currentColor
- Dark mode
- Dithering
- Diverging palette
- Duotone
- Elevation overlay
- Emphasis level
- Flash of inaccurate color theme
- Forced colors mode
- Gamut mapping
- Gradient
- HCT
- Hex color
- Hue
- Hue shift
- Interaction color step
- Inverse color
- light-dark()
- Lightness
- Mesh gradient
- Monochromatic palette
- Named color
- Neutral palette
- OKLCH
- On-color
- Opacity
- Outline color
- Perceptual uniformity
- Primitive color token
- Relative color syntax
- Relative luminance
- Saturation
- Scrim
- Scrollbar color
- Seed color
- Selection color
- Semantic color
- Sequential palette
- Shade
- sRGB
- State layer
- Static color
- Status color
- Surface color
- Surface tint
- Swatch
- System color keyword
- Tint
- Tinted neutral
- Transparency checkerboard
- Triadic color scheme
- True black theme
- Vibrancy
- Wide gamut
aesthetic
84 terms, with definitions →A named visual style, with a period and a set of moves.
- Acid graphics
- Afrofuturism
- Anti-design
- Aqua
- Art Deco
- Art Nouveau
- Aurora UI
- Bauhaus style
- Bevel and emboss
- Biophilic design
- Brutalist web design
- Cassette futurism
- Chamfer
- Claymorphism
- Constructivism
- Corporate Memphis
- Cyberpunk UI
- De Stijl
- Deformable UI
- Digital collage
- Dot grid background
- E-ink aesthetic
- Editorial web design
- Fictional user interface
- Flat 2.0
- Flat design
- Frutiger Aero
- Frutiger Metro
- Glassmorphism
- Glitch aesthetic
- Gloss
- Gradient border
- Grainy gradient
- Grunge design
- Halftone
- Hand-drawn UI
- Holographic foil
- Hyperreal 3D
- Isometric illustration
- Kawaii UI
- Letterpress text
- Liquid Glass
- Long shadow
- Low poly
- Material 3 Expressive
- Material You
- Maximalism
- Memphis design
- Metro
- Mica
- Mid-century modern
- Minimalism
- Neo-skeuomorphism
- Neon glow
- Neubrutalism
- Neumorphism
- New Wave design
- Organic blob
- Pixel art UI
- Pop art style
- Progressive blur
- Psychedelic style
- Retro film aesthetic
- Retro web design
- Retro-futurism
- Risograph style
- Scanlines
- Skeuomorphism
- Solarpunk
- Spatial UI
- Specular highlight
- Squircle
- Steampunk
- Swiss style
- Synthwave
- Terminal aesthetic
- Terrazzo
- Vaporwave
- Vernacular web
- VHS aesthetic
- Vignette
- Visual hierarchy
- Windows Aero
- Y2K aesthetic
accessibility
134 terms, with definitions →Terms that exist so an interface works for everyone.
- Accessibility annotation
- Accessibility grouping
- Accessibility overlay
- Accessibility trait
- Accessibility tree
- Accessible authentication
- Accessible description
- Accessible name
- Active descendant
- Alt text
- ARIA notify
- aria-hidden
- Atomic live region
- Audio control
- Audio description
- Braille display
- Browse mode
- Busy state
- Button versus link
- Captions
- Change of context
- Character key shortcuts
- Chart description
- Chunking
- Cognitive load
- Color vision deficiency
- Conformance level
- Consistent help
- Consistent identification
- Curb cut effect
- Current page indicator
- Decorative image
- Dragging alternative
- Error identification
- Escape gesture
- Expanded state
- Explore by touch
- First rule of ARIA
- Flashing content
- Focus appearance
- Focus delegation
- Focus management
- Focus not obscured
- Focus order
- Focus ring
- Focus trap
- Focus visible
- Focusable disabled
- Focusable scroll region
- Functional need
- Group label
- Has popup
- Header association
- Heading hierarchy
- Hidden but focusable
- Hoverable, dismissible, persistent
- Images of text
- Increased contrast
- Inert
- Initial focus
- Input purpose
- Invalid state
- Inverted colors
- Keyboard trap
- Label association
- Label in name
- Landmark
- Language attribute
- Large text threshold
- Line focus
- Link purpose
- Live region
- Long description
- Magic tap
- Mixed state checkbox
- Motion actuation
- Name, role, value
- Nested interactive
- Non-text contrast
- Orientation lock
- Owned element
- Page title
- Pause, stop, hide
- Placeholder as label
- Plain language
- Pointer cancellation
- Pointer gestures
- Politeness level
- Positive tabindex
- POUR
- Presentation role
- Presentational children
- Pronunciation
- Read aloud
- Reader mode
- Reading flow
- Reading order
- Reduced motion
- Reduced transparency
- Redundant entry
- Reflow
- Required field indicator
- Resize text
- Review cursor
- Role description
- Rotor
- Route announcement
- Screen curtain
- Screen magnification
- Screen reader
- Semantic HTML
- Sensory characteristics
- Set size and position
- Sign language interpretation
- Situational disability
- Skip link
- Sonification
- Sort state
- Spatial navigation
- Status message
- Streaming announcement
- Switch access
- Symbol support
- Tab stop
- Tabbable
- Target spacing
- Text spacing
- Timeout warning
- Touch target size
- Transcript
- Use of color
- Verbosity
- Visually hidden
- Voice control