# vocab.design > A linked visual dictionary of design and UI vocabulary: terms, definitions, aliases, > relations between concepts, and pointers to real implementations. Content is CC BY 4.0. Every term is served as HTML at /{slug} and as raw markdown at /{slug}.md. The full dataset is at https://vocab.design/terms.json. ## Facets Cross-cutting groupings, listed at /tags and one page each at /tags/{facet}. A term has exactly one category and any number of facets. - a11y (12) Terms filed under their own kind that exist because of accessibility. Members: abbreviation, access-key, apca, contrast-ratio, dwell-activation, dynamic-type, forced-colors-mode, hit-slop, roving-tabindex, selection-follows-focus, touch-target, underline - ai (11) The vocabulary of interfaces an assistant drives, or that drive one. Members: generative-ui, inline-autocomplete, model-selector, multimodal-interface, natural-language-interface, prompt-input, slash-command, streaming-announcement, typewriter-effect, typing-indicator, zero-ui - auth (16) Signing in, staying in, and proving you are a person. Members: accessible-authentication, captcha, gradual-engagement, guest-checkout, honeypot-field, lazy-registration, magic-link, one-time-code-login, passkey, password-reveal-toggle, password-strength-meter, permission-priming, pin-input, progressive-profiling, social-login, type-to-confirm - commerce (23) Choosing, paying, and the pressure applied along the way. Members: check-answers, comparison-prevention, comparison-table, confirmation-page, drip-pricing, express-checkout, fake-scarcity, fake-social-proof, feature-gate, forced-continuity, guest-checkout, logo-cloud, metered-paywall, mini-cart, order-summary, paywall, quick-view, roach-motel, save-for-later, scarcity-indicator, sneak-into-basket, social-proof, sticky-add-to-cart - dataviz (24) Charts and the parts they are assembled from. Members: axis, brushing, categorical-palette, chart, chart-annotation, chart-aspect-ratio, chart-description, chart-legend, chartjunk, dashboard-grid, data-ink-ratio, direct-labeling, diverging-palette, dual-axis, error-bar, gauge, reference-line, sequential-palette, small-multiples, sonification, sparkline, stat, truncated-axis, use-of-color - editorial (26) Vocabulary the page inherited from print and publishing. Members: baseline-grid, blockquote, breakout, cmyk, deck, drop-cap, editorial-web-design, eyebrow, figure, first-line-indent, halftone, hanging-indent, justified-text, magazine-layout, measure, orphan, page-break, pull-quote, rag, raised-cap, risograph, river, runt, sidenote, text-columns, widow - forms (53) Assembling a form, filling it in, and telling someone it is wrong. Members: address-autocomplete, attribute-editor, autosave, character-counter, check-answers, checkbox, color-picker, combobox, date-picker, date-range-picker, did-you-mean, dropdown, error-identification, error-message, error-summary, fieldset, file-upload, floating-label, forgiving-format, form, group-label, helper-text, inline-validation, input-group, input-mask, input-purpose, invalid-state, label-association, listbox, multi-select, one-thing-per-page, pin-input, placeholder-as-label, radio-group, range-slider, rating, redundant-entry, required-field-indicator, select, selection-card, signature-pad, slider, smart-defaults, stepper, structured-format, switch, tag-input, textarea, text-field, time-picker, typeahead, unsaved-changes-guard, wizard - gamification (8) Progress, streaks, and rewards used as motivation. Members: achievement-badge, confetti-burst, endowed-progress, goal-gradient, leaderboard, onboarding-checklist, steps-left, streak - keyboard (30) Reaching and driving an interface without a pointer. Members: access-key, active-descendant, character-key-shortcuts, chorded-shortcut, command-palette, dragging-alternative, focus-order, focus-ring, focus-trap, focus-visible, focusable-disabled, focusable-scroll-region, initial-focus, key-repeat, key-sequence, kbd, keyboard-shortcut, keyboard-shortcuts-dialog, keyboard-trap, modifier-key, nudge, positive-tabindex, quasimode, range-select, roving-tabindex, selection-follows-focus, skip-link, spatial-navigation, tab-stop, tabbable - media (26) Video, audio, images, and the controls and alternatives they need. Members: alt-text, aspect-ratio-box, audio-control, audio-description, captions, decorative-image, figure, filmstrip, image, image-comparison-slider, ken-burns-effect, letterboxing, lightbox, long-description, media-controls, object-fit, picture-in-picture, playhead, progressive-image-loading, scrubber, scrubbing, sign-language-interpretation, thumbnail, transcript, video-player, waveform - messaging (20) Conversations, presence, and things that arrive unannounced. Members: activity-feed, avatar, avatar-group, chat-bubble, emoji-picker, emoji-presentation, live-activity, mention-autocomplete, notification-center, notification-digest, presence-indicator, prompt-input, push-notification, reaction-picker, read-receipt, slash-command, stories, streaming-announcement, toast, typing-indicator - navigation (33) Getting somewhere else, and knowing where you are. Members: back-to-top, bottom-navigation, breadcrumbs, current-page-indicator, cursor-pagination, drawer, drill-down-navigation, global-navigation, hamburger-menu, hub-and-spoke, landmark, local-navigation, mega-menu, menu-bar, miller-columns, navigation-bar, navigation-menu, navigation-rail, off-canvas, page-indicator, page-transition, pagination, priority-plus-navigation, push-transition, scroll-spy, sidebar, site-footer, skip-link, sliding-indicator, spatial-navigation, table-of-contents, universal-navigation, utility-navigation - onboarding (16) The first run, the empty screen, and teaching in place. Members: coach-mark, empty-state, feature-spotlight, first-run-experience, gradual-engagement, lazy-registration, microsurvey, onboarding-checklist, onboarding-tour, permission-priming, progressive-profiling, progressive-reduction, rating-prompt, smart-app-banner, welcome-mat, zero-state - perceived-performance (22) Making a wait read as shorter than it is. Members: aspect-ratio-box, compositor-animation, debounce, frame-rate, jank, layout-shift, layout-thrashing, lazy-loading, list-virtualization, load-more, offline-indicator, optimistic-ui, perceptual-duration, progress-bar, progress-ring, progressive-image-loading, scroll-anchoring, shimmer, skeleton-screen, spinner, tap-delay, throttle - platform-registers (31) Vocabulary that exists because of one platform: TV, watch, phone, desktop, headset. Members: ten-foot-ui, accessibility-trait, action-sheet, app-shortcut, complication, device-posture, display-cutout, dock, dynamic-type, edge-to-edge, home-indicator, live-activity, menu-bar, menu-bar-extra, mobile-first, multi-window-mode, ornament, overscan-safe-area, quick-settings-tile, ribbon, safe-area, spanned-layout, spatial-navigation, spatial-ui, thumb-zone, title-bar, virtual-keyboard, wheel-picker, widget, window-controls, window-size-class - scroll (32) Everything that happens because a page is longer than a screen. Members: back-to-top, collapsing-toolbar, drag-autoscroll, false-bottom, infinite-scroll, momentum-scrolling, overscroll, parallax, pull-to-refresh, quick-return-header, reading-progress, 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, scrollytelling, smooth-scrolling, stacking-cards, sticky-footer, sticky-header, sticky-sidebar, the-fold, velocity-skew, view-progress-timeline - search (13) Asking for something by typing, and narrowing what comes back. Members: applied-filters, combobox, command-palette, did-you-mean, faceted-filter, faceted-search, inline-autocomplete, no-results-state, property-filter, rule-builder, scope-bar, search-field, typeahead - selection (15) Marking what an action will apply to. Members: brushing, bulk-actions, checkbox, lasso-selection, marching-ants, mixed-state-checkbox, multi-select, radio-group, range-select, select-all-across-pages, selection-card, selection-color, selection-follows-focus, selection-handle, transfer-list - tables (15) Rows, columns, and reading across both. Members: column-resizer, comparison-table, data-grid, data-table, density, description-list, expandable-row, frozen-column, table-header-association, lawn-mower-pattern, sort-indicator, sort-state, tabular-figures, treegrid, zebra-striping - theming (22) One interface, more than one palette. Members: color-harmonization, color-scheme, color-theme, dark-mode, elevation-overlay, flash-of-inaccurate-color-theme, forced-colors-mode, hct, prefers-contrast, inverse-color, inverted-colors, light-dark, material-you, mica, reduced-transparency, scrollbar-color, seed-color, selection-color, static-color, surface-tint, system-color-keyword, true-black-theme - tokens (23) Design decisions stored as names so they can be repointed. Members: eight-point-grid, accent-color, brand-color, color-alias, color-ramp, color-role, color-token, container-color, density, fluid-space-scale, interaction-color-step, modular-scale, motion-token, on-color, outline-color, primitive-color-token, semantic-color, spacing-scale, state-layer, status-color, surface-color, type-scale, typography-token - touch (40) Input from a finger rather than a cursor. Members: action-sheet, bottom-sheet, double-tap, drag-threshold, drag-to-reorder, dragging-alternative, edge-swipe, escape-gesture, explore-by-touch, fling, force-touch, ghost-click, grabber, haptic-feedback, hit-slop, home-indicator, long-press, magic-tap, momentum-scrolling, multi-touch, overscroll, pan, pinch-to-zoom, pointer-gestures, pressure-sensitivity, pull-to-refresh, rotate-gesture, selection-handle, sticky-hover, swipe, swipe-actions, swipe-deck, swipe-to-dismiss, tap, tap-delay, target-spacing, thumb-zone, touch-target, touch-target-size, virtual-keyboard - web-platform (48) Terms that name a web platform feature, not a design idea. Members: accessibility-tree, additive-animation, anchor-positioning, aria-notify, aria-hidden, color-scheme, color-mix, container-query, containing-block, currentcolor, fill-mode, focus-visible, font-metric-override, font-subsetting, forced-colors-mode, grid-lanes, height-animation, inert, light-dismiss, light-dark, line-clamp, linear-easing, logical-properties, named-grid-areas, object-fit, oklch, page-break, pointer-capture, pointer-lock, popover, ram-technique, relative-color-syntax, scroll-anchoring, scroll-chaining, scroll-snap, scroll-linked-animation, semantic-html, smooth-scrolling, stacking-context, subgrid, text-balancing, text-box-trim, top-layer, view-progress-timeline, view-transition, web-font, wide-gamut, word-break ## Terms - [Abbreviation](https://vocab.design/abbreviation.md): A shortened form of a word or phrase, from Dr. to NASA, with its own typographic conventions and an expansion assistive tech can speak. - [Accent color](https://vocab.design/accent-color.md): The one saturated colour an interface spends sparingly on the things it wants clicked, so its rarity is what makes it read as important. - [Access key](https://vocab.design/access-key.md): A single letter, usually shown underlined, that jumps straight to a menu or control once the access modifier is held. - [Accessibility annotation](https://vocab.design/accessibility-annotation.md): Notes attached to a design file that spell out the things a mockup cannot show: heading levels, focus order, names, roles, live regions, and alt text. - [Accessibility grouping](https://vocab.design/accessibility-grouping.md): Collapsing a cluster of elements, an icon plus a label plus a value, into one thing assistive technology stops at, instead of three stops that mean nothing apart. - [Accessibility overlay](https://vocab.design/accessibility-overlay.md): A third party script bolted onto a site with a promise of automatic compliance, usually a floating widget of font and contrast toggles that fixes nothing underneath. - [Accessibility trait](https://vocab.design/accessibility-trait.md): The platform flag on a native view that says what it is and how it behaves, the mobile counterpart to a role plus a state, and the thing a custom control has to set by hand. - [Accessibility tree](https://vocab.design/accessibility-tree.md): The parallel tree a browser derives from the DOM, holding the role, name, state, and value that assistive technology actually reads. - [Accessible authentication](https://vocab.design/accessible-authentication.md): A sign-in route that never requires a cognitive function test such as recalling a password or solving a puzzle without offering an alternative. - [Accessible description](https://vocab.design/accessible-description.md): Supplementary text announced after a control's name, carrying hint or error detail without becoming part of the name itself. - [Accessible name](https://vocab.design/accessible-name.md): The string assistive technology announces for a control, computed from label, aria-labelledby, aria-label, or its own content in a fixed order of precedence. - [Accordion](https://vocab.design/accordion.md): A stack of headers, each expanding to reveal its own section of content. - [Achievement badge](https://vocab.design/achievement-badge.md): A collectible marker awarded for a milestone and displayed on a profile, often shown greyed out before it is earned so the set is visible. - [Acid graphics](https://vocab.design/acid-graphics.md): A 2020s rave revival style of chrome and liquid 3D objects, warped and stretched lettering, clashing saturated colour on near black, smileys, globes, and wireframe motifs. - [Action list](https://vocab.design/action-list.md): A vertical list of commands with icons, descriptions and dividers, the shared body used inside menus, panels and side sheets. - [Action sheet](https://vocab.design/action-sheet.md): A modal list of choices that slides up from the bottom of a phone screen in response to something you just did, with cancel at the end. - [Active descendant](https://vocab.design/active-descendant.md): A focus technique where DOM focus stays on a container or input and aria-activedescendant names which child is active, used when focus must not move. - [Activity feed](https://vocab.design/activity-feed.md): A reverse chronological list of things that happened, each entry naming an actor, a verb, and an object, grouped when many are alike. - [Adaptive layout](https://vocab.design/adaptive-layout.md): A layout that switches between a few discrete arrangements chosen per size class, rather than flowing continuously as the window changes. - [Additive animation](https://vocab.design/additive-animation.md): Composing an animation on top of whatever is already animating the same property instead of replacing it, so a second nudge adds to the first rather than restarting it. - [Address autocomplete](https://vocab.design/address-autocomplete.md): Replacing a set of address fields with one lookup that suggests full addresses after a few characters and fills the rest on selection. - [Affordance](https://vocab.design/affordance.md): What an element makes possible for the person using it, such as a surface that can be pushed, dragged, or scrolled. - [Afrofuturism](https://vocab.design/afrofuturism.md): A style that pictures technology through the African diaspora, combining cosmic imagery, textile and mask pattern, gold and indigo, and geometric ornament used structurally. - [Alert dialog](https://vocab.design/alert-dialog.md): A dialog that interrupts the flow to demand acknowledgement or confirmation of a consequential action before anything else can continue. - [All caps](https://vocab.design/all-caps.md): Text set entirely in capitals, which reads slower than mixed case because the word's outline shape disappears. - [Alpha channel](https://vocab.design/alpha-channel.md): The transparency component carried inside a colour value itself, which lets a border or fill blend with whatever surface it lands on instead of assuming one. - [Alpha compositing](https://vocab.design/alpha-compositing.md): The arithmetic that combines a translucent layer with what is beneath it, and the reason two stacked 50 percent layers do not add up to fully opaque. - [Alt text](https://vocab.design/alt-text.md): The text alternative that stands in for an image, written to serve the same purpose in the same context rather than to describe every detail. - [Analogous colors](https://vocab.design/analogous-colors.md): A palette built from hues that neighbour each other on the wheel, giving a calm scheme with no colour fighting another for attention. - [Anchor positioning](https://vocab.design/anchor-positioning.md): A CSS mechanism that tethers one element to another, sizing and placing it against its anchor and trying fallback positions when the default one would overflow. - [Anti-design](https://vocab.design/anti-design.md): A deliberately awkward style that breaks layout, type, and color conventions so the interface reads as a statement rather than as a polished product. - [Anticipation](https://vocab.design/anticipation.md): A small move in the opposite direction just before the main one, borrowed from character animation to telegraph what is about to happen. - [APCA](https://vocab.design/apca.md): 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. - [Aperture](https://vocab.design/aperture.md): The partly enclosed opening in a letter, such as the gap where the two terminals of a c stop or the mouth at the bottom of an e. - [App bar](https://vocab.design/app-bar.md): The persistent bar across the top of an application carrying its title, navigation, and primary actions. - [App shell](https://vocab.design/app-shell.md): The persistent frame of an application, its header, navigation and footer, that stays put while only the content region swaps as you move around. - [App shortcut](https://vocab.design/app-shortcut.md): A short menu of app actions hung off the app icon itself, opened by a long press or a secondary click before the app is even running. - [App silhouette](https://vocab.design/app-silhouette.md): The recognisable outline of an app's chrome, which bars and panes it has and where they sit, used to classify one app's layout against another's. - [Applied filters](https://vocab.design/applied-filters.md): A row of removable tokens above the results showing every filter currently in force, with a control to clear them all at once. - [Aqua](https://vocab.design/aqua.md): Apple's early Mac OS X look of glossy blue gel buttons, pinstripes, gumdrop window controls, and a pulsing default button. - [Arc motion](https://vocab.design/arc-motion.md): Moving an element along a curved path rather than a straight line, so a change of position reads as natural rather than mechanical. - [aria-hidden](https://vocab.design/aria-hidden.md): An attribute that removes an element and its whole subtree from the accessibility tree while leaving it visible on screen. - [ARIA notify](https://vocab.design/aria-notify.md): A proposed API for speaking a message directly to assistive technology, without the live region trick of mutating hidden text and hoping the timing works out. - [Art Deco](https://vocab.design/art-deco.md): A 1920s luxury style of strict symmetry, stepped and fanned geometry, strong vertical emphasis, metallic gold on deep colour, and high contrast display capitals. - [Art Nouveau](https://vocab.design/art-nouveau.md): A turn of the century style of whiplash curves, botanical line ornament, muted jewel tones, and lettering drawn to fit the frame rather than set on a grid. - [Ascender](https://vocab.design/ascender.md): The part of a lowercase letter such as b, d, or h that rises above the x-height. - [Aspect ratio box](https://vocab.design/aspect-ratio-box.md): A container that holds a fixed width to height proportion whatever its size, so media reserves its space before it loads. - [Asymmetric easing](https://vocab.design/asymmetric-easing.md): Giving a state change and its reverse different curves or durations, usually a quick confident exit and a slower entrance, so the two directions do not feel identical. - [Atomic live region](https://vocab.design/atomic-live-region.md): A live region setting that makes assistive technology re-read the whole region when any part of it changes, instead of only the changed fragment. - [Attract mode](https://vocab.design/attract-mode.md): A self-playing loop an idle screen falls into to demonstrate itself, inherited from arcade cabinets and reused by kiosks and product demos. - [Attribute editor](https://vocab.design/attribute-editor.md): A repeating row of key and value fields with add and remove controls, used for tags, headers and other open ended pairs. - [Audio control](https://vocab.design/audio-control.md): A way to stop sound that started on its own, because autoplaying audio drowns out the screen reader voice a reader depends on to find the control that stops it. - [Audio description](https://vocab.design/audio-description.md): A narration track describing visual information the soundtrack leaves out, fitted into the gaps between dialogue. - [Aurora UI](https://vocab.design/aurora-ui.md): A style whose background is built from heavily blurred color blobs that glow and drift like the northern lights behind the content. - [Autosave](https://vocab.design/autosave.md): Persisting the reader's work continuously without a save action, usually with a quiet status line reporting when the last save happened. - [Avatar](https://vocab.design/avatar.md): A small image standing in for a person or entity, falling back to initials or a generic glyph when there is no picture. - [Avatar group](https://vocab.design/avatar-group.md): Several avatars overlapped in a row to show a set of people compactly, with a plus n counter standing for the rest. - [Axis](https://vocab.design/axis.md): The ruled edge of a chart that maps position to value: scale, ticks, and labels that make the marks readable as numbers. - [Back to top](https://vocab.design/back-to-top.md): A control that appears after the reader has scrolled some distance and returns them to the top of the page in one action. - [Badge](https://vocab.design/badge.md): A small marker attached to another element that carries a count or a status and is not interactive on its own. - [Banner](https://vocab.design/banner.md): A prominent message strip, usually spanning the top of a page or section, that stays visible until the user dismisses or resolves it. - [Baseline](https://vocab.design/baseline.md): The invisible line that most letters sit on, and the line every other vertical type metric is measured from. - [Baseline grid](https://vocab.design/baseline-grid.md): A set of evenly spaced horizontal lines that every line of text sits on, so type in adjacent columns lines up across the page. - [Bauhaus style](https://vocab.design/bauhaus-style.md): A style reduced to primary red, yellow, and blue on off-white, elementary circles, triangles, and squares, and undecorated sans serif type. - [Bento grid](https://vocab.design/bento-grid.md): A grid whose cells are deliberately different sizes, tiled to fill a rectangle without gaps, like the compartments of a bento box. - [Bevel and emboss](https://vocab.design/bevel.md): Light and dark edges drawn along a shape's border so it reads as raised or carved, the depth trick behind classic desktop buttons. - [Bidirectional text](https://vocab.design/bidirectional-text.md): Text mixing a right-to-left script with left-to-right runs such as numbers or Latin words, where each run keeps its own direction. - [Biophilic design](https://vocab.design/biophilic-design.md): A style that borrows from the natural world on purpose, using earthy greens and clays, organic silhouettes, botanical imagery, and slow ambient motion to make a screen feel less mechanical. - [Blend mode](https://vocab.design/blend-mode.md): A formula for combining a layer's colour with the colour behind it, such as multiply or screen or overlay, instead of simply covering it. - [Organic blob](https://vocab.design/blob-shape.md): A soft irregular shape with no straight edges, used as a background accent or image mask to soften a strictly rectangular layout. - [Blockquote](https://vocab.design/blockquote.md): A passage quoted from another source and set off from the running text as its own block, carrying the attribution with it. - [Bottom navigation](https://vocab.design/bottom-navigation.md): A bar of three to five top level destinations pinned to the bottom edge of a phone screen, with the current destination always marked. - [Bottom sheet](https://vocab.design/bottom-sheet.md): A surface anchored to the bottom edge that slides up over the content, often draggable between a peeked and an expanded height. - [Bounce](https://vocab.design/bounce-animation.md): Motion that arrives, rebounds, and arrives again in decreasing amounts, reading as an object landing on a surface. - [Box](https://vocab.design/box.md): A bordered container, optionally titled, that groups logically related controls so the grouping is drawn rather than implied by spacing alone. - [Braille display](https://vocab.design/braille-display.md): A refreshable braille row that renders the same accessibility tree as speech, with abbreviated role names authors can override. - [Brand color](https://vocab.design/brand-color.md): The colour an organisation owns in a customer's memory, carried into a product as the seed for its palette rather than used directly on every surface. - [Breadcrumbs](https://vocab.design/breadcrumbs.md): A trail of links showing the path from the top of a hierarchy down to the current page, with every level above it clickable on the way back up. - [Breakout](https://vocab.design/breakout.md): A track wider than the reading column but narrower than the viewport, used for figures and code that need more room than prose. - [Breakpoint](https://vocab.design/breakpoint.md): A viewport width at which a layout is allowed to change shape, defined once so every screen in a system reflows at the same places. - [Broken grid](https://vocab.design/broken-grid.md): A composition that sets up a grid and then deliberately violates it, overlapping and offsetting elements to create tension. - [Browse mode](https://vocab.design/browse-mode.md): The screen reader mode that intercepts keystrokes for reading and navigation, as opposed to focus or forms mode where keys reach the page. - [Brushing](https://vocab.design/brushing.md): Dragging a selection across one chart to highlight the same records in every linked view. - [Brutalist web design](https://vocab.design/brutalist-web-design.md): A raw style that leaves the document showing: system or monospace type, default link blue, hard borders, and no decoration beyond structure. - [Bubble toolbar](https://vocab.design/bubble-toolbar.md): A small formatting bar that appears floating over a text selection and disappears when the selection is dropped. - [Bulk actions](https://vocab.design/bulk-actions.md): Selecting several rows and applying one command to all of them, usually through a bar that appears once a selection exists and reports its count. - [Busy state](https://vocab.design/busy-state.md): Marking a region as still loading so assistive technology waits for the finished result instead of reading each row as it streams in. - [Button](https://vocab.design/button.md): A control that runs an action when activated, labelled with the thing it does rather than with where it goes. - [Button group](https://vocab.design/button-group.md): Buttons set flush against each other so they read as one unit of related actions, usually with shared borders and rounded outer corners only. - [Button versus link](https://vocab.design/button-versus-link.md): The rule that decides which element to use: a link goes somewhere, a button does something, and the choice sets the keyboard, the cursor, and the announced role. - [Bypassing pattern](https://vocab.design/bypassing-pattern.md): A scanning shape where readers deliberately skip the opening words of each line because every line in a list starts the same way. - [Calendar](https://vocab.design/calendar.md): A month grid of dates that can be read, navigated and selected from, whether standing alone or living inside a date field. - [Callout](https://vocab.design/callout.md): A boxed note set into the flow of content to carry a warning, tip or aside, coloured by severity and staying put once shown. - [Canonical layout](https://vocab.design/canonical-layout.md): One of a small set of proven multi pane arrangements a platform recommends, such as list detail, supporting pane and feed, instead of a new layout per screen. - [Cap height](https://vocab.design/cap-height.md): The height of a capital letter measured from the baseline, and the edge designers usually mean when they say text should line up flush. - [CAPTCHA](https://vocab.design/captcha.md): A challenge placed in a form to sort people from scripts, from distorted text to a single checkbox that watches how you got there. - [Captions](https://vocab.design/captions.md): Synchronised text for a video's audio, including speaker changes and meaningful sound, distinct from subtitles which only translate dialogue. - [Card](https://vocab.design/card.md): A bounded surface holding a preview of one thing, usually an image, a title, some detail and one or two actions, that as a whole leads somewhere. - [Card flip](https://vocab.design/card-flip.md): Rotating a card about its own axis to show a second face on the back, with the hidden face pre-rotated and its backface hidden so only one side is ever visible. - [Card grid](https://vocab.design/card-grid.md): Content laid out as equal width cards flowing across a responsive grid and wrapping to new rows as space allows. - [Caret](https://vocab.design/caret.md): The blinking marker showing where typed text will be inserted, moved by clicking, by arrow keys, or by dragging on touch. - [Carousel](https://vocab.design/carousel.md): A row of items shown a few at a time that advances by arrows, swipe or a timer, with the rest waiting off screen. - [Cascader](https://vocab.design/cascader.md): A select whose options open level by level, each choice narrowing the next, used for country then state then city style data. - [Cassette futurism](https://vocab.design/cassette-futurism.md): The analog future of late 1970s science fiction: beige and putty plastic, chunky toggles and rocker switches, amber or green CRT readouts, and monochrome bitmap type. - [Categorical palette](https://vocab.design/categorical-palette.md): A data palette of distinct hues at roughly equal visual weight, used for groups that have no order so no colour reads as larger than another. - [Ch unit](https://vocab.design/ch-unit.md): A CSS length equal to the advance width of the digit zero in the current font, used to set column widths in characters rather than pixels. - [Chamfer](https://vocab.design/chamfer.md): A corner cut flat at an angle instead of rounded, the sharp-edged sibling of border-radius that reads industrial, military, or sci-fi. - [Change of context](https://vocab.design/change-of-context.md): A shift big enough to disorient a reader, a new page, a new window, a moved focus, a rearranged form, and the rule that it should follow a request rather than a keystroke. - [Character counter](https://vocab.design/character-counter.md): The running count beside a text box showing how many characters are used, or how many remain, against a limit. - [Character key shortcuts](https://vocab.design/character-key-shortcuts.md): Single letter shortcuts that fire without a modifier, which must be switchable off or remappable because speech input and screen readers trigger them by accident. - [Chart](https://vocab.design/chart.md): A drawing of data in which position, length, angle or colour carries the numbers, chosen so the comparison a reader needs is the easiest one to see. - [Chart annotation](https://vocab.design/chart-annotation.md): A note pinned onto the data itself: a callout, arrow, or highlighted span that tells the reader what to see in the chart. - [Chart aspect ratio](https://vocab.design/chart-aspect-ratio.md): How wide a chart is for its height, which sets the slopes of its lines; banking to 45 degrees keeps rates of change readable. - [Chart description](https://vocab.design/chart-description.md): The text alternative for a chart: a summary of the takeaway plus access to the underlying values, not a recital of the pixels. - [Chart legend](https://vocab.design/chart-legend.md): The key beside a chart that decodes series colours and symbols into names, and the first thing direct labeling tries to delete. - [Chartjunk](https://vocab.design/chartjunk.md): Tufte's word for ink that decorates a chart without carrying data: 3D bevels, gradient fills, mascots, gridline thickets. - [Chat bubble](https://vocab.design/chat-bubble.md): A rounded container for one message in a conversation, aligned and coloured by who sent it, often with a tail toward the sender's side. - [Check answers](https://vocab.design/check-answers.md): A review screen listing everything the reader entered, with a change link beside each answer, shown before the submission is final. - [Checkbox](https://vocab.design/checkbox.md): A square control that turns one independent option on or off, used in sets where any number of the options may be chosen. - [Chevron](https://vocab.design/chevron.md): The small angle bracket used as a directional marker: down means this opens, right means this goes deeper, in breadcrumbs it means next level. - [Chip](https://vocab.design/chip.md): A compact, rounded element holding one value, which can usually be selected, removed, or both. - [Chorded shortcut](https://vocab.design/chorded-shortcut.md): A shortcut whose keys are held down together like a chord, in contrast to one typed as a sequence of separate presses. - [Motion choreography](https://vocab.design/choreography.md): The plan for how several animating elements relate in time and space, deciding what leads, what follows, and what stays still. - [Chroma](https://vocab.design/chroma.md): Colourfulness measured in absolute terms rather than as a percentage of the maximum, so a light pastel and a dark ink can be compared on one scale. - [Chrome](https://vocab.design/chrome.md): The parts of a window or app that frame content rather than being content: title bars, toolbars, tab strips and address bars. - [Chunking](https://vocab.design/chunking.md): Breaking content into small labelled pieces, short paragraphs, lists, and headings, so a reader can hold one piece at a time instead of the whole wall. - [Claymorphism](https://vocab.design/claymorphism.md): A soft style where controls look inflated from clay: pastel fills, very large corner radii, an inner highlight, and a tinted drop shadow. - [Click-through](https://vocab.design/click-through.md): A click that both focuses an inactive surface and reaches the control underneath, instead of being spent activating the window first. - [Cloning](https://vocab.design/cloning.md): Spawning a new element visibly out of an existing one so the reader can see where it came from, rather than having it arrive from nowhere. - [Close button](https://vocab.design/close-button.md): The small dismiss control in the corner of a dialog, banner or panel, drawn as an X and named Close rather than X. - [Cluster](https://vocab.design/cluster.md): A layout primitive that lays items of differing widths out like words in a paragraph, wrapping to new lines with even gaps in both directions. - [CMYK](https://vocab.design/cmyk.md): The subtractive print colour model: cyan, magenta and yellow inks plus a key black, mixing by absorbing light, with a gamut narrower than any screen's. - [Coach mark](https://vocab.design/coach-mark.md): A temporary message anchored to a control that teaches what it does, often chained into a numbered sequence across a screen. - [Code editor](https://vocab.design/code-editor.md): A text area specialised for code, with a gutter of line numbers, syntax colouring and a caret that understands indentation. - [Cognitive load](https://vocab.design/cognitive-load.md): The mental effort an interface demands, split between the work the task really needs and the work the design added by way of clutter, jargon, and avoidable steps. - [Collapsing toolbar](https://vocab.design/collapsing-toolbar.md): A header that shrinks as the page scrolls, trading its large title and image for a compact bar that stays available. - [Color alias](https://vocab.design/color-alias.md): A second name pointing at an existing scale so one palette can answer to several meanings, letting yellow serve as both warning and pending without duplication. - [Color banding](https://vocab.design/color-banding.md): The visible stripes that appear across a gradient when a display or file cannot render enough intermediate steps to keep the transition smooth. - [Color font](https://vocab.design/color-font.md): A font whose glyphs carry their own colors, gradients, or layers, with a palette the page can override rather than a single ink. - [Color gamut](https://vocab.design/color-gamut.md): The set of colours a space or a display can actually produce, which is why a value that is legal in one notation can be impossible on a given screen. - [Color harmonization](https://vocab.design/color-harmonization.md): Nudging an outside colour's hue toward the current scheme so a fixed brand or status colour sits inside a generated palette without looking imported. - [Color harmony](https://vocab.design/color-harmony.md): A rule for choosing colours by their positions on the wheel, such as complementary or analogous or triadic, so a palette holds together by construction. - [Color interpolation](https://vocab.design/color-interpolation.md): The rule for what happens between two colours in a gradient or transition, including which space the blend runs in and which way around the hue wheel it travels. - [color-mix()](https://vocab.design/color-mix.md): A CSS function that blends two colours by a chosen percentage in a chosen colour space, so hover and disabled variants are derived rather than hand-picked. - [Color picker](https://vocab.design/color-picker.md): A control for choosing a colour, usually pairing a saturation and lightness field with a hue slider, an alpha slider and a text field for a value. - [Color ramp](https://vocab.design/color-ramp.md): One hue rendered at a fixed series of lightness steps, numbered so that the same step means the same job in every hue. - [Color role](https://vocab.design/color-role.md): A named job in the interface, such as surface or outline or on-primary, that components style themselves against instead of reaching for a palette value. - [Color scheme](https://vocab.design/color-scheme.md): The declaration that a page or element supports light or dark rendering, which also tells the browser which palette to use for scrollbars and form controls. - [Color space](https://vocab.design/color-space.md): A coordinate system for describing colour, where the choice of axes decides whether arithmetic like mixing or stepping a ramp matches what the eye sees. - [Color stop](https://vocab.design/color-stop.md): A colour pinned at a position along a gradient, with an optional hint between two stops that moves the halfway point of the transition off centre. - [Color temperature](https://vocab.design/color-temperature.md): Whether a colour reads warm (toward red and orange) or cool (toward blue), the axis designers use to bias a neutral grey without changing its lightness. - [Color theme](https://vocab.design/color-theme.md): A complete named set of colour values a product can swap in whole, so light, dark, high contrast and per-tenant branding are the same mechanism. - [Color token](https://vocab.design/color-token.md): A named colour decision stored once and referenced everywhere, so retheming is a change to the value rather than an edit at every place it is used. - [Color vision deficiency](https://vocab.design/color-vision-deficiency.md): Reduced ability to tell certain hues apart, most often red from green, which makes hue alone an unreliable way to carry meaning for roughly one man in twelve. - [Color well](https://vocab.design/color-well.md): The small filled square that shows the current colour and opens a colour picker when pressed. - [Color wheel](https://vocab.design/color-wheel.md): A circular arrangement of hues that makes relationships between colours geometric, so a scheme becomes a shape drawn across the circle. - [Column drop](https://vocab.design/column-drop.md): A responsive pattern where full height columns peel off one at a time and stack below as the viewport narrows, keeping source order. - [Column offset](https://vocab.design/column-offset.md): Pushing a column away from the grid's start so it begins on a later line, leaving deliberate empty tracks rather than an element to fill them. - [Column resizer](https://vocab.design/column-resizer.md): The invisible strip on a column border that widens or narrows the column when dragged, and often fits the column to its content on double click. - [Combobox](https://vocab.design/combobox.md): A text input paired with a list of suggestions that narrows as you type, where the list can be navigated and chosen from with the keyboard. - [Command palette](https://vocab.design/command-palette.md): A keyboard-summoned overlay whose single search box finds and runs any command or destination in an application by name. - [Commitment pattern](https://vocab.design/commitment-pattern.md): The rare scanning shape where a motivated reader fixates on nearly every word, the only pattern that behaves like actual reading. - [Common region](https://vocab.design/common-region.md): The grouping principle that anything inside a shared boundary reads as one group, strong enough to beat how far apart the items actually are. - [Comparison prevention](https://vocab.design/comparison-prevention.md): Structuring plans or products so their features and prices cannot be lined up, forcing a decision that no side-by-side reading would support. - [Comparison table](https://vocab.design/comparison-table.md): A table whose columns are options and whose rows are features, read across to decide between plans or products. - [Complementary colors](https://vocab.design/complementary-colors.md): Two hues sitting opposite each other on the colour wheel, the pairing that produces the strongest contrast and the loudest accent. - [Complication](https://vocab.design/complication.md): A slot on a watch face filled with one live figure from an app, sized to be read in the second a wrist is raised. - [Compositor-only animation](https://vocab.design/compositor-animation.md): An animation limited to properties the compositor can handle alone, usually transform and opacity, so it keeps running even when the main thread is busy. - [Compound grid](https://vocab.design/compound-grid.md): Two or more grids of different column counts overlaid in one layout, so a page can carry several rhythms while still sharing one structure. - [Confetti burst](https://vocab.design/confetti-burst.md): A short particle celebration thrown across the screen to mark a completion, decorative by design and the first thing reduced motion should drop. - [Confirmation dialog](https://vocab.design/confirmation-dialog.md): A modal that stops an action part way through to ask whether you meant it, naming the consequence in its confirm button rather than saying OK. - [Confirmation page](https://vocab.design/confirmation-page.md): The screen that closes a transaction, stating plainly that it succeeded, giving a reference the reader can quote, and saying what happens next. - [Confirmshaming](https://vocab.design/confirmshaming.md): Wording the decline option so that choosing it is an admission of something embarrassing, making refusal feel like a confession rather than a choice. - [Conformance level](https://vocab.design/conformance-level.md): 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. - [Conic gradient](https://vocab.design/conic-gradient.md): A gradient whose colours sweep around a centre point like a clock hand rather than along a line, the shape behind pie charts, colour wheels and progress rings. - [Consistent help](https://vocab.design/consistent-help.md): Keeping the same help route, a contact link, a chat launcher, a self-help pane, in the same relative place on every page so a stuck reader can find it again. - [Consistent identification](https://vocab.design/consistent-identification.md): Calling the same function by the same name and icon everywhere in a product, so a reader who learned it once does not have to relearn it per screen. - [Constructivism](https://vocab.design/constructivism.md): A 1920s poster language of diagonal bars and blocks, red and black on off-white, photomontage, and heavy sans capitals set on a strong angle. - [Container](https://vocab.design/container.md): A wrapper that caps how wide content can get and adds the side padding that keeps it off the viewport edges. - [Container color](https://vocab.design/container-color.md): A muted companion to an accent, light enough to fill a chip or a card behind ordinary text, so an accent can shade a region without shouting. - [Container query](https://vocab.design/container-query.md): A rule that responds to the size of a component's own container rather than the viewport, so one component adapts anywhere it is placed. - [Container transform](https://vocab.design/container-transform.md): Material's transition in which a container grows or shrinks into another one, its contents crossfading inside, so a card visibly becomes the screen it opened. - [Containing block](https://vocab.design/containing-block.md): The box an element's percentages and offsets are measured against, which is not always its parent and changes with how the element is positioned. - [Content choreography](https://vocab.design/content-choreography.md): Deciding how blocks of content reorder and regroup as a layout reflows, so hierarchy survives the collapse from several columns into one. - [Content shelf](https://vocab.design/content-shelf.md): A horizontally scrolling row of cards, one row per category, stacked down the page so each row is browsed sideways. - [Context menu](https://vocab.design/context-menu.md): A menu of actions for one specific object, opened on that object by right click, long press, or the context menu key. - [Contextual alternates](https://vocab.design/contextual-alternates.md): Substitute letterforms a font swaps in automatically based on the neighbouring characters, so joins and repeats look natural. - [Contrast ratio](https://vocab.design/contrast-ratio.md): A number from 1:1 to 21:1 describing how far apart two colours sit in relative luminance, used to decide whether text on a background is readable. - [Cookie consent banner](https://vocab.design/cookie-consent-banner.md): A notice asking permission to store non-essential cookies before the reader has done anything, offering accept, reject, and a route to per-purpose choices. - [Copy button](https://vocab.design/copy-button.md): A small control beside a value that copies it to the clipboard and confirms by turning into a tick for a second or two. - [Corporate Memphis](https://vocab.design/corporate-memphis.md): The flat vector illustration style of bright, faceless people with long bendy limbs and small torsos that spread across tech marketing from 2017. - [Count-up animation](https://vocab.design/count-up-animation.md): Animating a number toward its value instead of setting it, often with digits rolling like an odometer so the change is legible. - [Countdown timer](https://vocab.design/countdown-timer.md): A running clock attached to an offer or a held resource, showing how long remains and what will happen when it reaches zero. - [Counter](https://vocab.design/counter.md): The fully enclosed white space inside a letterform, the ring of an o or the bowl of a b: letter anatomy, not a character count or a CSS counter. - [Cover](https://vocab.design/cover.md): A layout primitive that fills at least the viewport height, centring a principal element vertically with optional header and footer pinned above and below. - [Crossfade](https://vocab.design/crossfade.md): A transition in which one element fades out while the other fades in over the same span, so both are partly visible at the midpoint. - [Cubic bezier](https://vocab.design/cubic-bezier.md): The four-control-point curve that describes how a value moves between its start and end, the default way CSS spells an easing. - [Curb cut effect](https://vocab.design/curb-cut-effect.md): The pattern where something built for a disabled minority turns out to serve everyone, the way dropped kerbs serve prams and captions serve noisy rooms. - [Current page indicator](https://vocab.design/current-page-indicator.md): The marking of which item in a navigation set is the one you are on, exposed with aria-current so it survives without the colour cue. - [currentColor](https://vocab.design/currentcolor.md): A CSS keyword meaning the element's own text colour, letting borders, icons and fills inherit whatever colour the surrounding text happens to be. - [Cursor follower](https://vocab.design/cursor-follower.md): A dot or ring that trails the pointer with a lag and often swells over links, replacing or augmenting the native cursor as a piece of brand motion. - [Cursor pagination](https://vocab.design/cursor-pagination.md): Paging that moves by a pointer into the result set rather than a page number, so newly inserted rows never shift what the next page contains. - [Cyberpunk UI](https://vocab.design/cyberpunk-ui.md): A dystopian sci-fi interface style: near-black surfaces, one or two toxic neon accents, monospace all-caps labels, clipped corners, and scanline or glitch noise laid over the top. - [Damping](https://vocab.design/damping.md): The friction term in a spring that decides how quickly oscillation dies out, from a loose wobble to a critically damped move with no bounce at all. - [Dark mode](https://vocab.design/dark-mode.md): A second palette built on dark surfaces with light foregrounds, derived from the light one by rebalancing lightness and saturation rather than by inverting it. - [Dark pattern](https://vocab.design/dark-pattern.md): An interface arranged to make the reader do something they did not intend and would not have chosen, by exploiting how attention and defaults work. - [Dashboard grid](https://vocab.design/dashboard-grid.md): A grid of tiles, each holding one metric, chart or list, that a reader can often resize and rearrange. - [Data grid](https://vocab.design/data-grid.md): A spreadsheet-like table where individual cells take focus and can be edited, navigated cell by cell with the arrow keys. - [Data-ink ratio](https://vocab.design/data-ink-ratio.md): Tufte's measure of chart economy: the share of ink that would be missed if erased, with everything else a candidate for deletion. - [Data table](https://vocab.design/data-table.md): A table built for working with data rather than reading it: sortable columns, selectable rows, and controls that act on the rows you select. - [Date picker](https://vocab.design/date-picker.md): A field that opens a small calendar so a date can be chosen by looking at the month rather than typing it. - [Date range picker](https://vocab.design/date-range-picker.md): A calendar that takes a start and an end date in one pass, highlighting the span between them as you move. - [De Stijl](https://vocab.design/de-stijl.md): A style built only from black rules, rectangular fields, and the three primaries on white, arranged asymmetrically with no curves and no diagonals. - [Dead zone](https://vocab.design/dead-zone.md): A range of input near the resting position that is deliberately ignored, so tiny unintended movement produces no response at all. - [Debounce](https://vocab.design/debounce.md): Waiting until input has stopped for a set moment before reacting, so a burst of keystrokes or clicks produces one response instead of many. - [Deck](https://vocab.design/deck.md): The short summary line set between a headline and the body, larger than body text and written to sell the article. - [Deconstructed pancake](https://vocab.design/deconstructed-pancake.md): A row of equal cards that wraps to fewer per line as space runs out, with the last line left aligned at its natural size rather than stretched to fill. - [Decorative image](https://vocab.design/decorative-image.md): An image that carries no information and is given an empty alt attribute so assistive technology skips it entirely. - [Deformable UI](https://vocab.design/deformable-ui.md): A style where controls behave like soft matter, squashing under a press and springing back past rest, so the surface reads as jelly, clay, or inflated plastic rather than paint. - [Delay](https://vocab.design/delay.md): The wait between an animation being triggered and starting to move, the unit a stagger is built from and the difference between twitchy and considered. - [Density](https://vocab.design/density.md): How much content a system packs into a given area, tuned as a named setting so the same components can run comfortable or compact. - [Density independent pixel](https://vocab.design/density-independent-pixel.md): A virtual unit of length that stays the same physical size across screen densities, so one number can describe a layout on every device. - [Descender](https://vocab.design/descender.md): The part of a letter such as g, j, p, or y that drops below the baseline. - [Description list](https://vocab.design/description-list.md): Paired labels and values laid out as a list of facts about one thing, rather than as a table of many things. - [Device posture](https://vocab.design/device-posture.md): The physical fold state of a foldable device, such as flat, book or tabletop, which a layout can respond to alongside plain size. - [Did you mean](https://vocab.design/did-you-mean.md): Offering a corrected spelling for a query that returned little or nothing, either as a suggestion to accept or as a substitution the reader can undo. - [Diegetic interface](https://vocab.design/diegetic-interface.md): An interface that exists inside the fiction it serves, so the character can see and use it too, rather than being drawn on top of the world for the player alone. - [Digital collage](https://vocab.design/digital-collage.md): A composition assembled from cut-out photography, torn paper edges, scanned texture, and type set at odd angles, so the page reads as pasted up rather than laid out. - [Dimensionality](https://vocab.design/dimensionality.md): Giving interface objects a believable place in depth by folding, layering or flipping them, so a reader can tell where something went and where it will come back from. - [Direct labeling](https://vocab.design/direct-labeling.md): Writing series names next to the data instead of in a legend, trading a lookup for a glance. - [Direct manipulation](https://vocab.design/direct-manipulation.md): Acting on an object by handling the object itself, dragging, resizing, or typing into it, rather than describing the change in a separate control. - [Directionality](https://vocab.design/directionality.md): The rule that every movement carries a direction, and that using it consistently tells the reader how the parts of an interface relate. - [Disclosure](https://vocab.design/disclosure.md): A single button that shows and hides one region of content, reporting its state through aria-expanded. - [Disclosure triangle](https://vocab.design/disclosure-triangle.md): The small triangle beside a tree item that points right when collapsed and down when open, rotating as it toggles. - [Disguised ad](https://vocab.design/disguised-ad.md): An advertisement styled to look like a control or an item of content, so the click it collects was aimed at something else entirely. - [Display cutout](https://vocab.design/display-cutout.md): The camera housing that intrudes into the screen rectangle, which a layout has to route content around rather than under. - [Dissolve](https://vocab.design/dissolve.md): A fade that carries the eye from one image or state to another without any movement, inherited from film editing vocabulary. - [Dithering](https://vocab.design/dithering.md): Adding fine noise to a gradient or image so the eye averages neighbouring pixels into the missing intermediate colours, hiding the bands. - [Diverging palette](https://vocab.design/diverging-palette.md): A data palette built from two sequential scales meeting at a neutral midpoint, used when values run above and below a meaningful zero. - [Divider](https://vocab.design/divider.md): A thin line separating groups of content, decorative when the grouping is already clear and semantic when it is the only cue. - [Dock](https://vocab.design/dock.md): A persistent strip of application icons anchored to a screen edge, holding launchers, running apps and pinned items in one row. - [Dock magnification](https://vocab.design/dock-magnification.md): Scaling each item in a row by how close the pointer is to it, so the item under the cursor swells, its neighbours ramp down, and the row reads as bulging. - [Dolly and zoom](https://vocab.design/dolly-zoom.md): Borrowing the camera's vocabulary: dolly moves the viewer through the scene, zoom scales the scene itself, and the interface reads as travelling rather than rearranging. - [Dot grid background](https://vocab.design/dot-grid-background.md): A faint repeating field of dots or ruled squares behind content, borrowed from graph paper and canvas tools to suggest an editable surface rather than a page. - [Double click](https://vocab.design/double-click.md): Two clicks inside a short interval on the same spot, treated as one gesture that opens, edits, or selects a word rather than activating twice. - [Double tap](https://vocab.design/double-tap.md): Two taps in quick succession on the same spot, conventionally used to zoom in on content or to zoom back out when already zoomed. - [Drag and drop](https://vocab.design/drag-and-drop.md): Picking up an object, moving it under continuous pointer or finger contact, and releasing it over a target that accepts it. - [Drag autoscroll](https://vocab.design/drag-autoscroll.md): Scrolling a container automatically when a drag is held near its edge, so an item can be moved somewhere currently off screen. - [Drag handle](https://vocab.design/drag-handle.md): The small gripped area, often drawn as rows of dots or lines, that marks where an item may be picked up and dragged. - [Drag preview](https://vocab.design/drag-preview.md): The semi-transparent copy of the dragged item that follows the pointer, sometimes collapsed into a stack when several items move at once. - [Drag threshold](https://vocab.design/drag-threshold.md): The small distance a pointer must travel while pressed before the gesture counts as a drag, so a shaky click is not mistaken for one. - [Drag to reorder](https://vocab.design/drag-to-reorder.md): Changing the order of a list by dragging an item to a new position, with the remaining items shifting to show where it will land. - [Dragging alternative](https://vocab.design/dragging-alternative.md): A second, non-dragging route to anything a drag can do, such as arrow keys or a move-to menu on a sortable list. - [Drawer](https://vocab.design/drawer.md): A panel docked to one edge of the screen that slides in over the content, holding navigation or the details of the thing you selected. - [Drill-down navigation](https://vocab.design/drill-down-navigation.md): Going deeper into a hierarchy one level at a time inside the same panel, each level replacing the last and offering a way back up. - [Drip pricing](https://vocab.design/drip-pricing.md): Advertising a low headline price and adding mandatory fees one screen at a time, so the true total only appears once the buyer is committed. - [Drop cap](https://vocab.design/drop-cap.md): An oversized opening letter set into the first lines of a paragraph, marking where the reading starts. - [Drop indicator](https://vocab.design/drop-indicator.md): The line or highlighted gap drawn during a drag to show exactly where the item will land if it is released now. - [Drop zone](https://vocab.design/drop-zone.md): The region that will accept a dragged item, usually highlighted while a compatible drag is in flight so the destination is unmistakable. - [Dropdown](https://vocab.design/dropdown.md): The loose everyday word for any panel that opens downward from a trigger, whatever the panel holds and whatever the trigger does with it. - [Dual axis](https://vocab.design/dual-axis.md): Two value axes sharing one plot so two series can be compared, and a free knob for manufacturing whatever correlation you like. - [Duotone](https://vocab.design/duotone.md): An image rendered in two colours instead of full colour, mapping its shadows to one hue and its highlights to another so photography joins the brand palette. - [Duration](https://vocab.design/duration.md): How long a transition takes from start to finish, measured separately from the shape of its easing. - [Dwell activation](https://vocab.design/dwell-activation.md): Committing an action by keeping a pointer or gaze still on a target for a set time, for input methods that have no click of their own. - [Dynamic Type](https://vocab.design/dynamic-type.md): A platform feature that scales interface text to a size the reader chose in system settings, with layouts expected to reflow around it. - [E-ink aesthetic](https://vocab.design/e-ink-aesthetic.md): A paper-like style built for or borrowed from electronic ink: near-white ground, pure black text, hairline rules, no shadows or gradients, and paged navigation. - [Easing](https://vocab.design/easing.md): The rate of change across an animation, deciding how it accelerates and settles rather than how long it takes. - [Edge swipe](https://vocab.design/edge-swipe.md): A swipe that begins off the screen edge and travels inward, reserved by the system for navigation such as going back or revealing a drawer. - [Edge to edge](https://vocab.design/edge-to-edge.md): Drawing an app behind the system bars so content reaches the physical screen edges, with insets applied only to what must stay tappable. - [Editorial web design](https://vocab.design/editorial-web-design.md): A style that borrows print magazine craft for the screen: a visible column grid, display type at poster scale, pull quotes, rules, and captioned images set into the text. - [8 point grid](https://vocab.design/eight-point-grid.md): A spacing convention where every size and gap is a multiple of eight, so values stay whole numbers at every common screen density. - [Elevation overlay](https://vocab.design/elevation-overlay.md): The older dark theme technique of laying white over a surface at an opacity that rises with elevation, because shadows are nearly invisible on dark backgrounds. - [Em dash](https://vocab.design/em-dash.md): The longest common dash, about the width of the letter m, used to set off an abrupt break or an aside inside a sentence. - [Em](https://vocab.design/em-unit.md): A relative unit equal to the current font size, historically the width of the square the letter m was cast on. - [Emergency exit button](https://vocab.design/emergency-exit-button.md): A control that leaves the current page immediately for an unrelated site and tries to clear it from history, for readers who may be watched. - [Emoji picker](https://vocab.design/emoji-picker.md): A searchable grid of emoji organised by category, with recent choices remembered and skin tone chosen once. - [Emoji presentation](https://vocab.design/emoji-presentation.md): Whether a character that can be either a symbol or an emoji renders as flat text or as a colour emoji, selected by a variation selector or by CSS. - [Emphasis level](https://vocab.design/emphasis-level.md): A three-rung text hierarchy, high, medium and disabled, ranked by stepping the opacity of one foreground colour instead of naming a separate colour for each rung. - [Empty state](https://vocab.design/empty-state.md): The screen a container shows when it holds nothing, naming the absence and offering the action that ends it. - [En dash](https://vocab.design/en-dash.md): A dash about the width of the letter n, used for ranges of numbers and for connections between two things. - [Endowed progress](https://vocab.design/endowed-progress.md): Starting a progress meter part filled, so the reader feels they are continuing something already begun rather than starting from nothing. - [Entrance animation](https://vocab.design/entrance-animation.md): The motion an element plays as it arrives, running from a starting style that only exists before the element was ever rendered. - [Error bar](https://vocab.design/error-bar.md): Whiskers on a mark showing the range a value could plausibly take, so a chart does not imply precision it does not have. - [Error identification](https://vocab.design/error-identification.md): Naming the field that failed and saying what went wrong in text, rather than only outlining the input in red. - [Error message](https://vocab.design/error-message.md): The line attached to a field that says what went wrong and what to do about it, announced to assistive technology the moment it appears. - [Error summary](https://vocab.design/error-summary.md): A block at the top of a failed form listing every problem as links that move focus to the field that caused it. - [Escape gesture](https://vocab.design/escape-gesture.md): The screen reader equivalent of the Escape key, a two finger scrub that dismisses a sheet or steps back a level. - [Exit animation](https://vocab.design/exit-animation.md): The motion an element plays on its way out, which requires deferring its removal from the layout until the animation has finished. - [Expandable row](https://vocab.design/expandable-row.md): A table row that opens to reveal a detail panel beneath it, keeping the row in place instead of navigating away. - [Expanded state](https://vocab.design/expanded-state.md): The open or closed state of a disclosure, exposed with aria-expanded on the control that owns it rather than on the panel it reveals. - [Explore by touch](https://vocab.design/explore-by-touch.md): The touch screen reader mode where dragging a finger reads whatever is under it and activation takes a second, deliberate tap, so nothing fires by accident. - [Express checkout](https://vocab.design/express-checkout.md): A row of one-tap payment buttons placed above the normal form, which fetch address and payment details from a wallet the buyer already has. - [Eyebrow](https://vocab.design/eyebrow.md): A short line of text above a heading that says what category or series the content belongs to. - [Eyedropper](https://vocab.design/eyedropper.md): 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. - [F pattern](https://vocab.design/f-pattern.md): The scanning shape eye tracking finds on text heavy pages: two horizontal sweeps across the top, then a vertical run down the left edge. - [Faceted filter](https://vocab.design/faceted-filter.md): A panel of grouped checkboxes and ranges that narrows a result set, each option usually showing how many results it would leave. - [Faceted search](https://vocab.design/faceted-search.md): Narrowing results by ticking values from several independent attribute groups, with counts showing how many results each value would leave. - [Fade](https://vocab.design/fade.md): A change in opacity used to bring an element in or take it out, the cheapest transition and the one that implies no spatial relationship. - [Fade through](https://vocab.design/fade-through.md): Material's transition for unrelated views: the outgoing view fades out completely before the incoming one fades in while scaling up slightly. - [Fake scarcity](https://vocab.design/fake-scarcity.md): Claiming limited supply that is not real, with stock counts or demand messages generated to pressure a decision rather than report a fact. - [Fake social proof](https://vocab.design/fake-social-proof.md): Manufacturing evidence that other people approve, through invented reviews, testimonials, or live activity messages nobody actually generated. - [Fake urgency](https://vocab.design/fake-urgency.md): Presenting a deadline that does not exist, usually a timer that resets on reload, so the reader hurries a decision they had time to make. - [Fallback font](https://vocab.design/fallback-font.md): The typeface actually used when the preferred one is missing or has not loaded, either for the whole run of text or for characters it lacks. - [False bottom](https://vocab.design/false-bottom.md): A page that looks finished at a point where content actually continues, so the reader stops scrolling and never sees the rest. - [Faux bold](https://vocab.design/faux-bold.md): A bold or italic the browser fakes by smearing or shearing the regular weight, because the real style was never loaded. - [Feature gate](https://vocab.design/feature-gate.md): Showing a locked feature in place, with its real position in the interface, so the reader sees what upgrading would unlock rather than a hidden absence. - [Feature spotlight](https://vocab.design/feature-spotlight.md): A one-time announcement pointing at something newly added, shown in place next to the feature and dismissed for good once acknowledged. - [Feed layout](https://vocab.design/feed-layout.md): A scrolling column or adaptive grid of equivalent items built for browsing, where no item outranks another by position alone. - [Fictional user interface](https://vocab.design/fictional-user-interface.md): The screen graphics style invented for film, television, and games: dense readouts, targeting reticles, and animated telemetry that look computational without computing anything. - [Fieldset](https://vocab.design/fieldset.md): A group of related form controls sharing one question, with a legend that acts as the label for the whole group. - [Figure](https://vocab.design/figure.md): An image, table or code block bound to its caption so the two travel together and can be referred to from the running text. - [File attachment](https://vocab.design/file-attachment.md): A row or card standing in for a file, showing its type, name and size, with the one action that file supports: download, open or remove. - [File upload](https://vocab.design/file-upload.md): A control that takes files, by opening the system picker from a button or by accepting a drop into a marked area. - [Fill mode](https://vocab.design/fill-mode.md): Whether an animation's first or last keyframe styles apply outside its running window, which decides if an element snaps back when it finishes or stays where it landed. - [Filmstrip](https://vocab.design/filmstrip.md): A scrollable row of thumbnails beside a larger view, where picking one changes what the large view shows. - [First-line indent](https://vocab.design/first-line-indent.md): Indenting the opening line of a paragraph so the start of each paragraph is visible without a blank line between them. - [First rule of ARIA](https://vocab.design/first-rule-of-aria.md): The maxim that no ARIA is better than bad ARIA: if a native element does the job, use it rather than pinning a role onto a div and reimplementing the behaviour. - [First run experience](https://vocab.design/first-run-experience.md): Everything shown only on the very first open, from a welcome sequence to seeded sample content, and never shown to that person again. - [Fisheye view](https://vocab.design/fisheye-view.md): A focus plus context display that magnifies whatever has attention and progressively compresses everything further away, like a lens dragged along a list. - [Fitts's law](https://vocab.design/fitts-law.md): The rule that the time to hit a target grows with its distance and shrinks with its size, which is why screen edges and corners are so easy to reach. - [Flash of inaccurate color theme](https://vocab.design/flash-of-inaccurate-color-theme.md): The moment a page paints in the wrong theme before the stored preference is applied, showing a light flash to a reader who chose dark. - [Flashing content](https://vocab.design/flashing-content.md): Content that flashes more than three times per second in a large enough area, restricted because it can trigger seizures. - [Flat design](https://vocab.design/flat-design.md): A style that strips away depth cues, using solid fills, sharp edges, and bold color instead of shadow, gradient, bevel, or texture. - [Flat 2.0](https://vocab.design/flat-design-2.md): Flat design with the depth cues put back in small doses: soft shadow, subtle gradient, and hover feedback that show what can actually be clicked. - [Fling](https://vocab.design/fling.md): The fastest of the drag family: contact is released while it is still moving, so the content keeps travelling and the gesture cannot be dragged back. - [FLIP](https://vocab.design/flip-animation.md): A technique that measures an element's first and last positions, inverts the difference with a transform, then plays it off, so layout changes animate cheaply. - [Float animation](https://vocab.design/float-animation.md): A slow continuous up and down drift on an idle element, so a static composition keeps breathing without asking for attention. - [Floating action button](https://vocab.design/floating-action-button.md): A round, raised button that hovers above the content in a fixed corner, carrying the one action the screen is most for. - [Floating label](https://vocab.design/floating-label.md): A label that sits inside an empty field and rises to the field's top edge when the field takes focus or holds a value. - [Fluid grid](https://vocab.design/fluid-grid.md): A grid whose columns and gutters are expressed as proportions rather than fixed pixels, so the whole composition stretches and shrinks with its container. - [Fluid space scale](https://vocab.design/fluid-space-scale.md): A spacing ramp whose every step interpolates between a minimum and a maximum viewport, so gaps grow smoothly with the screen instead of jumping at breakpoints. - [Fluid typography](https://vocab.design/fluid-typography.md): Type sizes that scale continuously with the viewport between a minimum and a maximum, rather than jumping at breakpoints. - [Focal point](https://vocab.design/focal-point.md): The one element a composition is built around, given enough size, contrast or isolation that the eye lands there before anywhere else. - [Focus appearance](https://vocab.design/focus-appearance.md): The size and contrast a focus indicator must reach to count as visible: enough area around the control, enough change against both the control and its background. - [Focus delegation](https://vocab.design/focus-delegation.md): A shadow root option that forwards focus from the host into the first focusable element inside it, so clicking the padding of a custom element does not leave focus nowhere. - [Focus follows mouse](https://vocab.design/focus-follows-mouse.md): A focus model in which whatever the pointer is over receives keyboard input, without any click to claim it first. - [Focus management](https://vocab.design/focus-management.md): Deliberately moving keyboard focus after a state change so the reader lands on the new content instead of at the top of the document. - [Focus not obscured](https://vocab.design/focus-not-obscured.md): The requirement that a focused control is not completely hidden by sticky headers, footers, cookie bars, or chat widgets when it receives focus. - [Focus order](https://vocab.design/focus-order.md): The sequence keyboard focus follows through a page, which should match reading order instead of source quirks or positive tabindex values. - [Focus plus context](https://vocab.design/focus-plus-context.md): A layout that keeps one region in full detail inside its own surroundings, shrinking or dimming the context instead of moving it into a second pane. - [Focus ring](https://vocab.design/focus-ring.md): The visible outline drawn around the element that currently holds keyboard focus, showing where the next keypress will land. - [Focus trap](https://vocab.design/focus-trap.md): A constraint that keeps keyboard focus cycling inside one region until that region is dismissed. - [Focus visible](https://vocab.design/focus-visible.md): A focus style shown only when focus arrived by keyboard or another non-pointer route, so a mouse click does not leave a ring behind. - [Focusable disabled](https://vocab.design/focusable-disabled.md): A control styled as unavailable but left in the tab order with aria-disabled, so a reader can find it and learn why it is off. - [Focusable scroll region](https://vocab.design/focusable-scroll-region.md): Giving a scrollable box its own tab stop so a keyboard user can scroll it, which matters whenever the content inside holds no focusable element of its own. - [FOFT](https://vocab.design/foft.md): A loading strategy that shows the roman weight as soon as it arrives and lets the remaining styles swap in afterwards, so the swap happens in stages. - [FOIT](https://vocab.design/foit.md): The blank period when a browser hides text entirely rather than show it in a fallback face while the web font loads. - [Follow-through](https://vocab.design/follow-through.md): Parts of a composition that keep moving briefly after the main element stops, and start slightly after it starts, so a group does not move as one rigid block. - [Hinting](https://vocab.design/font-hinting.md): Instructions inside a font that nudge its outlines onto the pixel grid at small sizes so stems stay crisp and even. - [Font metric override](https://vocab.design/font-metric-override.md): Reshaping a fallback font's size and vertical metrics in CSS so it occupies the same space as the web font and the swap shifts nothing. - [Font pairing](https://vocab.design/font-pairing.md): Choosing two or more typefaces that work together, usually one expressive and one neutral, with enough contrast to read as a deliberate choice. - [Font smoothing](https://vocab.design/font-smoothing.md): How a device softens the edges of letterforms, either by shading whole pixels grey or by lighting a pixel's colored subpixels separately. - [Font stack](https://vocab.design/font-stack.md): The ordered list of typefaces a rule names, each tried in turn until one is available, ending in a generic family. - [Font subsetting](https://vocab.design/font-subsetting.md): Shipping only the characters a page actually needs, cutting the font file down and letting the browser fetch ranges on demand. - [Font weight](https://vocab.design/font-weight.md): How thick a typeface's strokes are, named in steps from thin to black and numbered from 100 to 900 on the web. - [Force touch](https://vocab.design/force-touch.md): A press whose depth is part of the input, letting a harder press mean something different from a light one on a pressure sensing surface. - [Forced colors mode](https://vocab.design/forced-colors-mode.md): An operating system mode that replaces a page's palette with a small user-chosen set of system colours, overriding almost everything an author specified. - [Forced continuity](https://vocab.design/forced-continuity.md): Turning a free trial into a paid subscription automatically, with the card taken up front and no reminder before the first real charge. - [Forgiving format](https://vocab.design/forgiving-format.md): Accepting whatever shape the reader types and normalising it afterwards, instead of rejecting input that differs only in spacing or punctuation. - [Form](https://vocab.design/form.md): A grouping of controls a reader fills in and submits together, carrying the labels, validation and submit affordance for the whole set. - [FOUT](https://vocab.design/fout.md): The visible swap when a page first paints text in a fallback face and then re-renders it once the web font arrives. - [Frame rate](https://vocab.design/frame-rate.md): How many frames a second the interface actually draws, the budget every animation spends: 60fps leaves about 16ms per frame and a 120Hz display halves it. - [Friend spam](https://vocab.design/friend-spam.md): Asking for access to a contact list under one pretext and using it to send invitations that appear to come from the reader. - [Frozen column](https://vocab.design/frozen-column.md): A table column held against the edge while the rest scrolls sideways, so the row's identifying value stays readable. - [Frutiger Aero](https://vocab.design/frutiger-aero.md): The mid 2000s look of glossy gradients, bubbles, water, bright skies, and clean humanist type, named after the typeface and Windows Aero. - [Frutiger Metro](https://vocab.design/frutiger-metro.md): The flat vector cousin of Frutiger Aero: gradient color blocks, bloom and glow, silhouetted figures, swooshes and abstract flourishes, without the glossy water and grass. - [Full bleed](https://vocab.design/full-bleed.md): An element that breaks past the content column to span the whole viewport width while its neighbours stay constrained. - [Functional need](https://vocab.design/functional-need.md): A statement of the gap between what a person can do and what a design demands, the WCAG 3 draft's way of naming a barrier without sorting people into disability categories. - [Gamut mapping](https://vocab.design/gamut-mapping.md): Converting a colour that falls outside a display's range into the nearest one inside it, usually by lowering chroma in OKLCH rather than clipping each channel. - [Gauge](https://vocab.design/gauge.md): A dial style readout showing one value on an arc between a minimum and a maximum, borrowed from instrument panels. - [Generative UI](https://vocab.design/generative-ui.md): An interface whose parts are chosen or composed by a model at runtime, so a request is answered with a built form, chart, or panel instead of a paragraph of text. - [Ghost button](https://vocab.design/ghost-button.md): A button with no fill and often no border until you hover it, sitting at the bottom of the emphasis ladder above a plain link. - [Ghost click](https://vocab.design/ghost-click.md): A stray click the browser emits after a touch has already been handled, landing on whatever moved under the finger in the meantime. - [Glassmorphism](https://vocab.design/glassmorphism.md): A style where surfaces are translucent and blur what is behind them, separated from the backdrop by a hairline edge and a soft shadow. - [Glitch aesthetic](https://vocab.design/glitch-aesthetic.md): A look that fakes signal failure with colour channel offset, torn scan bands, and jitter, used for emphasis or as a whole visual identity. - [Global navigation](https://vocab.design/global-navigation.md): The links to the top tier of a site's structure, present on every page and unchanged wherever the reader currently is. - [Gloss](https://vocab.design/gloss.md): A wet plastic finish made from a light gradient across the top half of a control, a highlight arc, and a darker lower half. - [Glyph](https://vocab.design/glyph.md): A single drawn shape in a font, which may be one character, a variant of one, or several characters fused together. - [Goal gradient](https://vocab.design/goal-gradient.md): Effort rising as a visible goal gets closer, which is why interfaces show how little is left rather than how much has been done. - [Golden ratio](https://vocab.design/golden-ratio.md): The proportion of roughly 1 to 1.618 used to divide a layout, so its parts relate to each other by a rule instead of by arbitrary numbers. - [Gooey effect](https://vocab.design/gooey-effect.md): 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. - [Grabber](https://vocab.design/grabber.md): The short rounded bar drawn at the top of a bottom sheet to say the surface can be dragged. - [Grade](https://vocab.design/grade-axis.md): A variable font axis that thickens or thins strokes without changing any character's width, so text can get darker without reflowing. - [Gradient](https://vocab.design/gradient.md): A fill that transitions between two or more colours across a shape, defined by colour stops and by the space the transition is interpolated in. - [Gradient border](https://vocab.design/gradient-border.md): An outline filled with a gradient rather than a single color, usually built from a conic or linear gradient behind a masked shape so the hue travels around the edge. - [Gradual engagement](https://vocab.design/gradual-engagement.md): Replacing a sign-up form at the front door with a first useful action, so the reader experiences value before being asked for anything. - [Grainy gradient](https://vocab.design/grainy-gradient.md): A gradient with a fine noise layer over it, added to hide banding and give a flat background the texture of printed paper or film. - [Grid lanes](https://vocab.design/grid-lanes.md): The native masonry mechanism in CSS grid, where one axis keeps strict tracks and the other lets items stack into whichever lane has room. - [Group label](https://vocab.design/group-label.md): The one name that covers a set of controls, a question above its radio buttons or a heading above an address block, so each field is heard in context. - [Grunge design](https://vocab.design/grunge-design.md): A 1990s style of torn and photocopied texture, overlapped and cut type, off-grid layout, and dirty muted colour, where legibility is traded for emotional pitch. - [Guest checkout](https://vocab.design/guest-checkout.md): Letting a buyer complete a purchase without creating an account, with the offer to save details moved to after the order is placed. - [Gutenberg diagram](https://vocab.design/gutenberg-diagram.md): A model splitting evenly weighted pages into four quadrants, with the eye falling from the primary area at top left to the terminal area at bottom right. - [Gutter](https://vocab.design/gutter.md): The space between columns or tracks in a grid, distinct from the outer margin that separates the grid from the container edge. - [Half-leading](https://vocab.design/half-leading.md): The empty space a browser splits evenly above and below a line of text when line height exceeds the font's own height, which is why text boxes never sit flush. - [Halftone](https://vocab.design/halftone.md): Rendering tone as a grid of dots that vary in size, borrowed from print and used to give flat interface art a comic or newsprint feel. - [Hamburger menu](https://vocab.design/hamburger-menu.md): A button of three stacked horizontal lines that opens a site's main navigation, usually in a panel over the page. - [Hand-drawn UI](https://vocab.design/hand-drawn-ui.md): A style whose lines wobble as if sketched by hand, used to signal that a diagram or wireframe is provisional rather than finished. - [Hanging indent](https://vocab.design/hanging-indent.md): A paragraph whose first line starts further left than the rest, so the following lines are indented under it. - [Hanging punctuation](https://vocab.design/hanging-punctuation.md): Letting quotes, hyphens, and other light marks sit outside the text column so the edge of the text reads as straight to the eye. - [Haptic feedback](https://vocab.design/haptic-feedback.md): A brief physical vibration or tap produced by the device to confirm an interaction, mark a boundary, or signal success and failure. - [Has popup](https://vocab.design/has-popup.md): A hint on a trigger that says something will open and what kind of thing it will be, a menu, a listbox, a dialog, before the reader commits to pressing it. - [HCT](https://vocab.design/hct.md): Material's colour space of hue, chroma and tone, which borrows hue and chroma from CAM16 and lightness from CIELAB so tone alone predicts contrast. - [Heading](https://vocab.design/heading.md): A short line of type that names the section under it and, by its size and weight, says how far down the outline that section sits. - [Heading hierarchy](https://vocab.design/heading-hierarchy.md): The nested outline formed by heading levels, navigated directly by assistive technology and broken by skipping a level or picking a level for its size. - [Height animation](https://vocab.design/height-animation.md): Animating a container between collapsed and its content's natural size, long impossible because height auto did not interpolate and now opened up by interpolate-size and calc-size(). - [Help drawer](https://vocab.design/help-drawer.md): Documentation opened beside the task rather than over it, keeping the form usable while the explanation is read and staying open across steps. - [Helper text](https://vocab.design/helper-text.md): The short line under a field that explains the format or constraint before anything goes wrong. - [Hero](https://vocab.design/hero.md): The large opening block of a page carrying a headline, a supporting line, imagery, and the main call to action. - [Hex color](https://vocab.design/hex-color.md): A colour written as a hash followed by three, four, six or eight hexadecimal digits, the notation most handoffs still speak even when the source is OKLCH. - [Hidden but focusable](https://vocab.design/hidden-but-focusable.md): An element hidden from assistive technology that is still in the tab sequence, so keyboard focus lands on something a screen reader refuses to describe. - [Hit slop](https://vocab.design/hit-slop.md): Invisible padding that extends a control's activatable area beyond its drawn bounds, so a small icon can stay small and still be easy to hit. - [Hit testing](https://vocab.design/hit-testing.md): Working out which element sits under a pointer, which decides who receives the event when shapes overlap or transparent areas are in the way. - [Hold to confirm](https://vocab.design/hold-to-confirm.md): Requiring a press to be held for a moment before a destructive action commits, with progress shown so the wait is understood as deliberate. - [Holographic foil](https://vocab.design/holographic-foil.md): A finish that shifts hue with viewing angle, imitating foil, soap film, or a CD surface with banded rainbow gradients over a pale metallic ground. - [Holy grail layout](https://vocab.design/holy-grail-layout.md): A three column page with header and footer where the centre column is fluid, the two side columns are fixed, and all three appear equal height. - [Home indicator](https://vocab.design/home-indicator.md): The thin bar at the bottom of a gesture driven phone screen, reserved space that app content must not sit beneath. - [Honeypot field](https://vocab.design/honeypot-field.md): A form field hidden from people but visible to automated form fillers, used to reject submissions that fill it in without challenging anyone. - [Hover](https://vocab.design/hover.md): A pointer resting over an element without pressing, a state that exists for mice and pens but has no true equivalent on touch. - [Hover card](https://vocab.design/hover-card.md): A rich preview panel that appears on hover over a link or an avatar, summarising what is behind it. - [Hover intent](https://vocab.design/hover-intent.md): Waiting out a short delay or watching cursor direction before acting on a hover, so a pointer merely passing through does not open anything. - [Hover lift](https://vocab.design/hover-lift.md): A card or button that rises a few pixels and deepens its shadow while the pointer is over it, so the whole surface reads as lifted toward the reader. - [Hoverable, dismissible, persistent](https://vocab.design/hoverable-dismissible-persistent.md): The three conditions content revealed on hover or focus must meet: reachable with the pointer, dismissible without moving focus, and not self-closing. - [Hub and spoke](https://vocab.design/hub-and-spoke.md): A navigation shape where every task is reached from one home screen and returns to it, with no way to move sideways between tasks. - [HUD panel](https://vocab.design/hud-panel.md): A small dark translucent floating window of controls that hovers over content without taking it over, common in media and creative tools. - [Hue](https://vocab.design/hue.md): The attribute that gives a colour its name, red or teal or violet, expressed as an angle around a colour wheel independent of how light or vivid it is. - [Hue shift](https://vocab.design/hue-shift.md): Rotating hue deliberately along a ramp, warmer at the light end and cooler at the dark end, so a scale looks alive instead of like one colour fading out. - [Hyperreal 3D](https://vocab.design/hyperreal-3d.md): Rendered objects pushed past photographic realism, with physically based materials, sharp specular detail, and studio lighting, floated over an otherwise plain interface. - [Hyphenation](https://vocab.design/hyphenation.md): Breaking a word across two lines at a syllable boundary so lines fill more evenly, marked with a hyphen at the break. - [Hyphenation ladder](https://vocab.design/hyphenation-ladder.md): Three or more consecutive lines ending in a hyphen, which builds a visible staircase down the right edge of a column. - [Icon](https://vocab.design/icon.md): A small graphic symbol standing for an action, object or idea, read at a glance and rarely safe to ship without a label. - [Icon button](https://vocab.design/icon-button.md): A button whose whole label is an icon, so it needs an accessible name and usually a tooltip to say what it does. - [Icon font](https://vocab.design/icon-font.md): A font whose glyphs are icons rather than letters, addressed by code point or by a ligature so an icon can be styled like text. - [Icon morph](https://vocab.design/icon-morph.md): An icon that animates between two meanings rather than cutting, such as a hamburger whose bars rotate into a close cross. - [Identicon](https://vocab.design/identicon.md): A generated default avatar derived deterministically from an identifier, so the same account always gets the same abstract pattern without uploading anything. - [Image](https://vocab.design/image.md): An embedded picture, sized and cropped by the layout around it, carrying the alternative text that stands in when it cannot be seen. - [Image comparison slider](https://vocab.design/image-comparison-slider.md): Two images stacked with a draggable divider that wipes between them, used to show a before and an after in one frame. - [Image well](https://vocab.design/image-well.md): An editable image view that shows its current picture and accepts a replacement dragged or pasted straight into it. - [Images of text](https://vocab.design/images-of-text.md): Text baked into a raster image, which cannot be resized, restyled, selected, translated, or read by anything but the alt attribute someone remembered to write. - [Imposter](https://vocab.design/imposter.md): A layout primitive that positions one element centred over its container, overlapping whatever is beneath rather than taking a place in the flow. - [Inert](https://vocab.design/inert.md): A state that removes a subtree from focus order, hit testing, and the accessibility tree at once, used to seal the background behind a dialog. - [Infinite canvas](https://vocab.design/infinite-canvas.md): A workspace with no page edges, where content is placed anywhere in an unbounded plane and the viewport pans and zooms over it instead of scrolling a document. - [Infinite scroll](https://vocab.design/infinite-scroll.md): A list that appends the next page of results automatically as the reader approaches the bottom, so the content never ends and no page controls appear. - [Initial focus](https://vocab.design/initial-focus.md): Where focus lands when a view, dialog, or page first appears, chosen deliberately rather than left on the body or dumped on the first close button. - [Ink trap](https://vocab.design/ink-trap.md): A notch cut out of a letter's inside corners so spreading ink or blurring pixels do not fill the joint solid. - [Inline autocomplete](https://vocab.design/inline-autocomplete.md): Completing the reader's text inside the field itself, with the guessed remainder selected so the next keystroke replaces it. - [Inline edit](https://vocab.design/inline-edit.md): Text that reads as plain content until you click it, at which point it becomes an input in the same place with save and cancel. - [Inline validation](https://vocab.design/inline-validation.md): Checking a field as the reader fills or leaves it and showing the verdict beside that field, rather than saving every complaint for the submit button. - [Input group](https://vocab.design/input-group.md): A field welded to text, a button or a select at one or both ends, so the addon reads as part of the same control rather than as a neighbour. - [Input mask](https://vocab.design/input-mask.md): A field that imposes a fixed shape as you type, inserting the slashes, spaces or brackets a phone number or card number needs. - [Input purpose](https://vocab.design/input-purpose.md): Machine readable autocomplete tokens on personal fields, which let browsers autofill and let personalisation tools add familiar icons or wording. - [Inspector](https://vocab.design/inspector.md): A pane, usually on the trailing edge, that shows and edits the properties of whatever is currently selected. - [Interaction color step](https://vocab.design/interaction-color-step.md): The convention that hover, active and selected are the next steps along the same scale rather than separate colours, so states are derived from one ramp. - [Interactive transition](https://vocab.design/interactive-transition.md): A transition whose progress is held by an ongoing gesture, so the reader can drag it partway, hesitate, and either complete it or send it back. - [Interface metaphor](https://vocab.design/interface-metaphor.md): Explaining a system by dressing it as something the user already knows: the desktop, the trash can, the folder, the shopping cart. - [Interpolation](https://vocab.design/interpolation.md): The rule that produces the intermediate values between two endpoints, which is why some properties can animate smoothly and others can only switch. - [Interruptible animation](https://vocab.design/interruptible-animation.md): Motion that can be caught, reversed, or redirected mid-flight from its current value, instead of finishing before it will accept a new input. - [Interstitial](https://vocab.design/interstitial.md): A full screen placed between two steps of a flow, carrying a message, an advert, or a warning that the reader must pass through to continue. - [Intrinsic web design](https://vocab.design/intrinsic-web-design.md): Building layouts from what the content needs, using grid, flexbox and intrinsic sizing together, instead of imposing a fixed column skeleton. - [Invalid state](https://vocab.design/invalid-state.md): The programmatic mark that a field's value failed validation, paired with a pointer to the message that explains it. - [Inverse color](https://vocab.design/inverse-color.md): A surface and text pair deliberately flipped against the current theme, so a snackbar or tooltip reads as a foreign object that arrived from outside the page. - [Inverted colors](https://vocab.design/inverted-colors.md): A whole-screen colour inversion applied by the OS, which flips a design nobody tested upside down and turns every shadow into a highlight. - [Isometric illustration](https://vocab.design/isometric-illustration.md): Art drawn on a fixed axonometric grid so depth reads without perspective, with parallel edges and no vanishing point. - [Italic](https://vocab.design/italic.md): A companion style with letterforms redrawn on a cursive model, not merely slanted, used for emphasis and titles. - [Jank](https://vocab.design/jank.md): Visible stutter in motion caused by frames arriving late or not at all, so an animation that should be continuous reads as juddering. - [Jiggle mode](https://vocab.design/jiggle-mode.md): An editing state announced by making every rearrangeable item wobble in place, so the whole screen says it can be reordered. - [Justified gallery](https://vocab.design/justified-gallery.md): A photo grid that scales and trims images so every row lands on one shared height with flush left and right edges, unlike masonry's ragged columns. - [Justified text](https://vocab.design/justified-text.md): Text set so both edges of the column are flush, achieved by stretching or squeezing the spaces between words on each line. - [Kanban board](https://vocab.design/kanban-board.md): A row of vertical columns, each one a stage, holding cards that move sideways as work progresses. - [Kawaii UI](https://vocab.design/kawaii-ui.md): A cute style of pastel fills, rounded everything, oversized eyes and blush marks, sticker and mascot characters, and hand-lettered or bubbly rounded type. - [Keyboard key](https://vocab.design/kbd.md): A key drawn as a small keycap in running text or a menu, so a shortcut reads as something you press rather than something you say. - [Kebab menu](https://vocab.design/kebab-menu.md): A menu of secondary actions opened from a trigger of three vertically stacked dots, usually at the end of a row, card, or toolbar. - [Ken Burns effect](https://vocab.design/ken-burns-effect.md): A slow pan and zoom across a still image that gives it motion, named after the documentary filmmaker who made the technique famous. - [Kerning](https://vocab.design/kerning.md): The adjustment of space between two particular letters so the pair reads evenly. - [Key repeat](https://vocab.design/key-repeat.md): A held key firing repeatedly after an initial delay, which is how arrow keys scroll and backspace deletes more than one character. - [Key sequence](https://vocab.design/key-sequence.md): A shortcut typed as an ordered run of presses, where the first key opens a mode and the next chooses within it. - [Keyboard shortcut](https://vocab.design/keyboard-shortcut.md): A key or key combination that runs a command directly, giving practised users a path that skips the menus and the pointer entirely. - [Keyboard shortcuts dialog](https://vocab.design/keyboard-shortcuts-dialog.md): The panel opened by pressing question mark that lists every shortcut in the application, grouped by area. - [Keyboard trap](https://vocab.design/keyboard-trap.md): A place keyboard focus can enter but not leave by keyboard alone, stranding anyone who is not using a pointer. - [Keyframe](https://vocab.design/keyframe.md): A point in an animation where a value is pinned, with the frames between generated by interpolating from one pinned point to the next. - [Keyline](https://vocab.design/keyline.md): An invisible line that content across a whole screen aligns to, such as the edge line every row starts at and the deeper line where text begins after an icon. - [Kinetic typography](https://vocab.design/kinetic-typography.md): Type animated over time, where letters and words move, scale, stagger, or morph so the setting carries tone and emphasis a static line cannot. - [Knob](https://vocab.design/knob.md): A round control turned by dragging in an arc, borrowed from hardware and mostly found in audio and creative tools. - [Label association](https://vocab.design/label-association.md): The programmatic link between a label and its field, made by for and id or by wrapping, which makes the label clickable and the field named. - [Label in name](https://vocab.design/label-in-name.md): The rule that a control's accessible name must contain its visible label text, so speaking the visible words works in voice control. - [Landmark](https://vocab.design/landmark.md): A named region role (banner, navigation, main, complementary, contentinfo, search) that lets assistive technology jump between the major parts of a page. - [Language attribute](https://vocab.design/language-attribute.md): The declared language of a document or a passage inside it, which picks the voice, the pronunciation rules, and the hyphenation a reader gets. - [Large text threshold](https://vocab.design/large-text-threshold.md): The size at which text counts as large for contrast purposes (about 18pt, or 14pt when bold) and its required ratio drops from 4.5:1 to 3:1. - [Lasso selection](https://vocab.design/lasso-selection.md): Selecting by dragging a boundary around items on a canvas, freehand or as a rectangle, so whatever the outline encloses becomes the selection when the drag ends. - [Lawn mower pattern](https://vocab.design/lawn-mower-pattern.md): A scanning shape for tables where the eye runs across one row, drops down and runs back the other way, mowing the cells in alternating directions. - [Layer cake pattern](https://vocab.design/layer-cake-pattern.md): A scanning shape where the eye reads headings and subheadings and skips the text between them, so the fixation map looks like stacked layers. - [Layout grid](https://vocab.design/layout-grid.md): The shared column, gutter and margin structure a team lays every screen against, so different people's pages line up with each other. - [Layout margins](https://vocab.design/layout-margins.md): The reserved space between a container's edge and its content, sized by the system so content never touches the edge of the screen. - [Layout shift](https://vocab.design/layout-shift.md): Content moving after it has already been painted, usually because something arriving late took space that was never reserved for it. - [Layout shifter](https://vocab.design/layout-shifter.md): A responsive pattern where the arrangement genuinely differs per breakpoint rather than reflowing, so each size gets its own composition. - [Layout thrashing](https://vocab.design/layout-thrashing.md): Reading a geometric value after writing to the DOM in the same frame, forcing the browser to lay out synchronously over and over and stalling the animation that caused it. - [Lazy loading](https://vocab.design/lazy-loading.md): Deferring the fetch of an image, list section, or module until it is about to be needed, usually when it approaches the viewport. - [Lazy registration](https://vocab.design/lazy-registration.md): Letting someone use a product and accumulate state anonymously, and asking for an account only when that state needs to survive the session. - [Leaderboard](https://vocab.design/leaderboard.md): A ranked list of participants by some score, with the reader's own position pinned into view even when it falls outside the visible range. - [Leading](https://vocab.design/leading.md): The vertical distance from one baseline of type to the next, which sets how a paragraph holds together as a block. - [Legibility](https://vocab.design/legibility.md): How easily one letter can be told apart from another, a property of the typeface's drawing rather than of how the text is set. - [Letterboxing](https://vocab.design/letterboxing.md): Filling the mismatch between content shape and frame shape with bars: above and below for letterbox, at the sides for pillarbox. - [Letterpress text](https://vocab.design/letterpress-text.md): A text effect that fakes stamping into the surface, using a one pixel light shadow below the glyphs and a slightly darker fill above it. - [Ligature](https://vocab.design/ligature.md): A single glyph that replaces two or more letters whose shapes would otherwise collide, such as the f and i pair. - [light-dark()](https://vocab.design/light-dark.md): A CSS function that takes two colours and returns the one matching the page's current colour scheme, collapsing a theme's light and dark values into one declaration. - [Light dismiss](https://vocab.design/light-dismiss.md): Closing a transient surface by clicking outside it or pressing Escape, without a dedicated close control being used. - [Lightbox](https://vocab.design/lightbox.md): An overlay that shows one image or video large over a dimmed page, with next and previous controls and a dismiss. - [Lightness](https://vocab.design/lightness.md): How light or dark a colour reads, from black at one end to white at the other, held separately from its hue and its colourfulness. - [Line clamp](https://vocab.design/line-clamp.md): Cutting a block of text off after a fixed number of lines, with an ellipsis at the end of the last one. - [Line drawing animation](https://vocab.design/line-drawing-animation.md): An SVG stroke that appears to draw itself by animating its dash offset along its own length, used for signatures, check marks and illustrated line art. - [Line focus](https://vocab.design/line-focus.md): A reading aid that dims everything except one to five lines of text, so the eye has a single band to track and cannot skip or reread a line by accident. - [linear() easing](https://vocab.design/linear-easing.md): An easing written as a list of sampled stops rather than a curve, which lets CSS express springs and bounces that no cubic bezier can describe. - [Lining figures](https://vocab.design/lining-figures.md): Numerals all drawn to cap height so they line up evenly with capitals and with each other. - [Link](https://vocab.design/link.md): A control that navigates somewhere, named for its destination, and carrying the browser affordances of a destination (open in new tab, copy address). - [Link purpose](https://vocab.design/link-purpose.md): Whether a link's own text says where it goes, the reason a list of read more and click here links fails when read out of context. - [Liquid Glass](https://vocab.design/liquid-glass.md): Apple's 2025 material where controls float as a translucent layer that refracts what is behind them and reshapes fluidly as content moves underneath. - [List](https://vocab.design/list.md): A vertical run of related items presented as a set, where the shared shape of every row is what tells a reader the rows belong together. - [List detail](https://vocab.design/list-detail.md): A browsable list paired with a pane showing the selected item in full, collapsing to one screen at a time when the window is narrow. - [List virtualization](https://vocab.design/list-virtualization.md): Rendering only the rows currently in view and a small buffer around them, while spacers preserve the scrollbar of the full list. - [Listbox](https://vocab.design/listbox.md): An always visible list of options you choose from with the keyboard or pointer, without a popup or a text field. - [Live activity](https://vocab.design/live-activity.md): A persistent, updating view of something in progress, shown in system places like a lock screen so a reader can follow it without opening the app. - [Live region](https://vocab.design/live-region.md): A container marked so assistive technology reads changes inside it without moving focus, used for messages that appear after an action. - [Load more](https://vocab.design/load-more.md): A button at the end of a list that fetches and appends the next batch only when pressed, keeping the reader in control of how much arrives. - [Local navigation](https://vocab.design/local-navigation.md): Links contextual to where the reader is, showing the siblings and children of the current page rather than the whole site. - [Logical properties](https://vocab.design/logical-properties.md): Layout properties named by flow direction (inline start, block end) rather than by screen edge, so a layout mirrors itself in other writing modes. - [Logo cloud](https://vocab.design/logo-cloud.md): A row or grid of customer logos used as social proof, usually flattened to one colour so no brand dominates. - [Long description](https://vocab.design/long-description.md): An extended text alternative for a chart, diagram, or map, linked or referenced because a short alt string cannot carry the content. - [Long press](https://vocab.design/long-press.md): A press held in place for a moment before release, used to reveal secondary actions, enter a rearrange mode, or open a contextual menu. - [Long shadow](https://vocab.design/long-shadow.md): A flat era decoration where an icon casts a single hard shadow at 45 degrees that runs far past the shape before fading out. - [Look and pinch](https://vocab.design/look-and-pinch.md): Spatial input where the eyes choose the target and a finger pinch commits the action, so selection and activation come from different body parts. - [Lorem ipsum](https://vocab.design/lorem-ipsum.md): Scrambled pseudo-Latin placeholder text used so a layout can be judged on its shape and texture before the real copy exists. - [Lottie](https://vocab.design/lottie.md): A JSON format for vector animations exported from design tools and played natively on the web and mobile, so complex motion ships without video. - [Low poly](https://vocab.design/low-poly.md): A 3D style that keeps the polygon count low enough to see, so surfaces read as faceted triangles under flat shading instead of smooth curves. - [Magazine layout](https://vocab.design/magazine-layout.md): An editorial composition with mixed column widths, one dominant lead story and smaller supporting items arranged around it. - [Magic link](https://vocab.design/magic-link.md): Signing in by clicking a single-use link emailed on request, with no password, and a screen that waits and offers to resend while the mail arrives. - [Magic tap](https://vocab.design/magic-tap.md): A screen reader gesture that fires the one action a screen is most likely about, so the reader does not have to hunt for the control. - [Magnetic button](https://vocab.design/magnetic-button.md): A control that leans toward the cursor as it approaches, translating a fraction of the distance to its centre so it reads as attracted rather than merely hovered. - [Marching ants](https://vocab.design/marching-ants.md): The animated dashed outline that circles a selection, moving continuously so the boundary reads as active rather than drawn. - [Marking menu](https://vocab.design/marking-menu.md): A radial menu that can be answered before it appears: waiting shows the menu, while a confident stroke in the item's direction selects it outright. - [Marking pattern](https://vocab.design/marking-pattern.md): A scanning shape where the eye holds one spot on the screen while content scrolls past underneath it, most common on phones. - [Marquee](https://vocab.design/marquee.md): Text or logos that scroll continuously across a strip, either as a decorative ticker or because a label is too long for its box. - [Masonry](https://vocab.design/masonry.md): A column layout that packs items of unequal height by placing each one in the shortest column, so the rows never line up and the bottom edge stays ragged. - [Material 3 Expressive](https://vocab.design/material-3-expressive.md): Google's 2025 update to Material 3: springier motion, emphasized typography, updated dynamic colour themes, and responsive components that stretch to hug the display. - [Material You](https://vocab.design/material-you.md): Google's personalization layer where the system derives an app's entire color scheme from the user's wallpaper, so every app shifts together. - [Maximalism](https://vocab.design/maximalism.md): A style that fills the screen on purpose with layered color, pattern, and type, treating abundance rather than restraint as the message. - [Measure](https://vocab.design/measure.md): The width of a column of text, judged in characters per line, with roughly 45 to 75 treated as the comfortable range for reading. - [Meatball menu](https://vocab.design/meatball-menu.md): An overflow menu whose trigger is three horizontal dots, usually sitting at the end of a row or a card. - [Media controls](https://vocab.design/media-controls.md): The cluster of play, pause, skip, volume and fullscreen controls attached to a player, which usually hides itself while playing. - [Media object](https://vocab.design/media-object.md): The pairing of a fixed size image or avatar on one side with a heading and text that fills the rest, repeated everywhere in interfaces. - [Mega menu](https://vocab.design/mega-menu.md): A large navigation panel that drops from a top level item and shows many links at once, grouped into columns with headings. - [Memphis design](https://vocab.design/memphis-design.md): The 1980s Memphis Group look of clashing pastels, squiggles, confetti dots, and terrazzo shapes scattered across a layout. - [Mention autocomplete](https://vocab.design/mention-autocomplete.md): Typing a trigger character inside a text field to open a filtered list of people or objects, inserting the chosen one as a linked token. - [Menu bar](https://vocab.design/menu-bar.md): A permanent horizontal row of menu titles (File, Edit, View) whose menus open on click and then follow the pointer along the row. - [Menu bar extra](https://vocab.design/menu-bar-extra.md): A small application controlled item living in the system menu bar or tray, usually an icon that opens a compact panel of status and controls. - [Menu button](https://vocab.design/menu-button.md): A button whose only job is to open a menu, marked with aria-haspopup and usually drawn with a downward chevron. - [Mesh gradient](https://vocab.design/mesh-gradient.md): A soft multi-point blend built from colours placed on a grid and smoothed between them, giving the blurred, cloudlike backgrounds a linear gradient cannot. - [Meter](https://vocab.design/meter.md): A gauge of a known quantity within a known range, such as disk used or password strength, where the level is a fact rather than a task. - [Metered paywall](https://vocab.design/metered-paywall.md): A paywall that grants a fixed number of free items per period and counts down publicly, so the barrier arrives only after the reader is invested. - [Metro](https://vocab.design/metro-design.md): Microsoft's typography led design language of flat coloured tiles, large light headings, and motion used in place of chrome, shadow, and texture. - [Mica](https://vocab.design/mica.md): Fluent's opaque app background material, subtly tinted with the user's desktop wallpaper colour and going neutral when the window loses focus. - [Microinteraction](https://vocab.design/microinteraction.md): A small self-contained loop of trigger, rule, feedback, and result, such as a toggle that flips, buzzes, and settles into its new state. - [Microsurvey](https://vocab.design/microsurvey.md): A one or two question survey placed inside the product at the moment being asked about, answered in place rather than on a separate page. - [Mid-century modern](https://vocab.design/mid-century-modern.md): A 1950s and 60s style of muted mustard, teal, and burnt orange, tapered organic shapes, textured paper grounds, and friendly geometric sans type. - [Middle click](https://vocab.design/middle-click.md): A press of the scroll wheel button, conventionally used to open a link in a new tab, close a tab, or start autoscrolling. - [Miller columns](https://vocab.design/miller-columns.md): 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. - [Mini cart](https://vocab.design/mini-cart.md): A compact view of the basket opened from the cart icon, confirming what was just added and offering checkout without leaving the current page. - [Minimalism](https://vocab.design/minimalism.md): A style that reduces an interface to one typeface, one accent color, and generous empty space, letting whitespace rather than ornament carry hierarchy. - [Minimap](https://vocab.design/minimap.md): A shrunken overview of a long document or canvas beside the scrollbar, with a box showing which part is currently on screen. - [Misdirection](https://vocab.design/misdirection.md): Using contrast, size, and position to pull attention to the option the business prefers while the other option is present but visually demoted. - [Mixed state checkbox](https://vocab.design/mixed-state-checkbox.md): A checkbox showing a third, indeterminate state when only some of the boxes it governs are checked. - [Mobile first](https://vocab.design/mobile-first.md): Designing and writing the narrow layout first and adding rules as space is gained, so the small screen is the default rather than the fallback. - [Modal dialog](https://vocab.design/modal-dialog.md): A window that opens over the page and takes control of it, so nothing behind can be used until the dialog is answered or dismissed. - [Modal presentation](https://vocab.design/modal-presentation.md): The slide-up-over transition that puts a sheet or dialog in front of the current screen while what is behind recedes, the platform motion for entering a modal context. - [Model selector](https://vocab.design/model-selector.md): The control in an assistant interface that picks which model answers, usually a menu carrying a short description of each option. - [Modifier key](https://vocab.design/modifier-key.md): A key held to change what another input means, so the same click or keystroke can copy instead of move, or add instead of replace. - [Modular grid](https://vocab.design/modular-grid.md): A grid with both columns and rows, dividing the page into equal modules that content can span in either direction. - [Modular scale](https://vocab.design/modular-scale.md): A type scale generated by multiplying a base size by a fixed ratio, so every step is proportionally related to the one before it. - [Momentum scrolling](https://vocab.design/momentum-scrolling.md): Content that keeps moving after the finger lifts, decelerating as though it had mass, so one flick can travel a long way. - [Monochromatic palette](https://vocab.design/monochromatic-palette.md): A scheme drawn from one hue at many lightness and saturation levels, so hierarchy comes from contrast alone rather than from colour difference. - [Monospace](https://vocab.design/monospace.md): A typeface in which every character occupies the same horizontal width, so characters stack into columns down the page. - [Morph transition](https://vocab.design/morph-transition.md): A transition where a shape or icon is interpolated into a different shape rather than swapped, so the two states read as one object changing. - [Morphing control](https://vocab.design/morphing-controls.md): One control that changes what it says and does according to state, showing play when paused and pause when playing rather than offering both. - [Mostly fluid](https://vocab.design/mostly-fluid.md): A responsive pattern where a multi column grid stretches with the viewport up to a maximum width, then centres, stacking only on the smallest screens. - [Motion actuation](https://vocab.design/motion-actuation.md): Triggering a function by moving the device itself, such as shake to undo, which needs a plain control alternative and an off switch. - [Motion blur](https://vocab.design/motion-blur.md): Blurring an element along its direction of travel so fast movement reads as speed instead of teleporting, borrowed from film and rare but real in interfaces. - [Motion path](https://vocab.design/motion-path.md): A defined path an element travels along, with its distance and rotation along that path animated instead of its x and y positions. - [Motion token](https://vocab.design/motion-token.md): A named duration or easing value published by a design system, so timings are chosen from a set rather than typed per component. - [Mouse gesture](https://vocab.design/mouse-gesture.md): A command issued by the shape of a pointer stroke, usually with a button held, so a movement stands in for a menu choice. - [Multi column layout](https://vocab.design/multi-column-layout.md): An application shell with three or more vertical regions, typically navigation, a list, and a reading pane, as in a mail client. - [Multi select](https://vocab.design/multi-select.md): A select that accepts several values at once, usually showing the chosen ones as removable tokens inside the field. - [Multi-touch](https://vocab.design/multi-touch.md): Input from more than one simultaneous contact point, letting a surface distinguish two-finger scrolling, pinching, rotating and larger finger counts. - [Multi-window mode](https://vocab.design/multi-window-mode.md): A windowing mode where two or more apps share one screen, side by side, stacked, or as freeform windows, so every app must survive being any size. - [Multimodal interface](https://vocab.design/multimodal-interface.md): An interface that accepts and answers in more than one channel at once, letting a person speak, type, touch, or point and pick whichever suits the moment. - [Nagging](https://vocab.design/nagging.md): Interrupting a task again and again with the same request, so that agreeing becomes the cheapest way to be left alone. - [Name, role, value](https://vocab.design/name-role-value.md): The three things every control has to expose to assistive technology: what it is called, what kind of thing it is, and what state it is currently in. - [Named color](https://vocab.design/named-color.md): One of the CSS keywords such as tomato or rebeccapurple that map to fixed sRGB values, a fossil vocabulary still useful for prototypes and debugging. - [Named grid areas](https://vocab.design/named-grid-areas.md): Naming regions of a grid and drawing the layout as rows of those names, so items are placed by name instead of by line number. - [Named instance](https://vocab.design/named-instance.md): A specific point in a variable font's design space that the designer has given a style name, so it can be picked like an ordinary weight. - [Natural language interface](https://vocab.design/natural-language-interface.md): An interface whose input is ordinary language, typed or spoken: the user states an intent in their own words and the system parses it, instead of picking from controls. - [Navigation bar](https://vocab.design/navigation-bar.md): The horizontal strip of primary destinations across the top of a site, usually holding the logo, the main sections and an account control. - [Navigation menu](https://vocab.design/navigation-menu.md): A menu of destinations rather than commands, where opening an item moves you somewhere instead of running an action. - [Navigation rail](https://vocab.design/navigation-rail.md): A narrow vertical strip of top level destinations at the side of a screen, used at medium widths where a bottom bar is wasteful and a drawer is too heavy. - [Neo-skeuomorphism](https://vocab.design/neo-skeuomorphism.md): The current return of depth and material to interfaces, using restrained texture, shadow, and highlight instead of literal leather, metal, and felt. - [Neon glow](https://vocab.design/neon-glow.md): A saturated colour surrounded by layered soft shadows of the same hue, so type or a border reads as a lit tube against a dark surface. - [Nested interactive](https://vocab.design/nested-interactive.md): A focusable control placed inside another control, such as a button inside a link or a checkbox inside a clickable row, which garbles the announcement and can leave the inner control unreachable. - [Neubrutalism](https://vocab.design/neubrutalism.md): A loud style built from thick black outlines, saturated flat color, square corners, and hard offset shadows with zero blur. - [Neumorphism](https://vocab.design/neumorphism.md): A style where controls look extruded from or pressed into one background colour, shaped only by soft light and shadow. - [Neutral palette](https://vocab.design/neutral-palette.md): The greys an interface is mostly made of, ramped from page background to body text, which carry the structure while the accent carries the attention. - [New Wave design](https://vocab.design/new-wave-design.md): The postmodern break from Swiss order: stair-stepped rules, diagonal and letter-spaced type, weights mixed inside a word, and text reversed out of bars. - [No results state](https://vocab.design/no-results-state.md): What a search or filtered list shows when nothing matched, naming the query, explaining why, and offering a way to loosen the constraints. - [Non-breaking space](https://vocab.design/non-breaking-space.md): A space that renders normally but forbids a line break, gluing two words together so they never end up on separate lines. - [Non-text contrast](https://vocab.design/non-text-contrast.md): The requirement that controls, focus indicators and meaningful graphics reach 3:1 against what is next to them, which is the rule that governs borders and icons. - [Notification center](https://vocab.design/notification-center.md): A panel collecting notifications that were missed or kept, usually opened from a bell with an unread count. - [Notification digest](https://vocab.design/notification-digest.md): Collecting many similar alerts into one summary rather than delivering each, so the count rises but the number of interruptions does not. - [Nudge](https://vocab.design/nudge.md): Moving or changing a value by one small fixed step with an arrow key, with a modifier switching to a larger step. - [Object fit](https://vocab.design/object-fit.md): How a picture or video is resized inside a box whose shape it does not match: stretched to fill, letterboxed to fit whole, or cropped to cover every edge. - [Oblique](https://vocab.design/oblique.md): An upright typeface slanted to the right without redrawing its letters, which is why it lacks the cursive forms a true italic has. - [Obstruction](https://vocab.design/obstruction.md): Putting deliberate hurdles in front of an action the business does not want taken, so the effort itself does the discouraging. - [Off canvas](https://vocab.design/off-canvas.md): Keeping secondary regions parked outside the viewport and sliding them in on demand, instead of stacking them below the main content. - [Offline indicator](https://vocab.design/offline-indicator.md): A persistent notice that the product has lost its connection, saying what still works, what is queued, and when the last sync happened. - [OKLCH](https://vocab.design/oklch.md): A colour notation of lightness, chroma and hue built on Oklab, where changing the hue leaves the perceived lightness alone and equal steps look equal. - [Oldstyle figures](https://vocab.design/oldstyle-figures.md): Numerals with varying heights, some rising and some dropping below the baseline, so numbers blend into lowercase running text. - [On-color](https://vocab.design/on-color.md): A colour defined by what it sits on, such as on-primary or on-surface, so every fill ships with the foreground guaranteed to be readable against it. - [Onboarding checklist](https://vocab.design/onboarding-checklist.md): A persistent list of setup tasks with completion state and a progress meter, kept available so the reader can return to unfinished steps. - [Onboarding tour](https://vocab.design/onboarding-tour.md): A short sequence of pointers layered over a live interface, each naming one control, advanced by the reader and skippable at any point. - [One thing per page](https://vocab.design/one-thing-per-page.md): Asking a single question on each screen of a form so the reader never chooses which field to answer first and errors point somewhere unambiguous. - [One-time code login](https://vocab.design/one-time-code-login.md): Signing in by typing a short code sent to a second channel, keeping the reader inside the app rather than sending them out to a mail client. - [Opacity](https://vocab.design/opacity.md): How much of what is behind an element shows through it, applied to the whole element and its children at once rather than to a single colour value. - [OpenType features](https://vocab.design/opentype-features.md): Optional glyph substitutions and spacing rules packed inside a font file, addressed by four-letter tags and switched on from CSS. - [Optical alignment](https://vocab.design/optical-alignment.md): Nudging an element off its measured position so it looks aligned, correcting for shapes whose bounding box lies about their visual centre. - [Optical kerning](https://vocab.design/optical-kerning.md): Letting software space letter pairs by looking at their shapes, instead of using the pair values the type designer built into the font. - [Optical size](https://vocab.design/optical-size.md): A font adjusting its own drawing for the size it is set at, thickening strokes and opening spacing for small text and refining both for large. - [Optimistic UI](https://vocab.design/optimistic-ui.md): Showing the result of an action immediately and reconciling with the server afterward, instead of making the user wait for confirmation. - [Orbit](https://vocab.design/orbit.md): Rotating a camera around a fixed point by dragging, so the scene appears to turn while the subject stays centred. - [Orbit animation](https://vocab.design/orbit-animation.md): One element circling another on a continuous path, used for logo constellations and loading states where the revolving is the ornament. - [Order summary](https://vocab.design/order-summary.md): The persistent panel beside a checkout listing items, quantities, and every cost line, kept visible so nothing about the total arrives as a surprise. - [Orientation lock](https://vocab.design/orientation-lock.md): Restricting a screen to portrait or landscape, which strands anyone whose device is fixed in a mount or a wheelchair arm in the orientation the design refused. - [Origin-aware animation](https://vocab.design/origin-aware-animation.md): Scaling or fading a panel out of the control that opened it by putting its transform origin on that anchor, so the panel reads as belonging to its trigger. - [Ornament](https://vocab.design/ornament.md): A small panel of controls that floats just outside a window edge in visionOS, staying with the window without covering its contents. - [Orphan](https://vocab.design/orphan.md): A first line of a paragraph left alone at the bottom of a column or page, with the rest of the paragraph carried over. - [Outline color](https://vocab.design/outline-color.md): The role that draws boundaries, split into a stronger value for edges that must be seen and a weaker one for dividers that only need to hint at structure. - [Overflow menu](https://vocab.design/overflow-menu.md): A menu holding the actions that do not fit in the visible interface, opened from one compact trigger. - [Overscan safe area](https://vocab.design/overscan-safe-area.md): The inset a television layout keeps clear of the screen edge, about five percent, because sets crop the outer frame and anything near it disappears. - [Overscroll](https://vocab.design/overscroll.md): Scrolling input that continues after a scroller has reached its limit, which platforms answer with a bounce, a glow, or a handoff to the parent. - [Overshoot](https://vocab.design/overshoot.md): The part of a motion that carries past its final value before coming back, the visual signature of an underdamped spring or a back easing curve. - [Overview plus detail](https://vocab.design/overview-plus-detail.md): A layout that shows a compressed overview and a detailed view at the same time in separate regions, so the reader keeps their place while inspecting one part. - [Owned element](https://vocab.design/owned-element.md): A child the accessibility tree is told to adopt from elsewhere in the DOM, used when the nesting a role requires is impossible in the markup. - [Page break](https://vocab.design/page-break.md): Where content is cut to continue in the next fragment, a printed page, a column or a region, plus the rules that decide where the cut may fall. - [Page curl](https://vocab.design/page-curl.md): A page turn that lifts and bends the leaf away from the spine as the finger drags it, the most literal transition a reader can be given. - [Page header](https://vocab.design/page-header.md): 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. - [Page indicator](https://vocab.design/page-indicator.md): The row of small dots under a carousel or onboarding screen showing how many pages there are and which one you are on. - [Page title](https://vocab.design/page-title.md): The document title, the first thing a screen reader speaks and the only label a reader has when picking between tabs, windows, and history entries. - [Page transition](https://vocab.design/page-transition.md): Motion that covers a navigation between two whole pages or routes, replacing the hard cut a document load would otherwise produce. - [Pagination](https://vocab.design/pagination.md): The numbered row of page links under a long result set, with previous and next controls and usually an ellipsis where numbers are skipped. - [Pan](https://vocab.design/pan.md): Moving the viewport across content in any direction while keeping contact, so the content feels anchored to the finger or cursor. - [Pancake stack](https://vocab.design/pancake-stack.md): A three row page where the header and footer take only the height they need and the middle row absorbs every remaining pixel, even when the content is short. - [Pane](https://vocab.design/pane.md): A layout container that holds one destination's content inside a window, either fixed or flexible in width, combined with other panes to fill the space. - [Pangram](https://vocab.design/pangram.md): A sentence that uses every letter of the alphabet at least once, used to show a whole character set in one line. - [Parallax](https://vocab.design/parallax.md): Moving layers at different rates against the same input, so the slower layers read as farther away and the scene gains depth. - [Parenting](https://vocab.design/parenting.md): Tying one element's motion to another's so moving or scaling the parent carries the child with it, which is how a group of parts reads as one object instead of several. - [Particle background](https://vocab.design/particle-background.md): An ambient decorative background of many small moving agents: drifting dots, linked constellations, flocks, or starfields animating behind the page content. - [Passkey](https://vocab.design/passkey.md): Signing in with a device-held credential unlocked by the reader's own biometric or screen lock, so the interface asks for a face or fingerprint, not a secret. - [Password reveal toggle](https://vocab.design/password-reveal-toggle.md): The control inside a password field, usually an eye or the word Show, that switches the characters between masked and readable. - [Password strength meter](https://vocab.design/password-strength-meter.md): A gauge that scores a password while it is typed and names what would improve it, replacing a list of rules with continuous feedback. - [Pause, stop, hide](https://vocab.design/pause-stop-hide.md): A visible control for content that moves, blinks, scrolls, or updates on its own, so a reader can stop it before reading around it. - [Paywall](https://vocab.design/paywall.md): A barrier that stops access to content or a feature until the reader pays, placed either before anything is shown or partway into the content. - [Perceptual duration](https://vocab.design/perceptual-duration.md): How long a spring appears to take, measured to the point the movement stops being visible rather than to its mathematical rest, the figure to quote against a timed animation. - [Perceptual uniformity](https://vocab.design/perceptual-uniformity.md): The property of a colour space where equal numeric distances look like equal visual differences, which is what makes a generated ramp step evenly. - [Permission priming](https://vocab.design/permission-priming.md): Explaining why access is needed in the product's own dialog first, and only firing the operating system prompt once the reader has said yes to that. - [Petite caps](https://vocab.design/petite-caps.md): Capitals drawn to exactly x-height, shorter than small caps, so they sit flush with the lowercase around them. - [Picture in picture](https://vocab.design/picture-in-picture.md): A small always on top window that keeps video or navigation visible in a corner while the reader works in another app or scrolls another page. - [Pilcrow](https://vocab.design/pilcrow.md): The paragraph mark, a reversed P with a doubled stem, used to show where a paragraph begins or as a hover anchor beside a heading. - [PIN input](https://vocab.design/pin-input.md): A row of single character boxes for a short code, where typing advances to the next box and pasting the whole code fills them all. - [Pinch to zoom](https://vocab.design/pinch-to-zoom.md): Two fingers moving apart or together on a surface to scale content up or down, with the scale tracking the distance between them. - [Pixel art UI](https://vocab.design/pixel-art-ui.md): An interface drawn on a visible pixel grid, with bitmap type, hard aliased edges, and icons kept at their original low resolution. - [Pixel density](https://vocab.design/pixel-density.md): How many physical pixels a display packs into an inch, and the reason a CSS pixel is a unit of measure rather than a dot on the screen. - [Placeholder as label](https://vocab.design/placeholder-as-label.md): The antipattern of using placeholder text as a field's only label, which vanishes on typing and usually fails both contrast and naming. - [Plain language](https://vocab.design/plain-language.md): Writing interface copy at the reading level of the people using it, with short sentences, familiar words, and the point first, rather than at the level of the org chart. - [Playhead](https://vocab.design/playhead.md): The marker showing the current position in a timeline or track, which travels during playback and can be dragged to move it. - [Point size](https://vocab.design/point-size.md): The nominal size of type, measured in points, which describes the body the letters are drawn on rather than the height of any letter. - [Pointer cancellation](https://vocab.design/pointer-cancellation.md): Activating a control on pointer release rather than press, so someone who lands on the wrong target can slide off and abort. - [Pointer capture](https://vocab.design/pointer-capture.md): Redirecting all events for one pointer to a chosen element, so a drag keeps reaching the control it started on even when it wanders off. - [Pointer gestures](https://vocab.design/pointer-gestures.md): Path based or multi finger gestures such as pinch, swipe, and drag along a track, which need a single pointer equivalent to stay operable. - [Pointer lock](https://vocab.design/pointer-lock.md): Hiding the cursor and reading only its movement deltas, so input keeps flowing past the edges of the screen instead of stopping at them. - [Politeness level](https://vocab.design/politeness-level.md): The urgency setting on a live region: polite waits for a pause in speech, assertive interrupts whatever is being read. - [Pop art style](https://vocab.design/pop-art-style.md): A comic and advertising style of flat primary color, heavy black outlines, printed dot shading, speech balloons, and bold condensed capitals. - [Pop in](https://vocab.design/pop-in.md): An entrance that scales slightly past full size before settling, so the element arrives with a small snap instead of simply being there. - [Popconfirm](https://vocab.design/popconfirm.md): A small confirmation bubble anchored to the control you just pressed, asking whether you meant it without opening a dialog over the page. - [Popover](https://vocab.design/popover.md): A small surface anchored to the control that opened it, holding content or controls of its own, and dismissed by clicking away or pressing Escape. - [Popover arrow](https://vocab.design/popover-arrow.md): The small triangle joining a popover or tooltip to the thing it belongs to, which flips and slides as the popover repositions. - [Positive tabindex](https://vocab.design/positive-tabindex.md): Using tabindex values above zero to force an order, which yanks those elements to the front of the whole page sequence and is almost always a bug. - [POUR](https://vocab.design/pour.md): The four principles WCAG is built on, perceivable, operable, understandable, and robust, used as a shorthand for sorting an accessibility problem into a bucket. - [Predictive back](https://vocab.design/predictive-back.md): A back gesture that reveals the destination underneath while the finger is still down, so the swipe can be finished or abandoned once the reader has seen where it goes. - [Increased contrast](https://vocab.design/prefers-contrast.md): A user preference for more contrast than a theme's default, honoured by strengthening borders, text, and state colours rather than by shifting hues. - [Reduced motion](https://vocab.design/prefers-reduced-motion.md): A user preference asking interfaces to cut non-essential animation, honoured by shortening, cross fading, or removing movement rather than by doing nothing. - [Preselected opt-in](https://vocab.design/preselected-opt-in.md): Arriving at a choice with the answer that benefits the business already ticked, so consent is collected from everyone who does not notice. - [Presence indicator](https://vocab.design/presence-indicator.md): The small coloured dot on an avatar reporting whether a person is available, away, busy or offline. - [Presentation role](https://vocab.design/presentation-role.md): Stripping an element of its semantics while leaving it on screen, so a table used for layout or a list used for spacing stops being announced as one. - [Presentational children](https://vocab.design/presentational-children.md): The rule that some roles flatten everything inside them into their own label, which is why an icon and a span inside a button are never announced separately. - [Press-drag-release](https://vocab.design/press-drag-release.md): Operating a menu in one gesture: pressing the trigger opens it, dragging moves through the items while the button stays down, and releasing over an item commits it. - [Pressed state](https://vocab.design/pressed-state.md): The look a control takes while it is actually being held down, confirming that the press was received before the action runs. - [Pressure sensitivity](https://vocab.design/pressure-sensitivity.md): Reading how hard a pen or finger presses, plus tilt and twist, so stroke weight and behaviour vary with the shape of the contact. - [Prime mark](https://vocab.design/prime-mark.md): The slanted tick used for feet, inches, minutes, and seconds, which is a different character from either a straight quote or a curly one. - [Primitive color token](https://vocab.design/primitive-color-token.md): A raw palette value named for what it is, like blue-500, sitting under the semantic layer that names colours for what they do. - [Priority plus navigation](https://vocab.design/priority-plus-navigation.md): A horizontal menu that keeps as many items visible as fit and moves the rest into a More control, recalculating whenever the available width changes. - [Privacy zuckering](https://vocab.design/privacy-zuckering.md): Steering people into sharing more about themselves than they meant to, by making the permissive choice the easy one and the private choice several clicks deep. - [Progress bar](https://vocab.design/progress-bar.md): A filling bar reporting how far along a task is, determinate when the end is known and indeterminate when it is not. - [Progress ring](https://vocab.design/progress-ring.md): A circular progress indicator that fills around a ring, often with the percentage in the middle. - [Progressive blur](https://vocab.design/progressive-blur.md): A blur whose strength ramps across a region instead of applying evenly, so content fades into softness toward an edge rather than stopping at a hard line. - [Progressive disclosure](https://vocab.design/progressive-disclosure.md): Showing the few options most people need and keeping the rest one deliberate step away, so complexity arrives only when it is asked for. - [Progressive image loading](https://vocab.design/progressive-image-loading.md): Showing a cheap stand-in for an image, a blur, a dominant colour, or a low resolution copy, and swapping in the full file once it arrives. - [Progressive profiling](https://vocab.design/progressive-profiling.md): Collecting profile details a few at a time across separate visits, instead of demanding the whole record in one long form at registration. - [Progressive reduction](https://vocab.design/progressive-reduction.md): Simplifying a control as the same person uses it more, dropping the label once the icon has been learned and restoring it after a long absence. - [Prompt input](https://vocab.design/prompt-input.md): The composer at the bottom of an assistant interface: a growing text area with attachment, model and send controls attached to it. - [Pronunciation](https://vocab.design/pronunciation.md): How a synthetic voice says a word, and the hints an author can give when the default reading turns a product name, a units string, or a homograph into nonsense. - [Property filter](https://vocab.design/property-filter.md): A search field that builds structured queries from tokens, letting a reader filter by named properties with operators rather than free text. - [Proximity](https://vocab.design/proximity.md): The grouping principle that elements placed close together read as related, which is why spacing decides perceived structure more reliably than borders do. - [Psychedelic style](https://vocab.design/psychedelic-style.md): A 1960s poster style of vibrating complementary color, warped and interlocking lettering that fills its own shape, kaleidoscopic symmetry, and liquid distortion. - [Pull quote](https://vocab.design/pull-quote.md): A phrase lifted out of an article and set large as a graphic element, to draw a browsing reader into the text. - [Pull to refresh](https://vocab.design/pull-to-refresh.md): Dragging a list downward past its top edge to trigger a reload, with an indicator that appears in the space the drag opens up. - [Pulse](https://vocab.design/pulse-animation.md): A slow repeating change in scale or opacity that keeps an element alive without moving it, used for waiting states and gentle attention. - [Push notification](https://vocab.design/push-notification.md): A system delivered message shown outside the app, on a lock screen or in a notification list, that has to earn the interruption it costs. - [Push transition](https://vocab.design/push-transition.md): A navigation transition where the new view slides in and pushes the old one off, and reversing it pops back, encoding depth in a stack. - [QR code](https://vocab.design/qr-code.md): A square matrix barcode rendered in the interface to hand a link or credential to a phone camera. - [Quasimode](https://vocab.design/quasimode.md): A temporary mode held open by the user, such as a key kept down, so it cannot be forgotten and ends the moment the hold ends. - [Quick return header](https://vocab.design/quick-return-header.md): A header that slides out of the way while the reader scrolls down and returns immediately on the first upward scroll, without waiting for the top of the page. - [Quick settings tile](https://vocab.design/quick-settings-tile.md): A one tap button or toggle an app contributes to the system control surface, so one feature can be reached without opening the app. - [Quick view](https://vocab.design/quick-view.md): Opening a summary of an item over the list it came from, so the reader can inspect it and return without losing scroll position or filters. - [Radial menu](https://vocab.design/radial-menu.md): A menu whose items sit around the point of invocation, so a choice is made by direction and distance rather than by reading a list. - [Radio group](https://vocab.design/radio-group.md): A set of mutually exclusive options, each with its own label and control, exactly one of which can be chosen. - [Rag](https://vocab.design/rag.md): The uneven edge left by unjustified text, and the thing typographers tune so that edge makes no distracting shapes down the side of a paragraph. - [Raised cap](https://vocab.design/raised-cap.md): An oversized opening letter that sits on the first line's baseline and rises above the text, rather than sinking into it. - [RAM technique](https://vocab.design/ram-technique.md): A grid that decides its own column count from a minimum item width, so the same one line rule works at every screen size without a single breakpoint. - [Range select](https://vocab.design/range-select.md): Choosing a contiguous run of items by marking one end and holding Shift while marking the other, selecting everything between them. - [Range slider](https://vocab.design/range-slider.md): A slider with two handles on one track that sets a lower and an upper bound, so the selection is an interval rather than a point. - [Rating](https://vocab.design/rating.md): A row of stars or similar marks that both shows a score and, when interactive, takes one. - [Rating prompt](https://vocab.design/rating-prompt.md): An in-product request to rate or review, usually timed to a moment of success and often filtered so only positive responses reach the public store. - [Reaction picker](https://vocab.design/reaction-picker.md): A small row of emoji that appears on hover or long press so a message can be answered without a reply. - [Read aloud](https://vocab.design/read-aloud.md): Speaking a page's own prose with a synthetic voice, highlighting each word as it is spoken. A reading aid for people who can see the screen, not a screen reader. - [Read receipt](https://vocab.design/read-receipt.md): A per-message marker reporting how far a message got, sent, delivered, or read, drawn as ticks, labels, or the recipient's avatar. - [Readability](https://vocab.design/readability.md): How comfortably a body of text can be read at length, a property of the setting: size, measure, leading, and contrast. - [Reader mode](https://vocab.design/reader-mode.md): A browser view that throws away your layout and rebuilds the article as plain text the reader can restyle, which is a verdict on how readable the original was. - [Reading flow](https://vocab.design/reading-flow.md): A CSS property that repoints reading and tab order at the visual arrangement of a flex or grid container, instead of leaving both stuck in source order. - [Reading order](https://vocab.design/reading-order.md): The order content is exposed in the DOM, which drives both speech output and tab order, and which visual reordering can silently contradict. - [Reading progress](https://vocab.design/reading-progress.md): A bar tied to scroll position that shows how much of an article remains, usually pinned to the top edge and filling as the reader descends. - [Reduced transparency](https://vocab.design/reduced-transparency.md): A user preference asking for opaque surfaces instead of blur and translucency, honoured by swapping frosted layers for solid fills. - [Redundant entry](https://vocab.design/redundant-entry.md): The rule against asking for the same information twice in one process, unless it is re-entered for a real reason such as confirmation. - [Reference line](https://vocab.design/reference-line.md): A line drawn at a meaningful value across a chart: a target, a threshold, an average, a before-and-after moment. - [Reflow](https://vocab.design/reflow.md): The requirement that content works in one column at 320 CSS pixels wide without two dimensional scrolling, which is 400 percent zoom on a desktop. - [Relative color syntax](https://vocab.design/relative-color-syntax.md): CSS notation that builds a new colour from an existing one by naming an origin colour with from and then adjusting individual channels. - [Relative luminance](https://vocab.design/relative-luminance.md): The brightness of a colour measured on a 0 to 1 scale after each channel is linearised, which is the input every WCAG contrast calculation actually uses. - [Relative timestamp](https://vocab.design/relative-timestamp.md): A time printed as a distance from now, two hours ago or in three days, updating itself and holding the exact time in its tooltip. - [Required field indicator](https://vocab.design/required-field-indicator.md): How a form says a field cannot be left empty, in the label text, in the announced name, and not by an asterisk whose meaning is explained somewhere else. - [Resize handle](https://vocab.design/resize-handle.md): The small corner grip that lets you drag an element or window bigger and smaller, drawn as diagonal ridges on a textarea or window corner. - [Resize text](https://vocab.design/resize-text.md): Text must scale to at least 200 percent without loss of content or function, which rules out fixed pixel heights around wrapping copy. - [Responsive upscaling](https://vocab.design/responsive-upscaling.md): Designing what a layout does with the space it gains on very wide screens, rather than only what it drops as screens narrow. - [Responsive web design](https://vocab.design/responsive-web-design.md): One layout that adapts to any screen through fluid grids, flexible images and media queries, rather than a separate site built for each class of device. - [Retro film aesthetic](https://vocab.design/retro-film-aesthetic.md): A treatment that makes digital imagery look shot on film, adding grain, halation, light leaks, faded contrast, dust, and sometimes a corner date stamp. - [Retro-futurism](https://vocab.design/retro-futurism.md): A style that pictures the future the way an earlier decade pictured it, so the technology shown is advanced but the type, color, and hardware belong to the past. - [Retro web design](https://vocab.design/retro-web-design.md): A style that rebuilds the early desktop web on purpose: beveled window chrome, pixel and system type, garish color, and animated banners. - [Reveal animation](https://vocab.design/reveal-animation.md): Motion that uncovers content already in place, usually by growing a clip or mask outward from a point rather than moving the content itself. - [Review cursor](https://vocab.design/review-cursor.md): A second cursor a screen reader user can move over the screen to read text without moving the system focus, so inspecting a region does not disturb the app. - [Ribbon](https://vocab.design/ribbon.md): A tall tabbed toolbar that replaces menus, grouping commands into labelled sections with the important ones drawn larger. - [Rich text editor](https://vocab.design/rich-text-editor.md): An editing surface that shows formatting as it will appear rather than as markup, so what the writer sees is close to what readers get. - [Rich text toolbar](https://vocab.design/rich-text-toolbar.md): The strip of formatting controls above or beside an editor, whose buttons report their state from wherever the caret sits. - [Ripple](https://vocab.design/ripple.md): A circular wash that spreads from the point of contact to acknowledge a touch, Material's way of tying feedback to where the finger landed. - [Risograph style](https://vocab.design/risograph.md): A print-inspired look of two or three flat spot colors that misregister slightly and show grain, imitating a riso duplicator. - [River](https://vocab.design/river.md): An accidental channel of white space running down a paragraph where word spaces on consecutive lines happen to line up. - [Roach motel](https://vocab.design/roach-motel.md): Making entry into a commitment take one click and exit take a phone call, a chat queue, or a buried page, so the asymmetry keeps people subscribed. - [Role description](https://vocab.design/role-description.md): An author supplied name for a widget's role, spoken in place of the stock role name, which overrides the platform wording and misleads easily. - [Rotate gesture](https://vocab.design/rotate-gesture.md): Two fingers turning around a common center to rotate the object or view beneath them, the angle tracking the fingers as they orbit. - [Rotor](https://vocab.design/rotor.md): VoiceOver's dial for choosing what a swipe or flick moves between: headings, links, landmarks, form controls, or characters. - [Route announcement](https://vocab.design/route-announcement.md): Telling assistive technology that a client side navigation happened, by moving focus to the new heading or posting the new title to a live region. - [Roving tabindex](https://vocab.design/roving-tabindex.md): A focus technique where only one item in a group is in the tab order and arrow keys move that position, so Tab enters and leaves the whole group once. - [RTL mirroring](https://vocab.design/rtl-mirroring.md): Flipping a layout horizontally for right to left languages, moving navigation and progression to the other side while leaving some elements unmirrored. - [Ruby annotation](https://vocab.design/ruby-annotation.md): Small guide text set beside or above a run of base text, most often to give the pronunciation of East Asian characters. - [Rule builder](https://vocab.design/rule-builder.md): Assembling a condition from dropdowns and values, joined by and or or, so a non-programmer can express a query without writing one. - [Rule of thirds](https://vocab.design/rule-of-thirds.md): Dividing a frame into nine equal cells with two lines each way and placing the important elements on the lines or their intersections. - [Runt](https://vocab.design/runt.md): A single word left alone on the last line of a paragraph or heading. - [Safe area](https://vocab.design/safe-area.md): The part of the screen guaranteed clear of notches, system bars and rounded corners, where interactive content can safely sit. - [Sans-serif](https://vocab.design/sans-serif.md): A typeface drawn without finishing strokes on the ends of its stems, which is the default register of most interface type. - [Saturation](https://vocab.design/saturation.md): How far a colour is from grey on a scale where 100 percent is the pure hue and 0 percent is neutral, as modelled by HSL and its relatives. - [Save for later](https://vocab.design/save-for-later.md): Moving an item out of the active list into a parked list that stays associated with the reader, without deleting it or committing to it. - [Scaffold](https://vocab.design/scaffold.md): The frame that positions an app's persistent regions, its bars, panes and body, so each screen drops content into named slots instead of inventing its own arrangement. - [Scanlines](https://vocab.design/scanlines.md): Thin repeating dark lines laid over an interface to imitate the raster of a cathode ray tube screen, often with a slight curve and flicker. - [Scarcity indicator](https://vocab.design/scarcity-indicator.md): A label reporting how little of something is left, in stock, in seats, or in time, placed beside the action it is meant to accelerate. - [Scope bar](https://vocab.design/scope-bar.md): The row of category buttons directly under a search field that narrows what the query searches, such as All, Mail, Files. - [Screen curtain](https://vocab.design/screen-curtain.md): A screen reader mode that switches the display off entirely while navigation keeps working, used for privacy and by sighted testers checking an audio-only run. - [Screen magnification](https://vocab.design/screen-magnification.md): Blowing part of the screen up many times over, so a reader sees a keyhole of the layout at a time and anything far from the action is effectively off screen. - [Screen reader](https://vocab.design/screen-reader.md): Software that speaks or brailles the accessibility tree and supplies its own keyboard commands for moving through a page. - [Scrim](https://vocab.design/scrim.md): 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. - [Scroll anchoring](https://vocab.design/scroll-anchoring.md): Keeping the reader's position fixed when content loads or resizes above it, by adjusting scroll offset so the visible text does not jump. - [Scroll chaining](https://vocab.design/scroll-chaining.md): When an inner scroller reaches its end and the gesture continues, the scroll passes to the page behind it unless that handoff is blocked. - [Scroll container](https://vocab.design/scroll-container.md): The element that actually scrolls its overflowing content, distinct from the page, and the box the browser calls the scrollport. - [Scroll edge fade](https://vocab.design/scroll-edge-fade.md): A gradient mask at the edge of a scroll container that fades clipped content out, hinting that more lies past the edge without drawing a control. - [Scroll hijacking](https://vocab.design/scroll-hijacking.md): Overriding the browser's scrolling so a wheel turn advances a scripted sequence instead of moving the page by the distance the reader asked for. - [Scroll-linked animation](https://vocab.design/scroll-linked-animation.md): An animation whose progress is bound to scroll position rather than to time, so scrolling back rewinds it exactly. - [Scroll lock](https://vocab.design/scroll-lock.md): Freezing the page behind an open overlay so a wheel or swipe moves the overlay's own content and never the document underneath. - [Scroll pinning](https://vocab.design/scroll-pinning.md): Holding a section fixed in place while the page keeps scrolling, spending scroll distance on an animation instead of on movement. - [Scroll snap](https://vocab.design/scroll-snap.md): Snap positions declared on a scroll container so scrolling settles on a chosen item edge instead of stopping wherever momentum runs out. - [Scroll spy](https://vocab.design/scroll-spy.md): Navigation that watches the scroll position and highlights the entry for the section currently in view. - [Scroll-triggered animation](https://vocab.design/scroll-triggered-animation.md): An animation that scroll position only starts, after which it runs on its own clock and does not rewind when the reader scrolls back up. - [Scrollbar](https://vocab.design/scrollbar.md): The bar beside a scrollable region whose thumb shows both how much content there is and where in it you are. - [Scrollbar color](https://vocab.design/scrollbar-color.md): The thumb and track colours of a scrollbar, which a page can set explicitly or leave to the declared colour scheme so the browser draws its own dark variant. - [Scrollytelling](https://vocab.design/scrollytelling.md): A narrative layout where a pinned graphic stays fixed while text scrolls past it, each step changing what the graphic shows. - [Scrubber](https://vocab.design/scrubber.md): The seek control of a media player: a track showing elapsed and buffered time with a playhead you drag to move through it. - [Scrubbing](https://vocab.design/scrubbing.md): Dragging a playhead along a timeline to move through media by hand, previewing frames as the position changes rather than waiting for playback. - [Scrubby slider](https://vocab.design/scrubby-slider.md): A numeric field whose label can be dragged sideways to change the value, giving a slider's feel without a slider taking up room. - [Search field](https://vocab.design/search-field.md): A text input specialised for queries, with a magnifier, a clear control and often suggestions that appear as you type. - [Secondary click](https://vocab.design/secondary-click.md): The alternate pointer press, usually the right button or a two-finger tap, reserved for opening contextual actions rather than activating. - [Seed color](https://vocab.design/seed-color.md): The single input colour an algorithm expands into a whole scheme, so a palette becomes something derived from one decision rather than picked swatch by swatch. - [Segmented control](https://vocab.design/segmented-control.md): A single control holding two to five mutually exclusive options side by side, with the current one shown as a filled segment. - [Select](https://vocab.design/select.md): A closed control that shows the current choice and opens a list of options when pressed, with no typing. - [Select all across pages](https://vocab.design/select-all-across-pages.md): Offering to extend a selection from the visible page to every matching row, after a header checkbox has selected only what is on screen. - [Selection card](https://vocab.design/selection-card.md): A radio or checkbox dressed as a card, where the whole tile is the target and the control itself is small or absent. - [Selection color](https://vocab.design/selection-color.md): The highlight painted behind text a reader has selected, which a page can restyle and thereby break the contrast the operating system had guaranteed. - [Selection follows focus](https://vocab.design/selection-follows-focus.md): A widget where moving focus also selects, so arrowing through tabs or a listbox changes the selection immediately rather than on a second press. - [Selection handle](https://vocab.design/selection-handle.md): The draggable grip at each end of a touch text selection, used to widen or narrow the range a finger cannot adjust precisely. - [Semantic color](https://vocab.design/semantic-color.md): A colour named for the job it does rather than the colour it is, so that "danger" or "surface" can be repointed without renaming anything that uses it. - [Semantic HTML](https://vocab.design/semantic-html.md): Reaching for the element that already means what you mean, so name, role, keyboard behaviour, and platform conventions arrive for free instead of being rebuilt. - [Semantic zoom](https://vocab.design/semantic-zoom.md): Switching between two views of the same content, a zoomed out view of group headings and a zoomed in view of individual items, instead of scaling pixels. - [Sensory characteristics](https://vocab.design/sensory-characteristics.md): Instructions that lean on shape, size, position, or sound alone, such as the round button on the right, which fail when those cues are not perceived. - [Sentence case](https://vocab.design/sentence-case.md): Capitalising only the first word of a label or heading, plus any proper nouns, as you would in an ordinary sentence. - [Sequential palette](https://vocab.design/sequential-palette.md): A data palette that runs light to dark in one direction, encoding an ordered quantity so that darker always means more. - [Serif](https://vocab.design/serif.md): The small finishing stroke at the end of a letter's stem, and by extension the class of typefaces that have them. - [Set size and position](https://vocab.design/set-size-and-position.md): Telling assistive technology how big a list really is and where an item sits in it, so a windowed or paginated list still announces "item 6 of 16". - [Shade](https://vocab.design/shade.md): A colour with black mixed in, darker than the original hue and typically used for pressed states, borders and dark theme surfaces. - [Shake](https://vocab.design/shake-animation.md): A short lateral wobble used to reject an input, borrowed from the head shake and read as no rather than as an error message. - [Shake to undo](https://vocab.design/shake-to-undo.md): Physically shaking a device to trigger undo or redo, an accelerometer gesture Apple defines system wide for reversing a recent edit. - [Share sheet](https://vocab.design/share-sheet.md): The system panel of destinations and actions for sending the current item elsewhere, populated by whatever apps are installed. - [Shared axis](https://vocab.design/shared-axis.md): Material's transition where outgoing and incoming views slide and fade along the same x, y, or z axis, so direction encodes the navigational relationship. - [Shimmer](https://vocab.design/shimmer.md): The moving highlight that sweeps across placeholder shapes to signal that content is still on its way. - [Show more toggle](https://vocab.design/show-more-toggle.md): The control at the end of clamped text that expands it to full length and, when honest, collapses it again. - [Sidebar](https://vocab.design/sidebar.md): A persistent vertical region alongside the main content holding navigation or secondary controls, often collapsible on narrow screens. - [Sidenote](https://vocab.design/sidenote.md): A note placed in the outer margin beside the line it belongs to, rather than collected at the foot of the page. - [Sign language interpretation](https://vocab.design/sign-language-interpretation.md): A signed track alongside video, presented as an inset or a companion stream, for readers whose first language is a sign language rather than the written caption text. - [Signature pad](https://vocab.design/signature-pad.md): A drawing area that captures a handwritten signature by pointer or touch, with a clear control and a baseline to sign on. - [Signed distance field](https://vocab.design/signed-distance-field.md): A texture storing each pixel's distance to a shape's edge rather than its color, so glyphs and icons rendered from it stay crisp at any scale on the GPU. - [Signifier](https://vocab.design/signifier.md): The visible cue that advertises an affordance, such as a grip texture, an underline, or a shadow that says this can be pressed. - [Site footer](https://vocab.design/site-footer.md): The closing region of a site holding secondary navigation, legal links, and contact details that do not deserve top level placement. - [Situational disability](https://vocab.design/situational-disability.md): A barrier that comes from the moment rather than the body, one arm holding a baby, sunlight on a screen, a noisy train, and that makes the audience for access everyone. - [60-30-10 rule](https://vocab.design/sixty-thirty-ten-rule.md): A proportion guideline that gives about 60 percent of a layout to a dominant colour, 30 percent to a secondary, and 10 percent to an accent. - [Skeleton screen](https://vocab.design/skeleton-screen.md): A loading state made of grey shapes standing where the content will be, showing the layout before the data arrives. - [Skeuomorphism](https://vocab.design/skeuomorphism.md): A style that makes interface elements imitate real objects and materials, using leather, metal, paper, and glossy highlights so their purpose reads as familiar. - [Skip link](https://vocab.design/skip-link.md): A link at the very start of a page, revealed on focus, that jumps past repeated navigation to the main content. - [Slash command](https://vocab.design/slash-command.md): Typing a forward slash in a composer to open a menu of actions, where choosing one runs it rather than inserting the words into the message. - [Slide transition](https://vocab.design/slide-transition.md): A transition where content translates in or out along one axis, using direction to say whether the user moved forward, back, up, or down. - [Slider](https://vocab.design/slider.md): A control that sets a value by dragging a handle along a track, showing the whole range at once. - [Sliding indicator](https://vocab.design/sliding-indicator.md): A single underline or pill that travels between tabs to mark the selection instead of each tab drawing its own, so the move itself says which way the selection went. - [Small caps](https://vocab.design/small-caps.md): Capital letters drawn at roughly lowercase height, with weight adjusted to match, so an abbreviation does not shout inside running text. - [Small multiples](https://vocab.design/small-multiples.md): The same small chart repeated in a grid, once per category, so comparison happens by eye movement instead of overplotting. - [Smart app banner](https://vocab.design/smart-app-banner.md): A strip pinned to the top of a mobile web page urging the reader to open or install the native app instead, with an install or open action. - [Smart defaults](https://vocab.design/smart-defaults.md): Prefilling a choice with the answer most people in this situation want, so the common case needs no work and every other case is still reachable. - [Smart guides](https://vocab.design/smart-guides.md): Alignment lines that appear only while dragging, showing which edges or centers the moving object currently lines up with. - [Smart quotes](https://vocab.design/smart-quotes.md): The curved opening and closing quotation marks a typeface actually draws, as opposed to the straight vertical marks inherited from typewriters. - [Smooth scrolling](https://vocab.design/smooth-scrolling.md): Animating a programmatic jump so the page travels to its destination instead of cutting there, which keeps an anchor link or a back-to-top button from losing the reader's place. - [Snapping](https://vocab.design/snapping.md): Pulling a dragged object into exact alignment once it comes within a small distance of a grid, guide, or another object's edge. - [Sneak into basket](https://vocab.design/sneak-into-basket.md): Adding an item the buyer never chose, an insurance, a donation, a warranty, into the cart through a preselected control found earlier in the flow. - [Social login](https://vocab.design/social-login.md): Signing in by delegating identity to an existing account elsewhere, presented as a row of provider buttons above or instead of a password form. - [Social proof](https://vocab.design/social-proof.md): Showing what other people did or said next to a decision, as counts, reviews, logos, or live activity, so the reader can borrow their judgement. - [Soft delete](https://vocab.design/soft-delete.md): Removing an item from view but keeping it recoverable in a trash or archive for a period, so deletion is reversible without a confirmation step. - [Soft hyphen](https://vocab.design/soft-hyphen.md): An invisible character placed inside a word that marks where a hyphen may appear if the word has to break, and stays hidden otherwise. - [Solarpunk](https://vocab.design/solarpunk.md): An optimistic ecological future style of daylight palettes, plant growth over structure, stained glass colour, art nouveau curves, and visible solar and wind technology. - [Sonification](https://vocab.design/sonification.md): Turning data into sound, mapping a series to pitch or rhythm, so a chart can be heard as a shape rather than described one value at a time. - [Sort indicator](https://vocab.design/sort-indicator.md): The small arrow in a column header showing that the table is sorted by that column and in which direction. - [Sort state](https://vocab.design/sort-state.md): The announced direction of the one column a table is currently sorted by, carried on that column header alone rather than on every sortable header. - [Spacer](https://vocab.design/spacer.md): A deliberate empty element between regions: the gap between two panes that carries the drag handle when they resize, or the flexible filler that pushes toolbar items apart. - [Spacing scale](https://vocab.design/spacing-scale.md): The fixed, named set of spacing values a system allows, so gaps come from a shortlist instead of being invented per screen. - [Spanned layout](https://vocab.design/spanned-layout.md): How an app arranges itself when one window is stretched across two displays, either keeping content clear of the seam or splitting the layout exactly at it. - [Sparkline](https://vocab.design/sparkline.md): A tiny chart with no axes or labels, drawn inline at text size to show the shape of a trend beside the number it belongs to. - [Spatial navigation](https://vocab.design/spatial-navigation.md): Moving focus by direction rather than by sequence, so arrow keys, a D-pad, or a TV remote jump to the nearest control up, down, left, or right. - [Spatial UI](https://vocab.design/spatial-ui.md): Interface designed to sit in three dimensional space, where panels are made of a system glass material and hierarchy is carried by depth rather than by colour. - [Specular highlight](https://vocab.design/specular-highlight.md): The bright reflection drawn on a surface to say it is glossy, placed where a light source would strike a curved object. - [Speed dial](https://vocab.design/speed-dial.md): A floating action button that fans out into three to six smaller related actions when pressed or hovered. - [Spinner](https://vocab.design/spinner.md): An indeterminate loading indicator that shows work is happening without saying how much of it is left. - [Split button](https://vocab.design/split-button.md): A two part control where the main area runs a default action and an attached arrow opens a menu of related alternatives. - [Split-flap animation](https://vocab.design/split-flap-animation.md): A digit or letter changing by flipping through every character between the old value and the new one, imitating the mechanical boards of airports and flip clocks. - [Split screen layout](https://vocab.design/split-screen-layout.md): A page cut into two equal full height halves, each carrying its own message or path, with no hierarchy between them. - [Split view](https://vocab.design/split-view.md): A layout of two or more side by side panes where a choice in the leading pane decides what the trailing pane shows. - [Splitter](https://vocab.design/splitter.md): The draggable bar between two panes that changes how much room each one gets, keyboard operable as a slider between limits. - [Spotlight hover](https://vocab.design/spotlight-hover.md): A soft radial glow centred on the pointer's position inside a card, lighting its surface and border as the cursor moves and going dark when the cursor leaves. - [Spotted pattern](https://vocab.design/spotted-pattern.md): 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. - [Spring animation](https://vocab.design/spring-animation.md): Motion driven by a simulated spring (mass, stiffness, damping) instead of a fixed duration, so the element settles rather than stopping on a schedule. - [Spring loading](https://vocab.design/spring-loading.md): Hovering a dragged item over a container until it opens, so a drag can travel through nested destinations without being dropped and restarted. - [Squash and stretch](https://vocab.design/squash-and-stretch.md): Deforming an element along its direction of travel so it reads as having mass and flexibility, usually as a press squash or a launch stretch. - [Squircle](https://vocab.design/squircle.md): A rounded square whose corners curve continuously into the sides instead of meeting a circular arc, the shape behind iOS app icons. - [sRGB](https://vocab.design/srgb.md): The default colour space of the web, the one hex codes and plain rgb() values live in, and the baseline every wider gamut is described relative to. - [Stack](https://vocab.design/stack.md): A layout primitive that puts one consistent gap between every child in a vertical run, so spacing lives with the parent instead of each item. - [Stacking cards](https://vocab.design/stacking-cards.md): A run of sections that each stick at the top of the viewport as the next one slides over it, so scrolling deals the page like a deck rather than passing it by. - [Stacking context](https://vocab.design/stacking-context.md): A self contained depth ordering created by certain properties, inside which z-index only competes locally and can never escape to the level above. - [Stagger](https://vocab.design/stagger.md): Playing the same animation on a set of elements with a small delay added item by item, so the group arrives as a cascade instead of a block. - [Stat](https://vocab.design/stat.md): A single number shown large with a label and often a change indicator, the unit a dashboard is built from. - [State layer](https://vocab.design/state-layer.md): A translucent sheet of the content colour laid over a control at a fixed opacity per state, so hover, focus and pressed are one rule instead of three palettes. - [Static color](https://vocab.design/static-color.md): A colour deliberately excluded from theming because it sits on something that never changes, such as a label over a photo or a fixed brand mark. - [Status bar](https://vocab.design/status-bar.md): A thin strip along the edge of a window or screen that reports state and offers only minor actions, never the primary ones. - [Status color](https://vocab.design/status-color.md): The small fixed set of colours a product reserves for outcome, typically success, warning, danger and info, so meaning is consistent wherever it appears. - [Status message](https://vocab.design/status-message.md): A change in content that reports progress, result, or state and must be announced without taking focus, such as a count of search results. - [Steampunk](https://vocab.design/steampunk.md): A Victorian industrial style of brass, riveted plate, wood, and leather, with gauges, cogs, and valve controls standing in for ordinary interface widgets. - [Step indicator](https://vocab.design/step-indicator.md): A row or column of numbered stages showing where you are in a multi step flow and what remains. - [Stepped animation](https://vocab.design/stepped-animation.md): Motion that jumps between a fixed number of discrete positions instead of interpolating, the mechanic behind sprite sheets, ticking clock hands and segmented spinners. - [Stepper](https://vocab.design/stepper.md): A small two part control with minus and plus that nudges a number up or down one step at a time. - [Steps left](https://vocab.design/steps-left.md): Telling the reader where they are in a multi step task and how many steps are still to come, so the end of the task is visible from the start. - [Sticky add to cart](https://vocab.design/sticky-add-to-cart.md): A condensed product bar that pins itself to an edge once the real buy button has scrolled away, keeping price and purchase always reachable. - [Sticky footer](https://vocab.design/sticky-footer.md): A footer held against the bottom of the viewport when the page is short, and pushed below the content when the page is long. - [Sticky header](https://vocab.design/sticky-header.md): A header that scrolls away with the page until it reaches the top edge, then stays fixed there while the rest keeps moving. - [Sticky hover](https://vocab.design/sticky-hover.md): A hover style that stays applied on a touch device after a tap, because there is no pointer to leave and clear the state. - [Sticky sidebar](https://vocab.design/sticky-sidebar.md): A side column that scrolls with the page and then holds in place once its top reaches the viewport edge, releasing at the end of its container. - [Stories](https://vocab.design/stories.md): A sequence of full-screen cards that advance on a timer, paused by holding, skipped by tapping the edges, and gone after a fixed lifetime. - [Streak](https://vocab.design/streak.md): A count of consecutive periods in which the reader did the thing, displayed prominently and lost if a period is missed. - [Streaming announcement](https://vocab.design/streaming-announcement.md): How a screen reader is told about text that arrives token by token, holding the region quiet while it streams and speaking once when the answer is complete. - [Strikethrough](https://vocab.design/strikethrough.md): A rule drawn through the middle of text to mark it as removed, superseded, or no longer the current price. - [Structured format](https://vocab.design/structured-format.md): Splitting one value across several small fields with fixed shapes, which teaches the expected format but costs the reader extra focus moves. - [Stylistic set](https://vocab.design/stylistic-set.md): A numbered bundle of alternate glyphs inside a font, switched on as a group to change the look of certain letters. - [Subgrid](https://vocab.design/subgrid.md): A nested grid that borrows its parent's tracks instead of defining its own, so contents of separate children still line up with each other. - [Submenu](https://vocab.design/submenu.md): A menu that opens sideways from a menu item, marked by a trailing arrow, and stays open while the pointer travels diagonally toward it. - [Superfamily](https://vocab.design/superfamily.md): A type system whose serif, sans, and sometimes mono members share one skeleton, so they pair by construction rather than by taste. - [Superscript](https://vocab.design/superscript.md): Small raised characters used for footnote markers, ordinals, and exponents, ideally drawn by the font rather than shrunk by software. - [Supporting pane](https://vocab.design/supporting-pane.md): A secondary pane holding content that only makes sense next to the main pane, placed beside it on wide windows and below it or behind a control on narrow ones. - [Surface color](https://vocab.design/surface-color.md): 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. - [Surface tint](https://vocab.design/surface-tint.md): A wash of the primary colour blended into a surface in proportion to its elevation, so height reads as a colour shift rather than only as a shadow. - [Swash](https://vocab.design/swash.md): A letter drawn with an ornamental flourish, usually an extended entry or exit stroke on an italic capital. - [Swatch](https://vocab.design/swatch.md): A small block of flat colour shown as a sample, used in pickers and documentation to stand in for a value the reader cannot otherwise see. - [Swipe](https://vocab.design/swipe.md): A quick directional drag of a finger across the screen, faster and coarser than a drag, usually without a specific on-screen target. - [Swipe actions](https://vocab.design/swipe-actions.md): Buttons hidden behind a list row that a partial sideways swipe reveals, so destructive or common actions live under the item itself. - [Swipe deck](https://vocab.design/swipe-deck.md): A stack of cards judged one at a time, each thrown left or right to record a binary decision and reveal the next card underneath. - [Swipe to dismiss](https://vocab.design/swipe-to-dismiss.md): Flinging an item off the edge of the screen to remove it, with the item tracking the finger and snapping back if the throw is too short. - [Swiss style](https://vocab.design/swiss-style.md): The Swiss modernist system of a strict grid, flush left sans serif type, asymmetric layout, and objective photography, still the base of clean UI layout. - [Switch](https://vocab.design/switch.md): A control shaped like a sliding track that turns one setting on or off and applies the change the moment it is flipped, with no separate save step. - [Switch access](https://vocab.design/switch-access.md): Operating a device with one or two switches, where a scanning cursor steps through targets in turn and a press selects the highlighted one. - [Switcher](https://vocab.design/switcher.md): A layout primitive that flips between a row and a column at a threshold it works out from its own width, with no media query involved. - [Symbol support](https://vocab.design/symbol-support.md): Marking a control with a concept code so a reader who uses an augmentative symbol set sees their own familiar picture in place of your icon and wording. - [Synthwave](https://vocab.design/synthwave.md): A neon 1980s look built on sunset gradients, glowing perspective grids, and chrome type, close to vaporwave but sincere rather than ironic. - [System color keyword](https://vocab.design/system-color-keyword.md): A CSS keyword such as Canvas, CanvasText or LinkText that resolves to a colour chosen by the operating system rather than by the page. - [System font](https://vocab.design/system-font.md): The typeface the operating system uses for its own interface, requested by keyword so each platform supplies its native face. - [Tab stop](https://vocab.design/tab-stop.md): One position in the tab sequence: a place the Tab key can reach, counted once even when the widget it belongs to holds many focusable parts. - [Tabbable](https://vocab.design/tabbable.md): Reachable by the Tab key, as opposed to merely focusable: an element with tabindex of -1 can take focus from script but never from Tab. - [Header association](https://vocab.design/table-header-association.md): The markup that ties a data cell to its row and column headers, so a cell read on its own still says what it is. - [Table of contents](https://vocab.design/table-of-contents.md): A list of a document's sections, linked in reading order, shown beside or above the text. - [Tabs](https://vocab.design/tabs.md): A set of labelled panels in one region, where selecting a label swaps the panel beneath it. - [Tabular figures](https://vocab.design/tabular-figures.md): Numerals drawn to identical widths so digits stack into columns, and so a changing number does not shift the text around it. - [Tag](https://vocab.design/tag.md): A small label attached to an item to classify it, often coloured by category and sometimes removable. - [Tag input](https://vocab.design/tag-input.md): A field that turns each entry into a removable tag sitting inside the field, with the caret waiting after the last one. - [Tap](https://vocab.design/tap.md): A single press and lift of one finger on a touch surface, the touch equivalent of a click, used to activate a control or select an item. - [Tap delay](https://vocab.design/tap-delay.md): The pause a touch browser once held before dispatching a click, kept open in case a second tap arrived and turned the gesture into a zoom. - [Target spacing](https://vocab.design/target-spacing.md): The exception that lets an undersized control pass when no other target falls inside a 24 pixel circle centred on it, trading size for clearance. - [Tearsheet](https://vocab.design/tearsheet.md): A tall modal anchored to the bottom of the viewport that holds a multi step creation flow, stackable when one flow opens another. - [10-foot UI](https://vocab.design/ten-foot-ui.md): 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. - [Terminal aesthetic](https://vocab.design/terminal-aesthetic.md): A look borrowed from the command line: monospace type on a fixed character grid, a block cursor, and green or amber text on black. - [Terrazzo](https://vocab.design/terrazzo.md): A background pattern of small irregular chips scattered on a plain field, copied from poured stone flooring and used flat and multicolored behind interface content. - [Text balancing](https://vocab.design/text-balancing.md): Choosing line breaks so a short block of text has lines of roughly equal length instead of a long first line and a stub second one. - [Text box trim](https://vocab.design/text-box-trim.md): Cutting the leftover space above and below a line of text so the box hugs the cap height and baseline instead of the font's full ascent and descent. - [Text columns](https://vocab.design/text-columns.md): Flowing one block of running text into several columns that fill and balance automatically, with an optional rule drawn between them. - [Text field](https://vocab.design/text-field.md): A single line box for typed input, carrying a label, an optional hint, and the error message shown when what was typed does not pass. - [Text spacing](https://vocab.design/text-spacing.md): The requirement that a reader can increase line height, letter spacing, word spacing, and paragraph spacing without any content being lost or clipped. - [Text area](https://vocab.design/textarea.md): A multi-line text box, usually resizable, for input that will not fit on one line: a comment, a description, an address, a note. - [The fold](https://vocab.design/the-fold.md): The bottom edge of the first screenful, above which content is seen without any scrolling and below which it must be earned. - [Throttle](https://vocab.design/throttle.md): Capping how often a continuous stream of input is acted on, so a response fires at a steady rate instead of on every event. - [Thumb zone](https://vocab.design/thumb-zone.md): The arc of a phone screen a thumb reaches comfortably in a one handed grip, with harder to reach bands above and across from it. - [Thumbnail](https://vocab.design/thumbnail.md): A small stand-in image for a larger one, cropped rather than letterboxed so a row of them lines up. - [Tick marks](https://vocab.design/tick-marks.md): The small notches printed along a slider track that show the discrete stops the handle can land on. - [3D tilt](https://vocab.design/tilt-effect.md): Rotating a card in perspective toward the pointer so it appears to tip in three dimensions, often with a moving highlight to sell the depth. - [Time picker](https://vocab.design/time-picker.md): A control for choosing a time of day, either as a dial you tap around or as hour and minute lists. - [Timeline](https://vocab.design/timeline.md): A vertical or horizontal line of dated events, each pinned to the line by a marker and reading in order. - [Timeout warning](https://vocab.design/timeout-warning.md): A warning before a session or form expires with a simple way to extend it, so a slower reader does not lose their work silently. - [Tint](https://vocab.design/tint.md): A colour with white mixed in, lighter than the original hue and used for faint fills, hover washes and subtle backgrounds. - [Tinted neutral](https://vocab.design/tinted-neutral.md): A grey with a trace of the brand hue mixed in, so backgrounds and borders belong to the palette instead of reading as a separate, colder system. - [Tiny tweaks](https://vocab.design/tiny-tweaks.md): The lightest responsive pattern: a single column design that only adjusts type size, image size and margins as the screen changes. - [Title bar](https://vocab.design/title-bar.md): The strip along the top of a window carrying its title and window controls, and the region you drag to move the window. - [Title case](https://vocab.design/title-case.md): Capitalising the first letter of each significant word in a heading or label, leaving short articles, conjunctions and prepositions lowercase. - [Tittle](https://vocab.design/tittle.md): The dot above a lowercase i or j. - [Toast](https://vocab.design/toast.md): A brief, self-dismissing message that appears at a screen edge to confirm an action or report status without interrupting the user's flow. - [Tofu](https://vocab.design/tofu.md): The empty rectangle a font renders when it has no glyph for a character, named for the block of bean curd it resembles. - [Toggle button](https://vocab.design/toggle-button.md): A button that stays pressed, reporting an on or off state through aria-pressed rather than firing and returning. - [Toggle group](https://vocab.design/toggle-group.md): A set of toggle buttons treated as one control, either single select like radios or multi select like a row of formatting toggles. - [Toggletip](https://vocab.design/toggletip.md): A tip revealed by clicking rather than hovering, so it works by touch and may contain links or controls a tooltip could not. - [Toolbar](https://vocab.design/toolbar.md): A grouped row of controls acting on the current view, sharing one tab stop and moving focus between its items with arrow keys. - [Tooltip](https://vocab.design/tooltip.md): A brief text label shown on hover or keyboard focus that names or explains the element it points at, and carries nothing you can interact with. - [Top layer](https://vocab.design/top-layer.md): The layer above everything else in a document where fullscreen elements, modal dialogs and popovers render, escaping every ancestor's clipping and stacking order. - [Touch target](https://vocab.design/touch-target.md): The area of a control that answers a press, padded out around whatever is drawn so a fingertip can hit it without catching its neighbours. - [Touch target size](https://vocab.design/touch-target-size.md): The minimum area a control must offer a finger or imprecise pointer, measured on the activation region rather than the painted glyph. - [Track](https://vocab.design/track.md): The groove a slider thumb or scrollbar travels along, usually drawn as filled before the handle and empty after it. - [Tracking](https://vocab.design/tracking.md): The uniform space added to or removed from every letter across a run of text. - [Transcript](https://vocab.design/transcript.md): A full text version of time based media, readable without playing it and searchable by both people and machines. - [Transfer list](https://vocab.design/transfer-list.md): Two side by side lists with arrow buttons between them, used to move items from available to chosen and back. - [Transparency checkerboard](https://vocab.design/transparency-checkerboard.md): The light grey and white checker grid a design tool paints behind transparent regions, a convention so universal that the pattern itself now reads as meaning alpha. - [Tree select](https://vocab.design/tree-select.md): A select whose popup is a tree, so options can be chosen at any depth with parents collapsing over their children. - [Tree grid](https://vocab.design/treegrid.md): A table whose rows nest and expand like a tree, so hierarchy and columns of data coexist in one grid. - [Tree view](https://vocab.design/treeview.md): A nested list where branches expand and collapse in place, navigated with arrow keys as a single tab stop. - [Triadic color scheme](https://vocab.design/triadic-colors.md): A palette of three hues spaced evenly around the colour wheel, vivid by construction and usually applied with one hue dominant. - [Trick wording](https://vocab.design/trick-wording.md): Phrasing a choice so its plain reading is the opposite of its effect, typically through double negatives or a label that describes the wrong outcome. - [True black theme](https://vocab.design/true-black-theme.md): A dark palette whose background is pure black rather than near black, which switches OLED pixels off entirely but makes elements look like they float in a void. - [Truncated axis](https://vocab.design/truncated-axis.md): Starting a value axis above zero so differences look bigger than they are; honest for lines and dots, a lie for bars. - [Truncation](https://vocab.design/truncation.md): Cutting text that does not fit and marking the cut, usually with an ellipsis, so the reader knows something was removed. - [Tween](https://vocab.design/tween.md): A single animation from one value to another over a duration, named for the in-between frames a computer fills in. - [12 column grid](https://vocab.design/twelve-column-grid.md): The web's default column count, chosen because twelve divides cleanly into halves, thirds, quarters and sixths. - [Type scale](https://vocab.design/type-scale.md): The fixed set of text sizes a design allows, chosen so sizes relate to each other rather than being picked one at a time. - [Type specimen](https://vocab.design/type-specimen.md): A display of a typeface's characters, sizes, and styles made to show what the face can do rather than to communicate the text itself. - [Type to confirm](https://vocab.design/type-to-confirm.md): Guarding a destructive action by making the reader type the name of the thing being destroyed before the confirm button becomes usable. - [Typeahead](https://vocab.design/typeahead.md): Offering suggestions that update on every keystroke, drawn from a live query, so the reader picks a result rather than finishing the phrase. - [Typeface](https://vocab.design/typeface.md): The designed set of letterforms itself, as distinct from a font, which is one particular file or instance you actually use. - [Typewriter effect](https://vocab.design/typewriter-effect.md): Revealing text one character at a time, as if it were being typed, usually with a blinking caret trailing the last letter. - [Typing indicator](https://vocab.design/typing-indicator.md): The three bouncing dots shown while someone is composing a reply, or while an assistant is preparing one. - [Typographic color](https://vocab.design/typographic-color.md): The overall lightness or darkness a block of text produces when you stop reading it and look at it as a grey texture. - [Typographic hierarchy](https://vocab.design/typographic-hierarchy.md): The ordering of text by visual weight so a reader can tell at a glance what is a title, what is body, and what is a caption. - [Typography token](https://vocab.design/typography-token.md): A named bundle of type values (family, size, weight, line height, tracking) that a design system hands out instead of raw numbers. - [Underline](https://vocab.design/underline.md): A rule drawn under text, on the web the default marker for a link, ideally set to skip the descenders it would otherwise cross. - [Undo](https://vocab.design/undo.md): Letting an action run immediately and offering to reverse it afterwards, instead of stopping to ask whether the reader really meant it. - [Universal navigation](https://vocab.design/universal-navigation.md): A slim bar that links a subsite back to its parent organisation's other sites, sitting above the subsite's own global navigation. - [Unsaved changes guard](https://vocab.design/unsaved-changes-guard.md): Warning the reader that edits will be lost before a navigation or close is allowed to proceed, and offering to save or discard first. - [Use of color](https://vocab.design/use-of-color.md): The rule that colour must never be the only carrier of meaning, so a red field also needs an icon, wording, or shape change. - [Utility bar](https://vocab.design/utility-bar.md): A persistent bar docked to the bottom of an application holding small tools that open into panels without leaving the current page. - [Utility navigation](https://vocab.design/utility-navigation.md): The strip of secondary tools and account actions, sign in, search, language, cart, kept apart from the links that describe the site's content. - [Vaporwave](https://vocab.design/vaporwave.md): A retro internet look of magenta and cyan gradients, grid horizons, Japanese type, statuary, and 90s desktop chrome used ironically. - [Variable font](https://vocab.design/variable-font.md): One font file that contains a continuous design space, so any weight, width, or other axis value between the extremes can be requested. - [Variation axis](https://vocab.design/variation-axis.md): One dimension a variable font can move along, named by a four-letter tag: lowercase for the five registered axes, uppercase for custom ones. - [Velocity skew](https://vocab.design/velocity-skew.md): Skewing or stretching content in proportion to how fast the page is scrolling and easing it back to square when the scroll stops, so speed shows up in the shape of the content. - [Verbosity](https://vocab.design/verbosity.md): How much a screen reader says about each thing it reaches, a user setting that decides whether your carefully written description is heard at all. - [Vernacular web](https://vocab.design/vernacular-web.md): The amateur homepage look of the GeoCities era: tiled backgrounds, sparkle GIFs, under construction signs, midi music, and hit counters. - [Vertical rhythm](https://vocab.design/vertical-rhythm.md): Spacing every block of text by multiples of one line height so the page keeps an even beat from top to bottom. - [Vertical writing mode](https://vocab.design/vertical-writing-mode.md): Setting lines to run top to bottom in columns rather than left to right, as traditional Chinese, Japanese, and Korean typography does. - [VHS aesthetic](https://vocab.design/vhs-aesthetic.md): A look that imitates a worn videotape: tracking bands, smeared color bleeding past edges, interlace comb artifacts, and burned-in timecode or REC overlays. - [Vibrancy](https://vocab.design/vibrancy.md): Apple's treatment where foreground colour is derived from the blurred content behind a material, so labels on a translucent panel shift with whatever they sit over. - [Video player](https://vocab.design/video-player.md): A framed video with the controls needed to play, seek, mute and caption it, sized so the controls never crowd the picture. - [View progress timeline](https://vocab.design/view-progress-timeline.md): A scroll timeline measured by one element's passage through the scrollport, with named ranges for entering, being contained, covering, and exiting. - [View transition](https://vocab.design/view-transition.md): An animated change between two states of a page, where the browser photographs before and after and interpolates the elements the two have in common. - [Viewport](https://vocab.design/viewport.md): The visible rectangle of a page inside the browser window, excluding the browser's own bars, and the unit basis for vh and vw. - [Vignette](https://vocab.design/vignette.md): A gradual darkening toward the edges of an image that pulls the eye to the centre, borrowed from lens falloff and applied deliberately for focus and mood. - [Virtual keyboard](https://vocab.design/virtual-keyboard.md): The on screen keyboard a device raises for a field, whose key set the field itself chooses by declaring what kind of value it wants. - [Visual balance](https://vocab.design/visual-balance.md): The distribution of visual weight across a composition, reached by mirroring elements, by setting one large element against several small ones, or by radiating from a centre. - [Visual hierarchy](https://vocab.design/visual-hierarchy.md): The ordering of elements by visual weight, size, contrast, position and spacing, so a reader learns what matters most without being told. - [Visually hidden](https://vocab.design/visually-hidden.md): Content removed from the visual layout but left in the accessibility tree, so screen readers announce what the design leaves unsaid. - [Voice control](https://vocab.design/voice-control.md): Operating an interface by speaking control names or numbered overlays, which makes the visible wording of a control its address. - [Watermark](https://vocab.design/watermark.md): Repeating faint text or a mark tiled across content to claim it or to mark it as a draft or a preview. - [Waveform](https://vocab.design/waveform.md): An audio track drawn as a row of amplitude bars, used both to show what is in the file and as the surface you scrub along. - [Web font](https://vocab.design/web-font.md): A font file downloaded by the page rather than taken from the reader's device, declared in CSS and delivered like any other asset. - [Welcome mat](https://vocab.design/welcome-mat.md): A full width introduction shown on first entry to a feature, listing what is new or what to set up, with a way to skip it for good. - [Wheel picker](https://vocab.design/wheel-picker.md): A spinning drum of values that snaps to the item under a fixed selection line, the iOS way of choosing from a short list. - [Whitespace](https://vocab.design/whitespace.md): The empty area between and around elements, treated as an active design material rather than as leftover space. - [Wide gamut](https://vocab.design/wide-gamut.md): Colour beyond what sRGB can express, addressed in CSS through spaces such as display-p3 and rec2020 and shown only on displays that reach that far. - [Widget](https://vocab.design/widget.md): A small, glanceable view of an app placed on a system surface such as a home screen or desktop, sized in fixed slots rather than freely. - [Widow](https://vocab.design/widow.md): A short last line of a paragraph, often a single word, stranded at the top of the next column or page. - [Window controls](https://vocab.design/window-controls.md): The cluster of close, minimise and zoom controls in a window's title bar, three coloured dots on macOS and three glyphs on Windows. - [Window size class](https://vocab.design/window-size-class.md): A named bucket for how much width an app window has, such as compact, medium and expanded, used in place of raw device categories. - [Windows Aero](https://vocab.design/windows-aero.md): The Windows Vista and 7 look built on translucent glass window frames, soft outer glows, reflections, and animated window transitions. - [Wipe](https://vocab.design/wipe.md): A transition where a moving edge or mask travels across the frame, replacing what was there with what comes next. - [Wizard](https://vocab.design/wizard.md): A flow broken into ordered steps with back and next controls, where each step validates before the next one is allowed. - [Word break](https://vocab.design/word-break.md): Whether a long unbroken string is allowed to split mid-word rather than overflow its container, and where that split may happen. - [Word spacing](https://vocab.design/word-spacing.md): The width of the gaps between words, which justification stretches and which, set too wide, opens rivers down a paragraph. - [X-height](https://vocab.design/x-height.md): The height of a lowercase x in a typeface, measured from the baseline, which is what makes two fonts at the same point size look different sizes. - [Y2K aesthetic](https://vocab.design/y2k-aesthetic.md): The turn of the millennium look of chrome type, bubble shapes, translucent plastic, and lens flares, revived as a web and app style. - [Yo-yo loop](https://vocab.design/yoyo-loop.md): A repeating animation that plays forward then backward instead of jumping back to the start, so a loop has no visible seam. - [Z pattern](https://vocab.design/z-pattern.md): The scanning shape on sparse pages: across the top, diagonally down to the lower left, then across the bottom to the final call to action. - [Zebra striping](https://vocab.design/zebra-striping.md): Alternating row backgrounds in a table so the eye can track a single row across many columns. - [Zero state](https://vocab.design/zero-state.md): The first-run screen a feature shows before any data exists, written to teach the feature rather than to report emptiness. - [Zero UI](https://vocab.design/zero-ui.md): A paradigm where the screen stops being the interface and the interaction happens through voice, gesture, presence, or sensors, so the system responds without anything to look at. - [Zero-width space](https://vocab.design/zero-width-space.md): An invisible character that takes no width and adds a legal break point, letting a long string wrap without showing a hyphen. - [Zigzag layout](https://vocab.design/zigzag-layout.md): Alternating rows that flip which side the image and the text sit on, so the eye zigzags down a list of features. - [Zoom transition](https://vocab.design/zoom-transition.md): A presentation that scales a tapped element up into the full view it opens, so the destination appears to come from the thing that was touched.