Design reference index · 5/27
2153 source-linked definitions with individual URLs. JavaScript is not required to browse these documents.
Try 379 interactive reference cards
Ripple Effect
Feedback in which circular waves spread from the input location.
Confetti Animation
A celebratory effect with scattered pieces of confetti or small particles.
Empty State
A state explaining why no data is displayed and what the user can do next.
First-use Empty State
The first-use state before any data has been created.
Filter Empty State
A state suggesting filter changes when no items match the active filter combination.
Error State
A state indicating that an operation or data request failed.
Loading State
An interface state showing that processing is underway.
Success State
An interface state confirming that a requested action succeeded.
Warning State
A state communicating a possible risk or a need for caution.
Disabled State
A state in which a control is currently unavailable for use.
Read-only State
A state allowing content to be viewed but not modified.
Offline State
A state indicating that an internet or server connection is unavailable.
Connection Lost
A state indicating that an existing connection has been interrupted.
Reconnecting State
A state indicating that a lost session or server connection is being restored.
Permission Denied
A situation in which viewing or acting is blocked by insufficient permissions.
Session Expired
A state in which an authentication session has ended and signing in again is required.
Maintenance State
A state in which service access is restricted for maintenance.
Not Found / 404
A state indicating that the requested resource or address does not exist.
Rate Limit State
A state temporarily preventing requests because a request limit has been reached.
Conflict State
A state in which changes conflict, for example because of simultaneous editing.
Retry Action
A command that repeats a failed request.
Rollback
Restoring the previous valid state after a failed change.
Unsaved Changes Prompt
A warning about losing unsaved edits when leaving a page or view.
Responsive Design
Design that flexibly changes layout according to conditions such as screen width.
Adaptive Design
Design using distinct layouts for predefined device or screen environments.
Mobile-first Design
Designing the essential structure for small screens first, then expanding it.
Breakpoint
A screen-width threshold at which the layout or styles change.
Fluid Layout
A layout whose content width varies with the screen size.
Fixed Layout
A layout that keeps content width at a specified value.
Safe Area
An area for content that avoids notches, system bars, and similar obstructions.
Touch Target
An interactive area sized to be activated with a finger.
Thumb Zone
The screen region comfortably reachable during one-handed use.
Viewport
The area currently visible to the user.
Responsive Grid
A grid that adjusts its column count or spacing to screen size.
Navigation Rail Adaptation
Adapting mobile bottom navigation into a vertical rail on wider screens.
Orientation Change
Layout adaptation when switching between portrait and landscape orientation.
Density
The amount of information and interactive content placed within a given space.
Compact Mode
An interface with reduced spacing and a tighter layout for limited space.
Comfortable Mode
An interface using more generous spacing to improve readability.
Dark Mode
A theme built around dark surfaces and appropriate luminance contrast.
Light Mode
A theme built around light surfaces.
WCAG
International standard guidelines for assessing digital accessibility.
ARIA
A specification communicating interface roles, states, and properties to assistive technologies.
Accessible Name
The name assistive technology uses to identify a control or element.
Semantic HTML
Using HTML elements according to their intended semantic roles.
Keyboard Navigation
Operating an interface using a keyboard without requiring a mouse.
Focus Order
The logical sequence in which focus moves through controls, for example with Tab.
Focus Trap
Keeping keyboard focus within a designated area, such as an open modal.
Focus Indicator
A visible indication of the current keyboard interaction target.
Screen Reader
Assistive technology that presents screen and interface information through speech or other output.
Contrast Ratio
A numeric measure of luminance contrast between foreground and background.
Color Independence
Communicating state with text or symbols rather than relying only on color.
Alt Text
Text describing an image's function or meaning.
Captions
Text conveying the audio information in media.
Reduced Motion
An accessibility response that reduces nonessential motion or replaces it with alternatives.
High Contrast Mode
A display mode designed to clearly distinguish foreground from background.
Skip Link
A link that bypasses repeated navigation and moves directly to the main content.
Touch Accessibility
Design accounting for touch target size, spacing, and alternative interactions.
Error Prevention
The principle of preventing incorrect input or actions through design.
Error Identification
Clearly identifying the location and cause of an error to the user.
Progressive Enhancement
Adding advanced features for supported environments on top of a functioning baseline.
Design System
A coherent system of design principles, tokens, components, patterns, and documentation.
Component Library
A collection of reusable interface components.
Pattern Library
Documentation collecting interface solutions for recurring user tasks.
Design Token
A named design value, such as a color, size, or spacing measurement.
Semantic Token
A token named for its purpose rather than its raw visual value.
Color Palette
An organized set of colors used in a product.
Typography Scale
A system of font sizes for headings, body text, and supporting text.
Type Hierarchy
Expressing importance through type size, weight, and spacing.
Spacing Scale
A systematic set of margin and spacing values.
Elevation
Expressing an element's depth and priority through shadows and layering.
Shadow Token
A reusable setting for consistent shadow appearance.
Border Radius
The degree of rounding at an element's corners.
Stroke / Border
A line treatment used to define boundaries or structure.
Opacity
An element's degree of transparency or opaqueness.
Iconography
A system for consistently designing icon meaning, shape, weight, and usage.
Illustration System
Rules governing illustration style and composition within a product.
Design Variant
An alternative form of a component adapted to a particular use.
Component State
Defined component states, such as default, hover, focus, selected, and error.
Atomic Design
A design approach that builds larger interfaces by combining smaller parts.