{"set":"vocab.design","url":"https://vocab.design","license":"CC BY 4.0","terms":[{"name":"Abbreviation","slug":"abbreviation","category":"typography","status":"published","definition":"A shortened form of a word or phrase, from Dr. to NASA, with its own typographic conventions and an expansion assistive tech can speak.","aliases":[{"name":"acronym"},{"name":"initialism"},{"name":"abbr"},{"name":"abbr element","source":"whatwg-html"},{"name":"abbreviations","source":"wcag"},{"name":"acronym expansion","source":"community"},{"name":"expansion on first use","source":"community"}],"tags":["a11y"],"relations":{"contrastWith":["pronunciation","small-caps"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: <abbr>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr"},{"title":"WCAG 2.2: Abbreviations","url":"https://www.w3.org/TR/WCAG22/#abbreviations"}],"demo":"inline","useWhen":"shortened forms need setting, marking up, or expanding"},{"name":"Accent color","slug":"accent-color","category":"color","status":"published","definition":"The one saturated colour an interface spends sparingly on the things it wants clicked, so its rarity is what makes it read as important.","aliases":[{"name":"primary color","source":"material"},{"name":"tint color","source":"hig"},{"name":"brand accent"},{"name":"highlight color"}],"tags":["tokens"],"relations":{"contrastWith":["brand-color","container-color","status-color"],"variantOf":[],"partOf":[],"seeAlso":["color-token","sixty-thirty-ten-rule"]},"implementations":[{"system":"radix","name":"accent scale","url":"https://www.radix-ui.com/themes/docs/theme/color"},{"system":"material","name":"Primary","url":"https://m3.material.io/styles/color/roles"}],"sources":[{"title":"MDN: accent-color","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/accent-color"}],"demo":"inline","useWhen":"the one colour reserved for the primary action"},{"name":"Access key","slug":"access-key","category":"interaction","status":"published","definition":"A single letter, usually shown underlined, that jumps straight to a menu or control once the access modifier is held.","aliases":[{"name":"keyboard mnemonic","source":"community"},{"name":"mnemonic","source":"community"},{"name":"underlined letter","source":"community"},{"name":"accesskey","source":"mdn"}],"tags":["a11y","keyboard"],"relations":{"contrastWith":["character-key-shortcuts","key-sequence","modifier-key"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Mnemonics (keyboard)","url":"https://en.wikipedia.org/wiki/Mnemonics_(keyboard)"}],"demo":"inline","useWhen":"the underlined letter that reaches a menu item"},{"name":"Accessibility annotation","slug":"accessibility-annotation","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"a11y annotation kit","source":"community"},{"name":"annotation toolkit","source":"primer"},{"name":"design spec annotations","source":"community"},{"name":"focus order annotation","source":"primer"}],"tags":[],"relations":{"contrastWith":["name-role-value"],"variantOf":[],"partOf":[],"seeAlso":["accessibility-tree","focus-order"]},"implementations":[{"system":"fluent","name":"Design accessibility specs","url":"https://fluent2.microsoft.design/accessibility"}],"sources":[{"title":"Primer: Annotation Toolkit","url":"https://primer.style/accessibility/tools-and-resources/annotation-toolkit/"}],"demo":"inline","useWhen":"handing a design over without losing the semantics"},{"name":"Accessibility grouping","slug":"accessibility-grouping","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"shouldGroupAccessibilityChildren","source":"uikit"},{"name":"merge semantics","source":"flutter"},{"name":"importantForAccessibility","source":"android"},{"name":"accessibility element","source":"uikit"},{"name":"screen reader focusable","source":"android"}],"tags":[],"relations":{"contrastWith":["presentational-children","group-label","owned-element"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Semantics in Compose, Android Developers","url":"https://developer.android.com/develop/ui/compose/accessibility/semantics"},{"title":"View.ImportantForAccessibility, Microsoft Learn","url":"https://learn.microsoft.com/dotnet/api/android.views.view.importantforaccessibility"},{"title":"Accessibility, React Native","url":"https://reactnative.dev/docs/accessibility"}],"demo":"inline","useWhen":"a card reads as five fragments instead of one item"},{"name":"Accessibility overlay","slug":"accessibility-overlay","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"overlay widget","source":"community"},{"name":"accessibility widget","source":"community"},{"name":"a11y toolbar","source":"community"},{"name":"compliance plugin","source":"community"}],"tags":[],"relations":{"contrastWith":["conformance-level"],"variantOf":[],"partOf":[],"seeAlso":["first-rule-of-aria","dark-pattern"]},"implementations":[],"sources":[{"title":"Overlay Fact Sheet","url":"https://overlayfactsheet.com/en/"}],"demo":"inline","useWhen":"someone proposes buying a widget instead of fixing"},{"name":"Accessibility trait","slug":"accessibility-trait","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"accessibilityTraits","source":"uikit"},{"name":"UIAccessibilityTraits","source":"uikit"},{"name":"accessibilityRole","source":"community"},{"name":"mobile role","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["name-role-value","role-description"],"variantOf":[],"partOf":[],"seeAlso":["semantic-html"]},"implementations":[],"sources":[{"title":"Deque: What iOS accessibility traits actually do","url":"https://www.deque.com/blog/ios-traits/"},{"title":"Semantics in Compose, Android Developers","url":"https://developer.android.com/develop/ui/compose/accessibility/semantics"}],"demo":"inline","useWhen":"a custom native control announces as plain text"},{"name":"Accessibility tree","slug":"accessibility-tree","category":"accessibility","status":"published","definition":"The parallel tree a browser derives from the DOM, holding the role, name, state, and value that assistive technology actually reads.","aliases":[{"name":"a11y tree","source":"community"},{"name":"accessibility node","source":"community"},{"name":"accessibility API","source":"community"},{"name":"UI Automation","source":"microsoft"},{"name":"IAccessible2","source":"community"},{"name":"off-screen model","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["presentational-children"],"variantOf":[],"partOf":[],"seeAlso":["semantic-html","accessible-name","screen-reader","accessibility-annotation","aria-hidden"]},"implementations":[],"sources":[{"title":"Erik Kroes: accessibility glossary","url":"https://www.erikkroes.nl/glossary/"},{"title":"MDN glossary: Accessibility","url":"https://developer.mozilla.org/en-US/docs/Glossary/Accessibility"}],"demo":"inline","useWhen":"talking about what assistive technology sees, not what renders"},{"name":"Accessible authentication","slug":"accessible-authentication","category":"accessibility","status":"published","definition":"A sign-in route that never requires a cognitive function test such as recalling a password or solving a puzzle without offering an alternative.","aliases":[{"name":"cognitive function test","source":"wcag"},{"name":"no CAPTCHA","source":"community"},{"name":"allow paste in password","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["captcha","passkey","magic-link","one-time-code-login"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Accessible Authentication (Minimum)","url":"https://www.w3.org/TR/WCAG22/#accessible-authentication-minimum"}],"demo":"inline","useWhen":"a login demands memory or puzzle solving"},{"name":"Accessible description","slug":"accessible-description","category":"accessibility","status":"published","definition":"Supplementary text announced after a control's name, carrying hint or error detail without becoming part of the name itself.","aliases":[{"name":"aria-describedby","source":"aria"},{"name":"aria-description","source":"aria"},{"name":"help text","source":"community"}],"tags":[],"relations":{"contrastWith":["helper-text","long-description","tooltip","accessible-name"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"APG: Providing Accessible Names and Descriptions","url":"https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/"},{"title":"MDN: aria-describedby","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby"}],"demo":"inline","useWhen":"extra detail that should follow the name, not replace it"},{"name":"Accessible name","slug":"accessible-name","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"accname","source":"w3c"},{"name":"accessible name computation","source":"w3c"},{"name":"name from content","source":"aria"},{"name":"a11y name"},{"name":"accessibilityLabel","source":"hig"},{"name":"contentDescription","source":"android"},{"name":"double speak"}],"tags":[],"relations":{"contrastWith":["alt-text","label-association","accessible-description","role-description","label-in-name","name-role-value"],"variantOf":[],"partOf":[],"seeAlso":["accessibility-tree","consistent-identification","link-purpose"]},"implementations":[],"sources":[{"title":"Accessible Name and Description Computation 1.2","url":"https://www.w3.org/TR/accname-1.2/"},{"title":"APG: Providing Accessible Names and Descriptions","url":"https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/"}],"demo":"inline","useWhen":"asking what a control is actually called out loud"},{"name":"Accordion","slug":"accordion","category":"component","status":"published","definition":"A stack of headers, each expanding to reveal its own section of content.","aliases":[{"name":"expansion panel","source":"material"},{"name":"collapsible list","source":"community"}],"tags":[],"relations":{"contrastWith":["disclosure","progressive-disclosure","expandable-row","tabs"],"variantOf":[],"partOf":[],"seeAlso":["height-animation"]},"implementations":[{"system":"aria-apg","name":"Accordion pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/"},{"system":"carbon","name":"Accordion","url":"https://carbondesignsystem.com/components/accordion/usage/"},{"system":"radix","name":"Accordion","url":"https://www.radix-ui.com/primitives/docs/components/accordion"}],"sources":[{"title":"ARIA APG: Accordion pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/accordion/"}],"demo":"inline","useWhen":"a stack of sections, each opening in place"},{"name":"Achievement badge","slug":"achievement-badge","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"collectible achievements","source":"ui-patterns"},{"name":"trophy","source":"community"},{"name":"achievement","source":"community"},{"name":"unlock","source":"community"}],"tags":["gamification"],"relations":{"contrastWith":["badge"],"variantOf":[],"partOf":[],"seeAlso":["streak","leaderboard","confetti-burst"]},"implementations":[],"sources":[{"title":"UI Patterns: collectible achievements","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"the collectible award shown on a profile"},{"name":"Acid graphics","slug":"acid-graphics","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"acid design"},{"name":"acid house revival"},{"name":"acid brutalism","source":"community"},{"name":"rave graphics"}],"tags":[],"relations":{"contrastWith":["anti-design","psychedelic-style"],"variantOf":[],"partOf":[],"seeAlso":["y2k-aesthetic"]},"implementations":[],"sources":[{"title":"AIGA Eye on Design: Acid graphics are the new psychedelia","url":"https://eyeondesign.aiga.org/acid-graphics-are-the-new-psychedelia-with-a-heady-dose-of-cynicism/"},{"title":"Aesthetics Wiki: Acid Design","url":"https://aesthetics.fandom.com/wiki/Acid_Design"}],"demo":"inline","useWhen":"chrome, warped type, and rave motifs used ironically"},{"name":"Action list","slug":"action-list","category":"component","status":"published","definition":"A vertical list of commands with icons, descriptions and dividers, the shared body used inside menus, panels and side sheets.","aliases":[{"name":"action menu","source":"primer"},{"name":"command list","source":"community"},{"name":"menu list","source":"community"}],"tags":[],"relations":{"contrastWith":["navigation-menu","menu-button","listbox"],"variantOf":[],"partOf":[],"seeAlso":["context-menu"]},"implementations":[],"sources":[{"title":"Design Systems Surf: component index","url":"https://designsystems.surf/components"}],"demo":"inline","useWhen":"a list of commands reused inside several surfaces"},{"name":"Action sheet","slug":"action-sheet","category":"component","status":"published","definition":"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.","aliases":[{"name":"action sheets","source":"hig"},{"name":"bottom action menu","source":"community"},{"name":"option sheet","source":"community"}],"tags":["platform-registers","touch"],"relations":{"contrastWith":["drawer","context-menu","bottom-sheet","share-sheet"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"Action sheets","url":"https://developer.apple.com/design/human-interface-guidelines/action-sheets"}],"sources":[{"title":"Apple Human Interface Guidelines: Action sheets","url":"https://developer.apple.com/design/human-interface-guidelines/action-sheets"}],"demo":"inline","useWhen":"choices for an action you just started, on a phone"},{"name":"Active descendant","slug":"active-descendant","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-activedescendant","source":"aria"},{"name":"virtual focus","source":"community"},{"name":"fake focus","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["roving-tabindex","owned-element"],"variantOf":[],"partOf":[],"seeAlso":["combobox"]},"implementations":[],"sources":[{"title":"APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"},{"title":"MDN: aria-activedescendant","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant"}],"demo":"inline","useWhen":"the typing field must keep focus while a list moves"},{"name":"Activity feed","slug":"activity-feed","category":"pattern","status":"published","definition":"A reverse chronological list of things that happened, each entry naming an actor, a verb, and an object, grouped when many are alike.","aliases":[{"name":"activity stream","source":"ui-patterns"},{"name":"news feed","source":"community"},{"name":"audit log","source":"community"},{"name":"what's happening","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":["timeline","notification-digest"],"variantOf":[],"partOf":[],"seeAlso":["notification-center"]},"implementations":[],"sources":[{"title":"UI Patterns: Activity Stream","url":"https://ui-patterns.com/patterns/ActivityStream"}],"demo":"inline","useWhen":"the running list of who did what, most recent first"},{"name":"Adaptive layout","slug":"adaptive-layout","category":"layout","status":"published","definition":"A layout that switches between a few discrete arrangements chosen per size class, rather than flowing continuously as the window changes.","aliases":[{"name":"adaptive design","source":"community"},{"name":"adaptive versus responsive","source":"community"},{"name":"adaptive apps","source":"android"}],"tags":[],"relations":{"contrastWith":["responsive-web-design","intrinsic-web-design","layout-shifter"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Canonical layouts, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/canonical-layouts"}],"demo":"inline","useWhen":"distinguishing snapping between layouts from fluid reflow"},{"name":"Additive animation","slug":"additive-animation","category":"motion","status":"published","definition":"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.","aliases":[{"name":"animation-composition","source":"css"},{"name":"composite: add","source":"community"},{"name":"accumulate","source":"css"},{"name":"additive transform","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["interruptible-animation"],"variantOf":[],"partOf":[],"seeAlso":["keyframe"]},"implementations":[],"sources":[{"title":"MDN: animation-composition","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition"},{"title":"CSS-Tricks: additive animation with the Web Animations API","url":"https://css-tricks.com/additive-animation-web-animations-api/"}],"demo":"inline","useWhen":"a repeated trigger should stack rather than snap back to the start"},{"name":"Address autocomplete","slug":"address-autocomplete","category":"pattern","status":"published","definition":"Replacing a set of address fields with one lookup that suggests full addresses after a few characters and fills the rest on selection.","aliases":[{"name":"address lookup","source":"govuk"},{"name":"postcode lookup","source":"govuk"},{"name":"address finder","source":"community"},{"name":"autofill address","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["input-purpose"],"variantOf":[],"partOf":[],"seeAlso":["typeahead"]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Addresses","url":"https://design-system.service.gov.uk/patterns/addresses/"}],"demo":"inline","useWhen":"typing a postcode fills in the whole address"},{"name":"Affordance","slug":"affordance","category":"interaction","status":"published","definition":"What an element makes possible for the person using it, such as a surface that can be pushed, dragged, or scrolled.","aliases":[{"name":"perceived affordance","source":"community"},{"name":"action possibility","source":"community"},{"name":"affordances","source":"community"}],"tags":[],"relations":{"contrastWith":["signifier"],"variantOf":[],"partOf":[],"seeAlso":["direct-manipulation","skeuomorphism","interface-metaphor"]},"implementations":[],"sources":[{"title":"Supercharge: UI glossary","url":"https://supercharge.design/blog/ui-glossary-list-of-essential-ui-design-terms"},{"title":"Wikipedia: Affordance","url":"https://en.wikipedia.org/wiki/Affordance"}],"demo":"inline","useWhen":"naming what an element allows a person to do"},{"name":"Afrofuturism","slug":"afrofuturism","category":"aesthetic","status":"published","definition":"A style that pictures technology through the African diaspora, combining cosmic imagery, textile and mask pattern, gold and indigo, and geometric ornament used structurally.","aliases":[{"name":"Afro-futurism"},{"name":"Afrofuturist design"}],"tags":[],"relations":{"contrastWith":["retro-futurism","solarpunk"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Aesthetics Wiki: Afrofuturism","url":"https://aesthetics.fandom.com/wiki/Afrofuturism"},{"title":"Wikipedia: Afrofuturism","url":"https://en.wikipedia.org/wiki/Afrofuturism"}],"demo":"inline","useWhen":"a future told through African diaspora imagery"},{"name":"Alert dialog","slug":"alert-dialog","category":"component","status":"published","definition":"A dialog that interrupts the flow to demand acknowledgement or confirmation of a consequential action before anything else can continue.","aliases":[{"name":"alertdialog"},{"name":"alert modal"}],"tags":[],"relations":{"contrastWith":["modal-dialog","confirmation-dialog","toast","live-region"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Alert and Message Dialogs","url":"https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/"},{"system":"radix","name":"Alert Dialog","url":"https://www.radix-ui.com/primitives/docs/components/alert-dialog"}],"sources":[{"title":"ARIA Authoring Practices Guide: Alert and Message Dialogs","url":"https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/"}],"demo":"inline","useWhen":"a dialog that announces itself and blocks until answered"},{"name":"All caps","slug":"all-caps","category":"typography","status":"published","definition":"Text set entirely in capitals, which reads slower than mixed case because the word's outline shape disappears.","aliases":[{"name":"uppercase"},{"name":"caps"},{"name":"text-transform: uppercase","source":"css"},{"name":"capitals"}],"tags":[],"relations":{"contrastWith":["small-caps","title-case","sentence-case"],"variantOf":[],"partOf":[],"seeAlso":["letterpress-text"]},"implementations":[],"sources":[{"title":"All caps (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"Title case vs sentence case in UI","url":"https://www.everyinteraction.com/articles/title-case-vs-sentence-case-in-ui/"}],"demo":"inline","useWhen":"short labels that must shout, never sentences"},{"name":"Alpha channel","slug":"alpha-channel","category":"color","status":"published","definition":"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.","aliases":[{"name":"alpha","source":"community"},{"name":"rgba","source":"community"},{"name":"alpha scale","source":"radix"},{"name":"transparency channel"}],"tags":[],"relations":{"contrastWith":["opacity","alpha-compositing","transparency-checkerboard"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"radix","name":"Alpha variants","url":"https://www.radix-ui.com/colors"}],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"},{"title":"Radix Colors","url":"https://www.radix-ui.com/colors"}],"demo":"inline","useWhen":"a colour that must blend with an unknown background"},{"name":"Alpha compositing","slug":"alpha-compositing","category":"color","status":"published","definition":"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.","aliases":[{"name":"compositing","source":"community"},{"name":"premultiplied alpha","source":"community"},{"name":"source-over","source":"community"},{"name":"straight alpha","source":"community"}],"tags":[],"relations":{"contrastWith":["blend-mode","alpha-channel"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Alpha Compositing","url":"https://ciechanow.ski/alpha-compositing/"},{"title":"Premultiplied alpha (Win2D)","url":"https://learn.microsoft.com/en-us/windows/apps/develop/win2d/premultiplied-alpha"}],"demo":"inline","useWhen":"predicting the result of stacking translucent layers"},{"name":"Alt text","slug":"alt-text","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"alternative text","source":"wcag"},{"name":"text alternative","source":"wcag"},{"name":"alt attribute","source":"html"},{"name":"image description"}],"tags":["media"],"relations":{"contrastWith":["accessible-name","visually-hidden","decorative-image","chart-description","images-of-text","long-description"],"variantOf":[],"partOf":[],"seeAlso":["image"]},"implementations":[{"system":"fluent","name":"Rich media and alternatives","url":"https://fluent2.microsoft.design/accessibility"}],"sources":[{"title":"WCAG 2.2: Non-text Content","url":"https://www.w3.org/TR/WCAG22/#non-text-content"},{"title":"WebAIM: Images and Alternative Text","url":"https://webaim.org/articles/"}],"demo":"inline","useWhen":"writing what an image says when it cannot be seen"},{"name":"Analogous colors","slug":"analogous-colors","category":"color","status":"published","definition":"A palette built from hues that neighbour each other on the wheel, giving a calm scheme with no colour fighting another for attention.","aliases":[{"name":"adjacent colors","source":"community"},{"name":"neighbouring hues"}],"tags":[],"relations":{"contrastWith":["complementary-colors","triadic-colors","monochromatic-palette"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Design Glossary: Basic Color Terminology","url":"https://design4users.com/basic-color-terminology/"}],"demo":"inline","useWhen":"a quiet palette of neighbouring hues"},{"name":"Anchor positioning","slug":"anchor-positioning","category":"layout","status":"published","definition":"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.","aliases":[{"name":"CSS anchor positioning","source":"mdn"},{"name":"anchor-name","source":"css"},{"name":"position-anchor","source":"css"},{"name":"position-try","source":"css"},{"name":"anchor-positioned element","source":"mdn"}],"tags":["web-platform"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["popover-arrow","containing-block","imposter","top-layer"]},"implementations":[],"sources":[{"title":"CSS anchor positioning, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning"}],"demo":"inline","useWhen":"pinning one element to another without JavaScript"},{"name":"Anti-design","slug":"anti-design","category":"aesthetic","status":"published","definition":"A deliberately awkward style that breaks layout, type, and color conventions so the interface reads as a statement rather than as a polished product.","aliases":[{"name":"ugly design","source":"community"},{"name":"intentionally ugly web design"},{"name":"anti-aesthetic"},{"name":"anti-polish","source":"uistyleguide"},{"name":"raw aesthetic","source":"uistyleguide"},{"name":"Internet Ugly","source":"namethatui"}],"tags":[],"relations":{"contrastWith":["brutalist-web-design","grunge-design","acid-graphics","maximalism","new-wave-design","vernacular-web"],"variantOf":[],"partOf":[],"seeAlso":["broken-grid"]},"implementations":[],"sources":[{"title":"Envato: Minimalism vs. maximalism, battle of the divisive design styles","url":"https://elements.envato.com/learn/minimalism-vs-maximalism-design-style"}],"demo":"inline","useWhen":"the rule breaking is the message"},{"name":"Anticipation","slug":"anticipation","category":"motion","status":"published","definition":"A small move in the opposite direction just before the main one, borrowed from character animation to telegraph what is about to happen.","aliases":[{"name":"wind-up","source":"community"},{"name":"pre-move","source":"community"},{"name":"anticipatory motion","source":"community"}],"tags":[],"relations":{"contrastWith":["overshoot","follow-through"],"variantOf":[],"partOf":[],"seeAlso":["squash-and-stretch"]},"implementations":[],"sources":[{"title":"IxDF: UI Animation, applying Disney's 12 principles to UI","url":"https://ixdf.org/literature/article/ui-animation-how-to-apply-disney-s-12-principles-of-animation-to-ui-design"},{"title":"Adobe: 12 principles of animation","url":"https://www.adobe.com/creativecloud/animation/discover/principles-of-animation.html"}],"demo":"inline","useWhen":"an action needs a wind-up so it does not start cold"},{"name":"APCA","slug":"apca","category":"color","status":"published","definition":"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.","aliases":[{"name":"Advanced Perceptual Contrast Algorithm"},{"name":"Lc value","source":"community"},{"name":"WCAG 3 contrast","source":"community"},{"name":"perceptual contrast"}],"tags":["a11y"],"relations":{"contrastWith":["color-vision-deficiency","conformance-level","large-text-threshold","contrast-ratio"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"radix","name":"Lc 60 and Lc 90 guarantee","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"sources":[{"title":"Radix Colors: understanding the scale","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"demo":"inline","useWhen":"scoring contrast in a way that accounts for text size and weight"},{"name":"Aperture","slug":"aperture","category":"typography","status":"published","definition":"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.","aliases":[{"name":"open counter"},{"name":"letter opening"}],"tags":[],"relations":{"contrastWith":["legibility","counter"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"},{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"why one sans feels clearer at small sizes"},{"name":"App bar","slug":"app-bar","category":"component","status":"published","definition":"The persistent bar across the top of an application carrying its title, navigation, and primary actions.","aliases":[{"name":"top app bar","source":"material"},{"name":"application bar"}],"tags":[],"relations":{"contrastWith":["page-header","toolbar","collapsing-toolbar","navigation-bar","title-bar"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Top app bar","url":"https://m3.material.io/components/top-app-bar/overview"}],"sources":[{"title":"Material Design 3: Top app bar","url":"https://m3.material.io/components/top-app-bar/overview"}],"demo":"inline","useWhen":"the app's own top bar, the same on every screen"},{"name":"App shell","slug":"app-shell","category":"layout","status":"published","definition":"The persistent frame of an application, its header, navigation and footer, that stays put while only the content region swaps as you move around.","aliases":[{"name":"application shell","source":"community"},{"name":"app frame","source":"community"},{"name":"shell layout","source":"community"},{"name":"application shells","source":"tailwind"},{"name":"app layout","source":"cloudscape"}],"tags":[],"relations":{"contrastWith":["scaffold","chrome"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Instant Loading Web Apps with an Application Shell Architecture","url":"https://developer.chrome.com/blog/app-shell"}],"demo":"inline","useWhen":"naming the part of the app that never reloads"},{"name":"App shortcut","slug":"app-shortcut","category":"component","status":"published","definition":"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.","aliases":[{"name":"home screen quick action","source":"hig"},{"name":"dock menu","source":"hig"},{"name":"quick action","source":"community"},{"name":"launcher shortcut","source":"android"},{"name":"long press shortcut","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["quick-settings-tile","widget"],"variantOf":[],"partOf":[],"seeAlso":["long-press"]},"implementations":[{"system":"hig","name":"Home Screen quick actions","url":"https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions"},{"system":"hig","name":"Dock menus","url":"https://developer.apple.com/design/human-interface-guidelines/dock-menus"}],"sources":[{"title":"Apple HIG: Home Screen quick actions","url":"https://developer.apple.com/design/human-interface-guidelines/home-screen-quick-actions"},{"title":"Android: App shortcuts overview","url":"https://developer.android.com/develop/ui/views/launch/shortcuts"}],"demo":"inline","useWhen":"a frequent action should skip the app launch"},{"name":"App silhouette","slug":"app-silhouette","category":"layout","status":"published","definition":"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.","aliases":[{"name":"silhouette","source":"fluent"},{"name":"app silhouettes","source":"fluent"},{"name":"top navigation silhouette","source":"fluent"},{"name":"left navigation silhouette","source":"fluent"}],"tags":[],"relations":{"contrastWith":["canonical-layout"],"variantOf":[],"partOf":[],"seeAlso":["scaffold"]},"implementations":[{"system":"fluent","name":"App silhouettes","url":"https://learn.microsoft.com/en-us/windows/apps/design/basics/app-silhouette"}],"sources":[{"title":"Windows app silhouettes, Microsoft Learn","url":"https://learn.microsoft.com/en-us/windows/apps/design/basics/app-silhouette"}],"demo":"inline","useWhen":"classifying an app by the shape of its chrome"},{"name":"Applied filters","slug":"applied-filters","category":"pattern","status":"published","definition":"A row of removable tokens above the results showing every filter currently in force, with a control to clear them all at once.","aliases":[{"name":"filter chips","source":"material"},{"name":"filter pills","source":"community"},{"name":"active filters","source":"community"},{"name":"filter tokens","source":"cloudscape"},{"name":"selected filters","source":"community"}],"tags":["search"],"relations":{"contrastWith":["faceted-filter","faceted-search"],"variantOf":[],"partOf":[],"seeAlso":["chip","bulk-actions"]},"implementations":[],"sources":[{"title":"Cloudscape: Filtering patterns","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"the removable tags showing which filters are on"},{"name":"Aqua","slug":"aqua","category":"aesthetic","status":"published","definition":"Apple's early Mac OS X look of glossy blue gel buttons, pinstripes, gumdrop window controls, and a pulsing default button.","aliases":[{"name":"lickable UI","source":"community"},{"name":"gel buttons"},{"name":"candy buttons","source":"community"},{"name":"gumdrop buttons","source":"community"}],"tags":[],"relations":{"contrastWith":["gloss","frutiger-aero","skeuomorphism","windows-aero","y2k-aesthetic"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Aqua (user interface)","url":"https://en.wikipedia.org/wiki/Aqua_(user_interface)"},{"title":"NameThatUI: Aqua","url":"https://namethatui.com/styles/aqua"}],"demo":"inline","useWhen":"candy-gel Mac controls from the 2000s"},{"name":"Arc motion","slug":"arc-motion","category":"motion","status":"published","definition":"Moving an element along a curved path rather than a straight line, so a change of position reads as natural rather than mechanical.","aliases":[{"name":"arcs","source":"community"},{"name":"curved motion path","source":"material"},{"name":"vertical-out arc","source":"material"}],"tags":[],"relations":{"contrastWith":["motion-path"],"variantOf":[],"partOf":[],"seeAlso":["directionality"]},"implementations":[{"system":"material","name":"Arc upward and arc downward","url":"https://m1.material.io/motion/movement.html"}],"sources":[{"title":"Material Design 1: duration and easing","url":"https://m1.material.io/motion/duration-easing.html"},{"title":"IxDF: UI Animation, applying Disney's 12 principles to UI","url":"https://ixdf.org/literature/article/ui-animation-how-to-apply-disney-s-12-principles-of-animation-to-ui-design"}],"demo":"inline","useWhen":"an element travels in two axes at once"},{"name":"aria-hidden","slug":"aria-hidden","category":"accessibility","status":"published","definition":"An attribute that removes an element and its whole subtree from the accessibility tree while leaving it visible on screen.","aliases":[{"name":"aria-hidden=\"true\"","source":"aria"},{"name":"hidden from assistive technology","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["inert","visually-hidden","presentation-role","decorative-image","hidden-but-focusable"],"variantOf":[],"partOf":[],"seeAlso":["accessibility-tree"]},"implementations":[],"sources":[{"title":"MDN: aria-hidden","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden"},{"title":"WAI-ARIA 1.2: aria-hidden","url":"https://www.w3.org/TR/wai-aria-1.2/#aria-hidden"}],"demo":"inline","useWhen":"hiding something from screen readers but not from eyes"},{"name":"ARIA notify","slug":"aria-notify","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"ariaNotify","source":"wicg"},{"name":"notification API","source":"wicg"},{"name":"confetti-free announcement","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["live-region"],"variantOf":[],"partOf":[],"seeAlso":["push-notification"]},"implementations":[],"sources":[{"title":"WICG AOM: Accessibility (ARIA) Notification API","url":"https://wicg.github.io/aom/notification-api.html"}],"demo":"inline","useWhen":"an announcement has no element it belongs to"},{"name":"Art Deco","slug":"art-deco","category":"aesthetic","status":"published","definition":"A 1920s luxury style of strict symmetry, stepped and fanned geometry, strong vertical emphasis, metallic gold on deep colour, and high contrast display capitals.","aliases":[{"name":"deco style"},{"name":"Streamline Moderne"},{"name":"Gatsby style","source":"community"}],"tags":[],"relations":{"contrastWith":["art-nouveau","mid-century-modern","constructivism"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Kittl: 60+ graphic design styles, names and descriptions","url":"https://www.kittl.com/blogs/design-styles-name-stl/"},{"title":"Big Human: 12 graphic design styles, a complete guide for 2026","url":"https://www.bighuman.com/blog/graphic-design-styles-guide"}],"demo":"inline","useWhen":"symmetrical geometric luxury, gold on deep colour"},{"name":"Art Nouveau","slug":"art-nouveau","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"nouveau style"},{"name":"Jugendstil"},{"name":"whiplash line","source":"community"}],"tags":[],"relations":{"contrastWith":["psychedelic-style","art-deco","steampunk"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Kittl: 60+ graphic design styles, names and descriptions","url":"https://www.kittl.com/blogs/design-styles-name-stl/"},{"title":"Wikipedia: Art Nouveau","url":"https://en.wikipedia.org/wiki/Art_Nouveau"}],"demo":"inline","useWhen":"botanical line ornament and curved frames"},{"name":"Ascender","slug":"ascender","category":"typography","status":"published","definition":"The part of a lowercase letter such as b, d, or h that rises above the x-height.","aliases":[{"name":"ascender line"},{"name":"ascent","source":"css"}],"tags":[],"relations":{"contrastWith":["descender","x-height","cap-height"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Ascender (Wikipedia)","url":"https://en.wikipedia.org/wiki/Ascender_(typography)"},{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"naming the strokes that reach above lowercase height"},{"name":"Aspect ratio box","slug":"aspect-ratio-box","category":"layout","status":"published","definition":"A container that holds a fixed width to height proportion whatever its size, so media reserves its space before it loads.","aliases":[{"name":"intrinsic ratio","source":"community"},{"name":"padding-top hack","source":"community"},{"name":"ratio box","source":"community"},{"name":"the frame","source":"every-layout"},{"name":"aspect-ratio","source":"css"},{"name":"respect for aspect","source":"web-dev"}],"tags":["media","perceived-performance"],"relations":{"contrastWith":["layout-shift","object-fit"],"variantOf":[],"partOf":[],"seeAlso":["chart-aspect-ratio","progressive-image-loading","skeleton-screen"]},"implementations":[],"sources":[{"title":"Layouts, Every Layout","url":"https://every-layout.dev/layouts/"}],"demo":"inline","useWhen":"reserving the right shaped hole before an image arrives"},{"name":"Asymmetric easing","slug":"asymmetric-easing","category":"motion","status":"published","definition":"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.","aliases":[{"name":"asymmetric duration","source":"community"},{"name":"directional easing","source":"community"},{"name":"in and out curves","source":"community"}],"tags":[],"relations":{"contrastWith":["motion-token"],"variantOf":[],"partOf":[],"seeAlso":["easing"]},"implementations":[],"sources":[{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"},{"title":"The Vocabulary of Motion","url":"https://motion-vocabulary.vercel.app/"}],"demo":"inline","useWhen":"opening and closing should not be mirror images"},{"name":"Atomic live region","slug":"atomic-live-region","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-atomic","source":"aria"},{"name":"aria-relevant","source":"aria"},{"name":"whole region announcement","source":"community"}],"tags":[],"relations":{"contrastWith":["busy-state","politeness-level"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: aria-atomic","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-atomic"}],"demo":"inline","useWhen":"a partial update would be read out of context"},{"name":"Attract mode","slug":"attract-mode","category":"motion","status":"published","definition":"A self-playing loop an idle screen falls into to demonstrate itself, inherited from arcade cabinets and reused by kiosks and product demos.","aliases":[{"name":"attract loop","source":"community"},{"name":"demo loop","source":"community"},{"name":"idle animation","source":"community"},{"name":"kiosk mode demo","source":"community"}],"tags":[],"relations":{"contrastWith":["float-animation"],"variantOf":[],"partOf":[],"seeAlso":["pause-stop-hide","carousel"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"an unattended screen should demonstrate itself"},{"name":"Attribute editor","slug":"attribute-editor","category":"component","status":"published","definition":"A repeating row of key and value fields with add and remove controls, used for tags, headers and other open ended pairs.","aliases":[{"name":"tag editor","source":"cloudscape"},{"name":"key value editor","source":"community"},{"name":"repeater","source":"community"},{"name":"dynamic form rows","source":"community"},{"name":"field array","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["rule-builder","property-filter"],"variantOf":[],"partOf":[],"seeAlso":["form"]},"implementations":[],"sources":[{"title":"Cloudscape Design System: components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"a form section that repeats a row of fields"},{"name":"Audio control","slug":"audio-control","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"autoplay audio","source":"community"},{"name":"mute control","source":"community"},{"name":"sound off by default","source":"community"}],"tags":["media"],"relations":{"contrastWith":["pause-stop-hide"],"variantOf":[],"partOf":[],"seeAlso":["media-controls"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Audio Control","url":"https://www.w3.org/TR/WCAG22/#audio-control"}],"demo":"inline","useWhen":"anything makes noise before the reader asked"},{"name":"Audio description","slug":"audio-description","category":"accessibility","status":"published","definition":"A narration track describing visual information the soundtrack leaves out, fitted into the gaps between dialogue.","aliases":[{"name":"described video","source":"community"},{"name":"AD track","source":"community"},{"name":"extended audio description","source":"wcag"}],"tags":["media"],"relations":{"contrastWith":["captions","transcript"],"variantOf":[],"partOf":[],"seeAlso":["video-player"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Audio Description (Prerecorded)","url":"https://www.w3.org/TR/WCAG22/#audio-description-prerecorded"}],"demo":"inline","useWhen":"the picture carries information the audio does not"},{"name":"Aurora UI","slug":"aurora-ui","category":"aesthetic","status":"published","definition":"A style whose background is built from heavily blurred color blobs that glow and drift like the northern lights behind the content.","aliases":[{"name":"aurora gradient"},{"name":"northern lights background","source":"community"},{"name":"blurred blob background"},{"name":"glow background"}],"tags":[],"relations":{"contrastWith":["mesh-gradient","grainy-gradient"],"variantOf":[],"partOf":[],"seeAlso":["gradient","float-animation","particle-background"]},"implementations":[],"sources":[{"title":"Hype4 Academy: Aurora UI, new visual trend for 2021","url":"https://hype4.academy/articles/design/aurora-ui-new-visual-trend-for-2021"},{"title":"Superdesign: Aurora UI, the CSS gradient recipe and when it breaks","url":"https://superdesign.dev/styles/aurora"}],"demo":"inline","useWhen":"the background is soft glowing bands of color"},{"name":"Autosave","slug":"autosave","category":"pattern","status":"published","definition":"Persisting the reader's work continuously without a save action, usually with a quiet status line reporting when the last save happened.","aliases":[{"name":"auto-save","source":"community"},{"name":"saving indicator","source":"community"},{"name":"all changes saved","source":"community"},{"name":"draft saving","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["unsaved-changes-guard","undo"],"variantOf":[],"partOf":[],"seeAlso":["optimistic-ui","inline-edit"]},"implementations":[],"sources":[{"title":"UI Patterns: Autosave","url":"https://ui-patterns.com/patterns/autosave"}],"demo":"inline","useWhen":"work is kept without anyone pressing save"},{"name":"Avatar","slug":"avatar","category":"component","status":"published","definition":"A small image standing in for a person or entity, falling back to initials or a generic glyph when there is no picture.","aliases":[{"name":"persona","source":"fluent"},{"name":"profile picture","source":"community"},{"name":"user pic","source":"community"},{"name":"gravatar","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":["thumbnail","identicon"],"variantOf":[],"partOf":[],"seeAlso":["avatar-group","image-well","presence-indicator","media-object"]},"implementations":[{"system":"fluent","name":"Avatar","url":"https://fluent2.microsoft.design/components/web/react/core/avatar/usage"},{"system":"polaris","name":"Avatar","url":"https://shopify.dev/docs/api/app-home/web-components/media-and-visuals/avatar"},{"system":"radix","name":"Avatar","url":"https://www.radix-ui.com/primitives/docs/components/avatar"},{"system":"base-ui","name":"Avatar","url":"https://base-ui.com/react/components/avatar"},{"system":"shadcn","name":"Avatar","url":"https://ui.shadcn.com/docs/components/avatar"}],"sources":[{"title":"Gravatar: one avatar, tied to an email address","url":"https://gravatar.com/"}],"demo":"inline","useWhen":"a person represented by a small image"},{"name":"Avatar group","slug":"avatar-group","category":"component","status":"published","definition":"Several avatars overlapped in a row to show a set of people compactly, with a plus n counter standing for the rest.","aliases":[{"name":"avatar stack","source":"primer"},{"name":"face pile","source":"community"},{"name":"facepile","source":"community"},{"name":"stacked avatars","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["avatar","presence-indicator"]},"implementations":[{"system":"fluent","name":"Avatar group","url":"https://fluent2.microsoft.design/components/web/react"}],"sources":[{"title":"Fluent 2 web components","url":"https://fluent2.microsoft.design/components/web/react"}],"demo":"inline","useWhen":"a row of overlapping faces with a plus n"},{"name":"Axis","slug":"axis","category":"component","status":"published","definition":"The ruled edge of a chart that maps position to value: scale, ticks, and labels that make the marks readable as numbers.","aliases":[{"name":"x-axis"},{"name":"y-axis"},{"name":"value axis"},{"name":"category axis"}],"tags":["dataviz"],"relations":{"contrastWith":["reference-line","tick-marks","truncated-axis"],"variantOf":[],"partOf":["chart"],"seeAlso":["dual-axis"]},"implementations":[{"system":"carbon","name":"Axes and labels","url":"https://carbondesignsystem.com/data-visualization/axes-and-labels/"}],"sources":[{"title":"Fundamentals of Data Visualization: Coordinate systems and axes","url":"https://clauswilke.com/dataviz/coordinate-systems-axes.html"},{"title":"Carbon: Axes and labels","url":"https://carbondesignsystem.com/data-visualization/axes-and-labels/"}],"demo":"inline","useWhen":"discussing tick density, label rotation, or what scale a chart hangs on"},{"name":"Back to top","slug":"back-to-top","category":"pattern","status":"published","definition":"A control that appears after the reader has scrolled some distance and returns them to the top of the page in one action.","aliases":[{"name":"scroll to top","source":"community"},{"name":"return to top","source":"community"},{"name":"back to top link","source":"govuk"},{"name":"float back to top","source":"ant-design"},{"name":"back to top button","source":"merged-candidate"},{"name":"backtop","source":"merged-candidate"},{"name":"jump to top","source":"merged-candidate"}],"tags":["navigation","scroll"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["smooth-scrolling","reading-progress"]},"implementations":[],"sources":[{"title":"Ant Design: FloatButton BackTop","url":"https://ant.design/components/float-button"}],"demo":"inline","useWhen":"the button that appears partway down to send you back up"},{"name":"Badge","slug":"badge","category":"component","status":"published","definition":"A small marker attached to another element that carries a count or a status and is not interactive on its own.","aliases":[{"name":"dock badge","source":"merged-candidate"},{"name":"app icon badge","source":"merged-candidate"},{"name":"notification badge","source":"merged-candidate"},{"name":"count badge","source":"community"},{"name":"unread count","source":"merged-candidate"},{"name":"red dot","source":"merged-candidate"}],"tags":[],"relations":{"contrastWith":["chip","tag","presence-indicator","achievement-badge"],"variantOf":[],"partOf":[],"seeAlso":["push-notification"]},"implementations":[{"system":"material","name":"Badges","url":"https://m3.material.io/components/badges/overview"},{"system":"fluent","name":"Badge","url":"https://fluent2.microsoft.design/components/web/react/core/badge/usage"}],"sources":[{"title":"Material Design 3: Badges","url":"https://m3.material.io/components/badges/overview"}],"demo":"inline","useWhen":"a count or status stuck to something else"},{"name":"Banner","slug":"banner","category":"component","status":"published","definition":"A prominent message strip, usually spanning the top of a page or section, that stays visible until the user dismisses or resolves it.","aliases":[{"name":"notification banner","source":"govuk"},{"name":"scoped notification","source":"lightning"},{"name":"global banner","source":"community"}],"tags":[],"relations":{"contrastWith":["toast","callout","status-message","hero","cookie-consent-banner","smart-app-banner"],"variantOf":[],"partOf":[],"seeAlso":["notification-center"]},"implementations":[{"system":"carbon","name":"Notification","url":"https://carbondesignsystem.com/components/notification/usage/"}],"sources":[{"title":"GOV.UK Design System: Notification banner","url":"https://design-system.service.gov.uk/components/notification-banner/"}],"demo":"inline","useWhen":"a message strip that stays until it is dealt with"},{"name":"Baseline","slug":"baseline","category":"typography","status":"published","definition":"The invisible line that most letters sit on, and the line every other vertical type metric is measured from.","aliases":[{"name":"alphabetic baseline","source":"css"},{"name":"text baseline"}],"tags":[],"relations":{"contrastWith":["cap-height","half-leading","descender"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"},{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"aligning text with an icon or another line of text"},{"name":"Baseline grid","slug":"baseline-grid","category":"layout","status":"published","definition":"A set of evenly spaced horizontal lines that every line of text sits on, so type in adjacent columns lines up across the page.","aliases":[{"name":"typographic grid","source":"community"}],"tags":["editorial"],"relations":{"contrastWith":["vertical-rhythm","keyline","eight-point-grid","layout-grid","subgrid"],"variantOf":[],"partOf":[],"seeAlso":["dot-grid-background"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"text in neighbouring columns must line up"},{"name":"Bauhaus style","slug":"bauhaus-style","category":"aesthetic","status":"published","definition":"A style reduced to primary red, yellow, and blue on off-white, elementary circles, triangles, and squares, and undecorated sans serif type.","aliases":[{"name":"Bauhaus"},{"name":"Bauhaus revival"},{"name":"Bauhaus web design"}],"tags":[],"relations":{"contrastWith":["de-stijl","constructivism","swiss-style"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Digital Heroes: Bauhaus web design, form follows function revival","url":"https://digitalheroesco.com/styles/bauhaus-revival/"},{"title":"Inkbot Design: 20 iconic graphic design styles","url":"https://inkbotdesign.com/graphic-design-styles/"}],"demo":"inline","useWhen":"primary colors and elementary shapes doing the work"},{"name":"Bento grid","slug":"bento-grid","category":"layout","status":"published","definition":"A grid whose cells are deliberately different sizes, tiled to fill a rectangle without gaps, like the compartments of a bento box.","aliases":[{"name":"bento box layout"},{"name":"bento layout"}],"tags":[],"relations":{"contrastWith":["masonry","card-grid","dashboard-grid","modular-grid"],"variantOf":[],"partOf":[],"seeAlso":["grid-lanes"]},"implementations":[],"sources":[{"title":"MDN: CSS grid layout","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout"}],"demo":"inline","useWhen":"cells at deliberately different sizes, tiled to fill a rectangle"},{"name":"Bevel and emboss","slug":"bevel","category":"aesthetic","status":"published","definition":"Light and dark edges drawn along a shape's border so it reads as raised or carved, the depth trick behind classic desktop buttons.","aliases":[{"name":"beveled edge"},{"name":"emboss"},{"name":"outset border","source":"css"},{"name":"3D border","source":"community"},{"name":"chiseled edge"}],"tags":[],"relations":{"contrastWith":["chamfer","letterpress-text","gloss"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"98.css","url":"https://jdan.github.io/98.css/"}],"demo":"inline","useWhen":"a raised edge drawn from a light and a dark border"},{"name":"Bidirectional text","slug":"bidirectional-text","category":"typography","status":"published","definition":"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.","aliases":[{"name":"right-to-left text"},{"name":"RTL"},{"name":"unicode-bidi","source":"css"}],"tags":[],"relations":{"contrastWith":["language-attribute","vertical-writing-mode","rtl-mirroring"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"CSS text module (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text"}],"demo":"inline","useWhen":"Arabic or Hebrew text containing Latin or digits"},{"name":"Biophilic design","slug":"biophilic-design","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"biophilic web design"},{"name":"biophilia in design"},{"name":"nature-inspired UI"},{"name":"organic UI"},{"name":"biomimetic design"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["blob-shape","mid-century-modern","solarpunk"]},"implementations":[],"sources":[{"title":"freeCodeCamp: What is biophilic design?","url":"https://www.freecodecamp.org/news/what-is-biophilic-design/"},{"title":"Silphium Design: Understanding biophilia in digital design","url":"https://silphiumdesign.com/biophilia-in-digital-design-a-guide-for-2025/"}],"demo":"inline","useWhen":"nature borrowed deliberately for calm, not decoration"},{"name":"Blend mode","slug":"blend-mode","category":"color","status":"published","definition":"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.","aliases":[{"name":"mix-blend-mode","source":"css"},{"name":"multiply","source":"community"},{"name":"screen","source":"community"},{"name":"layer blending","source":"community"}],"tags":[],"relations":{"contrastWith":["opacity","alpha-compositing"],"variantOf":[],"partOf":[],"seeAlso":["duotone"]},"implementations":[],"sources":[{"title":"MDN: mix-blend-mode","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mix-blend-mode"},{"title":"web.dev: Blend Modes","url":"https://web.dev/learn/css/blend-modes"}],"demo":"inline","useWhen":"combining layers by a formula rather than by covering"},{"name":"Organic blob","slug":"blob-shape","category":"aesthetic","status":"published","definition":"A soft irregular shape with no straight edges, used as a background accent or image mask to soften a strictly rectangular layout.","aliases":[{"name":"blob"},{"name":"organic shape"},{"name":"border-radius blob","source":"community"},{"name":"amoeba shape","source":"community"}],"tags":[],"relations":{"contrastWith":["chamfer","squircle"],"variantOf":[],"partOf":[],"seeAlso":["gooey-effect","biophilic-design"]},"implementations":[],"sources":[{"title":"MDN: border-radius","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"}],"demo":"inline","useWhen":"an amoeba shape softening a rectangular grid"},{"name":"Blockquote","slug":"blockquote","category":"typography","status":"published","definition":"A passage quoted from another source and set off from the running text as its own block, carrying the attribution with it.","aliases":[{"name":"block quotation"},{"name":"extract"}],"tags":["editorial"],"relations":{"contrastWith":["pull-quote"],"variantOf":[],"partOf":[],"seeAlso":["sidenote"]},"implementations":[],"sources":[{"title":"MDN: <blockquote>","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"}],"demo":"inline","useWhen":"quoting a source at paragraph length"},{"name":"Bottom navigation","slug":"bottom-navigation","category":"component","status":"published","definition":"A bar of three to five top level destinations pinned to the bottom edge of a phone screen, with the current destination always marked.","aliases":[{"name":"tab bar","source":"hig"},{"name":"bottom tabs","source":"community"},{"name":"bottom bar","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["navigation-bar","dock","navigation-rail"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Navigation bar","url":"https://m3.material.io/components/navigation-bar/overview"},{"system":"hig","name":"Tab bars","url":"https://developer.apple.com/design/human-interface-guidelines/tab-bars"}],"sources":[{"title":"Material Design 3: navigation bar guidelines","url":"https://m3.material.io/components/navigation-bar/guidelines"},{"title":"MUI: Bottom Navigation","url":"https://mui.com/material-ui/react-bottom-navigation/"}],"demo":"inline","useWhen":"top level destinations within thumb reach"},{"name":"Bottom sheet","slug":"bottom-sheet","category":"component","status":"published","definition":"A surface anchored to the bottom edge that slides up over the content, often draggable between a peeked and an expanded height.","aliases":[{"name":"sheet","source":"shadcn"},{"name":"half sheet","source":"hig"},{"name":"modal sheet","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["action-sheet","drawer","modal-dialog","tearsheet"],"variantOf":[],"partOf":[],"seeAlso":["grabber","modal-presentation"]},"implementations":[{"system":"material","name":"Bottom sheets","url":"https://m3.material.io/components/bottom-sheets/overview"},{"system":"shadcn","name":"Sheet","url":"https://ui.shadcn.com/docs/components/sheet"}],"sources":[{"title":"Bottom sheets, Material Design 3","url":"https://m3.material.io/components/bottom-sheets/overview"}],"demo":"inline","useWhen":"a panel that rises from the bottom edge"},{"name":"Bounce","slug":"bounce-animation","category":"motion","status":"published","definition":"Motion that arrives, rebounds, and arrives again in decreasing amounts, reading as an object landing on a surface.","aliases":[{"name":"bounce easing","source":"easings.net"},{"name":"easeOutBounce","source":"easings.net"},{"name":"bounce ease","source":"community"}],"tags":[],"relations":{"contrastWith":["pop-in","overshoot"],"variantOf":[],"partOf":[],"seeAlso":["spring-animation"]},"implementations":[],"sources":[{"title":"Easing Functions Cheat Sheet","url":"https://easings.net/"}],"demo":"inline","useWhen":"an arrival should read as landing, with weight"},{"name":"Box","slug":"box","category":"layout","status":"published","definition":"A bordered container, optionally titled, that groups logically related controls so the grouping is drawn rather than implied by spacing alone.","aliases":[{"name":"boxes","source":"hig"},{"name":"group box","source":"community"},{"name":"grouping container","source":"community"}],"tags":[],"relations":{"contrastWith":["common-region"],"variantOf":[],"partOf":[],"seeAlso":["fieldset","card"]},"implementations":[{"system":"hig","name":"Boxes","url":"https://developer.apple.com/design/human-interface-guidelines/boxes"}],"sources":[{"title":"Boxes, Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/boxes"}],"demo":"inline","useWhen":"grouping controls with a visible boundary"},{"name":"Braille display","slug":"braille-display","category":"accessibility","status":"published","definition":"A refreshable braille row that renders the same accessibility tree as speech, with abbreviated role names authors can override.","aliases":[{"name":"refreshable braille","source":"community"},{"name":"aria-braillelabel","source":"aria"},{"name":"aria-brailleroledescription","source":"aria"}],"tags":[],"relations":{"contrastWith":["screen-reader"],"variantOf":[],"partOf":[],"seeAlso":["verbosity"]},"implementations":[],"sources":[{"title":"Accessible Rich Internet Applications (WAI-ARIA), W3C editor's draft","url":"https://w3c.github.io/aria/"},{"title":"ARIA: aria-braillelabel attribute, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-braillelabel"}],"demo":"inline","useWhen":"output is a braille line, not synthesized speech"},{"name":"Brand color","slug":"brand-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"brand palette","source":"community"},{"name":"corporate colors"},{"name":"signature color","source":"community"}],"tags":["tokens"],"relations":{"contrastWith":["seed-color","static-color","accent-color","status-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"fluent","name":"Brand colors","url":"https://fluent2.microsoft.design/color"}],"sources":[{"title":"Spectrum: color system","url":"https://spectrum.adobe.com/page/color-system/"}],"demo":"inline","useWhen":"the colour the company owns, before it becomes UI tokens"},{"name":"Breadcrumbs","slug":"breadcrumbs","category":"component","status":"published","definition":"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.","aliases":[{"name":"breadcrumb trail"},{"name":"breadcrumb","source":"aria-apg"},{"name":"path bar","source":"macos"},{"name":"crumbs"}],"tags":["navigation"],"relations":{"contrastWith":["current-page-indicator"],"variantOf":[],"partOf":[],"seeAlso":["page-title"]},"implementations":[{"system":"aria-apg","name":"Breadcrumb","url":"https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/"},{"system":"fluent","name":"Breadcrumb","url":"https://fluent2.microsoft.design/components/web/react/core/breadcrumb/usage"},{"system":"carbon","name":"Breadcrumb","url":"https://carbondesignsystem.com/components/breadcrumb/usage/"}],"sources":[{"title":"ARIA Authoring Practices Guide: Breadcrumb pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/"}],"demo":"inline","useWhen":"showing where a page sits in a hierarchy"},{"name":"Breakout","slug":"breakout","category":"layout","status":"published","definition":"A track wider than the reading column but narrower than the viewport, used for figures and code that need more room than prose.","aliases":[{"name":"breakout width","source":"community"},{"name":"popout","source":"community"},{"name":"wide track","source":"community"},{"name":"layout breakouts","source":"community"},{"name":"wide alignment","source":"wordpress"},{"name":"alignwide","source":"wordpress"}],"tags":["editorial"],"relations":{"contrastWith":["full-bleed"],"variantOf":[],"partOf":[],"seeAlso":["sidenote"]},"implementations":[],"sources":[{"title":"Layout Breakouts with CSS Grid, Ryan Mulligan","url":"https://ryanmulligan.dev/blog/layout-breakouts/"}],"demo":"inline","useWhen":"a figure that needs more width than the text"},{"name":"Breakpoint","slug":"breakpoint","category":"layout","status":"published","definition":"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.","aliases":[{"name":"media query breakpoint","source":"community"},{"name":"responsive breakpoint","source":"community"},{"name":"screen size","source":"tailwind"},{"name":"breakpoints","source":"bootstrap"}],"tags":[],"relations":{"contrastWith":["container-query","window-size-class","ram-technique"],"variantOf":[],"partOf":[],"seeAlso":["mobile-first","content-choreography"]},"implementations":[],"sources":[{"title":"Grid system, Bootstrap","url":"https://getbootstrap.com/docs/5.3/layout/grid/"}],"demo":"inline","useWhen":"the widths where the layout is allowed to change"},{"name":"Broken grid","slug":"broken-grid","category":"layout","status":"published","definition":"A composition that sets up a grid and then deliberately violates it, overlapping and offsetting elements to create tension.","aliases":[{"name":"asymmetric layout","source":"community"},{"name":"broken grid layout","source":"community"},{"name":"deconstructed layout","source":"community"},{"name":"overlapping layout","source":"community"},{"name":"asymmetric grid","source":"uiterms"}],"tags":[],"relations":{"contrastWith":["compound-grid"],"variantOf":[],"partOf":[],"seeAlso":["magazine-layout","anti-design"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"breaking the grid on purpose, not by accident"},{"name":"Browse mode","slug":"browse-mode","category":"accessibility","status":"published","definition":"The screen reader mode that intercepts keystrokes for reading and navigation, as opposed to focus or forms mode where keys reach the page.","aliases":[{"name":"virtual cursor","source":"jaws"},{"name":"virtual mode","source":"jaws"},{"name":"virtual buffer","source":"community"},{"name":"scan mode","source":"narrator"}],"tags":[],"relations":{"contrastWith":["review-cursor","rotor"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Accessibility Developer Guide: Browse and focus modes","url":"https://www.accessibility-developer-guide.com/knowledge/screen-readers/desktop/browse-focus-modes/"},{"title":"Understanding screen reader interaction modes, Léonie Watson","url":"https://tink.uk/understanding-screen-reader-interaction-modes/"},{"title":"Complete guide to Narrator, Microsoft Support","url":"https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1"}],"demo":"inline","useWhen":"explaining why a key press never reached your widget"},{"name":"Brushing","slug":"brushing","category":"interaction","status":"published","definition":"Dragging a selection across one chart to highlight the same records in every linked view.","aliases":[{"name":"brushing and linking","source":"community"},{"name":"brush selection","source":"community"},{"name":"linked highlighting","source":"community"},{"name":"crossfilter","source":"community"}],"tags":["dataviz","selection"],"relations":{"contrastWith":["range-select","lasso-selection"],"variantOf":[],"partOf":[],"seeAlso":["small-multiples"]},"implementations":[],"sources":[{"title":"Wikipedia: Brushing and linking","url":"https://en.wikipedia.org/wiki/Brushing_and_linking"}],"demo":"inline","useWhen":"coordinated views should answer a selection made in any one of them"},{"name":"Brutalist web design","slug":"brutalist-web-design","category":"aesthetic","status":"published","definition":"A raw style that leaves the document showing: system or monospace type, default link blue, hard borders, and no decoration beyond structure.","aliases":[{"name":"web brutalism","source":"namethatui"},{"name":"brutalism"},{"name":"raw HTML aesthetic"},{"name":"default browser look"},{"name":"brutalist typography","source":"community"},{"name":"anti-grid brutalism","source":"community"},{"name":"sports brutalism","source":"daisyui"}],"tags":[],"relations":{"contrastWith":["neubrutalism","terminal-aesthetic","anti-design","hand-drawn-ui","retro-web-design"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Superdesign: Brutalist Web Design: CSS Recipe, Live Examples and Trend Data","url":"https://superdesign.dev/styles/brutalism"},{"title":"NameThatUI: Neobrutalism","url":"https://namethatui.com/styles/neobrutalism"}],"demo":"inline","useWhen":"the page looks like unstyled HTML on purpose"},{"name":"Bubble toolbar","slug":"bubble-toolbar","category":"component","status":"published","definition":"A small formatting bar that appears floating over a text selection and disappears when the selection is dropped.","aliases":[{"name":"floating toolbar","source":"community"},{"name":"bubble menu","source":"community"},{"name":"medium editor toolbar","source":"community"},{"name":"text selection popover","source":"community"},{"name":"edit menu","source":"hig"}],"tags":[],"relations":{"contrastWith":["rich-text-toolbar"],"variantOf":[],"partOf":[],"seeAlso":["selection-handle","context-menu"]},"implementations":[],"sources":[{"title":"ARIA APG: Toolbar pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"the toolbar appears over the text you just selected"},{"name":"Bulk actions","slug":"bulk-actions","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"batch actions","source":"carbon"},{"name":"bulk edit","source":"community"},{"name":"multi-select actions","source":"community"},{"name":"contextual action bar","source":"material"},{"name":"selection toolbar","source":"community"},{"name":"bulk action bar","source":"merged-candidate"}],"tags":["selection"],"relations":{"contrastWith":["range-select","select-all-across-pages"],"variantOf":[],"partOf":[],"seeAlso":["applied-filters"]},"implementations":[],"sources":[{"title":"Carbon Design System: data table","url":"https://carbondesignsystem.com/components/data-table/usage/"}],"demo":"inline","useWhen":"picking many rows and acting on them at once"},{"name":"Busy state","slug":"busy-state","category":"accessibility","status":"published","definition":"Marking a region as still loading so assistive technology waits for the finished result instead of reading each row as it streams in.","aliases":[{"name":"aria-busy","source":"aria"},{"name":"loading region","source":"community"},{"name":"suppressed announcements","source":"community"}],"tags":[],"relations":{"contrastWith":["atomic-live-region","politeness-level"],"variantOf":[],"partOf":[],"seeAlso":["spinner"]},"implementations":[],"sources":[{"title":"WAI-ARIA 1.2: aria-busy","url":"https://www.w3.org/TR/wai-aria-1.2/#aria-busy"}],"demo":"inline","useWhen":"a region updates in pieces and each piece speaks"},{"name":"Button","slug":"button","category":"component","status":"published","definition":"A control that runs an action when activated, labelled with the thing it does rather than with where it goes.","aliases":[{"name":"push button","source":"community"},{"name":"cta button","source":"community"},{"name":"action button","source":"community"}],"tags":[],"relations":{"contrastWith":["link"],"variantOf":[],"partOf":[],"seeAlso":["focusable-disabled","pressed-state"]},"implementations":[{"system":"aria-apg","name":"Button","url":"https://www.w3.org/WAI/ARIA/apg/patterns/button/"},{"system":"material","name":"Buttons","url":"https://m3.material.io/components/buttons/overview"},{"system":"hig","name":"Buttons","url":"https://developer.apple.com/design/human-interface-guidelines/buttons"},{"system":"fluent","name":"Button","url":"https://fluent2.microsoft.design/components/web/react/core/button/usage"},{"system":"carbon","name":"Button","url":"https://carbondesignsystem.com/components/button/usage/"},{"system":"polaris","name":"Button","url":"https://shopify.dev/docs/api/app-home/polaris-web-components/actions/button"},{"system":"shadcn","name":"Button","url":"https://ui.shadcn.com/docs/components/button"}],"sources":[{"title":"ARIA Authoring Practices Guide: Button pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/button/"},{"title":"MDN: the button element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button"}],"demo":"inline","useWhen":"the control does something instead of going somewhere"},{"name":"Button group","slug":"button-group","category":"component","status":"published","definition":"Buttons set flush against each other so they read as one unit of related actions, usually with shared borders and rounded outer corners only.","aliases":[{"name":"button bar"},{"name":"grouped buttons"},{"name":"btn-group","source":"bootstrap"}],"tags":[],"relations":{"contrastWith":["segmented-control","toolbar","toggle-group"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"shadcn","name":"Button Group","url":"https://ui.shadcn.com/docs/components/button-group"}],"sources":[{"title":"Button Group, shadcn/ui","url":"https://ui.shadcn.com/docs/components/button-group"}],"demo":"inline","useWhen":"several actions that belong together visually"},{"name":"Button versus link","slug":"button-versus-link","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"links and buttons","source":"primer"},{"name":"link-button","source":"primer"},{"name":"div button","source":"community"},{"name":"fake button","source":"community"},{"name":"call-to-action link","source":"primer"}],"tags":[],"relations":{"contrastWith":["link","ghost-button","nested-interactive","link-purpose"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Primer: Links and buttons","url":"https://primer.style/accessibility/design-guidance/links-and-buttons/"}],"demo":"inline","useWhen":"a control looks like a button but navigates"},{"name":"Bypassing pattern","slug":"bypassing-pattern","category":"layout","status":"published","definition":"A scanning shape where readers deliberately skip the opening words of each line because every line in a list starts the same way.","aliases":[],"tags":[],"relations":{"contrastWith":["commitment-pattern","marking-pattern"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"F-Shaped Pattern of Reading on the Web, NN/g","url":"https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/"}],"demo":"inline","useWhen":"arguing against repeated leading words in lists"},{"name":"Calendar","slug":"calendar","category":"component","status":"published","definition":"A month grid of dates that can be read, navigated and selected from, whether standing alone or living inside a date field.","aliases":[{"name":"month view","source":"community"},{"name":"date grid","source":"community"},{"name":"mini calendar","source":"community"}],"tags":[],"relations":{"contrastWith":["date-picker","date-range-picker"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"shadcn","name":"Calendar","url":"https://ui.shadcn.com/docs/components"}],"sources":[{"title":"shadcn/ui: components","url":"https://ui.shadcn.com/docs/components"}],"demo":"inline","useWhen":"a month laid out as a grid of days"},{"name":"Callout","slug":"callout","category":"component","status":"published","definition":"A boxed note set into the flow of content to carry a warning, tip or aside, coloured by severity and staying put once shown.","aliases":[{"name":"admonition"},{"name":"inline alert"},{"name":"message bar","source":"fluent"},{"name":"inset text","source":"govuk"},{"name":"flashbar","source":"cloudscape"}],"tags":[],"relations":{"contrastWith":["toast","error-message","chat-bubble","banner"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"fluent","name":"Message bar","url":"https://fluent2.microsoft.design/components/web/react"}],"sources":[{"title":"Fluent 2: web components","url":"https://fluent2.microsoft.design/components/web/react"}],"demo":"inline","useWhen":"a boxed note sitting inside the content"},{"name":"Canonical layout","slug":"canonical-layout","category":"layout","status":"published","definition":"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.","aliases":[{"name":"canonical layouts","source":"material"}],"tags":[],"relations":{"contrastWith":["app-silhouette","scaffold"],"variantOf":[],"partOf":[],"seeAlso":["layout-grid"]},"implementations":[],"sources":[{"title":"Canonical layouts, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/canonical-layouts"}],"demo":"inline","useWhen":"reaching for a proven arrangement, not a new one"},{"name":"Cap height","slug":"cap-height","category":"typography","status":"published","definition":"The height of a capital letter measured from the baseline, and the edge designers usually mean when they say text should line up flush.","aliases":[{"name":"capital height"},{"name":"cap-height baseline","source":"css"}],"tags":[],"relations":{"contrastWith":["ascender","baseline","x-height"],"variantOf":[],"partOf":[],"seeAlso":["overshoot"]},"implementations":[],"sources":[{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"},{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"}],"demo":"inline","useWhen":"aligning a heading optically instead of by its box"},{"name":"CAPTCHA","slug":"captcha","category":"component","status":"published","definition":"A challenge placed in a form to sort people from scripts, from distorted text to a single checkbox that watches how you got there.","aliases":[{"name":"human verification","source":"community"},{"name":"bot check","source":"community"},{"name":"recaptcha","source":"community"},{"name":"turnstile","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["accessible-authentication","honeypot-field"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UX Patterns for Developers","url":"https://uxpatterns.dev/patterns"},{"title":"Inaccessibility of CAPTCHA (W3C)","url":"https://www.w3.org/TR/turingtest/"},{"title":"Understanding SC 3.3.8: Accessible Authentication (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html"}],"demo":"inline","useWhen":"the challenge that proves you are a person"},{"name":"Captions","slug":"captions","category":"accessibility","status":"published","definition":"Synchronised text for a video's audio, including speaker changes and meaningful sound, distinct from subtitles which only translate dialogue.","aliases":[{"name":"closed captions","source":"community"},{"name":"open captions","source":"community"},{"name":"CC","source":"community"},{"name":"subtitles","source":"community"},{"name":"SDH","source":"community"},{"name":"burned-in captions","source":"community"},{"name":"live captions","source":"community"},{"name":"CART","source":"community"},{"name":"speaker identification","source":"community"}],"tags":["media"],"relations":{"contrastWith":["transcript","audio-description","sign-language-interpretation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Captions (Prerecorded)","url":"https://www.w3.org/TR/WCAG22/#captions-prerecorded"},{"title":"web.dev accessibility glossary","url":"https://web.dev/learn/accessibility/glossary/"}],"demo":"inline","useWhen":"text that carries the sound of a video, not a translation"},{"name":"Card","slug":"card","category":"component","status":"published","definition":"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.","aliases":[{"name":"tile","source":"community"},{"name":"panel","source":"bootstrap"},{"name":"item card","source":"cloudscape"},{"name":"product card","source":"community"},{"name":"lockup","source":"merged-candidate"}],"tags":[],"relations":{"contrastWith":["media-object","nested-interactive","selection-card","widget"],"variantOf":[],"partOf":[],"seeAlso":["box"]},"implementations":[{"system":"material","name":"Card","url":"https://m3.material.io/components/cards/overview"},{"system":"fluent","name":"Card","url":"https://fluent2.microsoft.design/components/web/react/core/card/usage"},{"system":"carbon","name":"Tile","url":"https://carbondesignsystem.com/components/tile/usage/"},{"system":"radix","name":"Card","url":"https://www.radix-ui.com/themes/docs/components/card"},{"system":"shadcn","name":"Card","url":"https://ui.shadcn.com/docs/components/card"}],"sources":[{"title":"Cards: UI-Component Definition","url":"https://www.nngroup.com/articles/cards-component/"},{"title":"Cloudscape: Cards","url":"https://cloudscape.design/components/cards/"}],"demo":"inline","useWhen":"one thing previewed on its own surface"},{"name":"Card flip","slug":"card-flip","category":"motion","status":"published","definition":"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.","aliases":[{"name":"flip card","source":"community"},{"name":"backface-visibility","source":"css"},{"name":"flip horizontal","source":"uikit"},{"name":"3D card flip","source":"community"},{"name":"reveal the back","source":"community"}],"tags":[],"relations":{"contrastWith":["flip-animation","page-curl"],"variantOf":[],"partOf":[],"seeAlso":["morph-transition"]},"implementations":[],"sources":[{"title":"David DeSandro: card flip, intro to CSS 3D transforms","url":"https://3dtransforms.desandro.com/card-flip"},{"title":"Auroratide: a (more) realistic card flip animation","url":"https://auroratide.com/posts/realistic-flip-animation/"}],"demo":"inline","useWhen":"one surface carries two faces and both are the same object"},{"name":"Card grid","slug":"card-grid","category":"layout","status":"published","definition":"Content laid out as equal width cards flowing across a responsive grid and wrapping to new rows as space allows.","aliases":[{"name":"grid list","source":"tailwind"},{"name":"tile grid","source":"community"},{"name":"gallery grid","source":"community"},{"name":"product grid","source":"community"},{"name":"collection view","source":"hig"}],"tags":[],"relations":{"contrastWith":["bento-grid","kanban-board","dashboard-grid","feed-layout","justified-gallery","masonry"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Grid Lists, Tailwind UI","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/lists/grid-lists"}],"demo":"inline","useWhen":"many peers of the same kind, browsed by scanning"},{"name":"Caret","slug":"caret","category":"interaction","status":"published","definition":"The blinking marker showing where typed text will be inserted, moved by clicking, by arrow keys, or by dragging on touch.","aliases":[{"name":"text cursor","source":"community"},{"name":"insertion point","source":"hig"},{"name":"caret browsing","source":"community"}],"tags":[],"relations":{"contrastWith":["chevron","playhead","selection-handle"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: caret-color","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color"},{"title":"iOS HIG: Gestures","url":"https://developer.apple.com/design/human-interface-guidelines/gestures"}],"demo":"inline","useWhen":"the text insertion marker, not the mouse pointer"},{"name":"Carousel","slug":"carousel","category":"component","status":"published","definition":"A row of items shown a few at a time that advances by arrows, swipe or a timer, with the rest waiting off screen.","aliases":[{"name":"slideshow","source":"aria-apg"},{"name":"image rotator","source":"aria-apg"}],"tags":[],"relations":{"contrastWith":["slider","marquee","filmstrip","content-shelf","stories"],"variantOf":[],"partOf":[],"seeAlso":["page-indicator","pause-stop-hide","scroll-snap","attract-mode"]},"implementations":[{"system":"aria-apg","name":"Carousel (Slide Show or Image Rotator)","url":"https://www.w3.org/WAI/ARIA/apg/patterns/carousel/"},{"system":"material","name":"Carousel","url":"https://m3.material.io/components/carousel/overview"},{"system":"fluent","name":"Carousel","url":"https://fluent2.microsoft.design/components/web/react/core/carousel/usage"},{"system":"shadcn","name":"Carousel","url":"https://ui.shadcn.com/docs/components/carousel"}],"sources":[{"title":"ARIA Authoring Practices Guide: Carousel pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/carousel/"},{"title":"Nielsen Norman Group: Carousel usability","url":"https://www.nngroup.com/articles/designing-effective-carousels/"}],"demo":"inline","useWhen":"a set of items shown a few at a time in a row"},{"name":"Cascader","slug":"cascader","category":"component","status":"published","definition":"A select whose options open level by level, each choice narrowing the next, used for country then state then city style data.","aliases":[{"name":"cascading select","source":"community"},{"name":"dependent dropdowns","source":"community"}],"tags":[],"relations":{"contrastWith":["miller-columns","submenu","tree-select"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Ant Design: components overview","url":"https://ant.design/components/overview/"}],"demo":"inline","useWhen":"choosing down a hierarchy one level at a time"},{"name":"Cassette futurism","slug":"cassette-futurism","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"cassette punk"},{"name":"tape futurism"},{"name":"analog futurism"},{"name":"used future"}],"tags":[],"relations":{"contrastWith":["y2k-aesthetic","retro-futurism","steampunk"],"variantOf":[],"partOf":[],"seeAlso":["terminal-aesthetic"]},"implementations":[],"sources":[{"title":"Aesthetics Wiki: Cassette Futurism","url":"https://aesthetics.fandom.com/wiki/Cassette_Futurism"},{"title":"TV Tropes: Cassette Futurism","url":"https://tvtropes.org/pmwiki/pmwiki.php/Main/CassetteFuturism"}],"demo":"inline","useWhen":"a future built from 1970s and 80s analog hardware"},{"name":"Categorical palette","slug":"categorical-palette","category":"color","status":"published","definition":"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.","aliases":[{"name":"qualitative palette","source":"community"},{"name":"categorical scale","source":"community"},{"name":"series colors","source":"community"},{"name":"chart colors","source":"community"}],"tags":["dataviz"],"relations":{"contrastWith":["sequential-palette","diverging-palette"],"variantOf":[],"partOf":[],"seeAlso":["color-vision-deficiency"]},"implementations":[],"sources":[{"title":"Color palettes for data visualization","url":"https://colorarchive.org/guides/data-visualization-color-palettes/"}],"demo":"inline","useWhen":"colouring unordered groups without implying rank"},{"name":"Ch unit","slug":"ch-unit","category":"typography","status":"published","definition":"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.","aliases":[{"name":"character unit","source":"css"},{"name":"ch","source":"css"},{"name":"character width unit"}],"tags":[],"relations":{"contrastWith":["measure","em-unit"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Line Length (Measure)","url":"https://kweri.app/learn/line-length-measure"}],"demo":"inline","useWhen":"setting a column width in characters, not pixels"},{"name":"Chamfer","slug":"chamfer","category":"aesthetic","status":"published","definition":"A corner cut flat at an angle instead of rounded, the sharp-edged sibling of border-radius that reads industrial, military, or sci-fi.","aliases":[{"name":"chamfered corner"},{"name":"cut corner"},{"name":"angled corner"},{"name":"clipped corner"}],"tags":[],"relations":{"contrastWith":["squircle","blob-shape","bevel"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: corner-shape","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape"}],"demo":"inline","useWhen":"corners should read machined rather than soft"},{"name":"Change of context","slug":"change-of-context","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"on focus","source":"wcag"},{"name":"on input","source":"wcag"},{"name":"context change","source":"community"},{"name":"auto-submit on select","source":"community"},{"name":"change on request","source":"wcag"}],"tags":[],"relations":{"contrastWith":["selection-follows-focus","pointer-cancellation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: On Input","url":"https://www.w3.org/TR/WCAG22/#on-input"},{"title":"WCAG 2.2: On Focus","url":"https://www.w3.org/TR/WCAG22/#on-focus"}],"demo":"inline","useWhen":"naming the surprise a select or focus event should not cause"},{"name":"Character counter","slug":"character-counter","category":"component","status":"published","definition":"The running count beside a text box showing how many characters are used, or how many remain, against a limit.","aliases":[{"name":"character count","source":"govuk"},{"name":"char limit counter","source":"community"},{"name":"remaining characters","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["helper-text"],"variantOf":[],"partOf":["textarea","text-field"],"seeAlso":[]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Character count","url":"https://design-system.service.gov.uk/components/character-count/"}],"demo":"inline","useWhen":"showing how much of a length limit is used"},{"name":"Character key shortcuts","slug":"character-key-shortcuts","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"single key shortcut","source":"community"},{"name":"keyboard shortcut conflict","source":"community"},{"name":"aria-keyshortcuts","source":"aria"},{"name":"pass through key","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["keyboard-shortcut","access-key"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Character Key Shortcuts","url":"https://www.w3.org/TR/WCAG22/#character-key-shortcuts"}],"demo":"inline","useWhen":"a bare letter key does something on the page"},{"name":"Chart","slug":"chart","category":"component","status":"published","definition":"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.","aliases":[{"name":"graph","source":"community"},{"name":"plot","source":"community"},{"name":"data visualisation","source":"community"},{"name":"dataviz","source":"community"}],"tags":["dataviz"],"relations":{"contrastWith":["sparkline"],"variantOf":[],"partOf":[],"seeAlso":["chart-description","sonification","chart-aspect-ratio","data-ink-ratio"]},"implementations":[{"system":"hig","name":"Charts","url":"https://developer.apple.com/design/human-interface-guidelines/charts"}],"sources":[{"title":"Apple Human Interface Guidelines: Charts","url":"https://developer.apple.com/design/human-interface-guidelines/charts"}],"demo":"inline","useWhen":"numbers are easier compared by eye than by reading"},{"name":"Chart annotation","slug":"chart-annotation","category":"component","status":"published","definition":"A note pinned onto the data itself: a callout, arrow, or highlighted span that tells the reader what to see in the chart.","aliases":[{"name":"annotation layer"},{"name":"callout label"},{"name":"data annotation"}],"tags":["dataviz"],"relations":{"contrastWith":["chart-legend","direct-labeling"],"variantOf":[],"partOf":["chart"],"seeAlso":["chartjunk"]},"implementations":[],"sources":[{"title":"Datawrapper: Text in data visualizations","url":"https://www.datawrapper.de/blog/text-in-data-visualizations"}],"demo":"inline","useWhen":"the takeaway should be written on the chart, not left to the caption"},{"name":"Chart aspect ratio","slug":"chart-aspect-ratio","category":"layout","status":"published","definition":"How wide a chart is for its height, which sets the slopes of its lines; banking to 45 degrees keeps rates of change readable.","aliases":[{"name":"banking to 45 degrees"},{"name":"banking"}],"tags":["dataviz"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["chart","aspect-ratio-box"]},"implementations":[],"sources":[{"title":"eagereyes: Banking to 45 degrees","url":"https://eagereyes.org/blog/2013/banking-45-degrees"}],"demo":"inline","useWhen":"a line chart reads too steep or too flat for the story it tells"},{"name":"Chart description","slug":"chart-description","category":"accessibility","status":"published","definition":"The text alternative for a chart: a summary of the takeaway plus access to the underlying values, not a recital of the pixels.","aliases":[{"name":"chart alt text"},{"name":"accessible chart"},{"name":"data table fallback"}],"tags":["dataviz"],"relations":{"contrastWith":["alt-text","long-description","sonification"],"variantOf":[],"partOf":[],"seeAlso":["chart","data-table"]},"implementations":[],"sources":[{"title":"W3C WAI: Complex images","url":"https://www.w3.org/WAI/tutorials/images/complex/"},{"title":"Apple HIG: Charts","url":"https://developer.apple.com/design/human-interface-guidelines/charts"}],"demo":"inline","useWhen":"a chart needs to work for readers who cannot see it"},{"name":"Chart legend","slug":"chart-legend","category":"component","status":"published","definition":"The key beside a chart that decodes series colours and symbols into names, and the first thing direct labeling tries to delete.","aliases":[{"name":"chart key"},{"name":"series legend"}],"tags":["dataviz"],"relations":{"contrastWith":["direct-labeling","fieldset","chart-annotation"],"variantOf":[],"partOf":["chart"],"seeAlso":[]},"implementations":[{"system":"carbon","name":"Legends","url":"https://carbondesignsystem.com/data-visualization/legends/"},{"system":"shadcn","name":"Chart (ChartLegend)","url":"https://ui.shadcn.com/docs/components/base/chart"}],"sources":[{"title":"Carbon: Legends","url":"https://carbondesignsystem.com/data-visualization/legends/"},{"title":"shadcn/ui: Chart","url":"https://ui.shadcn.com/docs/components/base/chart"}],"demo":"inline","useWhen":"naming the colour key of a chart, not a fieldset caption"},{"name":"Chartjunk","slug":"chartjunk","category":"pattern","status":"published","definition":"Tufte's word for ink that decorates a chart without carrying data: 3D bevels, gradient fills, mascots, gridline thickets.","aliases":[{"name":"chart junk"},{"name":"non-data ink"}],"tags":["dataviz"],"relations":{"contrastWith":["data-ink-ratio"],"variantOf":[],"partOf":[],"seeAlso":["chart-annotation"]},"implementations":[],"sources":[{"title":"Wikipedia: Chartjunk","url":"https://en.wikipedia.org/wiki/Chartjunk"}],"demo":"inline","useWhen":"a chart's decoration is fighting its data"},{"name":"Chat bubble","slug":"chat-bubble","category":"component","status":"published","definition":"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.","aliases":[{"name":"message bubble"},{"name":"speech bubble"},{"name":"bubble","source":"shadcn"},{"name":"message","source":"shadcn"}],"tags":["messaging"],"relations":{"contrastWith":["callout"],"variantOf":[],"partOf":[],"seeAlso":["read-receipt","typing-indicator"]},"implementations":[{"system":"shadcn","name":"Bubble","url":"https://ui.shadcn.com/docs/components"}],"sources":[{"title":"Cloudscape components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"one message in a conversation view"},{"name":"Check answers","slug":"check-answers","category":"pattern","status":"published","definition":"A review screen listing everything the reader entered, with a change link beside each answer, shown before the submission is final.","aliases":[{"name":"review page","source":"community"},{"name":"summary page","source":"community"},{"name":"check your answers","source":"govuk"},{"name":"order review","source":"community"},{"name":"confirm and submit","source":"community"}],"tags":["commerce","forms"],"relations":{"contrastWith":["confirmation-page","order-summary"],"variantOf":[],"partOf":[],"seeAlso":["one-thing-per-page"]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Check answers","url":"https://design-system.service.gov.uk/patterns/check-answers/"}],"demo":"inline","useWhen":"a summary screen lets you review and edit before submitting"},{"name":"Checkbox","slug":"checkbox","category":"component","status":"published","definition":"A square control that turns one independent option on or off, used in sets where any number of the options may be chosen.","aliases":[{"name":"tick box","source":"community"},{"name":"check box","source":"community"},{"name":"checkboxes","source":"govuk"}],"tags":["forms","selection"],"relations":{"contrastWith":["switch","mixed-state-checkbox","radio-group"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Checkbox","url":"https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/"},{"system":"material","name":"Checkbox","url":"https://m3.material.io/components/checkbox/overview"},{"system":"fluent","name":"Checkbox","url":"https://fluent2.microsoft.design/components/web/react/core/checkbox/usage"},{"system":"carbon","name":"Checkbox","url":"https://carbondesignsystem.com/components/checkbox/usage/"},{"system":"polaris","name":"Checkbox","url":"https://shopify.dev/docs/api/app-home/polaris-web-components/forms/checkbox"},{"system":"radix","name":"Checkbox","url":"https://www.radix-ui.com/primitives/docs/components/checkbox"},{"system":"base-ui","name":"Checkbox","url":"https://base-ui.com/react/components/checkbox"},{"system":"shadcn","name":"Checkbox","url":"https://ui.shadcn.com/docs/components/checkbox"}],"sources":[{"title":"ARIA Authoring Practices Guide: Checkbox pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/"},{"title":"MDN: input type=\"checkbox\"","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox"}],"demo":"inline","useWhen":"each option is independently on or off"},{"name":"Chevron","slug":"chevron","category":"component","status":"published","definition":"The small angle bracket used as a directional marker: down means this opens, right means this goes deeper, in breadcrumbs it means next level.","aliases":[{"name":"arrow indicator","source":"community"},{"name":"chevron icon","source":"community"},{"name":"angle bracket","source":"community"}],"tags":[],"relations":{"contrastWith":["disclosure-triangle","caret","sort-indicator","popover-arrow"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"NameThatUI: element index","url":"https://namethatui.com/"}],"demo":"inline","useWhen":"naming the little angle arrow on a control"},{"name":"Chip","slug":"chip","category":"component","status":"published","definition":"A compact, rounded element holding one value, which can usually be selected, removed, or both.","aliases":[{"name":"pill"},{"name":"token"}],"tags":[],"relations":{"contrastWith":["badge","tag","tag-input","swatch"],"variantOf":[],"partOf":[],"seeAlso":["applied-filters"]},"implementations":[{"system":"material","name":"Chips","url":"https://m3.material.io/components/chips/overview"},{"system":"carbon","name":"Tag","url":"https://carbondesignsystem.com/components/tag/usage/"},{"system":"polaris","name":"Tag","url":"https://polaris.shopify.com/components/selection-and-input/tag"}],"sources":[],"demo":"inline","useWhen":"a compact value you can select or remove"},{"name":"Chorded shortcut","slug":"chorded-shortcut","category":"interaction","status":"published","definition":"A shortcut whose keys are held down together like a chord, in contrast to one typed as a sequence of separate presses.","aliases":[{"name":"key chord","source":"community"},{"name":"chording","source":"community"},{"name":"key combination","source":"community"},{"name":"combo key","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["key-sequence","modifier-key","keyboard-shortcut"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: chorded keyboard","url":"https://en.wikipedia.org/wiki/Chorded_keyboard"}],"demo":"inline","useWhen":"keys pressed together rather than one after another"},{"name":"Motion choreography","slug":"choreography","category":"motion","status":"published","definition":"The plan for how several animating elements relate in time and space, deciding what leads, what follows, and what stays still.","aliases":[{"name":"orchestration","source":"community"},{"name":"sequencing","source":"community"},{"name":"motion sequence","source":"community"}],"tags":[],"relations":{"contrastWith":["microinteraction","parenting"],"variantOf":[],"partOf":[],"seeAlso":["delay","tween"]},"implementations":[{"system":"fluent","name":"Motion","url":"https://fluent2.microsoft.design/motion"}],"sources":[{"title":"Carbon Design System: motion choreography","url":"https://carbondesignsystem.com/elements/motion/choreography/"},{"title":"Fluent 2: Motion","url":"https://fluent2.microsoft.design/motion"}],"demo":"inline","useWhen":"more than one thing moves and the order matters"},{"name":"Chroma","slug":"chroma","category":"color","status":"published","definition":"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.","aliases":[{"name":"C in OKLCH"},{"name":"C in HCT","source":"material"}],"tags":[],"relations":{"contrastWith":["saturation","gamut-mapping","perceptual-uniformity"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"radix","name":"the purest step (step 9)","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"sources":[{"title":"MDN: oklch()","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch"},{"title":"HCT in ColorAide","url":"https://facelessuser.github.io/coloraide/colors/hct/"}],"demo":"inline","useWhen":"comparing colourfulness across colours of different lightness"},{"name":"Chrome","slug":"chrome","category":"layout","status":"published","definition":"The parts of a window or app that frame content rather than being content: title bars, toolbars, tab strips and address bars.","aliases":[{"name":"browser chrome","source":"community"},{"name":"app chrome","source":"community"},{"name":"furniture","source":"community"},{"name":"window decoration","source":"community"}],"tags":[],"relations":{"contrastWith":["app-shell"],"variantOf":[],"partOf":[],"seeAlso":["title-bar","edge-to-edge"]},"implementations":[],"sources":[{"title":"Viewport concepts, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/CSSOM_view/Viewport_concepts"}],"demo":"inline","useWhen":"separating the frame from the thing being framed"},{"name":"Chunking","slug":"chunking","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"content chunking","source":"community"},{"name":"succinct text","source":"w3c"},{"name":"visual grouping","source":"community"}],"tags":[],"relations":{"contrastWith":["one-thing-per-page","cognitive-load","plain-language"],"variantOf":[],"partOf":[],"seeAlso":["proximity"]},"implementations":[],"sources":[{"title":"W3C: Keep Text Succinct","url":"https://www.w3.org/WAI/WCAG2/supplemental/patterns/o3p05-succinct-text/"}],"demo":"inline","useWhen":"a dense block has to be read by anyone tired"},{"name":"Claymorphism","slug":"claymorphism","category":"aesthetic","status":"published","definition":"A soft style where controls look inflated from clay: pastel fills, very large corner radii, an inner highlight, and a tinted drop shadow.","aliases":[{"name":"clay UI"},{"name":"claymorphic design"},{"name":"play-doh UI","source":"community"},{"name":"puffy 3D buttons","source":"community"}],"tags":[],"relations":{"contrastWith":["deformable-ui","neo-skeuomorphism","neumorphism"],"variantOf":[],"partOf":[],"seeAlso":["glassmorphism","kawaii-ui"]},"implementations":[],"sources":[{"title":"Superdesign: UI style catalog","url":"https://superdesign.dev/styles"},{"title":"Wow-How: 4 Main Types of Morphism in UI Design","url":"https://wow-how.com/articles/types-of-morphism-in-ui-design"}],"demo":"inline","useWhen":"puffy pastel surfaces that look moulded"},{"name":"Click-through","slug":"click-through","category":"interaction","status":"published","definition":"A click that both focuses an inactive surface and reaches the control underneath, instead of being spent activating the window first.","aliases":[{"name":"click-through activation","source":"community"},{"name":"focus-stealing click","source":"community"},{"name":"pass-through click","source":"community"}],"tags":[],"relations":{"contrastWith":["nested-interactive","focus-follows-mouse"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"LWN: Focus follows mouse or click to focus?","url":"https://lwn.net/Articles/467703/"}],"demo":"inline","useWhen":"the first click also does the thing, or does not"},{"name":"Cloning","slug":"cloning","category":"motion","status":"published","definition":"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.","aliases":[{"name":"object cloning","source":"community"},{"name":"spawn animation","source":"community"},{"name":"clone and move","source":"community"}],"tags":[],"relations":{"contrastWith":["morph-transition","container-transform"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UX Magazine: creating usability with motion, the UX in Motion Manifesto","url":"https://uxmag.com/articles/creating-usability-with-motion-the-ux-in-motion-manifesto"},{"title":"The 12 principles of UX in motion","url":"https://shengbanx.gitbooks.io/motion-system/content/chapter5.html"}],"demo":"inline","useWhen":"a new object must be traceable to the thing that made it"},{"name":"Close button","slug":"close-button","category":"component","status":"published","definition":"The small dismiss control in the corner of a dialog, banner or panel, drawn as an X and named Close rather than X.","aliases":[{"name":"dismiss button"},{"name":"x button"},{"name":"close icon"}],"tags":[],"relations":{"contrastWith":["icon-button","light-dismiss","window-controls","emergency-exit-button"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Mantine components","url":"https://mantine.dev/core/package/"}],"demo":"inline","useWhen":"the little X that dismisses a surface"},{"name":"Cluster","slug":"cluster","category":"layout","status":"published","definition":"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.","aliases":[{"name":"the cluster","source":"every-layout"},{"name":"tag list","source":"community"},{"name":"wrap group","source":"community"},{"name":"inline group","source":"community"}],"tags":[],"relations":{"contrastWith":["stack","deconstructed-pancake","switcher"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Layouts, Every Layout","url":"https://every-layout.dev/layouts/"}],"demo":"inline","useWhen":"tags or buttons of mixed widths that must wrap neatly"},{"name":"CMYK","slug":"cmyk","category":"color","status":"published","definition":"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.","aliases":[{"name":"process color","source":"community"},{"name":"four-color process","source":"community"},{"name":"CMYK color model"}],"tags":["editorial"],"relations":{"contrastWith":["srgb"],"variantOf":[],"partOf":[],"seeAlso":["color-gamut","page-break"]},"implementations":[],"sources":[{"title":"Wikipedia: CMYK color model","url":"https://en.wikipedia.org/wiki/CMYK_color_model"}],"demo":"inline","useWhen":"designing for ink on paper instead of light on glass"},{"name":"Coach mark","slug":"coach-mark","category":"component","status":"published","definition":"A temporary message anchored to a control that teaches what it does, often chained into a numbered sequence across a screen.","aliases":[{"name":"coachmark","source":"community"},{"name":"hotspot","source":"cloudscape"},{"name":"beacon","source":"community"},{"name":"tour step","source":"community"},{"name":"spotlight tooltip","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["onboarding-tour","toggletip"],"variantOf":[],"partOf":[],"seeAlso":["tooltip","feature-spotlight","zero-state"]},"implementations":[],"sources":[{"title":"Coach mark, Adobe Spectrum","url":"https://spectrum.adobe.com/page/coach-mark/"}],"demo":"inline","useWhen":"a teaching bubble pointing at a control"},{"name":"Code editor","slug":"code-editor","category":"component","status":"published","definition":"A text area specialised for code, with a gutter of line numbers, syntax colouring and a caret that understands indentation.","aliases":[{"name":"code view","source":"cloudscape"},{"name":"code block","source":"shadcn"}],"tags":[],"relations":{"contrastWith":["data-grid","rich-text-editor"],"variantOf":[],"partOf":[],"seeAlso":["monospace","minimap"]},"implementations":[],"sources":[{"title":"Cloudscape components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"an editing surface built for code"},{"name":"Cognitive load","slug":"cognitive-load","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"memory load","source":"community"},{"name":"extraneous load","source":"community"},{"name":"working memory demand","source":"community"},{"name":"mental effort","source":"community"}],"tags":[],"relations":{"contrastWith":["plain-language","chunking"],"variantOf":[],"partOf":[],"seeAlso":["progressive-disclosure"]},"implementations":[],"sources":[{"title":"W3C WAI: Cognitive Accessibility at W3C","url":"https://www.w3.org/WAI/cognitive/"},{"title":"W3C: Avoid Too Much Content","url":"https://www.w3.org/WAI/WCAG2/supplemental/patterns/o5p03-manageable-quantity"}],"demo":"inline","useWhen":"a screen is correct but exhausting to use"},{"name":"Collapsing toolbar","slug":"collapsing-toolbar","category":"motion","status":"published","definition":"A header that shrinks as the page scrolls, trading its large title and image for a compact bar that stays available.","aliases":[{"name":"collapsing app bar","source":"material"},{"name":"large title collapse","source":"hig"},{"name":"shrinking header","source":"community"},{"name":"condensing header","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["sticky-header","app-bar"],"variantOf":[],"partOf":[],"seeAlso":["scroll-pinning"]},"implementations":[],"sources":[{"title":"Material Design 3: Transitions","url":"https://m3.material.io/styles/motion/transitions"}],"demo":"inline","useWhen":"a header must stay reachable without keeping its height"},{"name":"Color alias","slug":"color-alias","category":"color","status":"published","definition":"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.","aliases":[{"name":"aliasing","source":"radix"},{"name":"alias token","source":"community"},{"name":"token reference","source":"dtcg"},{"name":"semantic alias","source":"radix"}],"tags":["tokens"],"relations":{"contrastWith":["color-token","color-role","primitive-color-token"],"variantOf":[],"partOf":[],"seeAlso":["relative-color-syntax"]},"implementations":[{"system":"radix","name":"Aliasing","url":"https://www.radix-ui.com/colors/docs/overview/aliasing"}],"sources":[{"title":"Radix Colors: aliasing","url":"https://www.radix-ui.com/colors/docs/overview/aliasing"}],"demo":"inline","useWhen":"one scale answering to more than one meaning"},{"name":"Color banding","slug":"color-banding","category":"color","status":"published","definition":"The visible stripes that appear across a gradient when a display or file cannot render enough intermediate steps to keep the transition smooth.","aliases":[{"name":"banding","source":"community"},{"name":"posterization","source":"community"},{"name":"gradient stripes","source":"community"},{"name":"contouring","source":"community"}],"tags":[],"relations":{"contrastWith":["grainy-gradient","dithering"],"variantOf":[],"partOf":[],"seeAlso":["color-interpolation"]},"implementations":[],"sources":[{"title":"Color Banding and Dithering","url":"https://shader-tutorial.dev/advanced/color-banding-dithering/"}],"demo":"inline","useWhen":"a gradient breaking into visible stripes"},{"name":"Color font","slug":"color-font","category":"typography","status":"published","definition":"A font whose glyphs carry their own colors, gradients, or layers, with a palette the page can override rather than a single ink.","aliases":[{"name":"COLR font"},{"name":"COLRv1"},{"name":"chromatic font"},{"name":"font-palette","source":"css"},{"name":"OpenType-SVG"}],"tags":[],"relations":{"contrastWith":["icon-font","emoji-presentation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"COLRv1 and CSS font-palette (CSS-Tricks)","url":"https://css-tricks.com/colrv1-and-css-font-palette-web-typography/"}],"demo":"inline","useWhen":"type that carries its own colors"},{"name":"Color gamut","slug":"color-gamut","category":"color","status":"published","definition":"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.","aliases":[{"name":"gamut","source":"community"},{"name":"out of gamut","source":"community"},{"name":"color-gamut media query","source":"css"}],"tags":[],"relations":{"contrastWith":["gamut-mapping","color-space","wide-gamut"],"variantOf":[],"partOf":[],"seeAlso":["cmyk"]},"implementations":[],"sources":[{"title":"MDN: color-gamut media feature","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/color-gamut"},{"title":"CSS Color Module Level 4","url":"https://www.w3.org/TR/css-color-4/"}],"demo":"inline","useWhen":"asking whether a colour can be shown at all"},{"name":"Color harmonization","slug":"color-harmonization","category":"color","status":"published","definition":"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.","aliases":[{"name":"harmonize","source":"material"},{"name":"HarmonizedColors","source":"material"},{"name":"color blending","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["color-mix","seed-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Harmonized custom colors","url":"https://m3.material.io/styles/color/overview"}],"sources":[{"title":"Material 3: color overview","url":"https://m3.material.io/styles/color/overview"}],"demo":"inline","useWhen":"making a fixed outside colour belong to a generated scheme"},{"name":"Color harmony","slug":"color-harmony","category":"color","status":"published","definition":"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.","aliases":[{"name":"color relationship"},{"name":"palette type","source":"community"}],"tags":[],"relations":{"contrastWith":["sixty-thirty-ten-rule","color-wheel"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"The Ultimate Color Glossary For UI Designers","url":"https://careerfoundry.com/en/blog/ui-design/color-glossary-for-ui-designers/"}],"demo":"inline","useWhen":"choosing a palette by a geometric rule rather than by eye"},{"name":"Color interpolation","slug":"color-interpolation","category":"color","status":"published","definition":"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.","aliases":[{"name":"hue interpolation","source":"css"},{"name":"longer hue","source":"css"},{"name":"shorter hue","source":"css"},{"name":"in oklab","source":"css"},{"name":"grey dead zone","source":"community"},{"name":"gray dead zone","source":"community"}],"tags":[],"relations":{"contrastWith":["color-stop","color-mix","hue-shift"],"variantOf":[],"partOf":[],"seeAlso":["holographic-foil","color-banding"]},"implementations":[],"sources":[{"title":"MDN: <color-interpolation-method>","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color-interpolation-method"},{"title":"CSS Color Module Level 4","url":"https://www.w3.org/TR/css-color-4/"}],"demo":"inline","useWhen":"controlling the path a blend takes between two colours"},{"name":"color-mix()","slug":"color-mix","category":"color","status":"published","definition":"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.","aliases":[{"name":"color mixing","source":"community"},{"name":"mix in oklab","source":"css"},{"name":"tint function","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["color-interpolation","color-harmonization","relative-color-syntax"],"variantOf":[],"partOf":[],"seeAlso":["tint","shade"]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"},{"title":"CSS Color Module Level 5 vocabulary in css-color-4","url":"https://www.w3.org/TR/css-color-4/"}],"demo":"inline","useWhen":"deriving a variant from a colour instead of picking one"},{"name":"Color picker","slug":"color-picker","category":"component","status":"published","definition":"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.","aliases":[{"name":"color chooser","source":"community"},{"name":"color input","source":"community"},{"name":"color wheel picker","source":"community"},{"name":"saturation field","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["color-well","eyedropper"],"variantOf":[],"partOf":[],"seeAlso":["swatch"]},"implementations":[],"sources":[{"title":"MDN: EyeDropper API","url":"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API"}],"demo":"inline","useWhen":"letting a person choose an arbitrary colour"},{"name":"Color ramp","slug":"color-ramp","category":"color","status":"published","definition":"One hue rendered at a fixed series of lightness steps, numbered so that the same step means the same job in every hue.","aliases":[{"name":"color scale","source":"radix"},{"name":"shade scale"},{"name":"tonal palette"}],"tags":["tokens"],"relations":{"contrastWith":["semantic-color","gradient","neutral-palette","interaction-color-step","monochromatic-palette"],"variantOf":[],"partOf":[],"seeAlso":["tint","shade","hct","hue-shift"]},"implementations":[{"system":"radix","name":"Radix Colors","url":"https://www.radix-ui.com/colors"}],"sources":[{"title":"Radix Colors","url":"https://www.radix-ui.com/colors"}],"demo":"inline","useWhen":"one hue at every lightness the interface needs"},{"name":"Color role","slug":"color-role","category":"color","status":"published","definition":"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.","aliases":[{"name":"semantic token","source":"community"},{"name":"color slot","source":"community"},{"name":"role token"}],"tags":["tokens"],"relations":{"contrastWith":["color-alias","semantic-color","primitive-color-token"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Color roles","url":"https://m3.material.io/styles/color/roles"}],"sources":[{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"}],"demo":"inline","useWhen":"the job a colour does, as the thing components reference"},{"name":"Color scheme","slug":"color-scheme","category":"color","status":"published","definition":"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.","aliases":[{"name":"theme preference","source":"community"},{"name":"supported color schemes","source":"community"}],"tags":["theming","web-platform"],"relations":{"contrastWith":["color-theme","dark-mode","light-dark"],"variantOf":[],"partOf":[],"seeAlso":["flash-of-inaccurate-color-theme"]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"},{"title":"MDN: accent-color respects color schemes","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/accent-color"}],"demo":"inline","useWhen":"telling the browser which themes your page supports"},{"name":"Color space","slug":"color-space","category":"color","status":"published","definition":"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.","aliases":[{"name":"color model","source":"community"},{"name":"colorSpace","source":"dtcg"},{"name":"CIELAB"}],"tags":[],"relations":{"contrastWith":["color-gamut","srgb"],"variantOf":[],"partOf":[],"seeAlso":["oklch"]},"implementations":[],"sources":[{"title":"CSS Color Module Level 4","url":"https://www.w3.org/TR/css-color-4/"},{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"}],"demo":"inline","useWhen":"naming the coordinate system a colour value is written in"},{"name":"Color stop","slug":"color-stop","category":"color","status":"published","definition":"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.","aliases":[{"name":"gradient stop","source":"community"},{"name":"interpolation hint","source":"css"},{"name":"midpoint","source":"community"},{"name":"stop position"}],"tags":[],"relations":{"contrastWith":["gradient","color-interpolation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: Using CSS gradients","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Images/Using_gradients"}],"demo":"inline","useWhen":"pinning a colour at a point along a gradient"},{"name":"Color temperature","slug":"color-temperature","category":"color","status":"published","definition":"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.","aliases":[{"name":"warm and cool colors","source":"community"},{"name":"warm grey","source":"community"},{"name":"cool grey","source":"community"},{"name":"warm gray","source":"community"},{"name":"cool gray","source":"community"}],"tags":[],"relations":{"contrastWith":["tint","hue-shift","tinted-neutral"],"variantOf":[],"partOf":[],"seeAlso":["hue"]},"implementations":[],"sources":[{"title":"Design Glossary: Basic Color Terminology","url":"https://design4users.com/basic-color-terminology/"}],"demo":"inline","useWhen":"biasing a palette warm or cool"},{"name":"Color theme","slug":"color-theme","category":"color","status":"published","definition":"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.","aliases":[{"name":"theme","source":"community"},{"name":"theming","source":"community"},{"name":"white label","source":"community"},{"name":"g10, g90, g100","source":"carbon"},{"name":"skin","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["dark-mode","color-scheme","color-token","static-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"radix","name":"Theme accentColor / grayColor","url":"https://www.radix-ui.com/themes/docs/theme/color"}],"sources":[{"title":"Carbon: color usage and themes","url":"https://carbondesignsystem.com/elements/color/usage/"},{"title":"Radix Themes: color","url":"https://www.radix-ui.com/themes/docs/theme/color"}],"demo":"inline","useWhen":"a whole palette swapped as one named set"},{"name":"Color token","slug":"color-token","category":"color","status":"published","definition":"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.","aliases":[{"name":"design token"},{"name":"color variable"},{"name":"CSS custom property"},{"name":"Figma variable","source":"figma"}],"tags":["tokens"],"relations":{"contrastWith":["color-alias","color-theme","primitive-color-token","semantic-color"],"variantOf":[],"partOf":[],"seeAlso":["accent-color","currentcolor","light-dark","typography-token"]},"implementations":[],"sources":[{"title":"Design Tokens Color Module","url":"https://www.designtokens.org/tr/drafts/color/"},{"title":"Design Tokens Format Module","url":"https://w3c.github.io/cg-reports/design-tokens/CG-FINAL-format-20251028/"}],"demo":"inline","useWhen":"a colour stored as a name so it can be repointed"},{"name":"Color vision deficiency","slug":"color-vision-deficiency","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"color blindness","source":"community"},{"name":"deuteranopia","source":"community"},{"name":"protanopia","source":"community"},{"name":"tritanopia","source":"community"},{"name":"CVD","source":"community"}],"tags":[],"relations":{"contrastWith":["apca","use-of-color"],"variantOf":[],"partOf":[],"seeAlso":["categorical-palette"]},"implementations":[],"sources":[{"title":"Designing for color blindness","url":"https://colorblind.io/guides/designing-for-color-blindness"}],"demo":"inline","useWhen":"checking a palette against reduced hue discrimination"},{"name":"Color well","slug":"color-well","category":"component","status":"published","definition":"The small filled square that shows the current colour and opens a colour picker when pressed.","aliases":[{"name":"color swatch button","source":"community"},{"name":"colour chip","source":"community"},{"name":"color field","source":"polaris"}],"tags":[],"relations":{"contrastWith":["swatch","color-picker","eyedropper"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"polaris","name":"Color field","url":"https://shopify.dev/docs/api/app-home/polaris-web-components"}],"sources":[{"title":"NameThatUI: element index","url":"https://namethatui.com/"}],"demo":"inline","useWhen":"the little colour square that opens a picker"},{"name":"Color wheel","slug":"color-wheel","category":"color","status":"published","definition":"A circular arrangement of hues that makes relationships between colours geometric, so a scheme becomes a shape drawn across the circle.","aliases":[{"name":"color circle"},{"name":"hue wheel","source":"community"},{"name":"color ring","source":"community"}],"tags":[],"relations":{"contrastWith":["color-harmony"],"variantOf":[],"partOf":[],"seeAlso":["hue"]},"implementations":[],"sources":[{"title":"Design Glossary: Basic Color Terminology","url":"https://design4users.com/basic-color-terminology/"}],"demo":"inline","useWhen":"picking colours by their angular relationship to each other"},{"name":"Column drop","slug":"column-drop","category":"layout","status":"published","definition":"A responsive pattern where full height columns peel off one at a time and stack below as the viewport narrows, keeping source order.","aliases":[{"name":"column drop pattern","source":"community"},{"name":"stacking columns","source":"community"}],"tags":[],"relations":{"contrastWith":["layout-shifter","tiny-tweaks","mostly-fluid"],"variantOf":["responsive-web-design"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Multi-Device Layout Patterns, LukeW","url":"https://www.lukew.com/ff/entry.asp?1514="}],"demo":"inline","useWhen":"columns that stack one by one as space runs out"},{"name":"Column offset","slug":"column-offset","category":"layout","status":"published","definition":"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.","aliases":[{"name":"offset column","source":"bootstrap"},{"name":"push and pull columns","source":"community"},{"name":"grid offset","source":"community"},{"name":"indented column","source":"community"}],"tags":[],"relations":{"contrastWith":["gutter"],"variantOf":[],"partOf":[],"seeAlso":["twelve-column-grid"]},"implementations":[],"sources":[{"title":"Columns, Bootstrap","url":"https://getbootstrap.com/docs/5.3/layout/columns/"}],"demo":"inline","useWhen":"starting a column part way across the grid"},{"name":"Column resizer","slug":"column-resizer","category":"component","status":"published","definition":"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.","aliases":[{"name":"column divider","source":"community"},{"name":"column grip","source":"community"},{"name":"resize gripper","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["splitter","resize-handle"],"variantOf":[],"partOf":["data-table"],"seeAlso":["frozen-column"]},"implementations":[],"sources":[{"title":"Data table, Carbon Design System","url":"https://carbondesignsystem.com/components/data-table/usage/"}],"demo":"inline","useWhen":"dragging a column border to change its width"},{"name":"Combobox","slug":"combobox","category":"component","status":"published","definition":"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.","aliases":[{"name":"combo box","source":"hig"},{"name":"autocomplete"}],"tags":["forms","search"],"relations":{"contrastWith":["dropdown","command-palette","select","search-field","listbox","multi-select","inline-autocomplete","typeahead"],"variantOf":[],"partOf":[],"seeAlso":["active-descendant"]},"implementations":[{"system":"aria-apg","name":"Combobox","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/"},{"system":"shadcn","name":"Combobox","url":"https://ui.shadcn.com/docs/components/combobox"},{"system":"carbon","name":"Combo box","url":"https://carbondesignsystem.com/components/dropdown/usage/"}],"sources":[{"title":"ARIA Authoring Practices Guide: Combobox pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/"}],"demo":"inline","useWhen":"a text field that filters a list as you type"},{"name":"Command palette","slug":"command-palette","category":"component","status":"published","definition":"A keyboard-summoned overlay whose single search box finds and runs any command or destination in an application by name.","aliases":[{"name":"command menu","source":"shadcn"},{"name":"omnibar","source":"blueprint"},{"name":"spotlight","source":"mantine"},{"name":"quick open","source":"vscode"},{"name":"launcher"}],"tags":["keyboard","search"],"relations":{"contrastWith":["combobox","search-field","keyboard-shortcut","keyboard-shortcuts-dialog","slash-command"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"shadcn","name":"Command","url":"https://ui.shadcn.com/docs/components/command"},{"system":"base-ui","name":"Autocomplete (command palette)","url":"https://base-ui.com/react/components/autocomplete"}],"sources":[{"title":"Command palette pattern, UX Patterns for Developers","url":"https://uxpatterns.dev/patterns/advanced/command-palette"}],"demo":"inline","useWhen":"one keystroke reaches every command by name"},{"name":"Commitment pattern","slug":"commitment-pattern","category":"layout","status":"published","definition":"The rare scanning shape where a motivated reader fixates on nearly every word, the only pattern that behaves like actual reading.","aliases":[],"tags":[],"relations":{"contrastWith":["bypassing-pattern","spotted-pattern"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Text Scanning Patterns: Eyetracking Evidence, NN/g","url":"https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/"}],"demo":"inline","useWhen":"the one case where readers read every word"},{"name":"Common region","slug":"common-region","category":"layout","status":"published","definition":"The grouping principle that anything inside a shared boundary reads as one group, strong enough to beat how far apart the items actually are.","aliases":[{"name":"law of common region","source":"community"},{"name":"Gestalt common region","source":"nngroup"},{"name":"container grouping","source":"community"}],"tags":[],"relations":{"contrastWith":["proximity","box"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"The Principle of Common Region: Containers Create Groupings, NN/g","url":"https://www.nngroup.com/articles/common-region/"}],"demo":"inline","useWhen":"when a container has to beat the spacing"},{"name":"Comparison prevention","slug":"comparison-prevention","category":"pattern","status":"published","definition":"Structuring plans or products so their features and prices cannot be lined up, forcing a decision that no side-by-side reading would support.","aliases":[{"name":"price comparison prevention","source":"community"},{"name":"obfuscated pricing","source":"community"},{"name":"incomparable tiers","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["comparison-table"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: comparison prevention","url":"https://www.deceptive.design/types/comparison-prevention"}],"demo":"inline","useWhen":"the plans are built so you cannot compare them"},{"name":"Comparison table","slug":"comparison-table","category":"component","status":"published","definition":"A table whose columns are options and whose rows are features, read across to decide between plans or products.","aliases":[{"name":"pricing table","source":"community"},{"name":"feature matrix","source":"community"},{"name":"plan comparison","source":"community"},{"name":"spec table","source":"community"}],"tags":["commerce","tables"],"relations":{"contrastWith":["data-table","description-list","selection-card","comparison-prevention"],"variantOf":[],"partOf":[],"seeAlso":["lawn-mower-pattern"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"deciding between options feature by feature"},{"name":"Complementary colors","slug":"complementary-colors","category":"color","status":"published","definition":"Two hues sitting opposite each other on the colour wheel, the pairing that produces the strongest contrast and the loudest accent.","aliases":[{"name":"opposite colors","source":"community"},{"name":"contrasting colors","source":"community"},{"name":"split-complementary"}],"tags":[],"relations":{"contrastWith":["triadic-colors","analogous-colors"],"variantOf":[],"partOf":[],"seeAlso":["hue"]},"implementations":[],"sources":[{"title":"Design Glossary: Basic Color Terminology","url":"https://design4users.com/basic-color-terminology/"}],"demo":"inline","useWhen":"the loudest possible pairing of two hues"},{"name":"Complication","slug":"complication","category":"component","status":"published","definition":"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.","aliases":[{"name":"accessory","source":"hig"},{"name":"watch face widget","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["widget","stat"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"Complications","url":"https://developer.apple.com/design/human-interface-guidelines/complications"}],"sources":[{"title":"Apple HIG: Complications","url":"https://developer.apple.com/design/human-interface-guidelines/complications"}],"demo":"inline","useWhen":"one number has to survive being glanced at on a watch"},{"name":"Compositor-only animation","slug":"compositor-animation","category":"motion","status":"published","definition":"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.","aliases":[{"name":"GPU-accelerated animation","source":"community"},{"name":"cheap properties","source":"community"},{"name":"transform and opacity only","source":"community"},{"name":"will-change","source":"css"},{"name":"hardware acceleration","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["jank","layout-thrashing"],"variantOf":[],"partOf":[],"seeAlso":["frame-rate"]},"implementations":[],"sources":[{"title":"MDN: animation performance and frame rate","url":"https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Animation_performance_and_frame_rate"}],"demo":"inline","useWhen":"motion must stay smooth under load"},{"name":"Compound grid","slug":"compound-grid","category":"layout","status":"published","definition":"Two or more grids of different column counts overlaid in one layout, so a page can carry several rhythms while still sharing one structure.","aliases":[{"name":"compound grids","source":"community"},{"name":"overlaid grids","source":"community"}],"tags":[],"relations":{"contrastWith":["broken-grid","modular-grid"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Five simple steps to designing grid systems, part 4, Mark Boulton","url":"https://markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-4/"},{"title":"Mark Boulton on grids and responsive web design, Creative Bloq","url":"https://www.creativebloq.com/design/mark-boulton-grids-and-responsive-web-design-7135509"}],"demo":"inline","useWhen":"one page needing two different column rhythms"},{"name":"Confetti burst","slug":"confetti-burst","category":"motion","status":"published","definition":"A short particle celebration thrown across the screen to mark a completion, decorative by design and the first thing reduced motion should drop.","aliases":[{"name":"confetti","source":"community"},{"name":"celebration animation","source":"community"},{"name":"particle burst","source":"community"},{"name":"delight moment","source":"community"}],"tags":["gamification"],"relations":{"contrastWith":["particle-background"],"variantOf":[],"partOf":[],"seeAlso":["achievement-badge"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"a milestone deserves a moment of celebration"},{"name":"Confirmation dialog","slug":"confirmation-dialog","category":"component","status":"published","definition":"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.","aliases":[{"name":"confirm dialog","source":"community"},{"name":"are you sure modal","source":"community"},{"name":"destructive confirmation","source":"community"}],"tags":[],"relations":{"contrastWith":["popconfirm","type-to-confirm","unsaved-changes-guard","soft-delete","alert-dialog"],"variantOf":["modal-dialog"],"partOf":[],"seeAlso":["hold-to-confirm"]},"implementations":[{"system":"aria-apg","name":"Alert and Message Dialogs","url":"https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/"},{"system":"material","name":"Dialogs","url":"https://m3.material.io/components/dialogs/overview"}],"sources":[{"title":"ARIA Authoring Practices Guide: Alert and Message Dialogs","url":"https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/"}],"demo":"inline","useWhen":"stopping a destructive action to ask"},{"name":"Confirmation page","slug":"confirmation-page","category":"pattern","status":"published","definition":"The screen that closes a transaction, stating plainly that it succeeded, giving a reference the reader can quote, and saying what happens next.","aliases":[{"name":"success page","source":"community"},{"name":"thank you page","source":"community"},{"name":"receipt page","source":"community"},{"name":"order confirmation","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["order-summary","check-answers"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Confirmation pages","url":"https://design-system.service.gov.uk/patterns/confirmation-pages/"}],"demo":"inline","useWhen":"the screen that says it worked and what happens next"},{"name":"Confirmshaming","slug":"confirmshaming","category":"pattern","status":"published","definition":"Wording the decline option so that choosing it is an admission of something embarrassing, making refusal feel like a confession rather than a choice.","aliases":[{"name":"shame decline","source":"community"},{"name":"guilt opt-out","source":"community"},{"name":"no thanks, I hate saving money","source":"community"}],"tags":[],"relations":{"contrastWith":["misdirection","trick-wording"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Confirmshaming","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the no button is written to make you feel bad"},{"name":"Conformance level","slug":"conformance-level","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"level A","source":"wcag"},{"name":"level AA","source":"wcag"},{"name":"double-A","source":"community"}],"tags":[],"relations":{"contrastWith":["pour","apca","accessibility-overlay"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Conformance","url":"https://www.w3.org/TR/WCAG22/#conformance"},{"title":"W3C Accessibility Guidelines (WCAG) 3.0, Working Draft","url":"https://www.w3.org/TR/wcag-3.0/"}],"demo":"inline","useWhen":"someone says the target is AA and you need the tiers"},{"name":"Conic gradient","slug":"conic-gradient","category":"color","status":"published","definition":"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.","aliases":[{"name":"angular gradient","source":"community"},{"name":"sweep gradient","source":"android"},{"name":"pie gradient","source":"community"}],"tags":[],"relations":{"contrastWith":["gradient","mesh-gradient"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: conic-gradient()","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/conic-gradient"}],"demo":"inline","useWhen":"colours sweeping around a centre instead of across a line"},{"name":"Consistent help","slug":"consistent-help","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"help entry point","source":"wcag"},{"name":"persistent help","source":"community"},{"name":"help in the same place","source":"community"}],"tags":[],"relations":{"contrastWith":["consistent-identification"],"variantOf":[],"partOf":[],"seeAlso":["help-drawer"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Consistent Help","url":"https://www.w3.org/TR/WCAG22/#consistent-help"}],"demo":"inline","useWhen":"placing the help affordance so it never moves"},{"name":"Consistent identification","slug":"consistent-identification","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"consistent navigation","source":"wcag"},{"name":"consistent labelling","source":"community"},{"name":"same name same function","source":"community"}],"tags":[],"relations":{"contrastWith":["consistent-help"],"variantOf":[],"partOf":[],"seeAlso":["accessible-name"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Consistent Identification","url":"https://www.w3.org/TR/WCAG22/#consistent-identification"},{"title":"WCAG 2.2: Consistent Navigation","url":"https://www.w3.org/TR/WCAG22/#consistent-navigation"}],"demo":"inline","useWhen":"the same action has three names across screens"},{"name":"Constructivism","slug":"constructivism","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"Russian constructivism"},{"name":"constructivist design"},{"name":"Soviet poster style","source":"community"}],"tags":[],"relations":{"contrastWith":["art-deco","bauhaus-style","de-stijl"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"daisyUI trends: UI design styles catalog","url":"https://trends.daisyui.com/"},{"title":"Inkbot Design: 20 iconic graphic design styles","url":"https://inkbotdesign.com/graphic-design-styles/"}],"demo":"inline","useWhen":"diagonal red and black bars driving the composition"},{"name":"Container","slug":"container","category":"layout","status":"published","definition":"A wrapper that caps how wide content can get and adds the side padding that keeps it off the viewport edges.","aliases":[{"name":"wrapper","source":"community"},{"name":"content well","source":"community"},{"name":"constrained width","source":"community"},{"name":"the center","source":"every-layout"},{"name":"max-width wrapper","source":"community"}],"tags":[],"relations":{"contrastWith":["layout-margins","full-bleed"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Grid system, Bootstrap","url":"https://getbootstrap.com/docs/5.3/layout/grid/"}],"demo":"inline","useWhen":"the element that decides how wide the page can be"},{"name":"Container color","slug":"container-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"primaryContainer","source":"material"},{"name":"subtle background","source":"radix"},{"name":"soft variant","source":"radix"},{"name":"muted fill","source":"community"}],"tags":["tokens"],"relations":{"contrastWith":["surface-tint","state-layer","accent-color","surface-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Primary container","url":"https://m3.material.io/styles/color/roles"},{"system":"radix","name":"Steps 3 to 5, component backgrounds","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"sources":[{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"},{"title":"Radix Colors: understanding the scale","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"demo":"inline","useWhen":"a soft fill in the accent hue rather than the solid accent"},{"name":"Container query","slug":"container-query","category":"layout","status":"published","definition":"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.","aliases":[{"name":"element query","source":"community"},{"name":"containment query","source":"community"},{"name":"component query","source":"community"},{"name":"container query layout","source":"uiterms"}],"tags":["web-platform"],"relations":{"contrastWith":["containing-block","breakpoint"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"@container at-rule, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container"}],"demo":"inline","useWhen":"a component that must adapt to its slot, not the screen"},{"name":"Container transform","slug":"container-transform","category":"motion","status":"published","definition":"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.","aliases":[{"name":"card to detail transition","source":"community"},{"name":"expand from card","source":"community"}],"tags":[],"relations":{"contrastWith":["shared-axis","cloning","origin-aware-animation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Container transform","url":"https://m3.material.io/styles/motion/transitions"}],"sources":[{"title":"Material Design 3: Transitions","url":"https://m3.material.io/styles/motion/transitions"},{"title":"Building beautiful transitions with Material Motion for Android","url":"https://m3.material.io/blog/android-material-motion"}],"demo":"inline","useWhen":"a small surface opens into the larger one it belongs to"},{"name":"Containing block","slug":"containing-block","category":"layout","status":"published","definition":"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.","aliases":[{"name":"positioning context","source":"community"},{"name":"reference box","source":"community"},{"name":"offset parent","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["container-query","stacking-context"],"variantOf":[],"partOf":[],"seeAlso":["anchor-positioning"]},"implementations":[],"sources":[{"title":"CSS Flexible Box Layout Module Level 1","url":"https://www.w3.org/TR/css-flexbox-1/"}],"demo":"inline","useWhen":"asking what 100% is actually 100% of"},{"name":"Content choreography","slug":"content-choreography","category":"layout","status":"published","definition":"Deciding how blocks of content reorder and regroup as a layout reflows, so hierarchy survives the collapse from several columns into one.","aliases":[{"name":"choreographing content","source":"community"},{"name":"content reflow order","source":"community"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["reading-order","breakpoint"]},"implementations":[],"sources":[{"title":"Content Choreography, Trent Walton","url":"https://trentwalton.com/2011/07/14/content-choreography/"},{"title":"How To Maintain Hierarchy Through Content Choreography, Smashing Magazine","url":"https://www.smashingmagazine.com/2013/04/maintain-hierarchy-content-choreography/"}],"demo":"inline","useWhen":"deciding what order stacked blocks land in"},{"name":"Content shelf","slug":"content-shelf","category":"layout","status":"published","definition":"A horizontally scrolling row of cards, one row per category, stacked down the page so each row is browsed sideways.","aliases":[{"name":"carousel row","source":"community"},{"name":"swimlane","source":"community"},{"name":"reel","source":"every-layout"},{"name":"tray","source":"community"},{"name":"netflix rows","source":"community"}],"tags":[],"relations":{"contrastWith":["filmstrip","carousel","feed-layout","kanban-board"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"The Reel, Every Layout","url":"https://every-layout.dev/layouts/reel/"}],"demo":"inline","useWhen":"many categories, each with too many items to stack"},{"name":"Context menu","slug":"context-menu","category":"interaction","status":"published","definition":"A menu of actions for one specific object, opened on that object by right click, long press, or the context menu key.","aliases":[{"name":"right-click menu"},{"name":"contextual menu","source":"hig"},{"name":"shortcut menu"}],"tags":[],"relations":{"contrastWith":["kebab-menu","dropdown","action-sheet","swipe-actions","secondary-click","radial-menu"],"variantOf":[],"partOf":[],"seeAlso":["action-list","share-sheet","bubble-toolbar"]},"implementations":[{"system":"radix","name":"Context Menu","url":"https://www.radix-ui.com/primitives/docs/components/context-menu"}],"sources":[{"title":"MDN: Element contextmenu event","url":"https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event"}],"demo":"inline","useWhen":"actions for the exact thing you invoked them on"},{"name":"Contextual alternates","slug":"contextual-alternates","category":"typography","status":"published","definition":"Substitute letterforms a font swaps in automatically based on the neighbouring characters, so joins and repeats look natural.","aliases":[{"name":"calt","source":"opentype"},{"name":"contextual forms"},{"name":"contextual substitution"}],"tags":[],"relations":{"contrastWith":["ligature","opentype-features","stylistic-set","swash"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Syntax for OpenType features in CSS (Adobe Fonts)","url":"https://helpx.adobe.com/fonts/using/open-type-syntax.html"},{"title":"Registered features, a-e (OpenType spec)","url":"https://learn.microsoft.com/en-us/typography/opentype/spec/features_ae"}],"demo":"inline","useWhen":"a script font changes shape depending on its neighbours"},{"name":"Contrast ratio","slug":"contrast-ratio","category":"color","status":"published","definition":"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.","aliases":[{"name":"colour contrast","source":"community"},{"name":"color contrast","source":"community"},{"name":"contrast checker","source":"community"},{"name":"4.5:1","source":"wcag"},{"name":"AA contrast","source":"wcag"}],"tags":["a11y"],"relations":{"contrastWith":["large-text-threshold","non-text-contrast","apca","relative-luminance"],"variantOf":[],"partOf":[],"seeAlso":["on-color"]},"implementations":[{"system":"radix","name":"Understanding the scale","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"sources":[{"title":"Understanding Success Criterion 1.4.11: Non-text Contrast","url":"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html"}],"demo":"inline","useWhen":"measuring whether two colours are far enough apart to read"},{"name":"Cookie consent banner","slug":"cookie-consent-banner","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"cookie banner","source":"govuk"},{"name":"consent notice","source":"community"},{"name":"CMP","source":"community"},{"name":"consent management platform","source":"community"},{"name":"GDPR banner","source":"community"}],"tags":[],"relations":{"contrastWith":["banner","permission-priming"],"variantOf":[],"partOf":[],"seeAlso":["dark-pattern"]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Cookie banner","url":"https://design-system.service.gov.uk/components/cookie-banner/"}],"demo":"inline","useWhen":"the consent notice that greets you before you read anything"},{"name":"Copy button","slug":"copy-button","category":"component","status":"published","definition":"A small control beside a value that copies it to the clipboard and confirms by turning into a tick for a second or two.","aliases":[{"name":"copy to clipboard","source":"cloudscape"},{"name":"clipboard button","source":"chakra"},{"name":"copy icon","source":"community"}],"tags":[],"relations":{"contrastWith":["share-sheet"],"variantOf":[],"partOf":[],"seeAlso":["icon-button"]},"implementations":[],"sources":[{"title":"Cloudscape: components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"copying a value with one press"},{"name":"Corporate Memphis","slug":"corporate-memphis","category":"aesthetic","status":"published","definition":"The flat vector illustration style of bright, faceless people with long bendy limbs and small torsos that spread across tech marketing from 2017.","aliases":[{"name":"Alegria","source":"facebook"},{"name":"big tech illustration","source":"community"},{"name":"humans of flat","source":"community"},{"name":"flat art"},{"name":"blob people","source":"community"}],"tags":[],"relations":{"contrastWith":["kawaii-ui","memphis-design"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Corporate Memphis","url":"https://en.wikipedia.org/wiki/Corporate_Memphis"},{"title":"Webflow: Blue people and long limbs","url":"https://webflow.com/blog/corporate-memphis"}],"demo":"inline","useWhen":"flat faceless people with long bendy limbs"},{"name":"Count-up animation","slug":"count-up-animation","category":"motion","status":"published","definition":"Animating a number toward its value instead of setting it, often with digits rolling like an odometer so the change is legible.","aliases":[{"name":"odometer animation"},{"name":"rolling numbers"},{"name":"number ticker"},{"name":"animated counter"},{"name":"slot machine numbers"},{"name":"rolling digits"},{"name":"value change"}],"tags":[],"relations":{"contrastWith":["typewriter-effect","split-flap-animation"],"variantOf":[],"partOf":[],"seeAlso":["tabular-figures"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"a number changing should be noticed and read"},{"name":"Countdown timer","slug":"countdown-timer","category":"pattern","status":"published","definition":"A running clock attached to an offer or a held resource, showing how long remains and what will happen when it reaches zero.","aliases":[{"name":"urgency timer","source":"community"},{"name":"offer expires in","source":"community"},{"name":"session timer","source":"community"},{"name":"seat hold timer","source":"community"},{"name":"limited duration","source":"ui-patterns"}],"tags":[],"relations":{"contrastWith":["timeout-warning","relative-timestamp","fake-urgency","scarcity-indicator"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: Limited duration","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"a clock ticking down beside an offer or a held seat"},{"name":"Counter","slug":"counter","category":"typography","status":"published","definition":"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.","aliases":[{"name":"closed counter"},{"name":"bowl"}],"tags":[],"relations":{"contrastWith":["aperture","ink-trap"],"variantOf":[],"partOf":[],"seeAlso":["tittle"]},"implementations":[],"sources":[{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"describing the hole inside a letterform"},{"name":"Cover","slug":"cover","category":"layout","status":"published","definition":"A layout primitive that fills at least the viewport height, centring a principal element vertically with optional header and footer pinned above and below.","aliases":[{"name":"the cover","source":"every-layout"},{"name":"full height section","source":"community"},{"name":"viewport height section","source":"community"}],"tags":[],"relations":{"contrastWith":["hero","imposter","pancake-stack"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"The Cover, Every Layout","url":"https://every-layout.dev/layouts/cover/"}],"demo":"inline","useWhen":"a full height panel with something centred in it"},{"name":"Crossfade","slug":"crossfade","category":"motion","status":"published","definition":"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.","aliases":[{"name":"cross dissolve"},{"name":"cross-fade"}],"tags":[],"relations":{"contrastWith":["slide-transition","view-transition","fade","fade-through"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"swapping content of the same shape in place"},{"name":"Cubic bezier","slug":"cubic-bezier","category":"motion","status":"published","definition":"The four-control-point curve that describes how a value moves between its start and end, the default way CSS spells an easing.","aliases":[{"name":"bezier curve easing"},{"name":"easing curve"}],"tags":[],"relations":{"contrastWith":["linear-easing","easing"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: easing-function","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function"},{"title":"Easing Functions Cheat Sheet","url":"https://easings.net/"}],"demo":"inline","useWhen":"an easing has to be written down exactly"},{"name":"Curb cut effect","slug":"curb-cut-effect","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"curb cut","source":"community"},{"name":"solve for one extend to many","source":"microsoft"},{"name":"electric door effect","source":"community"}],"tags":[],"relations":{"contrastWith":["situational-disability"],"variantOf":[],"partOf":[],"seeAlso":["functional-need"]},"implementations":[],"sources":[{"title":"Wikipedia: Curb cut effect","url":"https://en.wikipedia.org/wiki/Curb_cut_effect"},{"title":"Microsoft Design: Inclusive 101","url":"https://inclusive.microsoft.design/articles/inclusive-101-guidebook"}],"demo":"inline","useWhen":"justifying accessibility work to a sceptical room"},{"name":"Current page indicator","slug":"current-page-indicator","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-current","source":"aria"},{"name":"active nav item","source":"community"},{"name":"you are here","source":"community"},{"name":"current step","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["breadcrumbs","step-indicator","sliding-indicator"],"variantOf":[],"partOf":[],"seeAlso":["navigation-bar"]},"implementations":[],"sources":[{"title":"MDN: aria-current","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current"},{"title":"W3C technique ARIA26: aria-current","url":"https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA26"}],"demo":"inline","useWhen":"showing which nav item is the page you are on"},{"name":"currentColor","slug":"currentcolor","category":"color","status":"published","definition":"A CSS keyword meaning the element's own text colour, letting borders, icons and fills inherit whatever colour the surrounding text happens to be.","aliases":[{"name":"inherit the text color","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["on-color"],"variantOf":[],"partOf":[],"seeAlso":["color-token"]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"}],"demo":"inline","useWhen":"an icon or border that should follow the text colour"},{"name":"Cursor follower","slug":"cursor-follower","category":"motion","status":"published","definition":"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.","aliases":[{"name":"custom cursor","source":"community"},{"name":"cursor trail","source":"community"},{"name":"trailing cursor","source":"community"},{"name":"cursor dot","source":"community"},{"name":"blob cursor","source":"community"}],"tags":[],"relations":{"contrastWith":["magnetic-button"],"variantOf":[],"partOf":[],"seeAlso":["spotlight-hover"]},"implementations":[],"sources":[{"title":"Webflow: a guide to custom cursors","url":"https://webflow.com/blog/custom-cursors-guide"},{"title":"HubSpot: how to use custom animated cursors","url":"https://blog.hubspot.com/website/animated-cursor"}],"demo":"inline","useWhen":"the pointer itself is part of the site's personality"},{"name":"Cursor pagination","slug":"cursor-pagination","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"keyset pagination","source":"community"},{"name":"cursor-based pagination","source":"community"},{"name":"seek pagination","source":"community"},{"name":"next and previous only","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["pagination","load-more"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the list only offers next and previous, never page numbers"},{"name":"Cyberpunk UI","slug":"cyberpunk-ui","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"cyberpunk style"},{"name":"cyberpunk aesthetic"},{"name":"neon dystopia UI"},{"name":"hacker UI"}],"tags":[],"relations":{"contrastWith":["solarpunk","fictional-user-interface","synthwave","terminal-aesthetic"],"variantOf":[],"partOf":[],"seeAlso":["neon-glow"]},"implementations":[],"sources":[{"title":"stellae.design: Cyberpunk UI, dark themes, neon accents and terminal aesthetics","url":"https://www.stellae.design/en/learn/cyberpunk-ui-design"},{"title":"daisyUI trends: Cyberpunk UI design style","url":"https://trends.daisyui.com/trend/cyberpunk/"}],"demo":"inline","useWhen":"dark dystopian surfaces with toxic neon accents"},{"name":"Damping","slug":"damping","category":"motion","status":"published","definition":"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.","aliases":[{"name":"damping ratio","source":"community"},{"name":"friction","source":"react-spring"},{"name":"critically damped","source":"community"},{"name":"bounce parameter","source":"framer-motion"}],"tags":[],"relations":{"contrastWith":["overshoot"],"variantOf":[],"partOf":[],"seeAlso":["perceptual-duration"]},"implementations":[],"sources":[{"title":"Spring Animations in Pure CSS with linear()","url":"https://www.carmenansio.com/articles/spring-physics-css/"}],"demo":"inline","useWhen":"tuning how much wobble a spring is allowed"},{"name":"Dark mode","slug":"dark-mode","category":"color","status":"published","definition":"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.","aliases":[{"name":"dark theme","source":"material"},{"name":"night mode","source":"community"},{"name":"lights out","source":"community"},{"name":"prefers-color-scheme","source":"css"}],"tags":["theming"],"relations":{"contrastWith":["inverted-colors","true-black-theme","color-scheme","color-theme","elevation-overlay","inverse-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"Dark Mode","url":"https://developer.apple.com/design/human-interface-guidelines/dark-mode"},{"system":"carbon","name":"Dark themes (g90, g100)","url":"https://carbondesignsystem.com/elements/color/usage/"}],"sources":[{"title":"Apple HIG: Dark Mode","url":"https://developer.apple.com/design/human-interface-guidelines/dark-mode"}],"demo":"inline","useWhen":"the dark counterpart of a palette, not an inversion of it"},{"name":"Dark pattern","slug":"dark-pattern","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"deceptive design","source":"deceptive-design"},{"name":"deceptive pattern","source":"deceptive-design"},{"name":"manipulative design","source":"community"},{"name":"anti-pattern","source":"community"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["cookie-consent-banner","accessibility-overlay"]},"implementations":[],"sources":[{"title":"Deceptive Design: Types of deceptive pattern","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the interface is designed against the person using it"},{"name":"Dashboard grid","slug":"dashboard-grid","category":"layout","status":"published","definition":"A grid of tiles, each holding one metric, chart or list, that a reader can often resize and rearrange.","aliases":[{"name":"widget grid","source":"community"},{"name":"tile layout","source":"community"},{"name":"dashboard canvas","source":"community"},{"name":"card dashboard","source":"community"}],"tags":["dataviz"],"relations":{"contrastWith":["card-grid","bento-grid"],"variantOf":[],"partOf":[],"seeAlso":["widget"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"many independent readouts on one screen"},{"name":"Data grid","slug":"data-grid","category":"component","status":"published","definition":"A spreadsheet-like table where individual cells take focus and can be edited, navigated cell by cell with the arrow keys.","aliases":[{"name":"editable grid","source":"community"},{"name":"spreadsheet grid","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["data-table","treegrid","code-editor"],"variantOf":[],"partOf":[],"seeAlso":["inline-edit"]},"implementations":[{"system":"aria-apg","name":"Grid (Interactive Tabular Data and Layout Containers)","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"sources":[{"title":"ARIA Authoring Practices Guide: Grid pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"a table you move around cell by cell"},{"name":"Data-ink ratio","slug":"data-ink-ratio","category":"pattern","status":"published","definition":"Tufte's measure of chart economy: the share of ink that would be missed if erased, with everything else a candidate for deletion.","aliases":[{"name":"data-ink"},{"name":"data to ink ratio"}],"tags":["dataviz"],"relations":{"contrastWith":["chartjunk"],"variantOf":[],"partOf":[],"seeAlso":["chart"]},"implementations":[],"sources":[{"title":"Wikipedia: Data-ink ratio","url":"https://en.wikipedia.org/wiki/Data-ink_ratio"}],"demo":"inline","useWhen":"deciding what a chart can lose before it loses meaning"},{"name":"Data table","slug":"data-table","category":"component","status":"published","definition":"A table built for working with data rather than reading it: sortable columns, selectable rows, and controls that act on the rows you select.","aliases":[{"name":"table","source":"aria-apg"},{"name":"index table","source":"polaris"},{"name":"list view","source":"community"},{"name":"grid","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["list","comparison-table","data-grid","treegrid"],"variantOf":[],"partOf":[],"seeAlso":["density","chart-description","table-header-association","description-list","zebra-striping"]},"implementations":[{"system":"aria-apg","name":"Grid (interactive tabular data)","url":"https://www.w3.org/WAI/ARIA/apg/patterns/grid/"},{"system":"carbon","name":"Data table","url":"https://carbondesignsystem.com/components/data-table/usage/"},{"system":"shadcn","name":"Data Table","url":"https://ui.shadcn.com/docs/components/data-table"}],"sources":[{"title":"Data table, Carbon Design System","url":"https://carbondesignsystem.com/components/data-table/usage/"},{"title":"ARIA Authoring Practices Guide: Grid pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/grid/"}],"demo":"inline","useWhen":"rows of data you sort, select and act on"},{"name":"Date picker","slug":"date-picker","category":"component","status":"published","definition":"A field that opens a small calendar so a date can be chosen by looking at the month rather than typing it.","aliases":[{"name":"calendar picker","source":"nngroup"},{"name":"date field","source":"polaris"},{"name":"date input","source":"govuk"},{"name":"datepicker"}],"tags":["forms"],"relations":{"contrastWith":["select","calendar","date-range-picker","time-picker"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"shadcn","name":"Date Picker","url":"https://ui.shadcn.com/docs/components"}],"sources":[{"title":"Cloudscape: components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"choosing a date where the day of week matters"},{"name":"Date range picker","slug":"date-range-picker","category":"component","status":"published","definition":"A calendar that takes a start and an end date in one pass, highlighting the span between them as you move.","aliases":[{"name":"range calendar","source":"react-aria"},{"name":"date range"},{"name":"check in check out picker"}],"tags":["forms"],"relations":{"contrastWith":["date-picker","range-slider","calendar"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Cloudscape: components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"the answer is a span of days, not one day"},{"name":"De Stijl","slug":"de-stijl","category":"aesthetic","status":"published","definition":"A style built only from black rules, rectangular fields, and the three primaries on white, arranged asymmetrically with no curves and no diagonals.","aliases":[{"name":"neoplasticism"},{"name":"Mondrian style","source":"community"},{"name":"Mondrian grid"}],"tags":[],"relations":{"contrastWith":["constructivism","bauhaus-style"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Creative Market: Design trend report, De Stijl design","url":"https://creativemarket.com/blog/de-stijl-design-trend"}],"demo":"inline","useWhen":"black rules and primary rectangles, nothing else"},{"name":"Dead zone","slug":"dead-zone","category":"interaction","status":"published","definition":"A range of input near the resting position that is deliberately ignored, so tiny unintended movement produces no response at all.","aliases":[{"name":"deadzone","source":"community"},{"name":"deadband","source":"community"},{"name":"neutral zone","source":"community"},{"name":"stick dead zone","source":"community"}],"tags":[],"relations":{"contrastWith":["drag-threshold"],"variantOf":[],"partOf":[],"seeAlso":["hit-slop"]},"implementations":[],"sources":[{"title":"Wikipedia: deadband","url":"https://en.wikipedia.org/wiki/Deadband"}],"demo":"inline","useWhen":"input near zero is ignored on purpose"},{"name":"Debounce","slug":"debounce","category":"interaction","status":"published","definition":"Waiting until input has stopped for a set moment before reacting, so a burst of keystrokes or clicks produces one response instead of many.","aliases":[{"name":"debouncing","source":"community"},{"name":"input settling","source":"community"},{"name":"trailing delay","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["throttle"],"variantOf":[],"partOf":[],"seeAlso":["typeahead"]},"implementations":[],"sources":[{"title":"NN/g: Timing guidelines for exposing hidden content","url":"https://www.nngroup.com/articles/timing-exposing-content/"}],"demo":"inline","useWhen":"waiting for input to settle before responding"},{"name":"Deck","slug":"deck","category":"typography","status":"published","definition":"The short summary line set between a headline and the body, larger than body text and written to sell the article.","aliases":[{"name":"standfirst"},{"name":"dek"},{"name":"subhead"}],"tags":["editorial"],"relations":{"contrastWith":["eyebrow","heading"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Headings in Typography (Uxcel)","url":"https://uxcel.com/lessons/headings-761"}],"demo":"inline","useWhen":"the summary line under a headline"},{"name":"Deconstructed pancake","slug":"deconstructed-pancake","category":"layout","status":"published","definition":"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.","aliases":[{"name":"the deconstructed pancake","source":"web-dev"},{"name":"wrapping flex row","source":"community"}],"tags":[],"relations":{"contrastWith":["cluster"],"variantOf":[],"partOf":[],"seeAlso":["justified-gallery"]},"implementations":[],"sources":[{"title":"Deconstructed pancake, web.dev layout patterns","url":"https://web.dev/patterns/layout/deconstructed-pancake/"}],"demo":"inline","useWhen":"a wrapping row whose last line should not stretch"},{"name":"Decorative image","slug":"decorative-image","category":"accessibility","status":"published","definition":"An image that carries no information and is given an empty alt attribute so assistive technology skips it entirely.","aliases":[{"name":"null alt","source":"community"},{"name":"empty alt","source":"community"},{"name":"alt=\"\"","source":"html"},{"name":"pure decoration","source":"wcag"},{"name":"presentational image","source":"aria"}],"tags":["media"],"relations":{"contrastWith":["alt-text","presentation-role","aria-hidden","figure"],"variantOf":[],"partOf":[],"seeAlso":["image"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Non-text Content","url":"https://www.w3.org/TR/WCAG22/#non-text-content"},{"title":"A11y Project checklist","url":"https://www.a11yproject.com/checklist/"}],"demo":"inline","useWhen":"the picture adds nothing a reader would miss"},{"name":"Deformable UI","slug":"deformable-ui","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"tactile digital","source":"uistyleguide"},{"name":"squishy UI"},{"name":"tactile maximalism"},{"name":"jelly UI"},{"name":"squish UI"}],"tags":[],"relations":{"contrastWith":["claymorphism"],"variantOf":[],"partOf":[],"seeAlso":["squash-and-stretch","spring-animation"]},"implementations":[],"sources":[{"title":"UI Style Guide: Tactile digital and deformable UI","url":"https://www.uistyleguide.com/style/tactile-digital-deformable-ui"},{"title":"Buzzvel: The human touch returns, design trends for 2026","url":"https://buzzvel.com/blog/design-trends-2026-human-touch"}],"demo":"inline","useWhen":"controls that squash and spring like soft material"},{"name":"Delay","slug":"delay","category":"motion","status":"published","definition":"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.","aliases":[{"name":"animation-delay","source":"css"},{"name":"transition-delay","source":"css"},{"name":"lead-in"}],"tags":[],"relations":{"contrastWith":["stagger","duration"],"variantOf":[],"partOf":[],"seeAlso":["choreography"]},"implementations":[],"sources":[{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"},{"title":"The Vocabulary of Motion","url":"https://motion-vocabulary.vercel.app/"}],"demo":"inline","useWhen":"motion should start after something else, not with it"},{"name":"Density","slug":"density","category":"layout","status":"published","definition":"How much content a system packs into a given area, tuned as a named setting so the same components can run comfortable or compact.","aliases":[{"name":"information density"},{"name":"display density","source":"material"},{"name":"comfortable, cozy, compact"},{"name":"spacing density"}],"tags":["tables","tokens"],"relations":{"contrastWith":["spacing-scale"],"variantOf":[],"partOf":[],"seeAlso":["stack","data-table","touch-target-size"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the same UI, tighter, for expert users"},{"name":"Density independent pixel","slug":"density-independent-pixel","category":"layout","status":"published","definition":"A virtual unit of length that stays the same physical size across screen densities, so one number can describe a layout on every device.","aliases":[{"name":"dp","source":"android"},{"name":"dip","source":"community"},{"name":"device independent pixel","source":"community"},{"name":"effective pixel","source":"fluent"}],"tags":[],"relations":{"contrastWith":["pixel-density","point-size"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Support different pixel densities, Android Developers","url":"https://developer.android.com/training/multiscreen/screendensities"}],"demo":"inline","useWhen":"why sizes are written in dp, pt or CSS px"},{"name":"Descender","slug":"descender","category":"typography","status":"published","definition":"The part of a letter such as g, j, p, or y that drops below the baseline.","aliases":[{"name":"descender line"},{"name":"descent","source":"css"}],"tags":[],"relations":{"contrastWith":["baseline","ascender"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Descender (Wikipedia)","url":"https://en.wikipedia.org/wiki/Descender"},{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"naming the strokes that hang below the baseline"},{"name":"Description list","slug":"description-list","category":"component","status":"published","definition":"Paired labels and values laid out as a list of facts about one thing, rather than as a table of many things.","aliases":[{"name":"descriptions","source":"ant-design"},{"name":"summary list","source":"govuk"},{"name":"key-value pairs","source":"cloudscape"},{"name":"data list","source":"mantine"},{"name":"definition list"},{"name":"properties list"}],"tags":["tables"],"relations":{"contrastWith":["inspector","comparison-table"],"variantOf":[],"partOf":[],"seeAlso":["data-table","hanging-indent"]},"implementations":[],"sources":[{"title":"Cloudscape: components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"labelled facts about a single record"},{"name":"Device posture","slug":"device-posture","category":"layout","status":"published","definition":"The physical fold state of a foldable device, such as flat, book or tabletop, which a layout can respond to alongside plain size.","aliases":[{"name":"tabletop posture","source":"android"},{"name":"book posture","source":"android"},{"name":"folding feature","source":"android"},{"name":"hinge","source":"community"},{"name":"posture","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["orientation-lock","spanned-layout","window-size-class"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Learn about foldables, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/foldables/learn-about-foldables"}],"demo":"inline","useWhen":"a layout that responds to how the device is folded"},{"name":"Did you mean","slug":"did-you-mean","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"spelling suggestion","source":"community"},{"name":"query correction","source":"community"},{"name":"showing results for","source":"community"},{"name":"search instead for","source":"community"}],"tags":["forms","search"],"relations":{"contrastWith":["no-results-state","typeahead"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"search offers a corrected spelling of your query"},{"name":"Diegetic interface","slug":"diegetic-interface","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"diegetic UI"},{"name":"in-world UI"},{"name":"non-diegetic UI"},{"name":"meta UI"},{"name":"spatial game UI"}],"tags":[],"relations":{"contrastWith":["fictional-user-interface","interface-metaphor"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"TV Tropes: Diegetic Interface","url":"https://tvtropes.org/pmwiki/pmwiki.php/Main/DiegeticInterface"},{"title":"Types of UI in gaming: diegetic, non-diegetic, spatial and meta","url":"https://medium.com/@lorenzoardeni/types-of-ui-in-gaming-diegetic-non-diegetic-spatial-and-meta-5024ce6362d0"},{"title":"Nasty Rodent: diegetic and non-diegetic UI","url":"https://nastyrodent.com/diegetic-and-non-diegetic-ui/"}],"demo":"inline","useWhen":"the readout belongs to the world, not the screen"},{"name":"Digital collage","slug":"digital-collage","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"collage aesthetic"},{"name":"cut-out collage"},{"name":"mixed media","source":"kittl"},{"name":"scrapbook aesthetic"},{"name":"paper cut-out style"}],"tags":[],"relations":{"contrastWith":["grunge-design"],"variantOf":[],"partOf":[],"seeAlso":["maximalism","risograph"]},"implementations":[],"sources":[{"title":"Linearity: Everything designers need to know about digital collage","url":"https://www.linearity.io/blog/digital-collage-guide/"},{"title":"Envato: Trend deep dive, collage art","url":"https://author.envato.com/hub/trend-deep-dive-collage-art/"}],"demo":"inline","useWhen":"imagery cut out and pasted rather than placed"},{"name":"Dimensionality","slug":"dimensionality","category":"motion","status":"published","definition":"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.","aliases":[{"name":"object dimensionality","source":"community"},{"name":"origami dimensionality","source":"community"},{"name":"floating dimensionality","source":"community"},{"name":"spatial depth","source":"community"}],"tags":[],"relations":{"contrastWith":["directionality"],"variantOf":[],"partOf":[],"seeAlso":["spatial-ui"]},"implementations":[],"sources":[{"title":"UX Magazine: creating usability with motion, the UX in Motion Manifesto","url":"https://uxmag.com/articles/creating-usability-with-motion-the-ux-in-motion-manifesto"},{"title":"The 12 principles of UX in motion","url":"https://shengbanx.gitbooks.io/motion-system/content/chapter5.html"}],"demo":"inline","useWhen":"objects need somewhere to come from and return to"},{"name":"Direct labeling","slug":"direct-labeling","category":"pattern","status":"published","definition":"Writing series names next to the data instead of in a legend, trading a lookup for a glance.","aliases":[{"name":"direct labels"},{"name":"data labels"},{"name":"value labels"}],"tags":["dataviz"],"relations":{"contrastWith":["chart-annotation","chart-legend"],"variantOf":[],"partOf":[],"seeAlso":["sparkline"]},"implementations":[],"sources":[{"title":"Fundamentals of Data Visualization: Redundant coding","url":"https://clauswilke.com/dataviz/redundant-coding.html"}],"demo":"inline","useWhen":"few series and room at the line ends make the legend deletable"},{"name":"Direct manipulation","slug":"direct-manipulation","category":"pattern","status":"published","definition":"Acting on an object by handling the object itself, dragging, resizing, or typing into it, rather than describing the change in a separate control.","aliases":[{"name":"in-place manipulation","source":"community"},{"name":"WYSIWYG","source":"ui-patterns"},{"name":"handles and grips","source":"community"},{"name":"on-canvas editing","source":"community"}],"tags":[],"relations":{"contrastWith":["inline-edit"],"variantOf":[],"partOf":[],"seeAlso":["affordance","drag-and-drop"]},"implementations":[],"sources":[{"title":"GoodUI: Try Direct Manipulation instead of contextless menus","url":"https://goodui.org/"}],"demo":"inline","useWhen":"you change the thing by grabbing the thing"},{"name":"Directionality","slug":"directionality","category":"motion","status":"published","definition":"The rule that every movement carries a direction, and that using it consistently tells the reader how the parts of an interface relate.","aliases":[{"name":"spatial model","source":"community"},{"name":"spatial continuity","source":"community"},{"name":"sense of place","source":"community"},{"name":"forward and backward motion","source":"material"},{"name":"direction-aware transition","source":"community"},{"name":"continuity transition","source":"community"}],"tags":[],"relations":{"contrastWith":["dimensionality","push-transition","shared-axis"],"variantOf":[],"partOf":[],"seeAlso":["arc-motion"]},"implementations":[{"system":"hig","name":"Directionality","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"sources":[{"title":"Apple HIG: Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"},{"title":"Material Design 3: Transitions","url":"https://m3.material.io/styles/motion/transitions"}],"demo":"inline","useWhen":"motion should say where a view sits relative to another"},{"name":"Disclosure","slug":"disclosure","category":"component","status":"published","definition":"A single button that shows and hides one region of content, reporting its state through aria-expanded.","aliases":[{"name":"collapsible","source":"radix"},{"name":"show hide","source":"aria-apg"},{"name":"expandable section","source":"cloudscape"},{"name":"details","source":"mdn"},{"name":"expander","source":"community"},{"name":"disclosure control","source":"hig"}],"tags":[],"relations":{"contrastWith":["disclosure-triangle","progressive-disclosure","show-more-toggle","expandable-row","accordion"],"variantOf":[],"partOf":[],"seeAlso":["expanded-state"]},"implementations":[{"system":"aria-apg","name":"Disclosure (Show/Hide)","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"},{"system":"base-ui","name":"Collapsible","url":"https://base-ui.com/react/components/collapsible"}],"sources":[{"title":"ARIA Authoring Practices Guide: Disclosure (Show/Hide) pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"}],"demo":"inline","useWhen":"one control hiding one region"},{"name":"Disclosure triangle","slug":"disclosure-triangle","category":"component","status":"published","definition":"The small triangle beside a tree item that points right when collapsed and down when open, rotating as it toggles.","aliases":[{"name":"twisty","source":"community"},{"name":"expander arrow","source":"community"},{"name":"turner","source":"community"},{"name":"dropdown caret","source":"community"},{"name":"disclosure indicator","source":"hig"}],"tags":[],"relations":{"contrastWith":["disclosure","chevron"],"variantOf":[],"partOf":["treeview"],"seeAlso":["expanded-state"]},"implementations":[{"system":"hig","name":"Disclosure controls","url":"https://developer.apple.com/design/human-interface-guidelines/disclosure-controls"}],"sources":[{"title":"Disclosure widget, Wikipedia","url":"https://en.wikipedia.org/wiki/Disclosure_widget"},{"title":"Disclosure triangle, Usability First glossary","url":"https://www.usabilityfirst.com/glossary/disclosure-triangle/index.html"}],"demo":"inline","useWhen":"the little triangle that opens a branch"},{"name":"Disguised ad","slug":"disguised-ad","category":"pattern","status":"published","definition":"An advertisement styled to look like a control or an item of content, so the click it collects was aimed at something else entirely.","aliases":[{"name":"native ad","source":"community"},{"name":"sponsored content","source":"community"},{"name":"fake download button","source":"community"},{"name":"ad camouflage","source":"community"}],"tags":[],"relations":{"contrastWith":["misdirection"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Disguised ads","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the download button that is actually an advert"},{"name":"Display cutout","slug":"display-cutout","category":"layout","status":"published","definition":"The camera housing that intrudes into the screen rectangle, which a layout has to route content around rather than under.","aliases":[{"name":"notch","source":"community"},{"name":"dynamic island","source":"apple"},{"name":"punch hole","source":"community"},{"name":"cutout","source":"android"},{"name":"sensor housing","source":"hig"}],"tags":["platform-registers"],"relations":{"contrastWith":["overscan-safe-area","safe-area"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Using safe-area-inset to build mobile-safe layouts, Polypane","url":"https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/"}],"demo":"inline","useWhen":"naming the hole the layout must dodge"},{"name":"Dissolve","slug":"dissolve","category":"motion","status":"published","definition":"A fade that carries the eye from one image or state to another without any movement, inherited from film editing vocabulary.","aliases":[{"name":"dip to color","source":"community"},{"name":"dip to black","source":"community"}],"tags":[],"relations":{"contrastWith":["wipe","exit-animation","fade-through","fade"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"the change should register without implying direction"},{"name":"Dithering","slug":"dithering","category":"color","status":"published","definition":"Adding fine noise to a gradient or image so the eye averages neighbouring pixels into the missing intermediate colours, hiding the bands.","aliases":[{"name":"noise dither","source":"community"},{"name":"gradient dither","source":"adobe"}],"tags":[],"relations":{"contrastWith":["halftone","color-banding"],"variantOf":[],"partOf":[],"seeAlso":["glitch-aesthetic","grainy-gradient"]},"implementations":[],"sources":[{"title":"Color Banding and Dithering","url":"https://shader-tutorial.dev/advanced/color-banding-dithering/"},{"title":"Control dither in gradients (Illustrator)","url":"https://helpx.adobe.com/illustrator/desktop/paint-and-fill/create-and-edit-gradients/control-dither-in-gradients.html"}],"demo":"inline","useWhen":"removing banding by adding fine noise"},{"name":"Diverging palette","slug":"diverging-palette","category":"color","status":"published","definition":"A data palette built from two sequential scales meeting at a neutral midpoint, used when values run above and below a meaningful zero.","aliases":[{"name":"diverging scale","source":"community"},{"name":"bipolar palette","source":"community"},{"name":"red-white-blue scale","source":"community"}],"tags":["dataviz"],"relations":{"contrastWith":["categorical-palette","sequential-palette"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Color palettes for data visualization","url":"https://colorarchive.org/guides/data-visualization-color-palettes/"}],"demo":"inline","useWhen":"values that run above and below a midpoint"},{"name":"Divider","slug":"divider","category":"component","status":"published","definition":"A thin line separating groups of content, decorative when the grouping is already clear and semantic when it is the only cue.","aliases":[{"name":"separator","source":"aria-apg"},{"name":"rule"},{"name":"horizontal rule"},{"name":"hr"}],"tags":[],"relations":{"contrastWith":["outline-color","splitter","zebra-striping","keyline"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"fluent","name":"Divider","url":"https://fluent2.microsoft.design/components/web/react"},{"system":"base-ui","name":"Separator","url":"https://base-ui.com/react/components/separator"},{"system":"polaris","name":"Divider","url":"https://shopify.dev/docs/api/app-home/polaris-web-components"}],"sources":[{"title":"Fluent 2: web components","url":"https://fluent2.microsoft.design/components/web/react"}],"demo":"inline","useWhen":"a line that groups content by separating it"},{"name":"Dock","slug":"dock","category":"component","status":"published","definition":"A persistent strip of application icons anchored to a screen edge, holding launchers, running apps and pinned items in one row.","aliases":[{"name":"taskbar","source":"community"},{"name":"app dock","source":"community"},{"name":"launcher bar","source":"community"},{"name":"shelf","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["bottom-navigation","menu-bar-extra","navigation-rail","utility-bar"],"variantOf":[],"partOf":[],"seeAlso":["dock-magnification"]},"implementations":[],"sources":[{"title":"NameThatUI: element index","url":"https://namethatui.com/"}],"demo":"inline","useWhen":"the persistent row of app icons at a screen edge"},{"name":"Dock magnification","slug":"dock-magnification","category":"motion","status":"published","definition":"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.","aliases":[{"name":"fisheye effect","source":"community"},{"name":"fisheye menu","source":"community"},{"name":"magnified dock","source":"community"},{"name":"dock effect","source":"community"},{"name":"distance-based scaling","source":"community"}],"tags":[],"relations":{"contrastWith":["fisheye-view"],"variantOf":[],"partOf":[],"seeAlso":["dock","hover-lift"]},"implementations":[],"sources":[{"title":"Build UI: magnified dock recipe","url":"https://buildui.com/recipes/magnified-dock"},{"title":"jQuery 1.4 Animation Techniques: resizing elements and the fisheye menu","url":"https://www.oreilly.com/library/view/jquery-14-animation/9781849513302/ch06s07.html"}],"demo":"inline","useWhen":"a dense row of icons needs a hovered target enlarged in place"},{"name":"Dolly and zoom","slug":"dolly-zoom","category":"motion","status":"published","definition":"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.","aliases":[{"name":"vertigo effect","source":"community"},{"name":"camera move","source":"community"},{"name":"push in","source":"community"},{"name":"truck and pan","source":"community"}],"tags":[],"relations":{"contrastWith":["parallax","ken-burns-effect"],"variantOf":[],"partOf":[],"seeAlso":["zoom-transition"]},"implementations":[],"sources":[{"title":"UX Magazine: creating usability with motion, the UX in Motion Manifesto","url":"https://uxmag.com/articles/creating-usability-with-motion-the-ux-in-motion-manifesto"},{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"the reader should feel moved through the interface"},{"name":"Dot grid background","slug":"dot-grid-background","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"dot pattern","source":"magicui"},{"name":"grid pattern","source":"magicui"},{"name":"graph paper background"},{"name":"dotted background"},{"name":"blueprint grid"}],"tags":[],"relations":{"contrastWith":["terrazzo"],"variantOf":[],"partOf":[],"seeAlso":["infinite-canvas","baseline-grid","watermark"]},"implementations":[],"sources":[{"title":"Magic UI: Dot Pattern","url":"https://magicui.design/docs/components/dot-pattern"},{"title":"Magic UI: Grid Pattern","url":"https://magicui.design/docs/components/grid-pattern"}],"demo":"inline","useWhen":"a faint grid or dot field behind the content"},{"name":"Double click","slug":"double-click","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"dblclick","source":"mdn"},{"name":"double-click to open"},{"name":"double-click speed"}],"tags":[],"relations":{"contrastWith":["secondary-click","double-tap","middle-click"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: Pointer events","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"}],"demo":"inline","useWhen":"two clicks that mean something a single click does not"},{"name":"Double tap","slug":"double-tap","category":"interaction","status":"published","definition":"Two taps in quick succession on the same spot, conventionally used to zoom in on content or to zoom back out when already zoomed.","aliases":[{"name":"double touch","source":"material"},{"name":"double-tap to zoom","source":"community"},{"name":"double tap to like","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["double-click","tap","long-press","pinch-to-zoom"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Double touch","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: Gestures","url":"https://m1.material.io/patterns/gestures.html"},{"title":"iOS HIG: Gestures","url":"https://developer.apple.com/design/human-interface-guidelines/gestures"}],"demo":"inline","useWhen":"two quick taps that mean zoom, not activate"},{"name":"Drag and drop","slug":"drag-and-drop","category":"interaction","status":"published","definition":"Picking up an object, moving it under continuous pointer or finger contact, and releasing it over a target that accepts it.","aliases":[{"name":"pick up and move","source":"material"},{"name":"dnd"}],"tags":[],"relations":{"contrastWith":["drop-zone","transfer-list"],"variantOf":[],"partOf":[],"seeAlso":["grabber","snapping","dragging-alternative","drag-handle","drag-autoscroll","direct-manipulation"]},"implementations":[],"sources":[{"title":"MDN: HTML Drag and Drop API","url":"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API"},{"title":"Cloudscape: Drag and drop pattern","url":"https://cloudscape.design/patterns/general/drag-and-drop/"}],"demo":"inline","useWhen":"moving an object onto a target by holding it the whole way"},{"name":"Drag autoscroll","slug":"drag-autoscroll","category":"interaction","status":"published","definition":"Scrolling a container automatically when a drag is held near its edge, so an item can be moved somewhere currently off screen.","aliases":[{"name":"edge autoscroll","source":"community"},{"name":"auto-scroll on drag","source":"community"},{"name":"scroll while dragging","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["spring-loading"],"variantOf":[],"partOf":[],"seeAlso":["drag-and-drop","scroll-container"]},"implementations":[],"sources":[{"title":"Cloudscape Design System: Drag and drop","url":"https://cloudscape.design/patterns/general/drag-and-drop/"}],"demo":"inline","useWhen":"a drag needs to reach past the visible area"},{"name":"Drag handle","slug":"drag-handle","category":"component","status":"published","definition":"The small gripped area, often drawn as rows of dots or lines, that marks where an item may be picked up and dragged.","aliases":[{"name":"grip","source":"community"},{"name":"grip dots","source":"community"},{"name":"move handle","source":"community"},{"name":"reorder handle","source":"community"}],"tags":[],"relations":{"contrastWith":["grabber","resize-handle"],"variantOf":[],"partOf":[],"seeAlso":["drag-and-drop","drag-preview"]},"implementations":[],"sources":[{"title":"Cloudscape: Drag and drop","url":"https://cloudscape.design/patterns/general/drag-and-drop/"}],"demo":"inline","useWhen":"the part of an item that says grab me here"},{"name":"Drag preview","slug":"drag-preview","category":"pattern","status":"published","definition":"The semi-transparent copy of the dragged item that follows the pointer, sometimes collapsed into a stack when several items move at once.","aliases":[{"name":"drag overlay","source":"dnd-kit"},{"name":"drag image","source":"mdn"},{"name":"ghost image","source":"community"},{"name":"drag ghost","source":"community"}],"tags":[],"relations":{"contrastWith":["drop-indicator"],"variantOf":[],"partOf":[],"seeAlso":["drag-handle"]},"implementations":[],"sources":[{"title":"MDN: DataTransfer.setDragImage()","url":"https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage"}],"demo":"inline","useWhen":"the ghost of the item that follows your cursor"},{"name":"Drag threshold","slug":"drag-threshold","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"drag slop","source":"community"},{"name":"touch slop","source":"community"},{"name":"movement threshold","source":"community"},{"name":"drag tolerance","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["tap-delay","hit-slop","dead-zone"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Material Design: Gestures (touch mechanics)","url":"https://m1.material.io/patterns/gestures.html"}],"demo":"inline","useWhen":"deciding when a press turns into a drag"},{"name":"Drag to reorder","slug":"drag-to-reorder","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"sortable list","source":"dnd-kit"},{"name":"reorderable list","source":"community"},{"name":"drag and drop reordering","source":"community"},{"name":"rearrange","source":"hig"}],"tags":["touch"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["dragging-alternative","kanban-board"]},"implementations":[],"sources":[{"title":"dnd kit: Sortable","url":"https://dndkit.com/"},{"title":"Cloudscape: Drag-and-drop","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"you rearrange a list by dragging its rows"},{"name":"Dragging alternative","slug":"dragging-alternative","category":"accessibility","status":"published","definition":"A second, non-dragging route to anything a drag can do, such as arrow keys or a move-to menu on a sortable list.","aliases":[{"name":"dragging movements","source":"wcag"},{"name":"keyboard drag and drop","source":"community"},{"name":"accessible drag and drop","source":"community"},{"name":"move menu","source":"community"}],"tags":["keyboard","touch"],"relations":{"contrastWith":["pointer-gestures"],"variantOf":[],"partOf":[],"seeAlso":["drag-and-drop","drag-to-reorder"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Dragging Movements","url":"https://www.w3.org/TR/WCAG22/#dragging-movements"}],"demo":"inline","useWhen":"a drag is the only way to perform an action"},{"name":"Drawer","slug":"drawer","category":"component","status":"published","definition":"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.","aliases":[{"name":"navigation drawer","source":"material"},{"name":"side panel"},{"name":"side sheet","source":"material"}],"tags":["navigation"],"relations":{"contrastWith":["modal-dialog","action-sheet","split-view","sidebar","bottom-sheet","help-drawer","mini-cart"],"variantOf":[],"partOf":[],"seeAlso":["hamburger-menu","navigation-rail","off-canvas"]},"implementations":[{"system":"material","name":"Navigation drawer","url":"https://m3.material.io/components/navigation-drawer/overview"},{"system":"shadcn","name":"Drawer","url":"https://ui.shadcn.com/docs/components/drawer"},{"system":"carbon","name":"Side panel","url":"https://carbondesignsystem.com/components/side-panel/usage/"}],"sources":[],"demo":"inline","useWhen":"a panel that slides in from an edge and can stay open"},{"name":"Drill-down navigation","slug":"drill-down-navigation","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"panel stack","source":"blueprint"},{"name":"nested panel navigation","source":"community"},{"name":"push navigation","source":"community"},{"name":"drilldown","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["hub-and-spoke","miller-columns"],"variantOf":[],"partOf":[],"seeAlso":["push-transition"]},"implementations":[],"sources":[{"title":"Blueprint: Panel stack","url":"https://blueprintjs.com/docs/#core/components/panel-stack"}],"demo":"inline","useWhen":"a hierarchy is too deep to show all at once"},{"name":"Drip pricing","slug":"drip-pricing","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"hidden costs","source":"deceptive-design"},{"name":"partitioned pricing","source":"community"},{"name":"junk fees","source":"community"},{"name":"resort fee","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["order-summary","sneak-into-basket"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Hidden costs","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"fees keep appearing as you move through checkout"},{"name":"Drop cap","slug":"drop-cap","category":"typography","status":"published","definition":"An oversized opening letter set into the first lines of a paragraph, marking where the reading starts.","aliases":[{"name":"dropped capital"},{"name":"initial letter","source":"css"},{"name":"versal"},{"name":"illuminated capital"}],"tags":["editorial"],"relations":{"contrastWith":["raised-cap"],"variantOf":[],"partOf":[],"seeAlso":["small-caps"]},"implementations":[],"sources":[{"title":"MDN: initial-letter","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter"},{"title":"How to use drop caps effectively in editorial design","url":"https://hyentus.com/blog/how-to-use-drop-caps-effectively-in-editorial-design"}],"demo":"inline","useWhen":"marking where an article begins"},{"name":"Drop indicator","slug":"drop-indicator","category":"pattern","status":"published","definition":"The line or highlighted gap drawn during a drag to show exactly where the item will land if it is released now.","aliases":[{"name":"insertion indicator","source":"react-aria"},{"name":"drop line","source":"community"},{"name":"drop target highlight","source":"community"},{"name":"placeholder gap","source":"community"}],"tags":[],"relations":{"contrastWith":["snapping","drag-preview"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"React Aria: Drag and drop","url":"https://react-aria.adobe.com/"}],"demo":"inline","useWhen":"the line that shows where the dragged item will land"},{"name":"Drop zone","slug":"drop-zone","category":"interaction","status":"published","definition":"The region that will accept a dragged item, usually highlighted while a compatible drag is in flight so the destination is unmistakable.","aliases":[{"name":"drop target","source":"mdn"},{"name":"dropzone"},{"name":"drop area"},{"name":"landing zone"}],"tags":[],"relations":{"contrastWith":["drag-and-drop","file-upload","image-well"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: HTML Drag and Drop API","url":"https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API"}],"demo":"inline","useWhen":"the area that says a drag can land here"},{"name":"Dropdown","slug":"dropdown","category":"component","status":"published","definition":"The loose everyday word for any panel that opens downward from a trigger, whatever the panel holds and whatever the trigger does with it.","aliases":[{"name":"drop-down"},{"name":"dropdown menu"}],"tags":["forms"],"relations":{"contrastWith":["select","combobox","menu-button","context-menu"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"radix","name":"Dropdown Menu","url":"https://www.radix-ui.com/primitives/docs/components/dropdown-menu"},{"system":"carbon","name":"Dropdown","url":"https://carbondesignsystem.com/components/dropdown/usage/"}],"sources":[{"title":"Dropdown Menu, Radix Primitives","url":"https://www.radix-ui.com/primitives/docs/components/dropdown-menu"},{"title":"Dropdown, Carbon Design System","url":"https://carbondesignsystem.com/components/dropdown/usage/"}],"demo":"inline","useWhen":"the loose word for anything that opens downward"},{"name":"Dual axis","slug":"dual-axis","category":"pattern","status":"published","definition":"Two value axes sharing one plot so two series can be compared, and a free knob for manufacturing whatever correlation you like.","aliases":[{"name":"secondary axis"},{"name":"dual y-axis"},{"name":"two y-axes"},{"name":"combo chart"}],"tags":["dataviz"],"relations":{"contrastWith":["truncated-axis"],"variantOf":[],"partOf":[],"seeAlso":["axis","small-multiples"]},"implementations":[],"sources":[{"title":"Datawrapper: Why not to use two axes","url":"https://www.datawrapper.de/blog/dualaxis"}],"demo":"inline","useWhen":"someone proposes a second y-axis and the scales question needs asking"},{"name":"Duotone","slug":"duotone","category":"color","status":"published","definition":"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.","aliases":[{"name":"two-tone","source":"community"},{"name":"duotone filter","source":"community"},{"name":"gradient map","source":"community"}],"tags":[],"relations":{"contrastWith":["risograph","monochromatic-palette"],"variantOf":[],"partOf":[],"seeAlso":["blend-mode"]},"implementations":[],"sources":[{"title":"web.dev: Blend Modes","url":"https://web.dev/learn/css/blend-modes"}],"demo":"inline","useWhen":"forcing photography into two brand colours"},{"name":"Duration","slug":"duration","category":"motion","status":"published","definition":"How long a transition takes from start to finish, measured separately from the shape of its easing.","aliases":[{"name":"transition duration","source":"css"},{"name":"animation duration","source":"css"}],"tags":[],"relations":{"contrastWith":["delay","perceptual-duration","easing","spring-animation"],"variantOf":[],"partOf":[],"seeAlso":["motion-token","tween"]},"implementations":[{"system":"material","name":"Easing and duration","url":"https://m3.material.io/styles/motion/easing-and-duration/tokens-specs"},{"system":"carbon","name":"Motion duration","url":"https://carbondesignsystem.com/elements/motion/overview/"}],"sources":[{"title":"MDN: transition-duration","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration"},{"title":"Nielsen Norman Group: response times, the three important limits","url":"https://www.nngroup.com/articles/response-times-3-important-limits/"}],"demo":"inline","useWhen":"how long a motion lasts, not its shape"},{"name":"Dwell activation","slug":"dwell-activation","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"dwell click","source":"community"},{"name":"hover to activate","source":"community"},{"name":"gaze dwell","source":"community"}],"tags":["a11y"],"relations":{"contrastWith":["switch-access","hover-intent"],"variantOf":[],"partOf":[],"seeAlso":["look-and-pinch"]},"implementations":[],"sources":[{"title":"NN/g: Timing guidelines for exposing hidden content","url":"https://www.nngroup.com/articles/timing-exposing-content/"}],"demo":"inline","useWhen":"holding still is the only way to click"},{"name":"Dynamic Type","slug":"dynamic-type","category":"typography","status":"published","definition":"A platform feature that scales interface text to a size the reader chose in system settings, with layouts expected to reflow around it.","aliases":[{"name":"text scaling"},{"name":"font scaling"},{"name":"large text sizes","source":"hig"},{"name":"accessibility text sizes","source":"hig"},{"name":"sp units","source":"material"}],"tags":["a11y","platform-registers"],"relations":{"contrastWith":["resize-text","fluid-typography"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"Dynamic Type","url":"https://developer.apple.com/design/human-interface-guidelines/typography"}],"sources":[{"title":"The details of UI typography (WWDC20)","url":"https://developer.apple.com/videos/play/wwdc2020/10175/"}],"demo":"inline","useWhen":"the reader, not the designer, picks the text size"},{"name":"E-ink aesthetic","slug":"e-ink-aesthetic","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"paper UI"},{"name":"e-paper UI"},{"name":"e-ink UI"},{"name":"paper-like interface"},{"name":"1-bit UI"}],"tags":[],"relations":{"contrastWith":["minimalism","terminal-aesthetic"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Intent: How to design for e-ink devices","url":"https://www.withintent.com/blog/e-ink-design/"},{"title":"CHI 2026: A Dedicated E-Paper Design System for Mobile Phones","url":"https://doi.org/10.1145/3772318.3791459"}],"demo":"inline","useWhen":"an interface styled like reflective ink on paper"},{"name":"Easing","slug":"easing","category":"motion","status":"published","definition":"The rate of change across an animation, deciding how it accelerates and settles rather than how long it takes.","aliases":[{"name":"timing function","source":"css"},{"name":"ease"}],"tags":[],"relations":{"contrastWith":["duration","spring-animation","cubic-bezier"],"variantOf":[],"partOf":[],"seeAlso":["stagger","view-transition","asymmetric-easing"]},"implementations":[{"system":"material","name":"Easing and duration","url":"https://m3.material.io/styles/motion/easing-and-duration/tokens-specs"}],"sources":[{"title":"MDN: easing-function","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function"}],"demo":"inline","useWhen":"the shape of a motion over its duration, not its length"},{"name":"Edge swipe","slug":"edge-swipe","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"screen-edge pan","source":"hig"},{"name":"back swipe","source":"community"},{"name":"edge gesture","source":"community"},{"name":"bezel swipe","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["swipe","home-indicator"],"variantOf":[],"partOf":[],"seeAlso":["predictive-back"]},"implementations":[{"system":"material","name":"Edge swipe","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: Gestures (edge swipe)","url":"https://m1.material.io/patterns/gestures.html"}],"demo":"inline","useWhen":"a gesture that starts at the bezel, not on a control"},{"name":"Edge to edge","slug":"edge-to-edge","category":"layout","status":"published","definition":"Drawing an app behind the system bars so content reaches the physical screen edges, with insets applied only to what must stay tappable.","aliases":[{"name":"immersive mode","source":"android"},{"name":"draw behind system bars","source":"android"},{"name":"full screen layout","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["safe-area"],"variantOf":[],"partOf":[],"seeAlso":["chrome"]},"implementations":[],"sources":[{"title":"Learn about foldables, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/foldables/learn-about-foldables"}],"demo":"inline","useWhen":"content under the bars, controls kept clear of them"},{"name":"Editorial web design","slug":"editorial-web-design","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"editorial design"},{"name":"editorial style"},{"name":"magazine style web design"},{"name":"print-inspired web design"}],"tags":["editorial"],"relations":{"contrastWith":["magazine-layout"],"variantOf":[],"partOf":[],"seeAlso":["swiss-style"]},"implementations":[],"sources":[{"title":"Speckyboy: Modern magazine web layouts","url":"https://speckyboy.com/modern-magazine-web-layouts/"},{"title":"Wix: The biggest web design trends","url":"https://www.wix.com/blog/web-design-trends"}],"demo":"inline","useWhen":"a page styled like a magazine spread rather than a template"},{"name":"8 point grid","slug":"eight-point-grid","category":"layout","status":"published","definition":"A spacing convention where every size and gap is a multiple of eight, so values stay whole numbers at every common screen density.","aliases":[{"name":"8pt grid","source":"community"},{"name":"8 point grid","source":"community"},{"name":"8 point grid system","source":"community"},{"name":"4pt grid","source":"community"},{"name":"base unit grid","source":"community"},{"name":"mini unit","source":"carbon"}],"tags":["tokens"],"relations":{"contrastWith":["spacing-scale","baseline-grid"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"picking a base unit for a whole system"},{"name":"Elevation overlay","slug":"elevation-overlay","category":"color","status":"published","definition":"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.","aliases":[{"name":"dark theme overlay","source":"material"},{"name":"elevation tint","source":"community"},{"name":"ElevationOverlay","source":"flutter"}],"tags":["theming"],"relations":{"contrastWith":["dark-mode","surface-color","surface-tint"],"variantOf":[],"partOf":[],"seeAlso":["true-black-theme"]},"implementations":[],"sources":[{"title":"Flutter: ElevationOverlay.applyOverlay","url":"https://api.flutter.dev/flutter/material/ElevationOverlay/applyOverlay.html"}],"demo":"inline","useWhen":"raising a dark surface where a shadow would not show"},{"name":"Em dash","slug":"em-dash","category":"typography","status":"published","definition":"The longest common dash, about the width of the letter m, used to set off an abrupt break or an aside inside a sentence.","aliases":[{"name":"long dash"},{"name":"mdash","source":"html"},{"name":"quad dash"}],"tags":[],"relations":{"contrastWith":["en-dash"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Hyphens and dashes (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"Typography Cheatsheet (Typewolf)","url":"https://www.typewolf.com/cheatsheet"}],"demo":"inline","useWhen":"naming the longest dash on the keyboard"},{"name":"Em","slug":"em-unit","category":"typography","status":"published","definition":"A relative unit equal to the current font size, historically the width of the square the letter m was cast on.","aliases":[{"name":"em square"},{"name":"em quad"},{"name":"rem","source":"css"}],"tags":[],"relations":{"contrastWith":["ch-unit","point-size"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Em sizing (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"}],"demo":"inline","useWhen":"sizing something relative to the text it sits in"},{"name":"Emergency exit button","slug":"emergency-exit-button","category":"component","status":"published","definition":"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.","aliases":[{"name":"exit this page","source":"govuk"},{"name":"quick exit","source":"community"},{"name":"safety exit","source":"community"},{"name":"escape button","source":"community"}],"tags":[],"relations":{"contrastWith":["close-button"],"variantOf":[],"partOf":[],"seeAlso":["light-dismiss"]},"implementations":[],"sources":[{"title":"GOV.UK Design System components","url":"https://design-system.service.gov.uk/components/"}],"demo":"inline","useWhen":"leaving a page fast and without a trace"},{"name":"Emoji picker","slug":"emoji-picker","category":"component","status":"published","definition":"A searchable grid of emoji organised by category, with recent choices remembered and skin tone chosen once.","aliases":[{"name":"emoji keyboard","source":"community"},{"name":"emoji palette","source":"community"},{"name":"emoji panel","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":["reaction-picker"],"variantOf":[],"partOf":[],"seeAlso":["emoji-presentation","virtual-keyboard"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"choosing an emoji from a searchable grid"},{"name":"Emoji presentation","slug":"emoji-presentation","category":"typography","status":"published","definition":"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.","aliases":[{"name":"text presentation"},{"name":"emoji vs text style"},{"name":"variation selector","source":"unicode"},{"name":"font-variant-emoji","source":"css"}],"tags":["messaging"],"relations":{"contrastWith":["tofu","color-font"],"variantOf":[],"partOf":[],"seeAlso":["emoji-picker"]},"implementations":[],"sources":[{"title":"font-variant-emoji (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji"}],"demo":"inline","useWhen":"a symbol turns into an emoji you did not want"},{"name":"Emphasis level","slug":"emphasis-level","category":"color","status":"published","definition":"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.","aliases":[{"name":"high emphasis","source":"material"},{"name":"medium emphasis","source":"material"},{"name":"disabled emphasis","source":"material"},{"name":"text opacity","source":"community"},{"name":"secondary text","source":"community"}],"tags":[],"relations":{"contrastWith":["opacity","on-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Emphasis levels","url":"https://m2.material.io/design/color/text-legibility.html"}],"sources":[{"title":"Material: text legibility and emphasis","url":"https://m2.material.io/design/color/text-legibility.html"},{"title":"Material: states","url":"https://m2.material.io/go/design-states/"}],"demo":"inline","useWhen":"ranking text by opacity instead of by separate colours"},{"name":"Empty state","slug":"empty-state","category":"pattern","status":"published","definition":"The screen a container shows when it holds nothing, naming the absence and offering the action that ends it.","aliases":[{"name":"non-ideal state","source":"blueprint"},{"name":"blankslate","source":"primer"},{"name":"blank slate","source":"ui-patterns"},{"name":"blank state"}],"tags":["onboarding"],"relations":{"contrastWith":["zero-state","skeleton-screen","no-results-state"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"carbon","name":"Empty states","url":"https://carbondesignsystem.com/patterns/empty-states/"}],"sources":[{"title":"Nielsen Norman Group: Empty states in application design","url":"https://www.nngroup.com/articles/empty-state-interface-design/"}],"demo":"inline","useWhen":"the screen for a container with nothing in it yet"},{"name":"En dash","slug":"en-dash","category":"typography","status":"published","definition":"A dash about the width of the letter n, used for ranges of numbers and for connections between two things.","aliases":[{"name":"ndash","source":"html"},{"name":"range dash"},{"name":"short dash"}],"tags":[],"relations":{"contrastWith":["em-dash"],"variantOf":[],"partOf":[],"seeAlso":["non-breaking-space"]},"implementations":[],"sources":[{"title":"Hyphens and dashes (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"Typography Cheatsheet (Typewolf)","url":"https://www.typewolf.com/cheatsheet"}],"demo":"inline","useWhen":"writing a range of numbers or dates"},{"name":"Endowed progress","slug":"endowed-progress","category":"pattern","status":"published","definition":"Starting a progress meter part filled, so the reader feels they are continuing something already begun rather than starting from nothing.","aliases":[{"name":"endowed progress effect","source":"community"},{"name":"artificial advancement","source":"community"},{"name":"head start progress","source":"community"},{"name":"upfront progress","source":"goodui"}],"tags":["gamification"],"relations":{"contrastWith":["goal-gradient","steps-left"],"variantOf":[],"partOf":[],"seeAlso":["progress-bar"]},"implementations":[],"sources":[{"title":"GoodUI: Try Upfront Progress instead of starting with a blank","url":"https://goodui.org/"}],"demo":"inline","useWhen":"the progress bar starts at 20 percent before you did anything"},{"name":"Entrance animation","slug":"entrance-animation","category":"motion","status":"published","definition":"The motion an element plays as it arrives, running from a starting style that only exists before the element was ever rendered.","aliases":[{"name":"enter animation","source":"community"},{"name":"mount animation","source":"community"},{"name":"entry animation","source":"css"},{"name":"@starting-style","source":"css"},{"name":"enter transition","source":"material"}],"tags":[],"relations":{"contrastWith":["exit-animation","origin-aware-animation","pop-in"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: @starting-style","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style"},{"title":"Material Design 3: Transitions","url":"https://m3.material.io/styles/motion/transitions"}],"demo":"inline","useWhen":"something new appears and should not just pop in"},{"name":"Error bar","slug":"error-bar","category":"component","status":"published","definition":"Whiskers on a mark showing the range a value could plausibly take, so a chart does not imply precision it does not have.","aliases":[{"name":"confidence interval"},{"name":"uncertainty band"},{"name":"confidence band"}],"tags":["dataviz"],"relations":{"contrastWith":["reference-line"],"variantOf":[],"partOf":["chart"],"seeAlso":[]},"implementations":[],"sources":[{"title":"Fundamentals of Data Visualization: Visualizing uncertainty","url":"https://clauswilke.com/dataviz/visualizing-uncertainty.html"}],"demo":"inline","useWhen":"a chart states an estimate and honesty requires showing the spread"},{"name":"Error identification","slug":"error-identification","category":"accessibility","status":"published","definition":"Naming the field that failed and saying what went wrong in text, rather than only outlining the input in red.","aliases":[{"name":"inline error message","source":"community"},{"name":"error suggestion","source":"wcag"}],"tags":["forms"],"relations":{"contrastWith":["error-message","inline-validation","error-summary","invalid-state"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Error Identification","url":"https://www.w3.org/TR/WCAG22/#error-identification"},{"title":"GOV.UK Design System: Error message","url":"https://design-system.service.gov.uk/components/error-message/"}],"demo":"inline","useWhen":"the failure has to be named in text, not carried by red alone"},{"name":"Error message","slug":"error-message","category":"component","status":"published","definition":"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.","aliases":[{"name":"validation message","source":"community"},{"name":"inline error","source":"community"},{"name":"field error","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["helper-text","inline-validation","callout","error-identification"],"variantOf":[],"partOf":["text-field"],"seeAlso":[]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Error message","url":"https://design-system.service.gov.uk/components/error-message/"}],"demo":"inline","useWhen":"telling one field that its value failed"},{"name":"Error summary","slug":"error-summary","category":"pattern","status":"published","definition":"A block at the top of a failed form listing every problem as links that move focus to the field that caused it.","aliases":[{"name":"error list","source":"community"},{"name":"validation summary","source":"community"},{"name":"there is a problem","source":"govuk"},{"name":"form error summary","source":"uswds"}],"tags":["forms"],"relations":{"contrastWith":["error-identification","inline-validation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"GOV.UK Design System: error summary","url":"https://design-system.service.gov.uk/components/error-summary/"},{"title":"GOV.UK Design System: recover from validation errors","url":"https://design-system.service.gov.uk/patterns/validation/"}],"demo":"inline","useWhen":"one list at the top links to each broken field"},{"name":"Escape gesture","slug":"escape-gesture","category":"accessibility","status":"published","definition":"The screen reader equivalent of the Escape key, a two finger scrub that dismisses a sheet or steps back a level.","aliases":[{"name":"accessibilityPerformEscape","source":"hig"},{"name":"two-finger scrub","source":"community"},{"name":"z-shaped gesture","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["light-dismiss","explore-by-touch","magic-tap"],"variantOf":[],"partOf":[],"seeAlso":["multi-touch"]},"implementations":[],"sources":[{"title":"Apple: Supporting Accessibility (View Controller Programming Guide)","url":"https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/SupportingAccessibility.html"}],"demo":"inline","useWhen":"a custom sheet ignores the platform dismiss gesture"},{"name":"Exit animation","slug":"exit-animation","category":"motion","status":"published","definition":"The motion an element plays on its way out, which requires deferring its removal from the layout until the animation has finished.","aliases":[{"name":"leave animation","source":"vue"},{"name":"unmount animation","source":"community"},{"name":"AnimatePresence","source":"framer-motion"},{"name":"allow-discrete","source":"css"},{"name":"exit transition","source":"material"}],"tags":[],"relations":{"contrastWith":["dissolve","entrance-animation"],"variantOf":[],"partOf":[],"seeAlso":["fill-mode"]},"implementations":[],"sources":[{"title":"Motion for React: AnimatePresence","url":"https://motion.dev/docs/react-animate-presence"},{"title":"MDN: @starting-style (with transition-behavior: allow-discrete)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style"}],"demo":"inline","useWhen":"something is being removed and should not blink out"},{"name":"Expandable row","slug":"expandable-row","category":"component","status":"published","definition":"A table row that opens to reveal a detail panel beneath it, keeping the row in place instead of navigating away.","aliases":[{"name":"row expansion","source":"community"},{"name":"detail row","source":"community"},{"name":"sub row","source":"community"},{"name":"drawer row","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["accordion","disclosure","treegrid"],"variantOf":[],"partOf":["data-table"],"seeAlso":[]},"implementations":[],"sources":[{"title":"Data table, Carbon Design System","url":"https://carbondesignsystem.com/components/data-table/usage/"}],"demo":"inline","useWhen":"row detail that opens in place under the row"},{"name":"Expanded state","slug":"expanded-state","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-expanded","source":"aria"},{"name":"disclosure state","source":"aria-apg"},{"name":"open state","source":"community"}],"tags":[],"relations":{"contrastWith":["has-popup"],"variantOf":[],"partOf":[],"seeAlso":["disclosure","disclosure-triangle"]},"implementations":[],"sources":[{"title":"MDN: aria-expanded","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded"},{"title":"ARIA APG: Disclosure pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"}],"demo":"inline","useWhen":"the trigger must say whether its panel is open"},{"name":"Explore by touch","slug":"explore-by-touch","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"touch exploration","source":"android"},{"name":"TalkBack explore by touch","source":"android"},{"name":"double-tap to activate","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["magic-tap","escape-gesture"],"variantOf":[],"partOf":[],"seeAlso":["touch-target-size","screen-curtain"]},"implementations":[],"sources":[{"title":"Android Accessibility Help: Navigate your device with TalkBack","url":"https://support.google.com/accessibility/android/answer/6006598"},{"title":"Deque University: TalkBack keyboard shortcuts and gestures","url":"https://dequeuniversity.com/screenreaders/talkback-shortcuts"}],"demo":"inline","useWhen":"designing touch targets a finger has to find blind"},{"name":"Express checkout","slug":"express-checkout","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"wallet buttons","source":"community"},{"name":"one-click checkout","source":"community"},{"name":"accelerated checkout","source":"polaris"},{"name":"buy now button","source":"community"},{"name":"payment request","source":"mdn"}],"tags":["commerce"],"relations":{"contrastWith":["guest-checkout"],"variantOf":[],"partOf":[],"seeAlso":["order-summary","social-login"]},"implementations":[],"sources":[{"title":"Baymard Institute: Ecommerce Checkout UX","url":"https://baymard.com/learn/checkout-flow-ux-optimization"}],"demo":"inline","useWhen":"the wallet buttons above the checkout form"},{"name":"Eyebrow","slug":"eyebrow","category":"typography","status":"published","definition":"A short line of text above a heading that says what category or series the content belongs to.","aliases":[{"name":"kicker"},{"name":"overline","source":"material"},{"name":"eyebrow heading"},{"name":"pretitle"},{"name":"superhead"}],"tags":["editorial"],"relations":{"contrastWith":["heading","deck"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Eyebrow Typography (Verdigris Design System)","url":"https://design.verdigris.co/categories/typography/eyebrow"}],"demo":"inline","useWhen":"labelling what kind of thing a heading is"},{"name":"Eyedropper","slug":"eyedropper","category":"component","status":"published","definition":"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.","aliases":[{"name":"color picker tool","source":"community"},{"name":"dropper","source":"community"},{"name":"EyeDropper API","source":"wicg"},{"name":"pipette","source":"community"}],"tags":[],"relations":{"contrastWith":["color-picker","color-well"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: EyeDropper API","url":"https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API"},{"title":"EyeDropper API specification","url":"https://wicg.github.io/eyedropper-api/"}],"demo":"inline","useWhen":"sampling a colour from pixels rather than typing a value"},{"name":"F pattern","slug":"f-pattern","category":"layout","status":"published","definition":"The scanning shape eye tracking finds on text heavy pages: two horizontal sweeps across the top, then a vertical run down the left edge.","aliases":[{"name":"F-shaped pattern","source":"nngroup"},{"name":"F-shaped reading pattern","source":"community"}],"tags":[],"relations":{"contrastWith":["z-pattern","layer-cake-pattern","spotted-pattern","gutenberg-diagram"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Nielsen Norman Group","url":"https://en.wikipedia.org/wiki/Nielsen_Norman_Group"}],"demo":"inline","useWhen":"predicting how a text heavy page gets skimmed"},{"name":"Faceted filter","slug":"faceted-filter","category":"component","status":"published","definition":"A panel of grouped checkboxes and ranges that narrows a result set, each option usually showing how many results it would leave.","aliases":[{"name":"filter panel","source":"uxpatterns"},{"name":"facets","source":"community"},{"name":"collection select filter","source":"cloudscape"}],"tags":["search"],"relations":{"contrastWith":["faceted-search","applied-filters","property-filter"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UX Patterns for Developers","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"narrowing results by category with counts"},{"name":"Faceted search","slug":"faceted-search","category":"pattern","status":"published","definition":"Narrowing results by ticking values from several independent attribute groups, with counts showing how many results each value would leave.","aliases":[{"name":"faceted navigation","source":"community"},{"name":"guided navigation","source":"community"},{"name":"filter sidebar","source":"community"},{"name":"refinements","source":"community"},{"name":"faceted filters","source":"tanstack-table"}],"tags":["search"],"relations":{"contrastWith":["search-field","faceted-filter","applied-filters"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"A List Apart: Design Patterns, Faceted Navigation","url":"https://alistapart.com/article/design-patterns-faceted-navigation/"},{"title":"Cloudscape: Filtering patterns","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"filters grouped by attribute, each showing result counts"},{"name":"Fade","slug":"fade","category":"motion","status":"published","definition":"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.","aliases":[{"name":"fade in"},{"name":"fade out"},{"name":"opacity transition"}],"tags":[],"relations":{"contrastWith":["crossfade","dissolve"],"variantOf":[],"partOf":[],"seeAlso":["opacity"]},"implementations":[{"system":"material","name":"Fade","url":"https://m3.material.io/styles/motion/transitions"}],"sources":[{"title":"Material Design 3: Transitions","url":"https://m3.material.io/styles/motion/transitions"}],"demo":"inline","useWhen":"an element appears or leaves without moving"},{"name":"Fade through","slug":"fade-through","category":"motion","status":"published","definition":"Material's transition for unrelated views: the outgoing view fades out completely before the incoming one fades in while scaling up slightly.","aliases":[{"name":"sequential fade","source":"community"},{"name":"fade out then in","source":"community"}],"tags":[],"relations":{"contrastWith":["crossfade","dissolve","shared-axis"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Fade through","url":"https://m3.material.io/styles/motion/transitions"}],"sources":[{"title":"Material Design 3: Transitions","url":"https://m3.material.io/styles/motion/transitions"}],"demo":"inline","useWhen":"two views have no spatial or hierarchical relationship"},{"name":"Fake scarcity","slug":"fake-scarcity","category":"pattern","status":"published","definition":"Claiming limited supply that is not real, with stock counts or demand messages generated to pressure a decision rather than report a fact.","aliases":[{"name":"false scarcity","source":"community"},{"name":"invented stock count","source":"community"},{"name":"high demand badge","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["scarcity-indicator"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Fake scarcity","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"only three left, and the number is invented"},{"name":"Fake social proof","slug":"fake-social-proof","category":"pattern","status":"published","definition":"Manufacturing evidence that other people approve, through invented reviews, testimonials, or live activity messages nobody actually generated.","aliases":[{"name":"fake reviews","source":"community"},{"name":"activity notification spam","source":"community"},{"name":"fabricated testimonials","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["social-proof"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Fake social proof","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"someone in Leeds just bought this, and nobody did"},{"name":"Fake urgency","slug":"fake-urgency","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"false urgency","source":"community"},{"name":"resetting countdown","source":"community"},{"name":"perpetual sale","source":"community"}],"tags":[],"relations":{"contrastWith":["countdown-timer"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Fake urgency","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the countdown resets when you refresh the page"},{"name":"Fallback font","slug":"fallback-font","category":"typography","status":"published","definition":"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.","aliases":[{"name":"font fallback"},{"name":"substitute font"},{"name":"backup font"},{"name":"per-character fallback"}],"tags":[],"relations":{"contrastWith":["tofu","font-metric-override","font-stack"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Framework tools for font fallbacks (Chrome for Developers)","url":"https://developer.chrome.com/blog/framework-tools-font-fallback/"},{"title":"Creating Perfect Font Fallbacks in CSS","url":"https://www.aleksandrhovhannisyan.com/blog/perfect-font-fallbacks/"}],"demo":"inline","useWhen":"naming what shows up when the real font does not"},{"name":"False bottom","slug":"false-bottom","category":"pattern","status":"published","definition":"A page that looks finished at a point where content actually continues, so the reader stops scrolling and never sees the rest.","aliases":[{"name":"false floor","source":"community"},{"name":"illusion of completeness","source":"nngroup"},{"name":"premature end","source":"community"},{"name":"suggesting continuity","source":"goodui"}],"tags":["scroll"],"relations":{"contrastWith":["the-fold"],"variantOf":[],"partOf":[],"seeAlso":["infinite-scroll"]},"implementations":[],"sources":[{"title":"GoodUI: Try Suggesting Continuity instead of false bottoms","url":"https://goodui.org/"}],"demo":"inline","useWhen":"the page looks like it ended but has not"},{"name":"Faux bold","slug":"faux-bold","category":"typography","status":"published","definition":"A bold or italic the browser fakes by smearing or shearing the regular weight, because the real style was never loaded.","aliases":[{"name":"synthetic bold"},{"name":"fake bold"},{"name":"faux italic"},{"name":"font synthesis","source":"css"}],"tags":[],"relations":{"contrastWith":["font-weight","oblique","grade-axis"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"CSS fonts module (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts"}],"demo":"inline","useWhen":"your bold looks wrong and blurry"},{"name":"Feature gate","slug":"feature-gate","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"upgrade prompt","source":"community"},{"name":"freemium wall","source":"community"},{"name":"locked feature","source":"community"},{"name":"teaser lock","source":"community"},{"name":"pro badge","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["paywall","metered-paywall"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"GoodUI: Try exposing options instead of hiding them","url":"https://goodui.org/"}],"demo":"inline","useWhen":"a locked feature stays visible with an upgrade badge"},{"name":"Feature spotlight","slug":"feature-spotlight","category":"pattern","status":"published","definition":"A one-time announcement pointing at something newly added, shown in place next to the feature and dismissed for good once acknowledged.","aliases":[{"name":"what's new","source":"community"},{"name":"release announcement","source":"community"},{"name":"new feature callout","source":"community"},{"name":"announcing new features","source":"cloudscape"},{"name":"changelog popover","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["welcome-mat"],"variantOf":[],"partOf":[],"seeAlso":["coach-mark"]},"implementations":[],"sources":[{"title":"Cloudscape: Announcing new features","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"the one-time New badge pointing at a change"},{"name":"Feed layout","slug":"feed-layout","category":"layout","status":"published","definition":"A scrolling column or adaptive grid of equivalent items built for browsing, where no item outranks another by position alone.","aliases":[{"name":"feed","source":"material"},{"name":"stream","source":"community"},{"name":"feeds","source":"tailwind"}],"tags":[],"relations":{"contrastWith":["card-grid","content-shelf"],"variantOf":[],"partOf":[],"seeAlso":["infinite-scroll","zigzag-layout"]},"implementations":[],"sources":[{"title":"Canonical layouts, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/canonical-layouts"}],"demo":"inline","useWhen":"endless peers you skim rather than navigate"},{"name":"Fictional user interface","slug":"fictional-user-interface","category":"aesthetic","status":"published","definition":"The screen graphics style invented for film, television, and games: dense readouts, targeting reticles, and animated telemetry that look computational without computing anything.","aliases":[{"name":"FUI"},{"name":"fantasy user interface"},{"name":"futuristic user interface"},{"name":"film user interface"},{"name":"sci-fi HUD"},{"name":"HUD style"}],"tags":[],"relations":{"contrastWith":["diegetic-interface","hud-panel","cyberpunk-ui"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Reel Deal Film School: Creating Fantasy User Interfaces (FUIs)","url":"https://reeldealfilmschool.wordpress.com/2014/10/23/creating-fantasy-user-interfaces-fuis/"},{"title":"Kit FUI: user interfaces from movies, TV and video games","url":"https://saji8k.github.io/kit-fui/"}],"demo":"inline","useWhen":"interface art made to be watched rather than used"},{"name":"Fieldset","slug":"fieldset","category":"component","status":"published","definition":"A group of related form controls sharing one question, with a legend that acts as the label for the whole group.","aliases":[{"name":"field group","source":"community"},{"name":"legend","source":"community"},{"name":"form group","source":"community"},{"name":"field set","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["group-label","chart-legend","form","input-group"],"variantOf":[],"partOf":[],"seeAlso":["box"]},"implementations":[{"system":"base-ui","name":"Fieldset","url":"https://base-ui.com/react/components/fieldset"}],"sources":[{"title":"HTML Standard: the fieldset element","url":"https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element"},{"title":"GOV.UK Design System: components","url":"https://design-system.service.gov.uk/components/"}],"demo":"inline","useWhen":"several controls answering one question"},{"name":"Figure","slug":"figure","category":"component","status":"published","definition":"An image, table or code block bound to its caption so the two travel together and can be referred to from the running text.","aliases":[{"name":"figcaption","source":"community"},{"name":"figure caption","source":"community"},{"name":"captioned image","source":"community"}],"tags":["editorial","media"],"relations":{"contrastWith":["decorative-image","long-description","image"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Bootstrap 5.3: Figures","url":"https://getbootstrap.com/docs/5.3/content/figures/"}],"demo":"inline","useWhen":"a visual needs a caption that belongs to it"},{"name":"File attachment","slug":"file-attachment","category":"component","status":"published","definition":"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.","aliases":[{"name":"file","source":"component-gallery"},{"name":"attachment","source":"component-gallery"},{"name":"download","source":"component-gallery"},{"name":"document list","source":"community"},{"name":"file card","source":"community"}],"tags":[],"relations":{"contrastWith":["file-upload"],"variantOf":[],"partOf":[],"seeAlso":["thumbnail"]},"implementations":[],"sources":[{"title":"The Component Gallery: File","url":"https://component.gallery/components/file/"}],"demo":"inline","useWhen":"a file has to be represented rather than uploaded"},{"name":"File upload","slug":"file-upload","category":"component","status":"published","definition":"A control that takes files, by opening the system picker from a button or by accepting a drop into a marked area.","aliases":[{"name":"file input","source":"cloudscape"},{"name":"file picker","source":"community"},{"name":"upload","source":"ant-design"},{"name":"file dropzone","source":"cloudscape"}],"tags":["forms"],"relations":{"contrastWith":["drop-zone","file-attachment","image-well"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Cloudscape components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"the form takes files rather than text"},{"name":"Fill mode","slug":"fill-mode","category":"motion","status":"published","definition":"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.","aliases":[{"name":"animation-fill-mode","source":"css"},{"name":"fill forwards","source":"community"},{"name":"forwards","source":"css"},{"name":"backwards","source":"css"}],"tags":["web-platform"],"relations":{"contrastWith":["yoyo-loop","interpolation"],"variantOf":[],"partOf":[],"seeAlso":["exit-animation"]},"implementations":[],"sources":[{"title":"MDN: animation-fill-mode","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode"},{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"}],"demo":"inline","useWhen":"an animation ends and the element must not jump back"},{"name":"Filmstrip","slug":"filmstrip","category":"component","status":"published","definition":"A scrollable row of thumbnails beside a larger view, where picking one changes what the large view shows.","aliases":[{"name":"thumbnail strip","source":"community"},{"name":"thumbnail rail","source":"community"},{"name":"gallery strip","source":"community"},{"name":"image list","source":"mui"}],"tags":["media"],"relations":{"contrastWith":["carousel","content-shelf"],"variantOf":[],"partOf":[],"seeAlso":["thumbnail","lightbox"]},"implementations":[],"sources":[{"title":"Material UI components","url":"https://mui.com/material-ui/all-components/"}],"demo":"inline","useWhen":"a thumbnail rail that drives a big preview"},{"name":"First-line indent","slug":"first-line-indent","category":"typography","status":"published","definition":"Indenting the opening line of a paragraph so the start of each paragraph is visible without a blank line between them.","aliases":[{"name":"paragraph indent"},{"name":"text-indent","source":"css"},{"name":"indent"}],"tags":["editorial"],"relations":{"contrastWith":["hanging-indent","vertical-rhythm","pilcrow"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"First-line indents (Practical Typography)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"marking new paragraphs without adding space"},{"name":"First rule of ARIA","slug":"first-rule-of-aria","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"no ARIA is better than bad ARIA","source":"w3c"},{"name":"rules of ARIA use","source":"w3c"},{"name":"ARIA first rule","source":"community"}],"tags":[],"relations":{"contrastWith":["semantic-html","presentation-role"],"variantOf":[],"partOf":[],"seeAlso":["name-role-value","accessibility-overlay"]},"implementations":[],"sources":[{"title":"W3C: Using ARIA, rules of ARIA use","url":"https://www.w3.org/TR/using-aria/"},{"title":"Primer: Semantic HTML and ARIA","url":"https://primer.style/accessibility/design-guidance/semantic-html-and-aria/"}],"demo":"inline","useWhen":"someone proposes a role instead of an element"},{"name":"First run experience","slug":"first-run-experience","category":"pattern","status":"published","definition":"Everything shown only on the very first open, from a welcome sequence to seeded sample content, and never shown to that person again.","aliases":[{"name":"FRE","source":"fluent"},{"name":"first-time user experience","source":"community"},{"name":"FTUE","source":"community"},{"name":"welcome flow","source":"community"},{"name":"sample data","source":"community"},{"name":"onboarding flow","source":"uiterms"}],"tags":["onboarding"],"relations":{"contrastWith":["welcome-mat","gradual-engagement","zero-state"],"variantOf":[],"partOf":[],"seeAlso":["onboarding-checklist"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"what happens only the very first time you open it"},{"name":"Fisheye view","slug":"fisheye-view","category":"layout","status":"published","definition":"A focus plus context display that magnifies whatever has attention and progressively compresses everything further away, like a lens dragged along a list.","aliases":[{"name":"fisheye distortion","source":"community"}],"tags":[],"relations":{"contrastWith":["dock-magnification","focus-plus-context"],"variantOf":[],"partOf":[],"seeAlso":["screen-magnification"]},"implementations":[],"sources":[{"title":"A Review of Overview+Detail, Zooming, and Focus+Context Interfaces, Cockburn, Karlson and Bederson","url":"https://dl.acm.org/doi/10.1145/1456650.1456652"}],"demo":"inline","useWhen":"magnifying one item without hiding the rest"},{"name":"Fitts's law","slug":"fitts-law","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"law of target acquisition","source":"community"},{"name":"index of difficulty","source":"community"},{"name":"magic corners","source":"community"},{"name":"target acquisition","source":"community"}],"tags":[],"relations":{"contrastWith":["touch-target-size"],"variantOf":[],"partOf":[],"seeAlso":["thumb-zone","target-spacing"]},"implementations":[],"sources":[{"title":"Smashing Magazine: accessible tap target sizes","url":"https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/"},{"title":"Understanding SC 2.5.8: Target Size (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"}],"demo":"inline","useWhen":"arguing about how big or how near a control should be"},{"name":"Flash of inaccurate color theme","slug":"flash-of-inaccurate-color-theme","category":"color","status":"published","definition":"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.","aliases":[{"name":"FART","source":"community"},{"name":"dark mode flash","source":"community"},{"name":"theme flash","source":"community"},{"name":"flash of unstyled theme","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["fout","foit"],"variantOf":[],"partOf":[],"seeAlso":["color-scheme"]},"implementations":[],"sources":[{"title":"Flash of inAccurate coloR Theme (FART)","url":"https://css-tricks.com/flash-of-inaccurate-color-theme-fart/"},{"title":"Avoiding Flash of Inaccurate Theme Color","url":"https://blog.jim-nielsen.com/2022/avoiding-flash-of-inaccurate-theme-color/"}],"demo":"inline","useWhen":"the wrong theme showing for a frame on page load"},{"name":"Flashing content","slug":"flashing-content","category":"accessibility","status":"published","definition":"Content that flashes more than three times per second in a large enough area, restricted because it can trigger seizures.","aliases":[{"name":"three flashes threshold","source":"wcag"},{"name":"photosensitive epilepsy","source":"community"},{"name":"general flash and red flash thresholds","source":"wcag"},{"name":"seizure safe","source":"community"}],"tags":[],"relations":{"contrastWith":["prefers-reduced-motion","pause-stop-hide"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Three Flashes or Below Threshold","url":"https://www.w3.org/TR/WCAG22/#three-flashes-or-below-threshold"}],"demo":"inline","useWhen":"judging whether a flash rate is dangerous"},{"name":"Flat design","slug":"flat-design","category":"aesthetic","status":"published","definition":"A style that strips away depth cues, using solid fills, sharp edges, and bold color instead of shadow, gradient, bevel, or texture.","aliases":[{"name":"flat UI","source":"community"},{"name":"flat design 1.0"},{"name":"2D interface style"}],"tags":[],"relations":{"contrastWith":["skeuomorphism","neubrutalism","minimalism","flat-design-2","metro-design","neumorphism"],"variantOf":[],"partOf":[],"seeAlso":["long-shadow"]},"implementations":[],"sources":[{"title":"NN/g: Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users","url":"https://www.nngroup.com/articles/flat-design/"},{"title":"CareerFoundry: Flat Design: A Complete Beginner's Guide","url":"https://careerfoundry.com/en/blog/ui-design/what-is-flat-design/"}],"demo":"inline","useWhen":"no depth cues at all, only color and shape"},{"name":"Flat 2.0","slug":"flat-design-2","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"semi-flat design"},{"name":"almost flat design"},{"name":"flat design 2.0","source":"nngroup"},{"name":"near-flat"}],"tags":[],"relations":{"contrastWith":["flat-design","neo-skeuomorphism"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"NN/g: Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users","url":"https://www.nngroup.com/articles/flat-design/"},{"title":"UXPin: The 7-Minute Guide to Flat Design 2.0","url":"https://www.uxpin.com/studio/blog/the-7-minute-guide-to-flat-design-2-0/"}],"demo":"inline","useWhen":"flat surfaces, but affordance restored with light shadow"},{"name":"Fling","slug":"fling","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"throw","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["momentum-scrolling","swipe"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Fling","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: gestures (drag, swipe, and fling)","url":"https://m1.material.io/patterns/gestures.html"}],"demo":"inline","useWhen":"a throw that releases mid-motion and cannot be taken back"},{"name":"FLIP","slug":"flip-animation","category":"motion","status":"published","definition":"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.","aliases":[{"name":"First Last Invert Play"},{"name":"FLIP technique"},{"name":"layout animation","source":"framer-motion"}],"tags":[],"relations":{"contrastWith":["height-animation","card-flip"],"variantOf":[],"partOf":[],"seeAlso":["layout-thrashing"]},"implementations":[],"sources":[{"title":"Aerotwist: FLIP your animations","url":"https://aerotwist.com/blog/flip-your-animations/"},{"title":"Josh Comeau: animating the unanimatable","url":"https://www.joshwcomeau.com/react/animating-the-unanimatable/"}],"demo":"inline","useWhen":"a layout change must animate without animating layout properties"},{"name":"Float animation","slug":"float-animation","category":"motion","status":"published","definition":"A slow continuous up and down drift on an idle element, so a static composition keeps breathing without asking for attention.","aliases":[{"name":"floating animation","source":"community"},{"name":"bobbing","source":"community"},{"name":"drift","source":"community"},{"name":"hover float","source":"community"}],"tags":[],"relations":{"contrastWith":["pulse-animation","attract-mode","orbit-animation"],"variantOf":[],"partOf":[],"seeAlso":["aurora-ui"]},"implementations":[],"sources":[{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"},{"title":"The Vocabulary of Motion","url":"https://motion-vocabulary.vercel.app/"}],"demo":"inline","useWhen":"a hero illustration should not look frozen"},{"name":"Floating action button","slug":"floating-action-button","category":"component","status":"published","definition":"A round, raised button that hovers above the content in a fixed corner, carrying the one action the screen is most for.","aliases":[{"name":"fab","source":"material"},{"name":"extended fab","source":"material"},{"name":"float button","source":"ant-design"}],"tags":[],"relations":{"contrastWith":["icon-button","speed-dial"],"variantOf":["button"],"partOf":[],"seeAlso":["sticky-add-to-cart"]},"implementations":[{"system":"material","name":"Floating action button (FAB)","url":"https://m3.material.io/components/floating-action-button/overview"}],"sources":[{"title":"Material Design 3: Floating action buttons (FABs)","url":"https://m3.material.io/components/floating-action-button/overview"}],"demo":"inline","useWhen":"the screen has a single dominant action"},{"name":"Floating label","slug":"floating-label","category":"component","status":"published","definition":"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.","aliases":[{"name":"floating placeholder","source":"community"},{"name":"animated label","source":"community"},{"name":"shrinking label","source":"mui"}],"tags":["forms"],"relations":{"contrastWith":["placeholder-as-label"],"variantOf":[],"partOf":["text-field"],"seeAlso":[]},"implementations":[],"sources":[{"title":"MUI Text Field: the label that shrinks on focus or value","url":"https://mui.com/material-ui/react-text-field/"}],"demo":"inline","useWhen":"the label starts inside the box and moves up"},{"name":"Fluid grid","slug":"fluid-grid","category":"layout","status":"published","definition":"A grid whose columns and gutters are expressed as proportions rather than fixed pixels, so the whole composition stretches and shrinks with its container.","aliases":[{"name":"fluid grids","source":"alistapart"},{"name":"fluid layout","source":"community"},{"name":"liquid layout","source":"community"},{"name":"percentage grid","source":"community"}],"tags":[],"relations":{"contrastWith":["twelve-column-grid","intrinsic-web-design","ram-technique"],"variantOf":[],"partOf":[],"seeAlso":["fluid-space-scale"]},"implementations":[],"sources":[{"title":"Responsive Web Design, A List Apart","url":"https://alistapart.com/article/responsive-web-design/"}],"demo":"inline","useWhen":"columns measured in proportions, not pixels"},{"name":"Fluid space scale","slug":"fluid-space-scale","category":"layout","status":"published","definition":"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.","aliases":[{"name":"fluid space","source":"utopia"},{"name":"fluid spacing","source":"community"},{"name":"space steps","source":"utopia"},{"name":"one-up pairs","source":"utopia"}],"tags":["tokens"],"relations":{"contrastWith":["spacing-scale"],"variantOf":[],"partOf":[],"seeAlso":["fluid-grid"]},"implementations":[],"sources":[{"title":"Fluid Space Calculator, Utopia","url":"https://utopia.fyi/space/calculator/"}],"demo":"inline","useWhen":"spacing that scales with the screen, not in steps"},{"name":"Fluid typography","slug":"fluid-typography","category":"typography","status":"published","definition":"Type sizes that scale continuously with the viewport between a minimum and a maximum, rather than jumping at breakpoints.","aliases":[{"name":"fluid type scale"},{"name":"clamp typography","source":"css"},{"name":"responsive type"},{"name":"fluid heading styles","source":"carbon"}],"tags":[],"relations":{"contrastWith":["dynamic-type","modular-scale"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Fluid Typography (CSS-Tricks)","url":"https://css-tricks.com/snippets/css/fluid-typography/"},{"title":"Creating a Fluid Type Scale (Modern CSS)","url":"https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/"}],"demo":"inline","useWhen":"sizing text across screens without breakpoints"},{"name":"Focal point","slug":"focal-point","category":"layout","status":"published","definition":"The one element a composition is built around, given enough size, contrast or isolation that the eye lands there before anywhere else.","aliases":[{"name":"center of interest","source":"community"},{"name":"dominant element","source":"community"},{"name":"visual anchor","source":"community"}],"tags":[],"relations":{"contrastWith":["visual-hierarchy","rule-of-thirds"],"variantOf":[],"partOf":[],"seeAlso":["z-pattern"]},"implementations":[],"sources":[{"title":"Design Principles: Compositional, Symmetrical And Asymmetrical Balance","url":"https://www.smashingmagazine.com/2015/06/design-principles-compositional-balance-symmetry-asymmetry/"}],"demo":"inline","useWhen":"naming the thing the eye should hit first"},{"name":"Focus appearance","slug":"focus-appearance","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"focus indicator contrast","source":"community"},{"name":"focus indicator size","source":"wcag"},{"name":"2px outline rule","source":"community"}],"tags":[],"relations":{"contrastWith":["non-text-contrast","focus-ring","focus-visible"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Focus Appearance","url":"https://www.w3.org/TR/WCAG22/#focus-appearance"}],"demo":"inline","useWhen":"judging whether a focus ring is strong enough"},{"name":"Focus delegation","slug":"focus-delegation","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"delegatesFocus","source":"whatwg-html"},{"name":"dead focus zone","source":"community"},{"name":"host focus forwarding","source":"community"}],"tags":[],"relations":{"contrastWith":["initial-focus"],"variantOf":[],"partOf":[],"seeAlso":["hit-slop"]},"implementations":[],"sources":[{"title":"MDN: ShadowRoot.delegatesFocus","url":"https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus"},{"title":"Frontend Masters: Shadow DOM focus delegation","url":"https://frontendmasters.com/blog/shadow-dom-focus-delegation-getting-delegatesfocus-right/"}],"demo":"inline","useWhen":"a custom element swallows clicks near its edges"},{"name":"Focus follows mouse","slug":"focus-follows-mouse","category":"interaction","status":"published","definition":"A focus model in which whatever the pointer is over receives keyboard input, without any click to claim it first.","aliases":[{"name":"pointer focus","source":"community"},{"name":"sloppy focus","source":"community"},{"name":"implicit focus model","source":"community"}],"tags":[],"relations":{"contrastWith":["click-through","hover"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"LWN: focus follows mouse or click to focus?","url":"https://lwn.net/Articles/467703/"}],"demo":"inline","useWhen":"keyboard input goes where the pointer is pointing"},{"name":"Focus management","slug":"focus-management","category":"accessibility","status":"published","definition":"Deliberately moving keyboard focus after a state change so the reader lands on the new content instead of at the top of the document.","aliases":[{"name":"focus restoration"},{"name":"restore focus"},{"name":"focus return"},{"name":"managing focus","source":"community"},{"name":"moving focus","source":"community"},{"name":"focus handling","source":"community"}],"tags":[],"relations":{"contrastWith":["initial-focus","focus-trap","route-announcement","focus-order"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"fluent","name":"Manage focus","url":"https://fluent2.microsoft.design/accessibility"}],"sources":[{"title":"APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"demo":"inline","useWhen":"deciding where focus goes when the UI changes"},{"name":"Focus not obscured","slug":"focus-not-obscured","category":"accessibility","status":"published","definition":"The requirement that a focused control is not completely hidden by sticky headers, footers, cookie bars, or chat widgets when it receives focus.","aliases":[{"name":"focus hidden behind sticky header","source":"community"},{"name":"obscured focus","source":"community"},{"name":"scroll-padding for focus","source":"community"}],"tags":[],"relations":{"contrastWith":["scroll-anchoring"],"variantOf":[],"partOf":[],"seeAlso":["sticky-header","safe-area"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Focus Not Obscured (Minimum)","url":"https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum"},{"title":"W3C F110: sticky footer or header hiding focused elements","url":"https://www.w3.org/WAI/WCAG22/Techniques/failures/F110"}],"demo":"inline","useWhen":"the sticky header swallows the focused control"},{"name":"Focus order","slug":"focus-order","category":"accessibility","status":"published","definition":"The sequence keyboard focus follows through a page, which should match reading order instead of source quirks or positive tabindex values.","aliases":[{"name":"tab order","source":"community"},{"name":"tab sequence","source":"aria-apg"},{"name":"tab ring","source":"aria-apg"},{"name":"sequential focus navigation","source":"html"},{"name":"linear focus flow","source":"a11yproject"}],"tags":["keyboard"],"relations":{"contrastWith":["reading-order","reading-flow","positive-tabindex","focus-management"],"variantOf":[],"partOf":[],"seeAlso":["accessibility-annotation","spatial-navigation","skip-link"]},"implementations":[{"system":"fluent","name":"Keyboard navigation and assistive technologies","url":"https://fluent2.microsoft.design/accessibility"}],"sources":[{"title":"WCAG 2.2: Focus Order","url":"https://www.w3.org/TR/WCAG22/#focus-order"},{"title":"APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"demo":"inline","useWhen":"the path Tab takes through a whole page"},{"name":"Focus plus context","slug":"focus-plus-context","category":"layout","status":"published","definition":"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.","aliases":[{"name":"focus+context","source":"community"},{"name":"detail in place","source":"community"}],"tags":[],"relations":{"contrastWith":["overview-plus-detail","fisheye-view","semantic-zoom"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"A Review of Overview+Detail, Zooming, and Focus+Context Interfaces, Cockburn, Karlson and Bederson","url":"https://dl.acm.org/doi/10.1145/1456650.1456652"}],"demo":"inline","useWhen":"detail and its surroundings in one view"},{"name":"Focus ring","slug":"focus-ring","category":"accessibility","status":"published","definition":"The visible outline drawn around the element that currently holds keyboard focus, showing where the next keypress will land.","aliases":[{"name":"focus outline"},{"name":"focus indicator","source":"wcag"},{"name":"focus highlight"},{"name":"focus halo","source":"spectrum"},{"name":"keyboard focus indicator","source":"aria-apg"}],"tags":["keyboard"],"relations":{"contrastWith":["focus-visible","focus-appearance"],"variantOf":[],"partOf":[],"seeAlso":["state-layer"]},"implementations":[{"system":"polaris","name":"Keep focus outlines","url":"https://github.com/Shopify/polaris/blob/main/documentation/Accessibility.md"}],"sources":[{"title":"WCAG 2.2: Focus Visible","url":"https://www.w3.org/TR/WCAG22/#focus-visible"},{"title":"APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"demo":"inline","useWhen":"marking where keyboard focus is sitting right now"},{"name":"Focus trap","slug":"focus-trap","category":"accessibility","status":"published","definition":"A constraint that keeps keyboard focus cycling inside one region until that region is dismissed.","aliases":[{"name":"focus containment"},{"name":"focus sentinel"},{"name":"focus lock","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["inert","keyboard-trap","focus-management","scrim"],"variantOf":[],"partOf":[],"seeAlso":["modal-dialog","initial-focus"]},"implementations":[{"system":"aria-apg","name":"Dialog (Modal) Pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"}],"sources":[{"title":"ARIA APG: dialog (modal) pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"},{"title":"MDN: inert","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert"}],"demo":"inline","useWhen":"focus deliberately held inside one region"},{"name":"Focus visible","slug":"focus-visible","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":":focus-visible pseudo-class","source":"css"},{"name":"keyboard-only focus style","source":"community"},{"name":"focus-visible polyfill","source":"community"}],"tags":["keyboard","web-platform"],"relations":{"contrastWith":["focus-appearance","focus-ring"],"variantOf":[],"partOf":[],"seeAlso":["hover"]},"implementations":[],"sources":[{"title":"MDN: :focus-visible","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible"}],"demo":"inline","useWhen":"showing the ring to keyboard users but not to clickers"},{"name":"Focusable disabled","slug":"focusable-disabled","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-disabled","source":"aria"},{"name":"soft disable","source":"community"},{"name":"disabled but focusable","source":"aria-apg"}],"tags":["keyboard"],"relations":{"contrastWith":["tabbable"],"variantOf":[],"partOf":[],"seeAlso":["button"]},"implementations":[],"sources":[{"title":"ARIA APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"},{"title":"MDN: aria-disabled","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-disabled"}],"demo":"inline","useWhen":"a disabled control still needs to be discoverable"},{"name":"Focusable scroll region","slug":"focusable-scroll-region","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"scrollable-region-focusable","source":"deque"},{"name":"keyboard scrollable region","source":"community"},{"name":"tabindex on a scroller","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["scroll-container","tabbable"]},"implementations":[],"sources":[{"title":"Deque: Scrollable region must have keyboard access","url":"https://dequeuniversity.com/rules/axe/4.9/scrollable-region-focusable"},{"title":"WCAG 2.2: 2.1.1 Keyboard","url":"https://www.w3.org/TR/WCAG22/#keyboard"}],"demo":"inline","useWhen":"a code block or log pane scrolls but cannot be reached"},{"name":"FOFT","slug":"foft","category":"typography","status":"published","definition":"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.","aliases":[{"name":"flash of faux text"},{"name":"critical FOFT"},{"name":"staged font loading"}],"tags":[],"relations":{"contrastWith":["foit","fout"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"FOUT, FOIT, FOFT (CSS-Tricks)","url":"https://css-tricks.com/fout-foit-foft/"}],"demo":"inline","useWhen":"staging a font swap instead of taking it all at once"},{"name":"FOIT","slug":"foit","category":"typography","status":"published","definition":"The blank period when a browser hides text entirely rather than show it in a fallback face while the web font loads.","aliases":[{"name":"flash of invisible text"},{"name":"invisible text"},{"name":"font blocking period","source":"css"}],"tags":[],"relations":{"contrastWith":["flash-of-inaccurate-color-theme","fout","foft","font-metric-override"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Ensure text remains visible during webfont load (Lighthouse)","url":"https://developer.chrome.com/docs/lighthouse/performance/font-display"},{"title":"Fighting FOIT and FOUT Together (CSS-Tricks)","url":"https://css-tricks.com/fighting-foit-and-fout-together/"}],"demo":"inline","useWhen":"the text is missing, not just wrong, on load"},{"name":"Follow-through","slug":"follow-through","category":"motion","status":"published","definition":"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.","aliases":[{"name":"overlapping action","source":"community"},{"name":"drag and settle","source":"community"},{"name":"trailing motion","source":"community"}],"tags":[],"relations":{"contrastWith":["parenting","anticipation"],"variantOf":[],"partOf":[],"seeAlso":["stagger"]},"implementations":[],"sources":[{"title":"IxDF: UI Animation, applying Disney's 12 principles to UI","url":"https://ixdf.org/literature/article/ui-animation-how-to-apply-disney-s-12-principles-of-animation-to-ui-design"}],"demo":"inline","useWhen":"a group should move like connected parts, not one slab"},{"name":"Hinting","slug":"font-hinting","category":"typography","status":"published","definition":"Instructions inside a font that nudge its outlines onto the pixel grid at small sizes so stems stay crisp and even.","aliases":[{"name":"grid fitting"},{"name":"TrueType hinting"}],"tags":[],"relations":{"contrastWith":["font-smoothing","signed-distance-field"],"variantOf":[],"partOf":[],"seeAlso":["pixel-density"]},"implementations":[],"sources":[{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"explaining why type looks fuzzy at small sizes"},{"name":"Font metric override","slug":"font-metric-override","category":"typography","status":"published","definition":"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.","aliases":[{"name":"size-adjust","source":"css"},{"name":"ascent-override","source":"css"},{"name":"descent-override","source":"css"},{"name":"line-gap-override","source":"css"},{"name":"metric compatible fallback"},{"name":"adjusted fallback font"}],"tags":["web-platform"],"relations":{"contrastWith":["foit","fallback-font"],"variantOf":[],"partOf":[],"seeAlso":["layout-shift"]},"implementations":[],"sources":[{"title":"Framework tools for font fallbacks (Chrome for Developers)","url":"https://developer.chrome.com/blog/framework-tools-font-fallback/"},{"title":"Creating Perfect Font Fallbacks in CSS","url":"https://www.aleksandrhovhannisyan.com/blog/perfect-font-fallbacks/"}],"demo":"inline","useWhen":"killing the layout jump when a web font lands"},{"name":"Font pairing","slug":"font-pairing","category":"typography","status":"published","definition":"Choosing two or more typefaces that work together, usually one expressive and one neutral, with enough contrast to read as a deliberate choice.","aliases":[{"name":"type pairing"},{"name":"font combination"},{"name":"typeface pairing"}],"tags":[],"relations":{"contrastWith":["superfamily"],"variantOf":[],"partOf":[],"seeAlso":["typeface"]},"implementations":[],"sources":[{"title":"Three secrets to font pairing (Adobe Design)","url":"https://adobe.design/ideas/three-secrets-to-font-pairing"},{"title":"Mixing fonts (Practical Typography)","url":"https://practicaltypography.com/mixing-fonts.html"}],"demo":"inline","useWhen":"deciding which two typefaces to run together"},{"name":"Font smoothing","slug":"font-smoothing","category":"typography","status":"published","definition":"How a device softens the edges of letterforms, either by shading whole pixels grey or by lighting a pixel's colored subpixels separately.","aliases":[{"name":"antialiasing"},{"name":"anti-aliasing"},{"name":"subpixel rendering"},{"name":"grayscale antialiasing"},{"name":"-webkit-font-smoothing","source":"css"}],"tags":[],"relations":{"contrastWith":["font-hinting"],"variantOf":[],"partOf":[],"seeAlso":["pixel-density"]},"implementations":[],"sources":[{"title":"font-smooth (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth"},{"title":"What's the deal with WebKit Font Smoothing?","url":"https://dbushell.com/2024/11/05/webkit-font-smoothing/"}],"demo":"inline","useWhen":"your type looks heavier on one platform than another"},{"name":"Font stack","slug":"font-stack","category":"typography","status":"published","definition":"The ordered list of typefaces a rule names, each tried in turn until one is available, ending in a generic family.","aliases":[{"name":"font-family stack","source":"css"},{"name":"fallback chain"},{"name":"font list"},{"name":"system font stack"}],"tags":[],"relations":{"contrastWith":["fallback-font","web-font","system-font"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Font Stacks and Fallbacks","url":"https://designhubs.dev/typography/t16-font-stacks/"},{"title":"Creating Perfect Font Fallbacks in CSS","url":"https://www.aleksandrhovhannisyan.com/blog/perfect-font-fallbacks/"}],"demo":"inline","useWhen":"listing which fonts to try and in what order"},{"name":"Font subsetting","slug":"font-subsetting","category":"typography","status":"published","definition":"Shipping only the characters a page actually needs, cutting the font file down and letting the browser fetch ranges on demand.","aliases":[{"name":"subsetting"},{"name":"unicode-range","source":"css"},{"name":"font slicing"},{"name":"character subset"}],"tags":["web-platform"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["web-font","icon-font"]},"implementations":[],"sources":[{"title":"CSS fonts module (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts"},{"title":"Font Fallback and Tofu","url":"https://symbolfyi.com/guides/font-fallback-tofu/"}],"demo":"inline","useWhen":"cutting a font file down to what the page uses"},{"name":"Font weight","slug":"font-weight","category":"typography","status":"published","definition":"How thick a typeface's strokes are, named in steps from thin to black and numbered from 100 to 900 on the web.","aliases":[{"name":"weight"},{"name":"boldness"},{"name":"wght axis","source":"opentype"},{"name":"type weight"}],"tags":[],"relations":{"contrastWith":["faux-bold","named-instance"],"variantOf":[],"partOf":[],"seeAlso":["typographic-color","grade-axis"]},"implementations":[],"sources":[{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"},{"title":"OpenType Design-Variation Axis Tag Registry","url":"https://learn.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg"}],"demo":"inline","useWhen":"naming how heavy the strokes are"},{"name":"Force touch","slug":"force-touch","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"3D Touch","source":"hig"},{"name":"force click","source":"hig"},{"name":"pressure touch","source":"community"},{"name":"deep press","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["long-press","pressure-sensitivity"],"variantOf":[],"partOf":[],"seeAlso":["haptic-feedback"]},"implementations":[],"sources":[{"title":"iOS HIG: Gestures","url":"https://developer.apple.com/design/human-interface-guidelines/gestures"},{"title":"MDN: Force Touch events (non-standard)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Force_Touch_events"}],"demo":"inline","useWhen":"press depth carries meaning, not just contact"},{"name":"Forced colors mode","slug":"forced-colors-mode","category":"color","status":"published","definition":"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.","aliases":[{"name":"Windows High Contrast Mode","source":"community"},{"name":"WHCM","source":"community"},{"name":"contrast themes","source":"microsoft"},{"name":"forced-colors","source":"css"},{"name":"-ms-high-contrast","source":"microsoft"}],"tags":["a11y","theming","web-platform"],"relations":{"contrastWith":["prefers-contrast","inverted-colors","system-color-keyword"],"variantOf":[],"partOf":[],"seeAlso":["non-text-contrast"]},"implementations":[],"sources":[{"title":"MDN: forced-colors","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors"},{"title":"Styling for Windows high contrast with forced colors","url":"https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/"}],"demo":"inline","useWhen":"the OS is imposing its own palette on your interface"},{"name":"Forced continuity","slug":"forced-continuity","category":"pattern","status":"published","definition":"Turning a free trial into a paid subscription automatically, with the card taken up front and no reminder before the first real charge.","aliases":[{"name":"hidden subscription","source":"deceptive-design"},{"name":"auto-renewal trap","source":"community"},{"name":"negative option billing","source":"community"},{"name":"free trial trap","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["roach-motel"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Hidden subscription","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"a free trial quietly becomes a paid plan"},{"name":"Forgiving format","slug":"forgiving-format","category":"pattern","status":"published","definition":"Accepting whatever shape the reader types and normalising it afterwards, instead of rejecting input that differs only in spacing or punctuation.","aliases":[{"name":"forgiving input","source":"ui-patterns"},{"name":"lenient parsing","source":"community"},{"name":"flexible input","source":"community"},{"name":"input normalisation","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["input-mask"],"variantOf":[],"partOf":[],"seeAlso":["smart-defaults"]},"implementations":[],"sources":[{"title":"UI Patterns: Forgiving Format","url":"https://ui-patterns.com/patterns"},{"title":"GoodUI: Try Forgiving Inputs instead of being strict with data","url":"https://goodui.org/"}],"demo":"inline","useWhen":"the field takes the card number however you type it"},{"name":"Form","slug":"form","category":"component","status":"published","definition":"A grouping of controls a reader fills in and submits together, carrying the labels, validation and submit affordance for the whole set.","aliases":[{"name":"form layout","source":"ant-design"},{"name":"input form","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["fieldset","wizard"],"variantOf":[],"partOf":[],"seeAlso":["one-thing-per-page","attribute-editor"]},"implementations":[{"system":"radix","name":"Form","url":"https://www.radix-ui.com/primitives/docs/components/form"}],"sources":[{"title":"The Component Gallery: Form","url":"https://component.gallery/components/form/"},{"title":"Radix Primitives: Form","url":"https://www.radix-ui.com/primitives/docs/components/form"}],"demo":"inline","useWhen":"a set of inputs is submitted as one unit"},{"name":"FOUT","slug":"fout","category":"typography","status":"published","definition":"The visible swap when a page first paints text in a fallback face and then re-renders it once the web font arrives.","aliases":[{"name":"flash of unstyled text"},{"name":"font swap"},{"name":"font flash"},{"name":"font-display: swap","source":"css"}],"tags":[],"relations":{"contrastWith":["flash-of-inaccurate-color-theme","foft","foit"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"FOUT (Google Fonts Knowledge)","url":"https://fonts.google.com/knowledge/glossary/fout"},{"title":"FOUT, FOIT, FOFT (CSS-Tricks)","url":"https://css-tricks.com/fout-foit-foft/"}],"demo":"inline","useWhen":"the text visibly changes font on load"},{"name":"Frame rate","slug":"frame-rate","category":"motion","status":"published","definition":"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.","aliases":[{"name":"fps","source":"community"},{"name":"frames per second","source":"community"},{"name":"frame budget","source":"community"},{"name":"refresh rate","source":"community"},{"name":"60fps","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["jank","perceptual-duration"],"variantOf":[],"partOf":[],"seeAlso":["compositor-animation","stepped-animation","throttle"]},"implementations":[],"sources":[{"title":"MDN: animation performance and frame rate","url":"https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Animation_performance_and_frame_rate"},{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"}],"demo":"inline","useWhen":"motion has to be judged in milliseconds per frame"},{"name":"Friend spam","slug":"friend-spam","category":"pattern","status":"published","definition":"Asking for access to a contact list under one pretext and using it to send invitations that appear to come from the reader.","aliases":[{"name":"contact list harvesting","source":"community"},{"name":"invite spam","source":"community"},{"name":"invite friends","source":"ui-patterns"},{"name":"address book import","source":"community"}],"tags":[],"relations":{"contrastWith":["nagging"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: invite friends","url":"https://ui-patterns.com/patterns"},{"title":"Deceptive Design: types of deceptive pattern","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the app mails your contacts as if you had"},{"name":"Frozen column","slug":"frozen-column","category":"layout","status":"published","definition":"A table column held against the edge while the rest scrolls sideways, so the row's identifying value stays readable.","aliases":[{"name":"pinned column","source":"mui"},{"name":"locked column","source":"community"},{"name":"freeze panes","source":"excel"},{"name":"frozen header row","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["table-header-association","sticky-header"],"variantOf":[],"partOf":["data-table"],"seeAlso":["column-resizer"]},"implementations":[],"sources":[{"title":"Data Grid column pinning, MUI X","url":"https://mui.com/x/react-data-grid/column-pinning/"}],"demo":"inline","useWhen":"a wide table where you lose track of the row"},{"name":"Frutiger Aero","slug":"frutiger-aero","category":"aesthetic","status":"published","definition":"The mid 2000s look of glossy gradients, bubbles, water, bright skies, and clean humanist type, named after the typeface and Windows Aero.","aliases":[{"name":"Web 2.0 gloss"},{"name":"Aero aesthetic","source":"community"},{"name":"glossy 2000s","source":"community"},{"name":"bubbles and grass aesthetic","source":"community"},{"name":"Neo-Aero","source":"community"}],"tags":[],"relations":{"contrastWith":["frutiger-metro","solarpunk","aqua","y2k-aesthetic"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Frutiger Aero | Aesthetics Wiki","url":"https://aesthetics.fandom.com/wiki/Frutiger_Aero"},{"title":"Kittl: Frutiger Aero aesthetic","url":"https://www.kittl.com/blogs/frutiger-aero-aesthetic-stl/"}],"demo":"inline","useWhen":"glossy optimistic 2000s tech imagery"},{"name":"Frutiger Metro","slug":"frutiger-metro","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"Vectordelia"},{"name":"flat Frutiger Aero"},{"name":"vector metro"},{"name":"vector vomit","source":"community"}],"tags":[],"relations":{"contrastWith":["metro-design","frutiger-aero"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Aesthetics Wiki: Vectordelia","url":"https://aesthetics.fandom.com/wiki/Vectordelia"},{"title":"2000 Aesthetics Wiki: Frutiger Metro","url":"https://2000-aesthetics.fandom.com/wiki/Frutiger_Metro"}],"demo":"inline","useWhen":"gradient vector blocks with bloom and swooshes"},{"name":"Full bleed","slug":"full-bleed","category":"layout","status":"published","definition":"An element that breaks past the content column to span the whole viewport width while its neighbours stay constrained.","aliases":[{"name":"full width","source":"community"},{"name":"bleed","source":"print"},{"name":"edge to edge band","source":"community"},{"name":"escape the container","source":"community"},{"name":"full alignment","source":"wordpress"},{"name":"alignfull","source":"wordpress"}],"tags":[],"relations":{"contrastWith":["hero","breakout","container"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Full Bleed, CSS-Tricks","url":"https://css-tricks.com/full-bleed/"},{"title":"CSS Grid full-bleed layout tutorial, Josh W. Comeau","url":"https://www.joshwcomeau.com/css/full-bleed/"}],"demo":"inline","useWhen":"one band that runs edge to edge inside a narrow page"},{"name":"Functional need","slug":"functional-need","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"functional needs","source":"w3c"},{"name":"user need","source":"w3c"}],"tags":[],"relations":{"contrastWith":["situational-disability","pour"],"variantOf":[],"partOf":[],"seeAlso":["curb-cut-effect"]},"implementations":[],"sources":[{"title":"W3C: Explainer for WCAG 3.0","url":"https://www.w3.org/TR/wcag-3.0-explainer/"},{"title":"WCAG 3.0 editor's draft","url":"https://w3c.github.io/silver/guidelines/"}],"demo":"inline","useWhen":"framing a barrier without naming a diagnosis"},{"name":"Gamut mapping","slug":"gamut-mapping","category":"color","status":"published","definition":"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.","aliases":[{"name":"gamut clipping","source":"community"},{"name":"clamping","source":"community"},{"name":"chroma reduction","source":"community"}],"tags":[],"relations":{"contrastWith":["chroma","color-gamut","wide-gamut"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Color.js: gamut mapping","url":"https://colorjs.io/docs/gamut-mapping"},{"title":"CSS Color Module Level 4","url":"https://www.w3.org/TR/css-color-4/"}],"demo":"inline","useWhen":"bringing an impossible colour into a display's range"},{"name":"Gauge","slug":"gauge","category":"component","status":"published","definition":"A dial style readout showing one value on an arc between a minimum and a maximum, borrowed from instrument panels.","aliases":[{"name":"dial gauge","source":"community"},{"name":"speedometer chart","source":"community"},{"name":"semi circle progress","source":"mantine"},{"name":"radial gauge","source":"community"}],"tags":["dataviz"],"relations":{"contrastWith":["meter","progress-ring"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/"}],"demo":"inline","useWhen":"a value read off an arc like a dial"},{"name":"Generative UI","slug":"generative-ui","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"GenUI"},{"name":"AI-native UI","source":"uistyleguide"},{"name":"AI-generated interface"},{"name":"agent-native UI"},{"name":"adaptive interface"}],"tags":["ai"],"relations":{"contrastWith":["natural-language-interface","multimodal-interface"],"variantOf":[],"partOf":[],"seeAlso":["prompt-input"]},"implementations":[],"sources":[{"title":"CopilotKit: Generative UI, understanding agent-powered interfaces","url":"https://www.copilotkit.ai/generative-ui"},{"title":"Builder.io: Designing generative UI in an agent-native world","url":"https://www.builder.io/blog/designing-generative-ui-in-an-agent-native-world"},{"title":"Eleken: Inside generative UI in 2026","url":"https://www.eleken.co/blog-posts/generative-ui"}],"demo":"inline","useWhen":"the model assembles the screen, not just the words"},{"name":"Ghost button","slug":"ghost-button","category":"component","status":"published","definition":"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.","aliases":[{"name":"text button","source":"material"},{"name":"tertiary button","source":"community"},{"name":"subtle button","source":"primer"},{"name":"quiet button","source":"spectrum"},{"name":"borderless button","source":"community"}],"tags":[],"relations":{"contrastWith":["link","button-versus-link"],"variantOf":["button"],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Text button","url":"https://m3.material.io/components/all-buttons"},{"system":"shadcn","name":"Button (ghost variant)","url":"https://ui.shadcn.com/docs/components/button"}],"sources":[{"title":"All buttons, Material Design 3","url":"https://m3.material.io/components/all-buttons"}],"demo":"inline","useWhen":"naming the least emphatic button variant"},{"name":"Ghost click","slug":"ghost-click","category":"interaction","status":"published","definition":"A stray click the browser emits after a touch has already been handled, landing on whatever moved under the finger in the meantime.","aliases":[{"name":"ghostclick","source":"community"},{"name":"phantom click","source":"community"},{"name":"double activation","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["pointer-cancellation","tap-delay"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"FastClick: polyfill to remove click delays","url":"https://github.com/ftlabs/fastclick"},{"title":"Chrome for Developers: 300ms tap delay, gone away","url":"https://developer.chrome.com/blog/300ms-tap-delay-gone-away"}],"demo":"inline","useWhen":"one touch produces a second, unwanted activation"},{"name":"Glassmorphism","slug":"glassmorphism","category":"aesthetic","status":"published","definition":"A style where surfaces are translucent and blur what is behind them, separated from the backdrop by a hairline edge and a soft shadow.","aliases":[{"name":"frosted glass"},{"name":"acrylic","source":"fluent"}],"tags":[],"relations":{"contrastWith":["neumorphism","liquid-glass","mica","windows-aero","vibrancy"],"variantOf":[],"partOf":[],"seeAlso":["claymorphism","reduced-transparency"]},"implementations":[{"system":"hig","name":"Materials","url":"https://developer.apple.com/design/human-interface-guidelines/materials"},{"system":"fluent","name":"Acrylic","url":"https://learn.microsoft.com/en-us/windows/apps/design/style/acrylic"}],"sources":[{"title":"MDN: backdrop-filter","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter"}],"demo":"inline","useWhen":"a translucent panel that blurs whatever is behind it"},{"name":"Glitch aesthetic","slug":"glitch-aesthetic","category":"aesthetic","status":"published","definition":"A look that fakes signal failure with colour channel offset, torn scan bands, and jitter, used for emphasis or as a whole visual identity.","aliases":[{"name":"glitch art"},{"name":"RGB split","source":"community"},{"name":"chromatic aberration","source":"community"},{"name":"datamosh"}],"tags":[],"relations":{"contrastWith":["vhs-aesthetic","scanlines"],"variantOf":[],"partOf":[],"seeAlso":["dithering"]},"implementations":[],"sources":[{"title":"Photoshop Supply: Dither Patterns","url":"https://www.photoshopsupply.com/patterns-textures/dither-patterns"}],"demo":"inline","useWhen":"deliberate corruption used as decoration"},{"name":"Global navigation","slug":"global-navigation","category":"layout","status":"published","definition":"The links to the top tier of a site's structure, present on every page and unchanged wherever the reader currently is.","aliases":[{"name":"global nav","source":"community"},{"name":"primary navigation","source":"community"},{"name":"main navigation","source":"community"},{"name":"site navigation","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["local-navigation","utility-navigation","universal-navigation","hub-and-spoke"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"The Difference Between Information Architecture and Navigation, NN/g","url":"https://www.nngroup.com/articles/ia-vs-navigation/"}],"demo":"inline","useWhen":"the nav that is the same on every page"},{"name":"Gloss","slug":"gloss","category":"aesthetic","status":"published","definition":"A wet plastic finish made from a light gradient across the top half of a control, a highlight arc, and a darker lower half.","aliases":[{"name":"glossy button"},{"name":"shine","source":"community"}],"tags":[],"relations":{"contrastWith":["specular-highlight","bevel","aqua"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"GirlieMac: CSS3 Gradients, no image Aqua button","url":"https://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/"}],"demo":"inline","useWhen":"the control looks like polished wet plastic"},{"name":"Glyph","slug":"glyph","category":"typography","status":"published","definition":"A single drawn shape in a font, which may be one character, a variant of one, or several characters fused together.","aliases":[{"name":"character"},{"name":"letterform"}],"tags":[],"relations":{"contrastWith":["typeface","tofu"],"variantOf":[],"partOf":[],"seeAlso":["tittle"]},"implementations":[],"sources":[{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"},{"title":"Letters (Google Fonts Knowledge)","url":"https://fonts.google.com/knowledge/glossary/letters"}],"demo":"inline","useWhen":"talking about drawn shapes rather than characters"},{"name":"Goal gradient","slug":"goal-gradient","category":"pattern","status":"published","definition":"Effort rising as a visible goal gets closer, which is why interfaces show how little is left rather than how much has been done.","aliases":[{"name":"goal-gradient effect","source":"ui-patterns"},{"name":"almost there","source":"community"},{"name":"two stamps to go","source":"community"}],"tags":["gamification"],"relations":{"contrastWith":["streak","endowed-progress"],"variantOf":[],"partOf":[],"seeAlso":["steps-left","onboarding-checklist"]},"implementations":[],"sources":[{"title":"UI Patterns: Goal-Gradient Effect","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"the interface shows how close you are, not how far you came"},{"name":"Golden ratio","slug":"golden-ratio","category":"layout","status":"published","definition":"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.","aliases":[{"name":"divine proportion","source":"community"},{"name":"golden section","source":"community"},{"name":"phi grid","source":"community"},{"name":"1.618","source":"community"}],"tags":[],"relations":{"contrastWith":["rule-of-thirds","modular-scale"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"A designer's guide to the Golden Ratio, Creative Bloq","url":"https://www.creativebloq.com/design/designers-guide-golden-ratio-12121546"}],"demo":"inline","useWhen":"picking proportions that are not arbitrary"},{"name":"Gooey effect","slug":"gooey-effect","category":"motion","status":"published","definition":"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.","aliases":[{"name":"metaball effect","source":"community"},{"name":"blob merge","source":"community"},{"name":"liquid animation","source":"community"},{"name":"feGaussianBlur and feColorMatrix trick","source":"community"}],"tags":[],"relations":{"contrastWith":["morph-transition"],"variantOf":[],"partOf":[],"seeAlso":["blob-shape"]},"implementations":[],"sources":[{"title":"CSS-Tricks: the gooey effect","url":"https://css-tricks.com/gooey-effect/"},{"title":"Animation Patterns: SVG metaball gooey filter with feColorMatrix","url":"https://animationpatterns.art/animations/gooey-blob-metaball-filter/"}],"demo":"inline","useWhen":"two moving shapes should read as one substance"},{"name":"Grabber","slug":"grabber","category":"component","status":"published","definition":"The short rounded bar drawn at the top of a bottom sheet to say the surface can be dragged.","aliases":[{"name":"drag indicator","source":"material"},{"name":"pull tab","source":"community"},{"name":"sheet handle","source":"community"},{"name":"grabber bar","source":"hig"},{"name":"pill handle","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["drag-handle"],"variantOf":[],"partOf":["action-sheet","drawer"],"seeAlso":["drag-and-drop","bottom-sheet"]},"implementations":[{"system":"material","name":"Drag handle","url":"https://m3.material.io/components/bottom-sheets/overview"}],"sources":[{"title":"Bottom sheets, Material Design 3","url":"https://m3.material.io/components/bottom-sheets/overview"}],"demo":"inline","useWhen":"the little bar on top of a sheet"},{"name":"Grade","slug":"grade-axis","category":"typography","status":"published","definition":"A variable font axis that thickens or thins strokes without changing any character's width, so text can get darker without reflowing.","aliases":[{"name":"GRAD","source":"opentype"},{"name":"optical grade"}],"tags":[],"relations":{"contrastWith":["faux-bold","variation-axis"],"variantOf":[],"partOf":[],"seeAlso":["font-weight"]},"implementations":[],"sources":[{"title":"OpenType Design-Variation Axis Tag Registry","url":"https://learn.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg"},{"title":"Designing with Variable Fonts","url":"https://variablefonts.io/about-variable-fonts/"}],"demo":"inline","useWhen":"darkening text on a dark background without reflow"},{"name":"Gradient","slug":"gradient","category":"color","status":"published","definition":"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.","aliases":[{"name":"linear-gradient","source":"css"},{"name":"radial gradient","source":"css"},{"name":"color transition"},{"name":"ramp"}],"tags":[],"relations":{"contrastWith":["color-ramp","color-stop","conic-gradient","mesh-gradient"],"variantOf":[],"partOf":[],"seeAlso":["aurora-ui"]},"implementations":[],"sources":[{"title":"MDN: Using CSS gradients","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Images/Using_gradients"}],"demo":"inline","useWhen":"a fill that changes colour across its own area"},{"name":"Gradient border","slug":"gradient-border","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"gradient outline"},{"name":"gradient stroke"},{"name":"rainbow border"},{"name":"animated border"},{"name":"glow border"},{"name":"shine border"}],"tags":[],"relations":{"contrastWith":["neon-glow","holographic-foil"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"web.dev: Use conic gradients to create a cool border","url":"https://web.dev/articles/conic-gradient-border"},{"title":"Bram.us: Animating a CSS Gradient Border","url":"https://www.bram.us/2021/01/29/animating-a-css-gradient-border/"},{"title":"Bejamas: Finding the best way to create animated gradient borders in CSS","url":"https://bejamas.com/hub/guides/css-animated-gradient-border"}],"demo":"inline","useWhen":"an outline whose color changes along its length"},{"name":"Gradual engagement","slug":"gradual-engagement","category":"pattern","status":"published","definition":"Replacing a sign-up form at the front door with a first useful action, so the reader experiences value before being asked for anything.","aliases":[{"name":"gradual sign up","source":"goodui"},{"name":"progressive engagement","source":"community"},{"name":"value first onboarding","source":"community"}],"tags":["auth","onboarding"],"relations":{"contrastWith":["first-run-experience","progressive-profiling","lazy-registration"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"GoodUI: Try Gradual Engagement instead of a hasty sign up","url":"https://goodui.org/"}],"demo":"inline","useWhen":"the first screen does something instead of asking you to register"},{"name":"Grainy gradient","slug":"grainy-gradient","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"noise texture"},{"name":"grain overlay"},{"name":"film grain"},{"name":"noisy background"},{"name":"feTurbulence background","source":"svg"}],"tags":[],"relations":{"contrastWith":["color-banding","aurora-ui","retro-film-aesthetic","terrazzo"],"variantOf":[],"partOf":[],"seeAlso":["dithering"]},"implementations":[],"sources":[{"title":"CSS-Tricks: Grainy Gradients","url":"https://css-tricks.com/grainy-gradients/"},{"title":"ibelick: Creating grainy backgrounds with CSS","url":"https://ibelick.com/blog/create-grainy-backgrounds-with-css"}],"demo":"inline","useWhen":"a smooth background deliberately roughened with noise"},{"name":"Grid lanes","slug":"grid-lanes","category":"layout","status":"published","definition":"The native masonry mechanism in CSS grid, where one axis keeps strict tracks and the other lets items stack into whichever lane has room.","aliases":[{"name":"display: grid-lanes","source":"css"},{"name":"grid-lanes layout","source":"mdn"},{"name":"stacking axis","source":"mdn"},{"name":"CSS grid level 3","source":"w3c"}],"tags":["web-platform"],"relations":{"contrastWith":["masonry","justified-gallery"],"variantOf":[],"partOf":[],"seeAlso":["bento-grid"]},"implementations":[],"sources":[{"title":"Masonry layout, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout"},{"title":"CSS Grid Layout Module Level 3","url":"https://www.w3.org/TR/css-grid-3/"}],"demo":"inline","useWhen":"masonry without a library, straight from grid"},{"name":"Group label","slug":"group-label","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"fieldset and legend","source":"whatwg-html"},{"name":"role=group","source":"aria"},{"name":"grouping label","source":"community"},{"name":"radiogroup label","source":"aria-apg"}],"tags":["forms"],"relations":{"contrastWith":["fieldset","radio-group","accessibility-grouping"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WAI-ARIA 1.2: group role","url":"https://www.w3.org/TR/wai-aria-1.2/#group"}],"demo":"inline","useWhen":"individual field labels make no sense on their own"},{"name":"Grunge design","slug":"grunge-design","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"grunge typography"},{"name":"punk grunge","source":"kittl"},{"name":"distressed style"},{"name":"zine aesthetic"}],"tags":[],"relations":{"contrastWith":["digital-collage","anti-design","new-wave-design"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Sessions College: The grunge typography of David Carson","url":"https://www.sessions.edu/notes-on-design/who-designed-it-the-grunge-typography-of-david-carson/"},{"title":"Mew Design Docs: Grunge graphic design, the raw distressed art of the 90s","url":"https://docs.mew.design/blog/grunge-graphic-design-style/"}],"demo":"inline","useWhen":"distressed texture and type deliberately off-grid"},{"name":"Guest checkout","slug":"guest-checkout","category":"pattern","status":"published","definition":"Letting a buyer complete a purchase without creating an account, with the offer to save details moved to after the order is placed.","aliases":[{"name":"checkout as guest","source":"community"},{"name":"no account checkout","source":"community"},{"name":"anonymous checkout","source":"community"}],"tags":["auth","commerce"],"relations":{"contrastWith":["lazy-registration","express-checkout"],"variantOf":[],"partOf":[],"seeAlso":["social-login"]},"implementations":[],"sources":[{"title":"Baymard Institute: the checkout UX guide","url":"https://baymard.com/learn/checkout-flow-ux-optimization"}],"demo":"inline","useWhen":"buying without being made to create an account"},{"name":"Gutenberg diagram","slug":"gutenberg-diagram","category":"layout","status":"published","definition":"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.","aliases":[{"name":"reading gravity","source":"community"},{"name":"Gutenberg rule","source":"community"},{"name":"primary optical area","source":"community"},{"name":"terminal area","source":"community"}],"tags":[],"relations":{"contrastWith":["f-pattern"],"variantOf":[],"partOf":[],"seeAlso":["visual-hierarchy"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"placing the last thing you want read"},{"name":"Gutter","slug":"gutter","category":"layout","status":"published","definition":"The space between columns or tracks in a grid, distinct from the outer margin that separates the grid from the container edge.","aliases":[{"name":"alley","source":"print"},{"name":"gap","source":"css"},{"name":"column gap","source":"css"},{"name":"grid gap","source":"community"},{"name":"gutters","source":"bootstrap"}],"tags":[],"relations":{"contrastWith":["layout-margins","spacing-scale","column-offset"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Gutters, MDN glossary","url":"https://developer.mozilla.org/en-US/docs/Glossary/Gutters"},{"title":"Gutters, Webflow glossary","url":"https://university.webflow.com/glossary/gutters"}],"demo":"inline","useWhen":"the space between columns, not around them"},{"name":"Half-leading","slug":"half-leading","category":"typography","status":"published","definition":"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.","aliases":[{"name":"leading space"},{"name":"line box padding"},{"name":"half leading space"}],"tags":[],"relations":{"contrastWith":["leading","text-box-trim","baseline"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Leading-Trim: The Future of Digital Typesetting","url":"https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202"},{"title":"CSS text-box-trim (Chrome for Developers)","url":"https://developer.chrome.com/blog/css-text-box-trim"}],"demo":"inline","useWhen":"explaining the mystery padding around a line of text"},{"name":"Halftone","slug":"halftone","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"dot screen"},{"name":"Ben Day dots"},{"name":"comic dots","source":"community"},{"name":"newsprint effect"}],"tags":["editorial"],"relations":{"contrastWith":["dithering","risograph","pop-art-style"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"tone made of print dots that grow and shrink"},{"name":"Hamburger menu","slug":"hamburger-menu","category":"component","status":"published","definition":"A button of three stacked horizontal lines that opens a site's main navigation, usually in a panel over the page.","aliases":[{"name":"doner menu"},{"name":"burger","source":"mantine"},{"name":"hamburger button"},{"name":"nav toggle"}],"tags":["navigation"],"relations":{"contrastWith":["kebab-menu","meatball-menu"],"variantOf":[],"partOf":["app-bar"],"seeAlso":["drawer","navigation-bar","icon-morph","priority-plus-navigation"]},"implementations":[{"system":"material","name":"Navigation drawer","url":"https://m3.material.io/components/navigation-drawer/overview"}],"sources":[{"title":"Nielsen Norman Group: Hamburger menus and hidden navigation hurt UX","url":"https://www.nngroup.com/articles/hamburger-menus/"}],"demo":"inline","useWhen":"the three-line button that opens the whole navigation"},{"name":"Hand-drawn UI","slug":"hand-drawn-ui","category":"aesthetic","status":"published","definition":"A style whose lines wobble as if sketched by hand, used to signal that a diagram or wireframe is provisional rather than finished.","aliases":[{"name":"sketchy UI"},{"name":"rough style","source":"community"},{"name":"wireframe aesthetic"},{"name":"lo-fi look"},{"name":"Excalidraw style","source":"community"}],"tags":[],"relations":{"contrastWith":["brutalist-web-design"],"variantOf":[],"partOf":[],"seeAlso":["lorem-ipsum"]},"implementations":[],"sources":[{"title":"Wired Elements","url":"https://wiredjs.com/"},{"title":"Excalidraw","url":"https://excalidraw.com/"}],"demo":"inline","useWhen":"the sketchiness says this is not final yet"},{"name":"Hanging indent","slug":"hanging-indent","category":"typography","status":"published","definition":"A paragraph whose first line starts further left than the rest, so the following lines are indented under it.","aliases":[{"name":"outdent"},{"name":"negative indent"},{"name":"reverse indent"}],"tags":["editorial"],"relations":{"contrastWith":["first-line-indent"],"variantOf":[],"partOf":[],"seeAlso":["description-list"]},"implementations":[],"sources":[{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"}],"demo":"inline","useWhen":"setting bibliographies, definitions, or list labels"},{"name":"Hanging punctuation","slug":"hanging-punctuation","category":"typography","status":"published","definition":"Letting quotes, hyphens, and other light marks sit outside the text column so the edge of the text reads as straight to the eye.","aliases":[{"name":"optical margin alignment","source":"indesign"},{"name":"hung punctuation"},{"name":"hanging quotes"}],"tags":[],"relations":{"contrastWith":["smart-quotes"],"variantOf":[],"partOf":[],"seeAlso":["optical-alignment"]},"implementations":[],"sources":[{"title":"Optical Margin Alignment in InDesign (Fonts.com)","url":"https://www.myfonts.com/pages/fontscom-learning-fyti-using-type-tools-optical-margin-alignment-in-indesign/"},{"title":"Hung Punctuation and Optical Margin Alignment (CreativePro)","url":"https://creativepro.com/typetalk-hung-punctuation-optical-margin-alignment/"}],"demo":"inline","useWhen":"a quote mark makes the left edge look dented"},{"name":"Haptic feedback","slug":"haptic-feedback","category":"interaction","status":"published","definition":"A brief physical vibration or tap produced by the device to confirm an interaction, mark a boundary, or signal success and failure.","aliases":[{"name":"haptics","source":"hig"},{"name":"vibration feedback","source":"community"},{"name":"taptic feedback","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["ripple"],"variantOf":[],"partOf":[],"seeAlso":["force-touch","microinteraction","shake-animation"]},"implementations":[],"sources":[{"title":"UXmatters: Designing for touch","url":"https://www.uxmatters.com/mt/archives/2020/02/designing-for-touch.php"}],"demo":"inline","useWhen":"feedback the user feels rather than sees or hears"},{"name":"Has popup","slug":"has-popup","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-haspopup","source":"aria"},{"name":"menu button hint","source":"community"},{"name":"submenu indicator","source":"community"}],"tags":[],"relations":{"contrastWith":["menu-button","expanded-state"],"variantOf":[],"partOf":[],"seeAlso":["popover"]},"implementations":[],"sources":[{"title":"MDN: aria-haspopup","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup"}],"demo":"inline","useWhen":"a button opens a menu and gives no warning"},{"name":"HCT","slug":"hct","category":"color","status":"published","definition":"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.","aliases":[{"name":"hue chroma tone","source":"material"},{"name":"Material color space","source":"material"},{"name":"material-color-utilities","source":"material"}],"tags":["theming"],"relations":{"contrastWith":["oklch","seed-color"],"variantOf":[],"partOf":[],"seeAlso":["material-you","color-ramp"]},"implementations":[{"system":"material","name":"HCT","url":"https://m3.material.io/styles/color/system/how-the-system-works"}],"sources":[{"title":"Material 3: how the color system works","url":"https://m3.material.io/styles/color/system/how-the-system-works"},{"title":"HCT in ColorAide","url":"https://facelessuser.github.io/coloraide/colors/hct/"}],"demo":"inline","useWhen":"generating a Material palette where tone predicts contrast"},{"name":"Heading","slug":"heading","category":"typography","status":"published","definition":"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.","aliases":[{"name":"title","source":"community"},{"name":"headline","source":"community"},{"name":"section header","source":"community"},{"name":"subheading","source":"community"}],"tags":[],"relations":{"contrastWith":["heading-hierarchy","typographic-hierarchy","deck","eyebrow"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"The Component Gallery: Heading","url":"https://component.gallery/components/heading/"}],"demo":"inline","useWhen":"naming a section and showing its depth at once"},{"name":"Heading hierarchy","slug":"heading-hierarchy","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"heading levels","source":"community"},{"name":"heading structure","source":"webaim"},{"name":"document outline","source":"community"},{"name":"skipped heading level","source":"community"},{"name":"headings and labels","source":"wcag"},{"name":"section headings","source":"wcag"}],"tags":[],"relations":{"contrastWith":["type-scale","landmark","heading","page-title"],"variantOf":[],"partOf":[],"seeAlso":["semantic-html","rotor","layer-cake-pattern","table-of-contents"]},"implementations":[{"system":"polaris","name":"Heading hierarchy","url":"https://github.com/Shopify/polaris/blob/main/documentation/Accessibility.md"},{"system":"fluent","name":"Structure, hierarchy, and navigation","url":"https://fluent2.microsoft.design/accessibility"}],"sources":[{"title":"WCAG 2.2: Headings and Labels","url":"https://www.w3.org/TR/WCAG22/#headings-and-labels"},{"title":"A11y Project checklist","url":"https://www.a11yproject.com/checklist/"}],"demo":"inline","useWhen":"structuring a page so it can be skimmed by heading"},{"name":"Height animation","slug":"height-animation","category":"motion","status":"published","definition":"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().","aliases":[{"name":"animate to height auto","source":"chrome-developers"},{"name":"collapse animation","source":"community"},{"name":"accordion animation","source":"community"},{"name":"auto-height transition","source":"community"},{"name":"interpolate-size","source":"css"},{"name":"calc-size","source":"css"}],"tags":["web-platform"],"relations":{"contrastWith":["reveal-animation","flip-animation"],"variantOf":[],"partOf":[],"seeAlso":["interpolation","accordion"]},"implementations":[],"sources":[{"title":"Chrome for Developers: animate to height: auto","url":"https://developer.chrome.com/docs/css-ui/animate-to-height-auto"},{"title":"MDN: interpolate-size","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size"}],"demo":"inline","useWhen":"a section must grow to fit content without a magic pixel value"},{"name":"Help drawer","slug":"help-drawer","category":"pattern","status":"published","definition":"Documentation opened beside the task rather than over it, keeping the form usable while the explanation is read and staying open across steps.","aliases":[{"name":"help panel","source":"cloudscape"},{"name":"contextual help","source":"community"},{"name":"info panel","source":"community"},{"name":"side sheet help","source":"community"}],"tags":[],"relations":{"contrastWith":["drawer"],"variantOf":[],"partOf":[],"seeAlso":["consistent-help"]},"implementations":[],"sources":[{"title":"Help panel, Cloudscape Design System","url":"https://cloudscape.design/components/help-panel/"},{"title":"Cloudscape: patterns","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"help opens beside the form instead of on top of it"},{"name":"Helper text","slug":"helper-text","category":"component","status":"published","definition":"The short line under a field that explains the format or constraint before anything goes wrong.","aliases":[{"name":"hint text","source":"govuk"},{"name":"field description"},{"name":"assistive text","source":"material"},{"name":"supporting text","source":"material"}],"tags":["forms"],"relations":{"contrastWith":["error-message","accessible-description","placeholder-as-label","required-field-indicator","character-counter"],"variantOf":[],"partOf":["text-field"],"seeAlso":["password-reveal-toggle"]},"implementations":[{"system":"base-ui","name":"Field.Description","url":"https://base-ui.com/react/components/field"}],"sources":[{"title":"GOV.UK Design System: components","url":"https://design-system.service.gov.uk/components/"}],"demo":"inline","useWhen":"guidance under a field, not an error"},{"name":"Hero","slug":"hero","category":"layout","status":"published","definition":"The large opening block of a page carrying a headline, a supporting line, imagery, and the main call to action.","aliases":[{"name":"hero section","source":"tailwind"},{"name":"hero banner","source":"community"},{"name":"hero image","source":"community"},{"name":"jumbotron","source":"bootstrap"},{"name":"splash","source":"community"},{"name":"billboard","source":"community"}],"tags":[],"relations":{"contrastWith":["full-bleed","banner","page-header","cover"],"variantOf":[],"partOf":[],"seeAlso":["split-screen-layout","the-fold"]},"implementations":[],"sources":[{"title":"Hero Sections, Tailwind UI","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/heroes"}],"demo":"inline","useWhen":"the big opening block that sets the pitch"},{"name":"Hex color","slug":"hex-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"hex code","source":"community"},{"name":"hex value","source":"community"},{"name":"#RRGGBB"},{"name":"8-digit hex","source":"community"}],"tags":[],"relations":{"contrastWith":["named-color","srgb","oklch"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"}],"demo":"inline","useWhen":"the notation a colour is handed over in"},{"name":"Hidden but focusable","slug":"hidden-but-focusable","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-hidden-focus","source":"deque"},{"name":"focusable inside aria-hidden","source":"community"},{"name":"ghost tab stop","source":"community"},{"name":"silent focus","source":"community"}],"tags":[],"relations":{"contrastWith":["visually-hidden","inert","skip-link","aria-hidden"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"W3C ACT: Element with aria-hidden has no content in sequential focus navigation","url":"https://www.w3.org/WAI/standards-guidelines/act/rules/6cfa84/"},{"title":"Deque: aria-hidden elements do not contain focusable elements","url":"https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus"}],"demo":"inline","useWhen":"focus disappears into an offscreen or hidden panel"},{"name":"Hit slop","slug":"hit-slop","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"hitSlop","source":"community"},{"name":"touch target padding","source":"community"},{"name":"invisible hit area","source":"community"},{"name":"extended tap area","source":"community"},{"name":"touch target expansion","source":"merged-candidate"},{"name":"tap area padding","source":"merged-candidate"},{"name":"extended touch target","source":"merged-candidate"}],"tags":["a11y","touch"],"relations":{"contrastWith":["target-spacing","drag-threshold","hit-testing","touch-target"],"variantOf":[],"partOf":[],"seeAlso":["focus-delegation","dead-zone"]},"implementations":[],"sources":[{"title":"Smashing Magazine: accessible tap target sizes","url":"https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/"}],"demo":"inline","useWhen":"the tappable area is bigger than the visible control"},{"name":"Hit testing","slug":"hit-testing","category":"interaction","status":"published","definition":"Working out which element sits under a pointer, which decides who receives the event when shapes overlap or transparent areas are in the way.","aliases":[{"name":"hit test","source":"mdn"},{"name":"hit detection","source":"community"},{"name":"pick","source":"community"}],"tags":[],"relations":{"contrastWith":["hit-slop","pointer-capture"],"variantOf":[],"partOf":[],"seeAlso":["nested-interactive"]},"implementations":[],"sources":[{"title":"MDN: Pointer events","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"}],"demo":"inline","useWhen":"asking which element a click actually lands on"},{"name":"Hold to confirm","slug":"hold-to-confirm","category":"interaction","status":"published","definition":"Requiring a press to be held for a moment before a destructive action commits, with progress shown so the wait is understood as deliberate.","aliases":[{"name":"press and hold to confirm","source":"community"},{"name":"hold to delete","source":"community"},{"name":"long press to confirm","source":"community"}],"tags":[],"relations":{"contrastWith":["long-press","type-to-confirm"],"variantOf":[],"partOf":[],"seeAlso":["confirmation-dialog"]},"implementations":[],"sources":[{"title":"Material Design: Gestures (long press)","url":"https://m1.material.io/patterns/gestures.html"}],"demo":"inline","useWhen":"a dangerous action guarded by a held press"},{"name":"Holographic foil","slug":"holographic-foil","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"iridescent"},{"name":"iridescence"},{"name":"holo gradient"},{"name":"pearlescent"},{"name":"oil slick","source":"community"}],"tags":[],"relations":{"contrastWith":["gradient-border"],"variantOf":[],"partOf":[],"seeAlso":["color-interpolation"]},"implementations":[],"sources":[{"title":"Envato Tuts+: 100+ best holographic and iridescent textures","url":"https://design.tutsplus.com/articles/100-best-holographic-iridescent-textures-foil-backgrounds-and-effects--cms-40042"},{"title":"Effect Labs: CSS holographic effect, iridescent and chrome","url":"https://effect-labs.com/en/pages/blog/effet-holographique-css.html"}],"demo":"inline","useWhen":"a surface whose colour shifts as if it were foil"},{"name":"Holy grail layout","slug":"holy-grail-layout","category":"layout","status":"published","definition":"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.","aliases":[{"name":"holy grail","source":"community"},{"name":"three column layout","source":"community"},{"name":"fixed fluid fixed","source":"community"}],"tags":[],"relations":{"contrastWith":["split-view","pancake-stack","multi-column-layout"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Holy grail (web design)","url":"https://en.wikipedia.org/wiki/Holy_grail_(web_design)"}],"demo":"inline","useWhen":"the classic fixed, fluid, fixed three column page"},{"name":"Home indicator","slug":"home-indicator","category":"layout","status":"published","definition":"The thin bar at the bottom of a gesture driven phone screen, reserved space that app content must not sit beneath.","aliases":[{"name":"home bar","source":"community"},{"name":"gesture bar","source":"android"}],"tags":["platform-registers","touch"],"relations":{"contrastWith":["edge-swipe","safe-area"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Layout, Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/layout"}],"demo":"inline","useWhen":"the reserved strip at the bottom of a modern phone"},{"name":"Honeypot field","slug":"honeypot-field","category":"pattern","status":"published","definition":"A form field hidden from people but visible to automated form fillers, used to reject submissions that fill it in without challenging anyone.","aliases":[{"name":"honeypot","source":"community"},{"name":"bot trap field","source":"community"},{"name":"spam trap input","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["captcha"],"variantOf":[],"partOf":[],"seeAlso":["visually-hidden"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the invisible field that only a bot would fill in"},{"name":"Hover","slug":"hover","category":"interaction","status":"published","definition":"A pointer resting over an element without pressing, a state that exists for mice and pens but has no true equivalent on touch.","aliases":[{"name":"mouseover","source":"community"},{"name":"rollover","source":"community"},{"name":"hovered state","source":"material"}],"tags":[],"relations":{"contrastWith":["hover-intent","focus-follows-mouse","sticky-hover"],"variantOf":[],"partOf":[],"seeAlso":["hover-lift","focus-visible"]},"implementations":[{"system":"material","name":"Hovered state","url":"https://m3.material.io/foundations/interaction/states/overview"}],"sources":[{"title":"Material Design 3: States","url":"https://m3.material.io/foundations/interaction/states/overview"},{"title":"MDN: Pointer events","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"}],"demo":"inline","useWhen":"the pointer is over something but has not committed"},{"name":"Hover card","slug":"hover-card","category":"component","status":"published","definition":"A rich preview panel that appears on hover over a link or an avatar, summarising what is behind it.","aliases":[{"name":"hovercard"},{"name":"rich preview"},{"name":"profile preview"}],"tags":[],"relations":{"contrastWith":["tooltip","quick-view","popover"],"variantOf":[],"partOf":[],"seeAlso":["hoverable-dismissible-persistent","hover-intent"]},"implementations":[{"system":"radix","name":"Hover Card","url":"https://www.radix-ui.com/primitives/docs/components/hover-card"},{"system":"base-ui","name":"Preview Card","url":"https://base-ui.com/react/components/preview-card"}],"sources":[{"title":"Hover Card, Radix Primitives","url":"https://www.radix-ui.com/primitives/docs/components/hover-card"},{"title":"Preview Card, Base UI","url":"https://base-ui.com/react/components/preview-card"}],"demo":"inline","useWhen":"a rich preview that opens on hover, not on click"},{"name":"Hover intent","slug":"hover-intent","category":"interaction","status":"published","definition":"Waiting out a short delay or watching cursor direction before acting on a hover, so a pointer merely passing through does not open anything.","aliases":[{"name":"hover delay"},{"name":"intent detection"},{"name":"safe triangle"},{"name":"diagonal problem"}],"tags":[],"relations":{"contrastWith":["hover","dwell-activation"],"variantOf":[],"partOf":[],"seeAlso":["tooltip","hoverable-dismissible-persistent","hover-card"]},"implementations":[],"sources":[{"title":"Baymard: Provide a hover delay of 300 to 500 ms","url":"https://baymard.com/blog/dropdown-menu-flickering-issue"},{"title":"NN/g: Timing guidelines for exposing hidden content","url":"https://www.nngroup.com/articles/timing-exposing-content/"},{"title":"CSS-Tricks: Dropdown menus with more forgiving mouse movement paths","url":"https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/"}],"demo":"inline","useWhen":"telling a deliberate hover from one passing through"},{"name":"Hover lift","slug":"hover-lift","category":"motion","status":"published","definition":"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.","aliases":[{"name":"lift on hover"},{"name":"card lift"},{"name":"raise on hover"},{"name":"elevation on hover"}],"tags":[],"relations":{"contrastWith":["state-layer","magnetic-button"],"variantOf":[],"partOf":[],"seeAlso":["hover","microinteraction","dock-magnification","tilt-effect"]},"implementations":[],"sources":[{"title":"Subframe: CSS card hover effect examples","url":"https://www.subframe.com/tips/css-card-hover-effect-examples"},{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"}],"demo":"inline","useWhen":"a whole surface should answer the pointer, not just its border"},{"name":"Hoverable, dismissible, persistent","slug":"hoverable-dismissible-persistent","category":"accessibility","status":"published","definition":"The three conditions content revealed on hover or focus must meet: reachable with the pointer, dismissible without moving focus, and not self-closing.","aliases":[{"name":"content on hover or focus","source":"wcag"},{"name":"dismissible tooltip","source":"community"},{"name":"hover bridge","source":"community"}],"tags":[],"relations":{"contrastWith":["tooltip","toggletip"],"variantOf":[],"partOf":[],"seeAlso":["hover-intent","hover-card"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Content on Hover or Focus","url":"https://www.w3.org/TR/WCAG22/#content-on-hover-or-focus"},{"title":"W3C SCR39: making content on hover or focus hoverable, dismissible, and persistent","url":"https://www.w3.org/WAI/WCAG22/Techniques/client-side-script/SCR39.html"}],"demo":"inline","useWhen":"judging whether a tooltip or flyout behaves"},{"name":"Hub and spoke","slug":"hub-and-spoke","category":"pattern","status":"published","definition":"A navigation shape where every task is reached from one home screen and returns to it, with no way to move sideways between tasks.","aliases":[{"name":"hub-and-spoke navigation","source":"community"},{"name":"springboard","source":"community"},{"name":"launchpad navigation","source":"community"},{"name":"home link","source":"ui-patterns"}],"tags":["navigation"],"relations":{"contrastWith":["global-navigation","drill-down-navigation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"every section is reached from home and returns there"},{"name":"HUD panel","slug":"hud-panel","category":"component","status":"published","definition":"A small dark translucent floating window of controls that hovers over content without taking it over, common in media and creative tools.","aliases":[{"name":"floating window","source":"mantine"},{"name":"heads up display","source":"community"},{"name":"tool palette","source":"community"},{"name":"inspector palette","source":"community"}],"tags":[],"relations":{"contrastWith":["fictional-user-interface","inspector","ornament"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"NameThatUI: element index","url":"https://namethatui.com/"}],"demo":"inline","useWhen":"a small dark floating palette over content"},{"name":"Hue","slug":"hue","category":"color","status":"published","definition":"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.","aliases":[{"name":"colour angle","source":"community"},{"name":"color angle","source":"community"},{"name":"H in HSL"}],"tags":[],"relations":{"contrastWith":["saturation","lightness"],"variantOf":[],"partOf":[],"seeAlso":["complementary-colors","color-temperature","color-wheel"]},"implementations":[{"system":"material","name":"Hue (the H in HCT)","url":"https://m3.material.io/styles/color/system/how-the-system-works"}],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"}],"demo":"inline","useWhen":"naming the colour itself, apart from its lightness or intensity"},{"name":"Hue shift","slug":"hue-shift","category":"color","status":"published","definition":"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.","aliases":[{"name":"hue torsion","source":"community"},{"name":"hue rotation","source":"community"},{"name":"hue cycling","source":"community"},{"name":"warm light cool shadow","source":"community"}],"tags":[],"relations":{"contrastWith":["color-interpolation","color-temperature"],"variantOf":[],"partOf":[],"seeAlso":["color-ramp"]},"implementations":[],"sources":[{"title":"Rampensau: palette generation with hue cycling","url":"https://github.com/meodai/rampensau"}],"demo":"inline","useWhen":"steering hue across a ramp instead of holding it fixed"},{"name":"Hyperreal 3D","slug":"hyperreal-3d","category":"aesthetic","status":"published","definition":"Rendered objects pushed past photographic realism, with physically based materials, sharp specular detail, and studio lighting, floated over an otherwise plain interface.","aliases":[{"name":"3D hyperrealism","source":"uistyleguide"},{"name":"hyperrealistic render"},{"name":"photorealistic 3D"},{"name":"CGI hero"}],"tags":[],"relations":{"contrastWith":["isometric-illustration","low-poly"],"variantOf":[],"partOf":[],"seeAlso":["spatial-ui"]},"implementations":[],"sources":[{"title":"wings.design: 3D and depth in UI, function versus aesthetic","url":"https://wings.design/insights/3d-depth-in-ui-when-it-works-and-when-its-just-aesthetic"}],"demo":"inline","useWhen":"a rendered hero object that outdoes a photograph"},{"name":"Hyphenation","slug":"hyphenation","category":"typography","status":"published","definition":"Breaking a word across two lines at a syllable boundary so lines fill more evenly, marked with a hyphen at the break.","aliases":[{"name":"auto-hyphenation"},{"name":"word breaking"},{"name":"hyphens","source":"css"}],"tags":[],"relations":{"contrastWith":["hyphenation-ladder","justified-text","soft-hyphen","word-break"],"variantOf":[],"partOf":[],"seeAlso":["text-columns"]},"implementations":[],"sources":[{"title":"hyphens (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens"},{"title":"Hyphenation (Practical Typography)","url":"https://practicaltypography.com/hyphenation.html"}],"demo":"inline","useWhen":"keeping narrow columns from tearing open"},{"name":"Hyphenation ladder","slug":"hyphenation-ladder","category":"typography","status":"published","definition":"Three or more consecutive lines ending in a hyphen, which builds a visible staircase down the right edge of a column.","aliases":[{"name":"ladder"},{"name":"stacked hyphens"},{"name":"hyphen stack"}],"tags":[],"relations":{"contrastWith":["rag","river","hyphenation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Practical Typography, on hyphenation","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"naming a stack of hyphens down a column edge"},{"name":"Icon","slug":"icon","category":"component","status":"published","definition":"A small graphic symbol standing for an action, object or idea, read at a glance and rarely safe to ship without a label.","aliases":[{"name":"symbol","source":"community"},{"name":"pictogram","source":"community"}],"tags":[],"relations":{"contrastWith":["symbol-support","icon-font"],"variantOf":[],"partOf":[],"seeAlso":["icon-button"]},"implementations":[],"sources":[{"title":"The Component Gallery: Icon","url":"https://component.gallery/components/icon/"}],"demo":"inline","useWhen":"a symbol has to carry meaning in very little space"},{"name":"Icon button","slug":"icon-button","category":"component","status":"published","definition":"A button whose whole label is an icon, so it needs an accessible name and usually a tooltip to say what it does.","aliases":[{"name":"action icon","source":"mantine"},{"name":"glyph button","source":"community"},{"name":"square button","source":"community"}],"tags":[],"relations":{"contrastWith":["floating-action-button","close-button"],"variantOf":["button"],"partOf":[],"seeAlso":["copy-button","touch-target-size","icon"]},"implementations":[{"system":"material","name":"Icon button","url":"https://m3.material.io/components/icon-buttons/overview"},{"system":"radix","name":"IconButton","url":"https://www.radix-ui.com/themes/docs/components/icon-button"},{"system":"carbon","name":"Icon-only button","url":"https://carbondesignsystem.com/components/button/usage/"},{"system":"polaris","name":"Button (icon-only)","url":"https://shopify.dev/docs/api/app-home/polaris-web-components/actions/button"},{"system":"shadcn","name":"Button (size=\"icon\")","url":"https://ui.shadcn.com/docs/components/button"}],"sources":[{"title":"ARIA Authoring Practices Guide: Button pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/button/"},{"title":"Carbon Design System: Button accessibility","url":"https://carbondesignsystem.com/components/button/accessibility/"}],"demo":"inline","useWhen":"a square control carrying only a glyph"},{"name":"Icon font","slug":"icon-font","category":"typography","status":"published","definition":"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.","aliases":[{"name":"font icons"},{"name":"glyph icons"},{"name":"ligature icons"},{"name":"Material Symbols","source":"material"},{"name":"Font Awesome","source":"community"}],"tags":[],"relations":{"contrastWith":["images-of-text","color-font","ligature","icon"],"variantOf":[],"partOf":[],"seeAlso":["font-subsetting"]},"implementations":[],"sources":[{"title":"SVG, Icon Fonts, and Accessibility (24 Accessibility)","url":"https://www.24a11y.com/2017/svg-icon-fonts-accessibility-case-study/"}],"demo":"inline","useWhen":"icons delivered as type instead of as images"},{"name":"Icon morph","slug":"icon-morph","category":"motion","status":"published","definition":"An icon that animates between two meanings rather than cutting, such as a hamburger whose bars rotate into a close cross.","aliases":[{"name":"animated icon","source":"community"},{"name":"hamburger to X","source":"community"},{"name":"play pause morph","source":"community"},{"name":"icon transition","source":"community"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["hamburger-menu","lottie","morph-transition"]},"implementations":[],"sources":[{"title":"School of Motion: The Essential Motion Design Dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"one control carries two states and should show the change"},{"name":"Identicon","slug":"identicon","category":"component","status":"published","definition":"A generated default avatar derived deterministically from an identifier, so the same account always gets the same abstract pattern without uploading anything.","aliases":[{"name":"generative avatar","source":"community"},{"name":"default avatar","source":"community"},{"name":"generated avatar","source":"community"}],"tags":[],"relations":{"contrastWith":["avatar"],"variantOf":[],"partOf":[],"seeAlso":["seed-color"]},"implementations":[],"sources":[{"title":"Wikipedia: Identicon","url":"https://en.wikipedia.org/wiki/Identicon"},{"title":"GitHub blog: Identicons","url":"https://github.blog/news-insights/company-news/identicons/"}],"demo":"inline","useWhen":"an account needs a face before the user provides one"},{"name":"Image","slug":"image","category":"component","status":"published","definition":"An embedded picture, sized and cropped by the layout around it, carrying the alternative text that stands in when it cannot be seen.","aliases":[{"name":"picture","source":"component-gallery"},{"name":"img","source":"community"},{"name":"media","source":"community"}],"tags":["media"],"relations":{"contrastWith":["figure","thumbnail"],"variantOf":[],"partOf":[],"seeAlso":["alt-text","decorative-image"]},"implementations":[],"sources":[{"title":"The Component Gallery: Image","url":"https://component.gallery/components/image/"}],"demo":"inline","useWhen":"a picture is content rather than decoration"},{"name":"Image comparison slider","slug":"image-comparison-slider","category":"component","status":"published","definition":"Two images stacked with a draggable divider that wipes between them, used to show a before and an after in one frame.","aliases":[{"name":"before after slider","source":"community"},{"name":"image comparer","source":"web-awesome"},{"name":"comparison slider","source":"community"},{"name":"wipe slider","source":"community"},{"name":"image compare","source":"community"}],"tags":["media"],"relations":{"contrastWith":["slider"],"variantOf":[],"partOf":[],"seeAlso":["wipe"]},"implementations":[],"sources":[{"title":"img-comparison-slider: a web component for before and after images","url":"https://github.com/sneas/img-comparison-slider"},{"title":"MDN: clip-path","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path"}],"demo":"inline","useWhen":"showing before and after in one frame"},{"name":"Image well","slug":"image-well","category":"component","status":"published","definition":"An editable image view that shows its current picture and accepts a replacement dragged or pasted straight into it.","aliases":[{"name":"image drop target","source":"community"},{"name":"avatar upload","source":"community"}],"tags":[],"relations":{"contrastWith":["file-upload","drop-zone","signature-pad"],"variantOf":[],"partOf":[],"seeAlso":["avatar"]},"implementations":[{"system":"hig","name":"Image wells","url":"https://developer.apple.com/design/human-interface-guidelines/image-wells"}],"sources":[{"title":"Apple Human Interface Guidelines: Image wells","url":"https://developer.apple.com/design/human-interface-guidelines/image-wells"}],"demo":"inline","useWhen":"a picture is both the display and the drop target"},{"name":"Images of text","slug":"images-of-text","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"text in images","source":"community"},{"name":"baked-in text","source":"community"},{"name":"image of text","source":"wcag"}],"tags":[],"relations":{"contrastWith":["alt-text","icon-font"],"variantOf":[],"partOf":[],"seeAlso":["resize-text"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Images of Text","url":"https://www.w3.org/TR/WCAG22/#images-of-text"}],"demo":"inline","useWhen":"arguing a headline should be text, not a picture of text"},{"name":"Imposter","slug":"imposter","category":"layout","status":"published","definition":"A layout primitive that positions one element centred over its container, overlapping whatever is beneath rather than taking a place in the flow.","aliases":[{"name":"the imposter","source":"every-layout"},{"name":"overlay centre","source":"community"},{"name":"absolute centre","source":"community"}],"tags":[],"relations":{"contrastWith":["top-layer","cover"],"variantOf":[],"partOf":[],"seeAlso":["anchor-positioning"]},"implementations":[],"sources":[{"title":"Layouts, Every Layout","url":"https://every-layout.dev/layouts/"}],"demo":"inline","useWhen":"one element floated dead centre over the rest"},{"name":"Inert","slug":"inert","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"inert attribute","source":"html"},{"name":"background inert"},{"name":"aria-modal","source":"aria"},{"name":"inert polyfill"},{"name":"focus guard","source":"radix"}],"tags":["web-platform"],"relations":{"contrastWith":["aria-hidden","scroll-lock","focus-trap","hidden-but-focusable","keyboard-trap"],"variantOf":[],"partOf":[],"seeAlso":["modal-dialog"]},"implementations":[],"sources":[{"title":"MDN: aria-modal","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-modal"}],"demo":"inline","useWhen":"making a whole region unreachable, not just invisible"},{"name":"Infinite canvas","slug":"infinite-canvas","category":"layout","status":"published","definition":"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.","aliases":[{"name":"unbounded canvas","source":"community"},{"name":"whiteboard canvas","source":"community"},{"name":"spatial canvas","source":"community"}],"tags":[],"relations":{"contrastWith":["viewport"],"variantOf":[],"partOf":[],"seeAlso":["dot-grid-background","pan","semantic-zoom"]},"implementations":[],"sources":[{"title":"tldraw: Infinite Canvas SDK","url":"https://tldraw.dev/"}],"demo":"inline","useWhen":"a board with no page, only a viewport over it"},{"name":"Infinite scroll","slug":"infinite-scroll","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"endless scroll","source":"community"},{"name":"continuous scrolling","source":"ui-patterns"},{"name":"infinite scrolling","source":"nngroup"},{"name":"auto-load","source":"community"},{"name":"infinite list","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["load-more","pagination"],"variantOf":[],"partOf":[],"seeAlso":["feed-layout","list-virtualization","false-bottom"]},"implementations":[],"sources":[{"title":"NN/g: infinite scrolling, when to use it and when to avoid it","url":"https://www.nngroup.com/articles/infinite-scrolling-tips/"},{"title":"UI Patterns: continuous scrolling","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"the feed loads more by itself as you near the bottom"},{"name":"Initial focus","slug":"initial-focus","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"autofocus","source":"whatwg-html"},{"name":"default focus","source":"community"},{"name":"focus on open","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["focus-delegation","focus-management"],"variantOf":[],"partOf":[],"seeAlso":["modal-dialog","focus-trap"]},"implementations":[],"sources":[{"title":"Primer: Focus management","url":"https://primer.style/accessibility/design-guidance/focus-management/"}],"demo":"inline","useWhen":"a dialog opens and nobody decided where focus goes"},{"name":"Ink trap","slug":"ink-trap","category":"typography","status":"published","definition":"A notch cut out of a letter's inside corners so spreading ink or blurring pixels do not fill the joint solid.","aliases":[{"name":"ink traps"}],"tags":[],"relations":{"contrastWith":["optical-size","counter"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Ink trap (Typography.Guru)","url":"https://typography.guru/term/ink-trap-r64/"},{"title":"Ink trap (Wikipedia)","url":"https://en.wikipedia.org/wiki/Ink_trap"}],"demo":"inline","useWhen":"naming the cut-out notches in a display typeface"},{"name":"Inline autocomplete","slug":"inline-autocomplete","category":"pattern","status":"published","definition":"Completing the reader's text inside the field itself, with the guessed remainder selected so the next keystroke replaces it.","aliases":[{"name":"autocomplete inline","source":"aria-apg"},{"name":"inline completion","source":"community"},{"name":"ghost text","source":"community"},{"name":"type-ahead completion","source":"community"},{"name":"URL bar autofill","source":"community"}],"tags":["ai","search"],"relations":{"contrastWith":["input-purpose","combobox","mention-autocomplete","typeahead"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Editable Combobox With Both List and Inline Autocomplete","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-both/"}],"sources":[{"title":"ARIA APG: Combobox pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/"}],"demo":"inline","useWhen":"the field finishes your word inside the field"},{"name":"Inline edit","slug":"inline-edit","category":"component","status":"published","definition":"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.","aliases":[{"name":"editable","source":"chakra"},{"name":"click to edit","source":"community"},{"name":"edit in place","source":"community"},{"name":"inline editing","source":"community"}],"tags":[],"relations":{"contrastWith":["direct-manipulation"],"variantOf":[],"partOf":[],"seeAlso":["autosave","rich-text-editor","data-grid"]},"implementations":[],"sources":[{"title":"Chakra UI components overview","url":"https://chakra-ui.com/docs/components/concepts/overview"}],"demo":"inline","useWhen":"editing a value where it is displayed"},{"name":"Inline validation","slug":"inline-validation","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"live validation"},{"name":"real-time validation"},{"name":"as-you-type validation"},{"name":"input feedback","source":"ui-patterns"}],"tags":["forms"],"relations":{"contrastWith":["error-message","error-identification","invalid-state","error-summary"],"variantOf":[],"partOf":[],"seeAlso":["shake-animation","password-strength-meter"]},"implementations":[{"system":"carbon","name":"Form validation","url":"https://carbondesignsystem.com/patterns/forms-pattern/"},{"system":"base-ui","name":"Field","url":"https://base-ui.com/react/components/field"}],"sources":[{"title":"A List Apart: Inline Validation in Web Forms","url":"https://alistapart.com/article/inline-validation-in-web-forms/"},{"title":"Nielsen Norman Group: 10 Design Guidelines for Reporting Errors in Forms","url":"https://www.nngroup.com/articles/errors-forms-design-guidelines/"}],"demo":"inline","useWhen":"a field tells you it is wrong before you submit"},{"name":"Input group","slug":"input-group","category":"component","status":"published","definition":"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.","aliases":[{"name":"input addon"},{"name":"field addon"},{"name":"prefix and suffix"},{"name":"input group text","source":"bootstrap"}],"tags":["forms"],"relations":{"contrastWith":["text-field","fieldset"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Bootstrap 5.3: Input group","url":"https://getbootstrap.com/docs/5.3/forms/input-group/"}],"demo":"inline","useWhen":"a unit, prefix or action belongs inside the field"},{"name":"Input mask","slug":"input-mask","category":"component","status":"published","definition":"A field that imposes a fixed shape as you type, inserting the slashes, spaces or brackets a phone number or card number needs.","aliases":[{"name":"masked input","source":"mantine"},{"name":"format mask","source":"community"},{"name":"pattern input","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["forgiving-format","structured-format","placeholder-as-label"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Mantine components","url":"https://mantine.dev/core/package/"}],"demo":"inline","useWhen":"the field types its own punctuation for you"},{"name":"Input purpose","slug":"input-purpose","category":"accessibility","status":"published","definition":"Machine readable autocomplete tokens on personal fields, which let browsers autofill and let personalisation tools add familiar icons or wording.","aliases":[{"name":"autocomplete attribute","source":"html"},{"name":"autofill token","source":"community"},{"name":"identify input purpose","source":"wcag"}],"tags":["forms"],"relations":{"contrastWith":["address-autocomplete","inline-autocomplete","redundant-entry","virtual-keyboard"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Identify Input Purpose","url":"https://www.w3.org/TR/WCAG22/#identify-input-purpose"}],"demo":"inline","useWhen":"telling the browser what a field is actually for"},{"name":"Inspector","slug":"inspector","category":"layout","status":"published","definition":"A pane, usually on the trailing edge, that shows and edits the properties of whatever is currently selected.","aliases":[{"name":"properties panel","source":"community"},{"name":"inspector pane","source":"hig"},{"name":"attributes panel","source":"community"},{"name":"right rail","source":"community"},{"name":"design panel","source":"figma"}],"tags":[],"relations":{"contrastWith":["description-list","supporting-pane","hud-panel"],"variantOf":[],"partOf":[],"seeAlso":["pane"]},"implementations":[],"sources":[{"title":"Split views, Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/split-views"}],"demo":"inline","useWhen":"a panel whose contents follow the selection"},{"name":"Interaction color step","slug":"interaction-color-step","category":"color","status":"published","definition":"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.","aliases":[{"name":"interactive token","source":"carbon"},{"name":"hover token","source":"community"},{"name":"half step","source":"carbon"},{"name":"hovered UI element background","source":"radix"}],"tags":["tokens"],"relations":{"contrastWith":["color-ramp","state-layer"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"radix","name":"Steps 4 and 5, hover and active","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"sources":[{"title":"Radix Colors: understanding the scale","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"},{"title":"Carbon: color","url":"https://carbondesignsystem.com/elements/color/overview/"}],"demo":"inline","useWhen":"hover and pressed derived from a scale, not picked"},{"name":"Interactive transition","slug":"interactive-transition","category":"motion","status":"published","definition":"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.","aliases":[{"name":"gesture-driven transition","source":"community"},{"name":"interactive dismiss","source":"hig"},{"name":"swipe back","source":"community"},{"name":"drag to dismiss","source":"community"}],"tags":[],"relations":{"contrastWith":["interruptible-animation","predictive-back"],"variantOf":[],"partOf":[],"seeAlso":["swipe-to-dismiss"]},"implementations":[{"system":"hig","name":"Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"sources":[{"title":"Apple HIG: Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"demo":"inline","useWhen":"a gesture should own the transition until it is released"},{"name":"Interface metaphor","slug":"interface-metaphor","category":"pattern","status":"published","definition":"Explaining a system by dressing it as something the user already knows: the desktop, the trash can, the folder, the shopping cart.","aliases":[{"name":"desktop metaphor"},{"name":"UI metaphor"},{"name":"conceptual metaphor"}],"tags":[],"relations":{"contrastWith":["skeuomorphism","diegetic-interface"],"variantOf":[],"partOf":[],"seeAlso":["affordance"]},"implementations":[],"sources":[{"title":"Nielsen Norman Group: Metaphors in UX","url":"https://www.nngroup.com/articles/classifying-ux-metaphors/"},{"title":"Wikipedia: Interface metaphor","url":"https://en.wikipedia.org/wiki/Interface_metaphor"}],"demo":"inline","useWhen":"a familiar concept is carrying the explanation of an unfamiliar system"},{"name":"Interpolation","slug":"interpolation","category":"motion","status":"published","definition":"The rule that produces the intermediate values between two endpoints, which is why some properties can animate smoothly and others can only switch.","aliases":[{"name":"interpolatable","source":"css"},{"name":"discrete interpolation","source":"css"},{"name":"value blending","source":"community"}],"tags":[],"relations":{"contrastWith":["fill-mode","keyframe"],"variantOf":[],"partOf":[],"seeAlso":["height-animation"]},"implementations":[],"sources":[{"title":"MDN: CSS animated properties","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties"}],"demo":"inline","useWhen":"explaining why a property will or will not animate"},{"name":"Interruptible animation","slug":"interruptible-animation","category":"motion","status":"published","definition":"Motion that can be caught, reversed, or redirected mid-flight from its current value, instead of finishing before it will accept a new input.","aliases":[{"name":"interruptible transition","source":"hig"},{"name":"reversible animation","source":"community"},{"name":"catchable animation","source":"community"},{"name":"velocity handoff","source":"community"},{"name":"velocity","source":"community"}],"tags":[],"relations":{"contrastWith":["spring-animation","additive-animation","interactive-transition"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"sources":[{"title":"Apple HIG: Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"demo":"inline","useWhen":"a reader may act again before the motion finishes"},{"name":"Interstitial","slug":"interstitial","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"interruption page","source":"govuk"},{"name":"interstitial ad","source":"community"},{"name":"splash interstitial","source":"community"},{"name":"in-between screen","source":"community"}],"tags":[],"relations":{"contrastWith":["welcome-mat","smart-app-banner"],"variantOf":[],"partOf":[],"seeAlso":["modal-dialog"]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Interruption pages","url":"https://design-system.service.gov.uk/patterns/interruption-pages/"}],"demo":"inline","useWhen":"a whole screen sits between you and where you were going"},{"name":"Intrinsic web design","slug":"intrinsic-web-design","category":"layout","status":"published","definition":"Building layouts from what the content needs, using grid, flexbox and intrinsic sizing together, instead of imposing a fixed column skeleton.","aliases":[{"name":"intrinsic layout","source":"community"},{"name":"content out layout","source":"community"},{"name":"intrinsic sizing","source":"css"}],"tags":[],"relations":{"contrastWith":["fluid-grid","adaptive-layout"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Designing Intrinsic Layouts, Jen Simmons","url":"https://talks.jensimmons.com/15TjNW"}],"demo":"inline","useWhen":"naming the era after responsive web design"},{"name":"Invalid state","slug":"invalid-state","category":"accessibility","status":"published","definition":"The programmatic mark that a field's value failed validation, paired with a pointer to the message that explains it.","aliases":[{"name":"aria-invalid","source":"aria"},{"name":"aria-errormessage","source":"aria"},{"name":"error state","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["required-field-indicator","inline-validation","error-identification"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: aria-invalid","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid"}],"demo":"inline","useWhen":"the field itself must report that it is wrong"},{"name":"Inverse color","slug":"inverse-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"inverseSurface","source":"material"},{"name":"inverted theme","source":"community"},{"name":"reverse color","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["dark-mode","static-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Inverse surface, Inverse on surface, Inverse primary","url":"https://m3.material.io/styles/color/roles"}],"sources":[{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"}],"demo":"inline","useWhen":"an element deliberately styled opposite to the theme"},{"name":"Inverted colors","slug":"inverted-colors","category":"accessibility","status":"published","definition":"A whole-screen colour inversion applied by the OS, which flips a design nobody tested upside down and turns every shadow into a highlight.","aliases":[{"name":"Smart Invert","source":"hig"},{"name":"Classic Invert","source":"hig"},{"name":"colour inversion","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["dark-mode","prefers-contrast","forced-colors-mode"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: inverted-colors","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/inverted-colors"}],"demo":"inline","useWhen":"the OS inverts your palette and shadows go wrong"},{"name":"Isometric illustration","slug":"isometric-illustration","category":"aesthetic","status":"published","definition":"Art drawn on a fixed axonometric grid so depth reads without perspective, with parallel edges and no vanishing point.","aliases":[{"name":"isometric art"},{"name":"2.5D illustration","source":"community"},{"name":"axonometric"},{"name":"isometric UI"}],"tags":[],"relations":{"contrastWith":["low-poly","hyperreal-3d"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: isometric projection","url":"https://en.wikipedia.org/wiki/Isometric_projection"}],"demo":"inline","useWhen":"depth without perspective, on a fixed 30 degree grid"},{"name":"Italic","slug":"italic","category":"typography","status":"published","definition":"A companion style with letterforms redrawn on a cursive model, not merely slanted, used for emphasis and titles.","aliases":[{"name":"cursive"},{"name":"font-style: italic","source":"css"},{"name":"ital axis","source":"opentype"}],"tags":[],"relations":{"contrastWith":["oblique"],"variantOf":[],"partOf":[],"seeAlso":["underline"]},"implementations":[],"sources":[{"title":"Bold or italic (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"emphasis inside running text"},{"name":"Jank","slug":"jank","category":"motion","status":"published","definition":"Visible stutter in motion caused by frames arriving late or not at all, so an animation that should be continuous reads as juddering.","aliases":[{"name":"dropped frames","source":"community"},{"name":"jitter","source":"community"},{"name":"stutter","source":"community"},{"name":"judder","source":"community"},{"name":"frame drop","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["layout-thrashing","compositor-animation","frame-rate"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: animation performance and frame rate","url":"https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Animation_performance_and_frame_rate"},{"title":"web.dev: jank busting for better rendering performance","url":"https://web.dev/articles/speed-rendering"}],"demo":"inline","useWhen":"naming why smooth-looking motion feels wrong"},{"name":"Jiggle mode","slug":"jiggle-mode","category":"motion","status":"published","definition":"An editing state announced by making every rearrangeable item wobble in place, so the whole screen says it can be reordered.","aliases":[{"name":"wiggle mode","source":"community"},{"name":"wobble mode","source":"community"},{"name":"icon jiggle","source":"community"},{"name":"edit mode wiggle","source":"community"}],"tags":[],"relations":{"contrastWith":["shake-animation","marching-ants"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"How-To Geek: what is jiggle mode on iPhone","url":"https://www.howtogeek.com/692818/what-is-jiggle-mode-on-iphone-and-other-apple-devices/"}],"demo":"inline","useWhen":"an editing mode should be announced by motion alone"},{"name":"Justified gallery","slug":"justified-gallery","category":"layout","status":"published","definition":"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.","aliases":[{"name":"justified layout","source":"flickr"},{"name":"mosaic layout","source":"community"},{"name":"justified image grid","source":"community"},{"name":"Flickr style gallery","source":"community"}],"tags":[],"relations":{"contrastWith":["card-grid","grid-lanes","masonry"],"variantOf":[],"partOf":[],"seeAlso":["object-fit","deconstructed-pancake"]},"implementations":[],"sources":[{"title":"Justified Layout by Flickr","url":"https://flickr.github.io/justified-layout/"}],"demo":"inline","useWhen":"photos of mixed shapes in tidy flush rows"},{"name":"Justified text","slug":"justified-text","category":"typography","status":"published","definition":"Text set so both edges of the column are flush, achieved by stretching or squeezing the spaces between words on each line.","aliases":[{"name":"justification"},{"name":"full justification"},{"name":"flush left and right"},{"name":"text-align: justify","source":"css"}],"tags":["editorial"],"relations":{"contrastWith":["hyphenation","rag"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Justified text (Practical Typography)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"you want both edges of a column flush"},{"name":"Kanban board","slug":"kanban-board","category":"layout","status":"published","definition":"A row of vertical columns, each one a stage, holding cards that move sideways as work progresses.","aliases":[{"name":"board layout","source":"community"},{"name":"column board","source":"community"},{"name":"swimlane board","source":"community"},{"name":"trello layout","source":"community"}],"tags":[],"relations":{"contrastWith":["card-grid","content-shelf"],"variantOf":[],"partOf":[],"seeAlso":["drag-to-reorder"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"items that belong to exactly one stage at a time"},{"name":"Kawaii UI","slug":"kawaii-ui","category":"aesthetic","status":"published","definition":"A cute style of pastel fills, rounded everything, oversized eyes and blush marks, sticker and mascot characters, and hand-lettered or bubbly rounded type.","aliases":[{"name":"kawaii"},{"name":"cute UI"},{"name":"mascot UI"},{"name":"pastel cute style"}],"tags":[],"relations":{"contrastWith":["corporate-memphis"],"variantOf":[],"partOf":[],"seeAlso":["claymorphism"]},"implementations":[],"sources":[{"title":"Kittl: 60+ graphic design styles, names and descriptions","url":"https://www.kittl.com/blogs/design-styles-name-stl/"}],"demo":"inline","useWhen":"cuteness carried by mascots, pastels, and round shapes"},{"name":"Keyboard key","slug":"kbd","category":"component","status":"published","definition":"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.","aliases":[{"name":"keycap"},{"name":"key hint"},{"name":"keybinding hint","source":"primer"},{"name":"shortcut chip"}],"tags":["keyboard"],"relations":{"contrastWith":["keyboard-shortcut"],"variantOf":[],"partOf":[],"seeAlso":["keyboard-shortcuts-dialog"]},"implementations":[{"system":"shadcn","name":"Kbd","url":"https://ui.shadcn.com/docs/components"}],"sources":[{"title":"shadcn/ui: components","url":"https://ui.shadcn.com/docs/components"}],"demo":"inline","useWhen":"printing a key the reader should press"},{"name":"Kebab menu","slug":"kebab-menu","category":"component","status":"published","definition":"A menu of secondary actions opened from a trigger of three vertically stacked dots, usually at the end of a row, card, or toolbar.","aliases":[{"name":"three-dot menu"},{"name":"vertical ellipsis"}],"tags":[],"relations":{"contrastWith":["meatball-menu","hamburger-menu","context-menu"],"variantOf":["overflow-menu"],"partOf":[],"seeAlso":["popover","menu-button"]},"implementations":[{"system":"material","name":"Menus","url":"https://m3.material.io/components/menus/overview"},{"system":"radix","name":"Dropdown Menu","url":"https://www.radix-ui.com/primitives/docs/components/dropdown-menu"}],"sources":[],"demo":"inline","useWhen":"extra actions behind three stacked dots"},{"name":"Ken Burns effect","slug":"ken-burns-effect","category":"motion","status":"published","definition":"A slow pan and zoom across a still image that gives it motion, named after the documentary filmmaker who made the technique famous.","aliases":[{"name":"pan and zoom","source":"community"},{"name":"slow zoom","source":"community"},{"name":"hero image zoom","source":"community"}],"tags":["media"],"relations":{"contrastWith":["dolly-zoom"],"variantOf":[],"partOf":[],"seeAlso":["parallax"]},"implementations":[],"sources":[{"title":"Wikipedia: Ken Burns effect","url":"https://en.wikipedia.org/wiki/Ken_Burns_effect"}],"demo":"inline","useWhen":"a static image needs life without becoming video"},{"name":"Kerning","slug":"kerning","category":"typography","status":"published","definition":"The adjustment of space between two particular letters so the pair reads evenly.","aliases":[{"name":"kern"},{"name":"kern pair"},{"name":"metric kerning"}],"tags":[],"relations":{"contrastWith":["leading","tracking","optical-kerning","word-spacing","ligature"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Kerning (Practical Typography)","url":"https://practicaltypography.com/kerning.html"},{"title":"MDN: font-kerning","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning"}],"demo":"inline","useWhen":"the space between two particular letters"},{"name":"Key repeat","slug":"key-repeat","category":"interaction","status":"published","definition":"A held key firing repeatedly after an initial delay, which is how arrow keys scroll and backspace deletes more than one character.","aliases":[{"name":"auto-repeat","source":"community"},{"name":"typematic","source":"community"},{"name":"repeat rate","source":"community"},{"name":"key repeat delay","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["nudge"],"variantOf":[],"partOf":[],"seeAlso":["keyboard-shortcut"]},"implementations":[],"sources":[{"title":"ARIA APG: Developing a keyboard interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"demo":"inline","useWhen":"holding a key keeps producing the action"},{"name":"Key sequence","slug":"key-sequence","category":"interaction","status":"published","definition":"A shortcut typed as an ordered run of presses, where the first key opens a mode and the next chooses within it.","aliases":[{"name":"leader key","source":"community"},{"name":"sequential shortcut","source":"community"},{"name":"prefix key","source":"community"},{"name":"key chord sequence","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["access-key","chorded-shortcut"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Chorded keyboard","url":"https://en.wikipedia.org/wiki/Chorded_keyboard"}],"demo":"inline","useWhen":"shortcuts typed in order, like a prefix then a letter"},{"name":"Keyboard shortcut","slug":"keyboard-shortcut","category":"interaction","status":"published","definition":"A key or key combination that runs a command directly, giving practised users a path that skips the menus and the pointer entirely.","aliases":[{"name":"hotkey"},{"name":"accelerator"},{"name":"key binding"},{"name":"shortcut key"}],"tags":["keyboard"],"relations":{"contrastWith":["kbd","command-palette","character-key-shortcuts","chorded-shortcut"],"variantOf":[],"partOf":[],"seeAlso":["keyboard-shortcuts-dialog","key-repeat"]},"implementations":[{"system":"aria-apg","name":"Keyboard shortcuts","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"sources":[{"title":"ARIA APG: Developing a keyboard interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"},{"title":"Wikipedia: Keyboard shortcut","url":"https://en.wikipedia.org/wiki/Keyboard_mnemonic"}],"demo":"inline","useWhen":"a command reachable by keys instead of controls"},{"name":"Keyboard shortcuts dialog","slug":"keyboard-shortcuts-dialog","category":"component","status":"published","definition":"The panel opened by pressing question mark that lists every shortcut in the application, grouped by area.","aliases":[{"name":"hotkeys dialog","source":"blueprint"},{"name":"shortcut cheat sheet","source":"community"},{"name":"keyboard help","source":"community"},{"name":"shortcuts overlay","source":"community"},{"name":"keyboard shortcut overlay","source":"merged-candidate"},{"name":"shortcut cheatsheet","source":"merged-candidate"},{"name":"hotkey overlay","source":"merged-candidate"},{"name":"press ? for help","source":"merged-candidate"}],"tags":["keyboard"],"relations":{"contrastWith":["command-palette"],"variantOf":[],"partOf":[],"seeAlso":["kbd","keyboard-shortcut"]},"implementations":[],"sources":[{"title":"Blueprint documentation","url":"https://blueprintjs.com/docs/"}],"demo":"inline","useWhen":"the cheat sheet of every shortcut"},{"name":"Keyboard trap","slug":"keyboard-trap","category":"accessibility","status":"published","definition":"A place keyboard focus can enter but not leave by keyboard alone, stranding anyone who is not using a pointer.","aliases":[{"name":"focus trap (accidental)","source":"community"},{"name":"keyboard dead end","source":"community"},{"name":"no keyboard trap","source":"wcag"}],"tags":["keyboard"],"relations":{"contrastWith":["focus-trap","inert"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"ARIA APG: Developing a keyboard interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"demo":"inline","useWhen":"focus goes in and cannot be tabbed back out"},{"name":"Keyframe","slug":"keyframe","category":"motion","status":"published","definition":"A point in an animation where a value is pinned, with the frames between generated by interpolating from one pinned point to the next.","aliases":[{"name":"keyframes","source":"css"},{"name":"waypoint","source":"community"},{"name":"key pose","source":"animation"}],"tags":[],"relations":{"contrastWith":["tween","interpolation"],"variantOf":[],"partOf":[],"seeAlso":["additive-animation"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"an animation needs waypoints, not just a start and end"},{"name":"Keyline","slug":"keyline","category":"layout","status":"published","definition":"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.","aliases":[{"name":"keylines","source":"material"},{"name":"metrics and keylines","source":"material"},{"name":"alignment line","source":"community"}],"tags":[],"relations":{"contrastWith":["divider","baseline-grid","optical-alignment"],"variantOf":[],"partOf":[],"seeAlso":["zebra-striping","smart-guides"]},"implementations":[{"system":"material","name":"Metrics & keylines","url":"https://m1.material.io/layout/metrics-keylines.html"}],"sources":[{"title":"Metrics and keylines, Material Design","url":"https://m1.material.io/layout/metrics-keylines.html"}],"demo":"inline","useWhen":"the shared line every row's text starts on"},{"name":"Kinetic typography","slug":"kinetic-typography","category":"typography","status":"published","definition":"Type animated over time, where letters and words move, scale, stagger, or morph so the setting carries tone and emphasis a static line cannot.","aliases":[{"name":"motion typography"},{"name":"animated type"},{"name":"text in motion"},{"name":"type animation"}],"tags":[],"relations":{"contrastWith":["typewriter-effect"],"variantOf":[],"partOf":[],"seeAlso":["variable-font"]},"implementations":[],"sources":[{"title":"What is kinetic typography, a guide to text in motion (SVGator)","url":"https://www.svgator.com/blog/kinetic-typography-a-guide-to-text-in-motion/"},{"title":"Kinetic typography, the what, why and how (Linearity)","url":"https://www.linearity.io/blog/kinetic-typography/"}],"demo":"inline","useWhen":"the type itself performs rather than sits still"},{"name":"Knob","slug":"knob","category":"component","status":"published","definition":"A round control turned by dragging in an arc, borrowed from hardware and mostly found in audio and creative tools.","aliases":[{"name":"dial","source":"community"},{"name":"rotary control","source":"community"},{"name":"angle slider","source":"mantine"},{"name":"circular slider","source":"community"}],"tags":[],"relations":{"contrastWith":["slider","scrubby-slider"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"User Interface Elements Glossary, NN/g","url":"https://www.nngroup.com/articles/ui-elements-glossary/"}],"demo":"inline","useWhen":"a dial you turn rather than a track you slide"},{"name":"Label association","slug":"label-association","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"explicit label","source":"community"},{"name":"implicit label","source":"community"},{"name":"for/id pairing","source":"html"},{"name":"label wrapping","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["accessible-name","placeholder-as-label","label-in-name"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"polaris","name":"Valid label for every input","url":"https://github.com/Shopify/polaris/blob/main/documentation/Accessibility.md"}],"sources":[{"title":"A11y Project checklist","url":"https://www.a11yproject.com/checklist/"},{"title":"WCAG 2.2: Labels or Instructions","url":"https://www.w3.org/TR/WCAG22/#labels-or-instructions"}],"demo":"inline","useWhen":"connecting the words to the input they name"},{"name":"Label in name","slug":"label-in-name","category":"accessibility","status":"published","definition":"The rule that a control's accessible name must contain its visible label text, so speaking the visible words works in voice control.","aliases":[{"name":"visible label mismatch","source":"community"},{"name":"speech input label","source":"community"},{"name":"aria-label override problem","source":"community"}],"tags":[],"relations":{"contrastWith":["voice-control","accessible-name","label-association"],"variantOf":[],"partOf":[],"seeAlso":["visually-hidden"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Success Criterion 2.5.3 Label in Name","url":"https://www.w3.org/TR/WCAG22/#label-in-name"},{"title":"Understanding Success Criterion 2.5.3: Label in Name, W3C WAI","url":"https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html"}],"demo":"inline","useWhen":"aria-label and the visible text disagree"},{"name":"Landmark","slug":"landmark","category":"accessibility","status":"published","definition":"A named region role (banner, navigation, main, complementary, contentinfo, search) that lets assistive technology jump between the major parts of a page.","aliases":[{"name":"landmark region","source":"aria-apg"},{"name":"landmark role","source":"aria"},{"name":"region","source":"wcag"},{"name":"main landmark","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["heading-hierarchy","skip-link"],"variantOf":[],"partOf":[],"seeAlso":["page-header","rotor"]},"implementations":[],"sources":[{"title":"APG: Landmark Regions","url":"https://www.w3.org/WAI/ARIA/apg/practices/"},{"title":"A11y Project checklist","url":"https://www.a11yproject.com/checklist/"}],"demo":"inline","useWhen":"naming the big regions so they can be jumped between"},{"name":"Language attribute","slug":"language-attribute","category":"accessibility","status":"published","definition":"The declared language of a document or a passage inside it, which picks the voice, the pronunciation rules, and the hyphenation a reader gets.","aliases":[{"name":"lang attribute","source":"whatwg-html"},{"name":"language of page","source":"wcag"},{"name":"language of parts","source":"wcag"},{"name":"lang switch","source":"community"}],"tags":[],"relations":{"contrastWith":["bidirectional-text"],"variantOf":[],"partOf":[],"seeAlso":["rtl-mirroring"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Language of Page","url":"https://www.w3.org/TR/WCAG22/#language-of-page"},{"title":"WCAG 2.2: Language of Parts","url":"https://www.w3.org/TR/WCAG22/#language-of-parts"}],"demo":"inline","useWhen":"a quoted passage is in another language than the page"},{"name":"Large text threshold","slug":"large-text-threshold","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"large-scale text","source":"wcag"},{"name":"large text","source":"community"},{"name":"18pt rule","source":"community"}],"tags":[],"relations":{"contrastWith":["contrast-ratio","apca"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Contrast (Minimum)","url":"https://www.w3.org/TR/WCAG22/#contrast-minimum"}],"demo":"inline","useWhen":"deciding which contrast number a heading owes"},{"name":"Lasso selection","slug":"lasso-selection","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"lasso tool","source":"community"},{"name":"marquee selection","source":"community"},{"name":"free form selection","source":"community"},{"name":"freehand select","source":"community"}],"tags":["selection"],"relations":{"contrastWith":["range-select","marching-ants","brushing"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Lasso tool","url":"https://en.wikipedia.org/wiki/Lasso_tool"}],"demo":"inline","useWhen":"dragging an outline around items to select them"},{"name":"Lawn mower pattern","slug":"lawn-mower-pattern","category":"layout","status":"published","definition":"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.","aliases":[{"name":"lawnmower pattern","source":"community"},{"name":"lawn mower eyetracking pattern","source":"nngroup"}],"tags":["tables"],"relations":{"contrastWith":["spotted-pattern"],"variantOf":[],"partOf":[],"seeAlso":["comparison-table"]},"implementations":[],"sources":[{"title":"The Lawn Mower Eyetracking Pattern for Scanning Comparison Tables, NN/g","url":"https://www.nngroup.com/articles/lawn-mower-pattern/"}],"demo":"inline","useWhen":"laying out a comparison table for scanning"},{"name":"Layer cake pattern","slug":"layer-cake-pattern","category":"layout","status":"published","definition":"A scanning shape where the eye reads headings and subheadings and skips the text between them, so the fixation map looks like stacked layers.","aliases":[{"name":"layer cake scanning","source":"community"}],"tags":[],"relations":{"contrastWith":["f-pattern"],"variantOf":[],"partOf":[],"seeAlso":["heading-hierarchy"]},"implementations":[],"sources":[{"title":"Text Scanning Patterns: Eyetracking Evidence, NN/g","url":"https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/"},{"title":"F-Shaped Pattern of Reading on the Web, NN/g","url":"https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/"}],"demo":"inline","useWhen":"predicting a skim that only reads headings"},{"name":"Layout grid","slug":"layout-grid","category":"layout","status":"published","definition":"The shared column, gutter and margin structure a team lays every screen against, so different people's pages line up with each other.","aliases":[{"name":"grid system","source":"community"},{"name":"column grid","source":"community"},{"name":"2x Grid","source":"carbon"},{"name":"responsive grid","source":"community"}],"tags":[],"relations":{"contrastWith":["modular-grid","twelve-column-grid","baseline-grid"],"variantOf":[],"partOf":[],"seeAlso":["canonical-layout"]},"implementations":[],"sources":[{"title":"Layout grid, U.S. Web Design System","url":"https://designsystem.digital.gov/utilities/layout-grid/"}],"demo":"inline","useWhen":"the agreed skeleton every screen is built on"},{"name":"Layout margins","slug":"layout-margins","category":"layout","status":"published","definition":"The reserved space between a container's edge and its content, sized by the system so content never touches the edge of the screen.","aliases":[{"name":"margins","source":"material"},{"name":"outer margin","source":"community"},{"name":"content inset","source":"community"},{"name":"directional layout margins","source":"hig"},{"name":"screen margin","source":"community"}],"tags":[],"relations":{"contrastWith":["whitespace","container","gutter"],"variantOf":[],"partOf":[],"seeAlso":["safe-area"]},"implementations":[],"sources":[{"title":"Layout, Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/layout"}],"demo":"inline","useWhen":"the outer breathing room, set once by the system"},{"name":"Layout shift","slug":"layout-shift","category":"layout","status":"published","definition":"Content moving after it has already been painted, usually because something arriving late took space that was never reserved for it.","aliases":[{"name":"cumulative layout shift","source":"web-vitals"},{"name":"CLS","source":"web-vitals"},{"name":"content jump","source":"community"},{"name":"reflow jump","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["layout-shifter","scroll-anchoring","aspect-ratio-box"],"variantOf":[],"partOf":[],"seeAlso":["skeleton-screen","font-metric-override"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the page jumped and you lost your place"},{"name":"Layout shifter","slug":"layout-shifter","category":"layout","status":"published","definition":"A responsive pattern where the arrangement genuinely differs per breakpoint rather than reflowing, so each size gets its own composition.","aliases":[{"name":"layout shifter pattern","source":"community"}],"tags":[],"relations":{"contrastWith":["adaptive-layout","column-drop","layout-shift","mostly-fluid"],"variantOf":["responsive-web-design"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Multi-Device Layout Patterns, LukeW","url":"https://www.lukew.com/ff/entry.asp?1514="}],"demo":"inline","useWhen":"sizes get different layouts, not the same one reflowed"},{"name":"Layout thrashing","slug":"layout-thrashing","category":"motion","status":"published","definition":"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.","aliases":[{"name":"forced synchronous layout","source":"web-dev"},{"name":"forced reflow","source":"chrome"},{"name":"layout thrash","source":"community"},{"name":"read-write interleaving","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["compositor-animation","jank"],"variantOf":[],"partOf":[],"seeAlso":["flip-animation"]},"implementations":[],"sources":[{"title":"web.dev: avoid large, complex layouts and layout thrashing","url":"https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing"},{"title":"Paul Irish: what forces layout / reflow","url":"https://gist.github.com/paulirish/5d52fb081b3570c81e3a"}],"demo":"inline","useWhen":"an animation stutters and the cause is the code, not the curve"},{"name":"Lazy loading","slug":"lazy-loading","category":"pattern","status":"published","definition":"Deferring the fetch of an image, list section, or module until it is about to be needed, usually when it approaches the viewport.","aliases":[{"name":"deferred loading","source":"community"},{"name":"import on visibility","source":"patterns-dev"},{"name":"below the fold loading","source":"community"},{"name":"loading=lazy","source":"mdn"}],"tags":["perceived-performance"],"relations":{"contrastWith":["list-virtualization","progressive-image-loading"],"variantOf":[],"partOf":[],"seeAlso":["scroll-triggered-animation"]},"implementations":[],"sources":[{"title":"patterns.dev: Import On Visibility","url":"https://www.patterns.dev/"},{"title":"MDN: lazy loading","url":"https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Lazy_loading"}],"demo":"inline","useWhen":"content is fetched only once it is nearly on screen"},{"name":"Lazy registration","slug":"lazy-registration","category":"pattern","status":"published","definition":"Letting someone use a product and accumulate state anonymously, and asking for an account only when that state needs to survive the session.","aliases":[{"name":"deferred registration","source":"community"},{"name":"anonymous account","source":"community"},{"name":"try before you sign up","source":"community"},{"name":"guest mode","source":"community"}],"tags":["auth","onboarding"],"relations":{"contrastWith":["gradual-engagement","guest-checkout"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: Lazy Registration","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"you can start using it before making an account"},{"name":"Leaderboard","slug":"leaderboard","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"ranking table","source":"community"},{"name":"high score table","source":"community"},{"name":"podium","source":"community"},{"name":"top contributors","source":"community"}],"tags":["gamification"],"relations":{"contrastWith":["social-proof","streak"],"variantOf":[],"partOf":[],"seeAlso":["achievement-badge"]},"implementations":[],"sources":[{"title":"UI Patterns: Leaderboard","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"a ranked table with your own row pinned into view"},{"name":"Leading","slug":"leading","category":"typography","status":"published","definition":"The vertical distance from one baseline of type to the next, which sets how a paragraph holds together as a block.","aliases":[{"name":"line height","source":"css"},{"name":"line spacing"}],"tags":[],"relations":{"contrastWith":["tracking","kerning","type-scale","measure","text-spacing","vertical-rhythm","half-leading"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: line-height","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/line-height"}],"demo":"inline","useWhen":"the vertical space between lines of type"},{"name":"Legibility","slug":"legibility","category":"typography","status":"published","definition":"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.","aliases":[{"name":"letter distinguishability"},{"name":"character legibility"}],"tags":[],"relations":{"contrastWith":["readability","aperture"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"},{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"judging the typeface, not the setting"},{"name":"Letterboxing","slug":"letterboxing","category":"layout","status":"published","definition":"Filling the mismatch between content shape and frame shape with bars: above and below for letterbox, at the sides for pillarbox.","aliases":[{"name":"pillarboxing","source":"community"},{"name":"windowboxing","source":"community"},{"name":"black bars","source":"community"},{"name":"matting","source":"community"}],"tags":["media"],"relations":{"contrastWith":["object-fit"],"variantOf":[],"partOf":[],"seeAlso":["overscan-safe-area"]},"implementations":[],"sources":[{"title":"Pillarbox","url":"https://en.wikipedia.org/wiki/Pillarbox"}],"demo":"inline","useWhen":"the bars that appear when ratios do not match"},{"name":"Letterpress text","slug":"letterpress-text","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"engraved text"},{"name":"embossed text"},{"name":"debossed type"},{"name":"text-shadow trick","source":"community"}],"tags":[],"relations":{"contrastWith":["neon-glow","bevel"],"variantOf":[],"partOf":[],"seeAlso":["all-caps"]},"implementations":[],"sources":[{"title":"MDN: text-shadow","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow"}],"demo":"inline","useWhen":"type that looks pressed into the surface"},{"name":"Ligature","slug":"ligature","category":"typography","status":"published","definition":"A single glyph that replaces two or more letters whose shapes would otherwise collide, such as the f and i pair.","aliases":[{"name":"ligatures"},{"name":"standard ligatures","source":"opentype"},{"name":"discretionary ligatures","source":"opentype"},{"name":"liga","source":"opentype"},{"name":"programming ligatures","source":"community"}],"tags":[],"relations":{"contrastWith":["icon-font","contextual-alternates","opentype-features","kerning"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Practical Typography: Ligatures","url":"https://practicaltypography.com/"},{"title":"MDN: OpenType font features","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/OpenType_fonts"}],"demo":"inline","useWhen":"two letters collide and the font fuses them"},{"name":"light-dark()","slug":"light-dark","category":"color","status":"published","definition":"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.","aliases":[{"name":"light-dark function","source":"css"},{"name":"theme-aware color","source":"community"}],"tags":["theming","web-platform"],"relations":{"contrastWith":["color-scheme"],"variantOf":[],"partOf":[],"seeAlso":["color-token"]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"}],"demo":"inline","useWhen":"writing both theme values inline instead of in a media query"},{"name":"Light dismiss","slug":"light-dismiss","category":"interaction","status":"published","definition":"Closing a transient surface by clicking outside it or pressing Escape, without a dedicated close control being used.","aliases":[{"name":"click outside to close"},{"name":"dismiss on outside click"},{"name":"auto dismiss"},{"name":"popover=auto","source":"mdn"},{"name":"escape to dismiss"}],"tags":["web-platform"],"relations":{"contrastWith":["close-button","escape-gesture"],"variantOf":[],"partOf":[],"seeAlso":["emergency-exit-button"]},"implementations":[],"sources":[{"title":"ARIA APG: Patterns index","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"clicking away is enough to close something"},{"name":"Lightbox","slug":"lightbox","category":"component","status":"published","definition":"An overlay that shows one image or video large over a dimmed page, with next and previous controls and a dismiss.","aliases":[{"name":"image viewer","source":"community"},{"name":"media overlay","source":"community"},{"name":"photo viewer","source":"community"},{"name":"image preview","source":"ant-design"}],"tags":["media"],"relations":{"contrastWith":["quick-view"],"variantOf":[],"partOf":[],"seeAlso":["scrim","modal-dialog","filmstrip"]},"implementations":[],"sources":[{"title":"User Interface Elements Glossary, NN/g","url":"https://www.nngroup.com/articles/ui-elements-glossary/"}],"demo":"inline","useWhen":"an image opened large over the dimmed page"},{"name":"Lightness","slug":"lightness","category":"color","status":"published","definition":"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.","aliases":[{"name":"value","source":"community"},{"name":"tone","source":"material"},{"name":"brightness","source":"community"},{"name":"L in OKLCH"}],"tags":[],"relations":{"contrastWith":["hue","saturation","opacity","relative-luminance"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Tone","url":"https://m3.material.io/styles/color/system/how-the-system-works"}],"sources":[{"title":"MDN: oklch()","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch"}],"demo":"inline","useWhen":"stepping a colour lighter or darker without changing the hue"},{"name":"Line clamp","slug":"line-clamp","category":"typography","status":"published","definition":"Cutting a block of text off after a fixed number of lines, with an ellipsis at the end of the last one.","aliases":[{"name":"multiline truncation"},{"name":"-webkit-line-clamp","source":"css"},{"name":"multi-line ellipsis"},{"name":"text clamping"}],"tags":["web-platform"],"relations":{"contrastWith":["truncation"],"variantOf":[],"partOf":[],"seeAlso":["show-more-toggle"]},"implementations":[],"sources":[{"title":"line-clamp (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-clamp"},{"title":"line-clamp (CSS-Tricks Almanac)","url":"https://css-tricks.com/almanac/properties/l/line-clamp/"}],"demo":"inline","useWhen":"capping a card's description at three lines"},{"name":"Line drawing animation","slug":"line-drawing-animation","category":"motion","status":"published","definition":"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.","aliases":[{"name":"self-drawing SVG","source":"community"},{"name":"stroke-dashoffset animation","source":"css"},{"name":"path drawing","source":"community"},{"name":"draw-on animation","source":"community"}],"tags":[],"relations":{"contrastWith":["morph-transition","lottie","reveal-animation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"CSS-Tricks: how SVG line animation works","url":"https://css-tricks.com/svg-line-animation-works/"},{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"}],"demo":"inline","useWhen":"a mark should look drawn rather than revealed"},{"name":"Line focus","slug":"line-focus","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"reading ruler","source":"community"},{"name":"line highlighter","source":"community"},{"name":"focus mode reading","source":"community"}],"tags":[],"relations":{"contrastWith":["reader-mode"],"variantOf":[],"partOf":[],"seeAlso":["read-aloud"]},"implementations":[],"sources":[{"title":"Microsoft Support: Use Immersive Reader in Microsoft Edge","url":"https://support.microsoft.com/en-US/edge/use-immersive-reader-in-microsoft-edge"}],"demo":"inline","useWhen":"long prose has to be readable line by line"},{"name":"linear() easing","slug":"linear-easing","category":"motion","status":"published","definition":"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.","aliases":[{"name":"linear easing function","source":"css"},{"name":"sampled easing","source":"community"},{"name":"spring easing in CSS","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["stepped-animation","cubic-bezier"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Chrome for Developers: create complex animation curves with linear()","url":"https://developer.chrome.com/docs/css-ui/css-linear-easing-function"},{"title":"Smashing Magazine: the path to awesome CSS easing with linear()","url":"https://www.smashingmagazine.com/2023/09/path-css-easing-linear-function/"}],"demo":"inline","useWhen":"a curve is not expressible as one bezier"},{"name":"Lining figures","slug":"lining-figures","category":"typography","status":"published","definition":"Numerals all drawn to cap height so they line up evenly with capitals and with each other.","aliases":[{"name":"titling figures"},{"name":"lining numerals"},{"name":"lnum","source":"opentype"},{"name":"modern figures"}],"tags":[],"relations":{"contrastWith":["oldstyle-figures","tabular-figures"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Lining Figures","url":"https://totallytype.com/figures.php"},{"title":"OpenType at Work: Figure Styles (Type Network)","url":"https://typenetwork.com/articles/opentype-at-work-figure-styles"}],"demo":"inline","useWhen":"numbers next to capitals or in interface chrome"},{"name":"Link","slug":"link","category":"component","status":"published","definition":"A control that navigates somewhere, named for its destination, and carrying the browser affordances of a destination (open in new tab, copy address).","aliases":[{"name":"hyperlink","source":"community"},{"name":"anchor","source":"community"},{"name":"text link","source":"community"}],"tags":[],"relations":{"contrastWith":["button","ghost-button","button-versus-link","underline"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Link","url":"https://www.w3.org/WAI/ARIA/apg/patterns/link/"}],"sources":[{"title":"ARIA Authoring Practices Guide: Link pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/link/"}],"demo":"inline","useWhen":"the control goes somewhere rather than doing something"},{"name":"Link purpose","slug":"link-purpose","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"descriptive link text","source":"a11yproject"},{"name":"click here problem","source":"community"},{"name":"ambiguous link text","source":"wcag"},{"name":"link context","source":"wcag"}],"tags":[],"relations":{"contrastWith":["button-versus-link","sensory-characteristics"],"variantOf":[],"partOf":[],"seeAlso":["accessible-name"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Link Purpose (In Context)","url":"https://www.w3.org/TR/WCAG22/#link-purpose-in-context"}],"demo":"inline","useWhen":"judging link text pulled out of its sentence"},{"name":"Liquid Glass","slug":"liquid-glass","category":"aesthetic","status":"published","definition":"Apple's 2025 material where controls float as a translucent layer that refracts what is behind them and reshapes fluidly as content moves underneath.","aliases":[{"name":"glass effect","source":"swiftui"},{"name":"iOS 26 glass","source":"community"},{"name":"Apple glass design"}],"tags":[],"relations":{"contrastWith":["glassmorphism","spatial-ui"],"variantOf":[],"partOf":[],"seeAlso":["vibrancy","progressive-blur"]},"implementations":[],"sources":[{"title":"Wikipedia: Liquid Glass","url":"https://en.wikipedia.org/wiki/Liquid_Glass"},{"title":"WWDC25: Meet Liquid Glass","url":"https://developer.apple.com/videos/play/wwdc2025/219/"}],"demo":"inline","useWhen":"controls are a glass layer that bends the content behind"},{"name":"List","slug":"list","category":"component","status":"published","definition":"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.","aliases":[{"name":"list group","source":"bootstrap"},{"name":"lists and tables","source":"hig"},{"name":"unordered list"},{"name":"ordered list"}],"tags":[],"relations":{"contrastWith":["data-table","listbox","treeview"],"variantOf":[],"partOf":[],"seeAlso":["media-object"]},"implementations":[{"system":"material","name":"Lists","url":"https://m3.material.io/components/lists/overview"},{"system":"hig","name":"Lists and tables","url":"https://developer.apple.com/design/human-interface-guidelines/lists-and-tables"}],"sources":[{"title":"The Component Gallery: List","url":"https://component.gallery/components/list/"}],"demo":"inline","useWhen":"items are peers and the set matters more than any one row"},{"name":"List detail","slug":"list-detail","category":"layout","status":"published","definition":"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.","aliases":[{"name":"master detail","source":"community"},{"name":"list pane and detail pane","source":"material"},{"name":"index detail","source":"community"},{"name":"reading pane","source":"community"},{"name":"preview pane","source":"community"}],"tags":[],"relations":{"contrastWith":["split-view","multi-column-layout","supporting-pane"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Canonical layouts, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/canonical-layouts"}],"demo":"inline","useWhen":"browse a list, read one item, keep both in view"},{"name":"List virtualization","slug":"list-virtualization","category":"pattern","status":"published","definition":"Rendering only the rows currently in view and a small buffer around them, while spacers preserve the scrollbar of the full list.","aliases":[{"name":"windowing","source":"community"},{"name":"virtual scrolling","source":"community"},{"name":"virtualized list","source":"community"},{"name":"virtual list","source":"ant-design"},{"name":"row virtualization","source":"tanstack-table"}],"tags":["perceived-performance"],"relations":{"contrastWith":["set-size-and-position","lazy-loading"],"variantOf":[],"partOf":[],"seeAlso":["infinite-scroll"]},"implementations":[],"sources":[{"title":"patterns.dev: List virtualization","url":"https://www.patterns.dev/"}],"demo":"inline","useWhen":"a huge list renders only the rows you can see"},{"name":"Listbox","slug":"listbox","category":"component","status":"published","definition":"An always visible list of options you choose from with the keyboard or pointer, without a popup or a text field.","aliases":[{"name":"option list"},{"name":"list box"},{"name":"selection list"}],"tags":["forms"],"relations":{"contrastWith":["select","combobox","list","transfer-list","action-list","multi-select"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Listbox","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"sources":[{"title":"ARIA APG: Listbox pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"the options are on screen already, not behind a popup"},{"name":"Live activity","slug":"live-activity","category":"component","status":"published","definition":"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.","aliases":[{"name":"ongoing activity","source":"community"},{"name":"live notification","source":"community"}],"tags":["messaging","platform-registers"],"relations":{"contrastWith":["push-notification","widget"],"variantOf":[],"partOf":[],"seeAlso":["notification-center"]},"implementations":[{"system":"hig","name":"Live Activities","url":"https://developer.apple.com/design/human-interface-guidelines/live-activities"}],"sources":[{"title":"Apple HIG: Live Activities","url":"https://developer.apple.com/design/human-interface-guidelines/live-activities"}],"demo":"inline","useWhen":"a task in progress must be followed outside the app"},{"name":"Live region","slug":"live-region","category":"accessibility","status":"published","definition":"A container marked so assistive technology reads changes inside it without moving focus, used for messages that appear after an action.","aliases":[{"name":"aria-live","source":"aria"},{"name":"screen reader announcement"},{"name":"announcer"},{"name":"live announcement"},{"name":"LiveAnnouncer","source":"angular"},{"name":"role=alert","source":"aria"},{"name":"alert region"}],"tags":[],"relations":{"contrastWith":["visually-hidden","status-message","aria-notify","politeness-level","alert-dialog"],"variantOf":[],"partOf":[],"seeAlso":["streaming-announcement"]},"implementations":[],"sources":[{"title":"MDN: aria-live","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live"},{"title":"WCAG 2.2: Status Messages","url":"https://www.w3.org/TR/WCAG22/#status-messages"}],"demo":"inline","useWhen":"something must be spoken without stealing focus"},{"name":"Load more","slug":"load-more","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"show more button","source":"nngroup"},{"name":"load more button","source":"community"},{"name":"manual pagination","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["show-more-toggle","cursor-pagination","infinite-scroll","pull-to-refresh"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"NN/g: Alternatives to Pagination on Product-Listing Pages","url":"https://www.nngroup.com/articles/alternatives-pagination-listing-pages/"}],"demo":"inline","useWhen":"the next batch waits behind a button instead of arriving on its own"},{"name":"Local navigation","slug":"local-navigation","category":"layout","status":"published","definition":"Links contextual to where the reader is, showing the siblings and children of the current page rather than the whole site.","aliases":[{"name":"local nav","source":"community"},{"name":"contextual navigation","source":"community"},{"name":"section navigation","source":"community"},{"name":"sub navigation","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["global-navigation","tabs","table-of-contents"],"variantOf":[],"partOf":[],"seeAlso":["sidebar"]},"implementations":[],"sources":[{"title":"Local Navigation Is a Valuable Orientation and Wayfinding Aid, NN/g","url":"https://www.nngroup.com/articles/local-navigation/"}],"demo":"inline","useWhen":"nav that changes with the section you are in"},{"name":"Logical properties","slug":"logical-properties","category":"layout","status":"published","definition":"Layout properties named by flow direction (inline start, block end) rather than by screen edge, so a layout mirrors itself in other writing modes.","aliases":[{"name":"flow relative properties","source":"css"},{"name":"inline-start and block-end","source":"css"},{"name":"writing mode aware properties","source":"community"},{"name":"margin-inline","source":"css"}],"tags":["web-platform"],"relations":{"contrastWith":["vertical-writing-mode"],"variantOf":[],"partOf":[],"seeAlso":["reading-order"]},"implementations":[],"sources":[{"title":"CSS guides, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides"}],"demo":"inline","useWhen":"spacing that must flip for right to left text"},{"name":"Logo cloud","slug":"logo-cloud","category":"layout","status":"published","definition":"A row or grid of customer logos used as social proof, usually flattened to one colour so no brand dominates.","aliases":[{"name":"logo bar","source":"community"},{"name":"logo wall","source":"community"},{"name":"logo garden","source":"community"},{"name":"client strip","source":"community"},{"name":"as seen in","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["social-proof"],"variantOf":[],"partOf":[],"seeAlso":["marquee"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"proof by association, laid out as a strip of marks"},{"name":"Long description","slug":"long-description","category":"accessibility","status":"published","definition":"An extended text alternative for a chart, diagram, or map, linked or referenced because a short alt string cannot carry the content.","aliases":[{"name":"longdesc","source":"html"},{"name":"aria-details","source":"aria"},{"name":"extended description","source":"community"},{"name":"complex image description","source":"community"}],"tags":["media"],"relations":{"contrastWith":["alt-text","chart-description","figure","accessible-description"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: aria-details","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-details"}],"demo":"inline","useWhen":"the image is data and one line will not do"},{"name":"Long press","slug":"long-press","category":"interaction","status":"published","definition":"A press held in place for a moment before release, used to reveal secondary actions, enter a rearrange mode, or open a contextual menu.","aliases":[{"name":"touch and hold","source":"hig"},{"name":"press and hold","source":"community"},{"name":"tap and hold","source":"community"},{"name":"long tap","source":"community"},{"name":"long-press drag","source":"material"}],"tags":["touch"],"relations":{"contrastWith":["double-tap","force-touch","hold-to-confirm","press-drag-release","tap"],"variantOf":[],"partOf":[],"seeAlso":["app-shortcut"]},"implementations":[{"system":"material","name":"Long press","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: Gestures (long press)","url":"https://m1.material.io/patterns/gestures.html"},{"title":"iOS HIG: Gestures","url":"https://developer.apple.com/design/human-interface-guidelines/gestures"}],"demo":"inline","useWhen":"holding a touch to reach the secondary action"},{"name":"Long shadow","slug":"long-shadow","category":"aesthetic","status":"published","definition":"A flat era decoration where an icon casts a single hard shadow at 45 degrees that runs far past the shape before fading out.","aliases":[{"name":"long flat shadow"},{"name":"45 degree shadow","source":"community"},{"name":"flat long shadow"}],"tags":[],"relations":{"contrastWith":["neubrutalism"],"variantOf":[],"partOf":[],"seeAlso":["flat-design","metro-design"]},"implementations":[],"sources":[{"title":"NN/g: Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users","url":"https://www.nngroup.com/articles/flat-design/"}],"demo":"inline","useWhen":"one hard 45 degree shadow running off the icon"},{"name":"Look and pinch","slug":"look-and-pinch","category":"interaction","status":"published","definition":"Spatial input where the eyes choose the target and a finger pinch commits the action, so selection and activation come from different body parts.","aliases":[{"name":"gaze and pinch","source":"community"},{"name":"indirect gesture","source":"hig"},{"name":"eye tracking selection","source":"community"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["spatial-ui","dwell-activation"]},"implementations":[],"sources":[{"title":"Apple Developer: Explore game input in visionOS","url":"https://developer.apple.com/videos/play/wwdc2024/10094/"}],"demo":"inline","useWhen":"gaze selects, hand confirms, no cursor involved"},{"name":"Lorem ipsum","slug":"lorem-ipsum","category":"typography","status":"published","definition":"Scrambled pseudo-Latin placeholder text used so a layout can be judged on its shape and texture before the real copy exists.","aliases":[{"name":"greeking"},{"name":"dummy text"},{"name":"placeholder text"},{"name":"filler text"}],"tags":[],"relations":{"contrastWith":["pangram","type-specimen"],"variantOf":[],"partOf":[],"seeAlso":["hand-drawn-ui"]},"implementations":[],"sources":[{"title":"Lorem ipsum (Wikipedia)","url":"https://en.wikipedia.org/wiki/Lorem_ipsum"}],"demo":"inline","useWhen":"filling a layout before the copy is written"},{"name":"Lottie","slug":"lottie","category":"motion","status":"published","definition":"A JSON format for vector animations exported from design tools and played natively on the web and mobile, so complex motion ships without video.","aliases":[{"name":"Lottie animation","source":"community"},{"name":"Bodymovin","source":"community"},{"name":"dotLottie","source":"community"}],"tags":[],"relations":{"contrastWith":["line-drawing-animation"],"variantOf":[],"partOf":[],"seeAlso":["icon-morph"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"},{"title":"Lottie: documentation","url":"https://airbnb.io/lottie/"}],"demo":"inline","useWhen":"designed animation must ship as an asset, not as code"},{"name":"Low poly","slug":"low-poly","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"low-polygon"},{"name":"lowpoly"},{"name":"faceted 3D"},{"name":"polygonal illustration"}],"tags":[],"relations":{"contrastWith":["hyperreal-3d","isometric-illustration","pixel-art-ui"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Aesthetics of Design: Low Poly Aesthetic","url":"https://www.aesdes.org/2021/01/27/low-poly-aesthetic/"},{"title":"Sessions College: What is the deal with low poly art?","url":"https://www.sessions.edu/notes-on-design/whats-the-deal-with-low-poly-art/"}],"demo":"inline","useWhen":"deliberately faceted 3D art with visible triangles"},{"name":"Magazine layout","slug":"magazine-layout","category":"layout","status":"published","definition":"An editorial composition with mixed column widths, one dominant lead story and smaller supporting items arranged around it.","aliases":[{"name":"editorial layout","source":"community"},{"name":"newspaper layout","source":"community"},{"name":"front page layout","source":"community"}],"tags":["editorial"],"relations":{"contrastWith":["editorial-web-design","text-columns"],"variantOf":[],"partOf":[],"seeAlso":["broken-grid"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"an editorial page with one clear lead and ranked rest"},{"name":"Magic link","slug":"magic-link","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"email link sign-in","source":"community"},{"name":"passwordless link","source":"community"},{"name":"login link","source":"community"},{"name":"check your email screen","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["accessible-authentication","one-time-code-login","passkey","social-login"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"you sign in by clicking a link sent to your email"},{"name":"Magic tap","slug":"magic-tap","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"accessibilityPerformMagicTap","source":"hig"},{"name":"two-finger double tap","source":"community"},{"name":"most intended action","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["escape-gesture","explore-by-touch"],"variantOf":[],"partOf":[],"seeAlso":["multi-touch"]},"implementations":[],"sources":[{"title":"Apple: Supporting Accessibility (View Controller Programming Guide)","url":"https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/SupportingAccessibility.html"}],"demo":"inline","useWhen":"a screen has one obvious action worth a shortcut"},{"name":"Magnetic button","slug":"magnetic-button","category":"motion","status":"published","definition":"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.","aliases":[{"name":"magnetic hover","source":"community"},{"name":"magnetic cursor","source":"community"},{"name":"cursor attraction","source":"community"},{"name":"magnetic effect","source":"community"}],"tags":[],"relations":{"contrastWith":["hover-lift","cursor-follower"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Init HTML: magnetic hover effect, cursor-attracted buttons","url":"https://en.inithtml.com/resources/magnetic-hover-effect-creating-cursor-attracted-buttons-with-vanilla-javascript/"},{"title":"GSAP Vault: magnetic cursor effect","url":"https://gsapvault.com/effects/magnetic-cursor"}],"demo":"inline","useWhen":"a hero control should feel alive before it is clicked"},{"name":"Marching ants","slug":"marching-ants","category":"motion","status":"published","definition":"The animated dashed outline that circles a selection, moving continuously so the boundary reads as active rather than drawn.","aliases":[{"name":"crawling ants","source":"community"},{"name":"animated selection border","source":"community"},{"name":"dancing ants","source":"community"}],"tags":["selection"],"relations":{"contrastWith":["lasso-selection","jiggle-mode"],"variantOf":[],"partOf":[],"seeAlso":["selection-color"]},"implementations":[],"sources":[{"title":"Computer Hope: What is a marquee?","url":"https://www.computerhope.com/jargon/m/marquee.htm"}],"demo":"inline","useWhen":"the crawling dashed border around a selection"},{"name":"Marking menu","slug":"marking-menu","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"gesture menu","source":"community"},{"name":"mark mode","source":"community"},{"name":"flow menu","source":"community"}],"tags":[],"relations":{"contrastWith":["radial-menu","mouse-gesture"],"variantOf":[],"partOf":[],"seeAlso":["press-drag-release"]},"implementations":[],"sources":[{"title":"Kurtenbach and Buxton: user learning and performance with marking menus","url":"https://www.billbuxton.com/MMUserLearn.html"}],"demo":"inline","useWhen":"an expert stroke that skips showing the menu"},{"name":"Marking pattern","slug":"marking-pattern","category":"layout","status":"published","definition":"A scanning shape where the eye holds one spot on the screen while content scrolls past underneath it, most common on phones.","aliases":[],"tags":[],"relations":{"contrastWith":["bypassing-pattern","spotted-pattern"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"F-Shaped Pattern of Reading on the Web, NN/g","url":"https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/"}],"demo":"inline","useWhen":"reasoning about where eyes rest while scrolling"},{"name":"Marquee","slug":"marquee","category":"motion","status":"published","definition":"Text or logos that scroll continuously across a strip, either as a decorative ticker or because a label is too long for its box.","aliases":[{"name":"ticker","source":"community"},{"name":"scrolling text","source":"community"},{"name":"logo cloud scroller","source":"community"},{"name":"news ticker","source":"community"},{"name":"infinite scroller","source":"community"}],"tags":[],"relations":{"contrastWith":["carousel","truncation"],"variantOf":[],"partOf":[],"seeAlso":["prefers-reduced-motion","pause-stop-hide","logo-cloud","yoyo-loop"]},"implementations":[],"sources":[{"title":"School of Motion: The Essential Motion Design Dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"content is wider than its box and must still be read"},{"name":"Masonry","slug":"masonry","category":"layout","status":"published","definition":"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.","aliases":[{"name":"masonry layout"},{"name":"waterfall layout","source":"community"},{"name":"cascading grid layout","source":"community"}],"tags":[],"relations":{"contrastWith":["grid-lanes","bento-grid","card-grid","justified-gallery"],"variantOf":[],"partOf":[],"seeAlso":["reading-order"]},"implementations":[],"sources":[{"title":"Masonry, David DeSandro","url":"https://masonry.desandro.com/"},{"title":"Masonry layout, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout"}],"demo":"inline","useWhen":"unequal heights packed into the shortest column"},{"name":"Material 3 Expressive","slug":"material-3-expressive","category":"aesthetic","status":"published","definition":"Google's 2025 update to Material 3: springier motion, emphasized typography, updated dynamic colour themes, and responsive components that stretch to hug the display.","aliases":[{"name":"M3 Expressive","source":"material"},{"name":"expressive design"},{"name":"Android 16 design"}],"tags":[],"relations":{"contrastWith":["material-you"],"variantOf":[],"partOf":[],"seeAlso":["motion-token"]},"implementations":[],"sources":[{"title":"Google blog: Material 3 Expressive redesign for Android and Wear OS","url":"https://blog.google/products-and-platforms/platforms/android/material-3-expressive-android-wearos-launch/"}],"demo":"inline","useWhen":"Material turned up: emphasized type, springy motion"},{"name":"Material You","slug":"material-you","category":"aesthetic","status":"published","definition":"Google's personalization layer where the system derives an app's entire color scheme from the user's wallpaper, so every app shifts together.","aliases":[{"name":"dynamic color","source":"material"},{"name":"Material 3","source":"material"},{"name":"Monet","source":"community"},{"name":"wallpaper theming"},{"name":"wallpaper-based theming","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["material-3-expressive","mica"],"variantOf":[],"partOf":[],"seeAlso":["seed-color","hct"]},"implementations":[{"system":"material","name":"Dynamic color","url":"https://developer.android.com/develop/ui/views/theming/dynamic-colors"}],"sources":[{"title":"Android Developers: Dynamic color","url":"https://developer.android.com/develop/ui/views/theming/dynamic-colors"}],"demo":"inline","useWhen":"the palette comes from the user's wallpaper"},{"name":"Maximalism","slug":"maximalism","category":"aesthetic","status":"published","definition":"A style that fills the screen on purpose with layered color, pattern, and type, treating abundance rather than restraint as the message.","aliases":[{"name":"maximalist web design"},{"name":"more is more","source":"community"},{"name":"cluttercore","source":"community"},{"name":"dopamine design","source":"daisyui"},{"name":"Gen-Z chaos","source":"uistyleguide"}],"tags":[],"relations":{"contrastWith":["minimalism","y2k-aesthetic","anti-design","memphis-design"],"variantOf":[],"partOf":[],"seeAlso":["digital-collage"]},"implementations":[],"sources":[{"title":"Envato: Minimalism vs. Maximalism: Battle of the Divisive Design Styles","url":"https://elements.envato.com/learn/minimalism-vs-maximalism-design-style"},{"title":"Twine: Minimalism vs Maximalism: The Pros and Cons for Web Design","url":"https://www.twine.net/blog/minimalism-vs-maximalism-web-design/"}],"demo":"inline","useWhen":"abundance is the point, not a failure of editing"},{"name":"Measure","slug":"measure","category":"typography","status":"published","definition":"The width of a column of text, judged in characters per line, with roughly 45 to 75 treated as the comfortable range for reading.","aliases":[{"name":"line length"},{"name":"column width"},{"name":"characters per line"},{"name":"CPL"}],"tags":["editorial"],"relations":{"contrastWith":["leading","text-columns","ch-unit"],"variantOf":[],"partOf":[],"seeAlso":["reader-mode","text-balancing"]},"implementations":[],"sources":[{"title":"Choose a comfortable measure (Elements of Typographic Style Applied to the Web)","url":"http://webtypography.net/2.1.2"},{"title":"Readability: The Optimal Line Length (Baymard)","url":"https://baymard.com/blog/line-length-readability"}],"demo":"inline","useWhen":"deciding how wide a paragraph is allowed to get"},{"name":"Meatball menu","slug":"meatball-menu","category":"component","status":"published","definition":"An overflow menu whose trigger is three horizontal dots, usually sitting at the end of a row or a card.","aliases":[{"name":"three dots menu"},{"name":"horizontal ellipsis menu"}],"tags":[],"relations":{"contrastWith":["kebab-menu","hamburger-menu"],"variantOf":["overflow-menu"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"extra actions behind three dots lying sideways"},{"name":"Media controls","slug":"media-controls","category":"component","status":"published","definition":"The cluster of play, pause, skip, volume and fullscreen controls attached to a player, which usually hides itself while playing.","aliases":[{"name":"transport controls"},{"name":"player controls"},{"name":"playback controls"},{"name":"video controls"}],"tags":["media"],"relations":{"contrastWith":["scrubber"],"variantOf":[],"partOf":[],"seeAlso":["audio-control","video-player"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"the control bar of a video or audio player"},{"name":"Media object","slug":"media-object","category":"layout","status":"published","definition":"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.","aliases":[{"name":"flag object"},{"name":"media block","source":"community"},{"name":"avatar and text","source":"community"},{"name":"media objects","source":"tailwind"}],"tags":[],"relations":{"contrastWith":["card"],"variantOf":[],"partOf":[],"seeAlso":["avatar","list"]},"implementations":[],"sources":[{"title":"The media object saves hundreds of lines of code, Nicole Sullivan","url":"http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/"},{"title":"The Media Object, A Bunch of Ways, CSS-Tricks","url":"https://css-tricks.com/media-object-bunch-ways/"}],"demo":"inline","useWhen":"avatar or thumbnail beside a block of text"},{"name":"Mega menu","slug":"mega-menu","category":"component","status":"published","definition":"A large navigation panel that drops from a top level item and shows many links at once, grouped into columns with headings.","aliases":[{"name":"megamenu","source":"nngroup"},{"name":"flyout menu","source":"tailwind"},{"name":"mega dropdown"},{"name":"navigation panel"}],"tags":["navigation"],"relations":{"contrastWith":["menu-bar","navigation-menu","submenu","priority-plus-navigation"],"variantOf":[],"partOf":["navigation-bar"],"seeAlso":[]},"implementations":[],"sources":[{"title":"User Interface Elements Glossary (NN/g)","url":"https://www.nngroup.com/articles/ui-elements-glossary/"}],"demo":"inline","useWhen":"a nav panel too big to be a simple list"},{"name":"Memphis design","slug":"memphis-design","category":"aesthetic","status":"published","definition":"The 1980s Memphis Group look of clashing pastels, squiggles, confetti dots, and terrazzo shapes scattered across a layout.","aliases":[{"name":"Memphis style"},{"name":"Memphis Milano"},{"name":"squiggle and confetti","source":"community"},{"name":"80s postmodern"}],"tags":[],"relations":{"contrastWith":["corporate-memphis","terrazzo","maximalism"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Corporate Memphis","url":"https://en.wikipedia.org/wiki/Corporate_Memphis"}],"demo":"inline","useWhen":"squiggles and confetti shapes on clashing pastels"},{"name":"Mention autocomplete","slug":"mention-autocomplete","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"at-mention","source":"community"},{"name":"@mention","source":"community"},{"name":"user tagging","source":"community"},{"name":"trigger character menu","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":["slash-command","inline-autocomplete"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"AI UX Playground: Slash Commands","url":"https://aiuxplayground.com/pattern/slash-command/"}],"demo":"inline","useWhen":"typing @ opens a list of people to insert"},{"name":"Menu bar","slug":"menu-bar","category":"component","status":"published","definition":"A permanent horizontal row of menu titles (File, Edit, View) whose menus open on click and then follow the pointer along the row.","aliases":[{"name":"menubar","source":"shadcn"},{"name":"application menu"},{"name":"main menu"}],"tags":["navigation","platform-registers"],"relations":{"contrastWith":["mega-menu","toolbar","navigation-bar","menu-bar-extra","ribbon"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Menu and Menubar","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"},{"system":"shadcn","name":"Menubar","url":"https://ui.shadcn.com/docs/components"},{"system":"base-ui","name":"Menubar","url":"https://base-ui.com/react/overview/quick-start"}],"sources":[{"title":"ARIA Authoring Practices Guide: Menu and Menubar pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"the desktop row of File, Edit, View menus"},{"name":"Menu bar extra","slug":"menu-bar-extra","category":"component","status":"published","definition":"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.","aliases":[{"name":"status item","source":"hig"},{"name":"system tray icon","source":"community"},{"name":"notification area icon","source":"community"},{"name":"menulet","source":"community"},{"name":"tray icon","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["menu-bar","dock"],"variantOf":[],"partOf":[],"seeAlso":["notification-center"]},"implementations":[],"sources":[{"title":"NameThatUI element index","url":"https://namethatui.com/"}],"demo":"inline","useWhen":"an app's icon living in the system bar or tray"},{"name":"Menu button","slug":"menu-button","category":"component","status":"published","definition":"A button whose only job is to open a menu, marked with aria-haspopup and usually drawn with a downward chevron.","aliases":[{"name":"dropdown trigger"},{"name":"menu trigger","source":"radix"},{"name":"disclosure button"}],"tags":[],"relations":{"contrastWith":["select","split-button","has-popup","action-list","overflow-menu","dropdown"],"variantOf":[],"partOf":[],"seeAlso":["kebab-menu"]},"implementations":[{"system":"aria-apg","name":"Menu Button","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/"}],"sources":[{"title":"ARIA Authoring Practices Guide: Menu Button pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/"}],"demo":"inline","useWhen":"the button opens a list of commands, nothing more"},{"name":"Mesh gradient","slug":"mesh-gradient","category":"color","status":"published","definition":"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.","aliases":[{"name":"gradient mesh","source":"community"},{"name":"aurora background","source":"community"},{"name":"blob gradient","source":"community"},{"name":"MeshGradient","source":"swiftui"}],"tags":[],"relations":{"contrastWith":["aurora-ui","gradient","conic-gradient"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Color gradient","url":"https://en.wikipedia.org/wiki/Color_gradient"}],"demo":"inline","useWhen":"a soft multi-point colour blend, not a straight ramp"},{"name":"Meter","slug":"meter","category":"component","status":"published","definition":"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.","aliases":[{"name":"level indicator","source":"hig"},{"name":"capacity indicator","source":"hig"},{"name":"strength meter","source":"community"},{"name":"usage bar","source":"community"}],"tags":[],"relations":{"contrastWith":["progress-bar","rating","stat","password-strength-meter","gauge"],"variantOf":[],"partOf":[],"seeAlso":["sparkline"]},"implementations":[{"system":"aria-apg","name":"Meter","url":"https://www.w3.org/WAI/ARIA/apg/patterns/meter/"},{"system":"base-ui","name":"Meter","url":"https://base-ui.com/react/components/meter"}],"sources":[{"title":"ARIA Authoring Practices Guide: Meter pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/meter/"}],"demo":"inline","useWhen":"a level within a known range, not a task"},{"name":"Metered paywall","slug":"metered-paywall","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"soft paywall","source":"community"},{"name":"freemium meter","source":"community"},{"name":"article counter","source":"community"},{"name":"leaky paywall","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["feature-gate","paywall"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"you get three free articles a month and a counter says so"},{"name":"Metro","slug":"metro-design","category":"aesthetic","status":"published","definition":"Microsoft's typography led design language of flat coloured tiles, large light headings, and motion used in place of chrome, shadow, and texture.","aliases":[{"name":"Modern UI","source":"microsoft"},{"name":"Windows Phone design"},{"name":"Microsoft design language"},{"name":"tile UI","source":"community"}],"tags":[],"relations":{"contrastWith":["flat-design","frutiger-metro"],"variantOf":[],"partOf":[],"seeAlso":["windows-aero","long-shadow"]},"implementations":[],"sources":[{"title":"Wikipedia: Metro (design language)","url":"https://en.wikipedia.org/wiki/Metro_(design_language)"}],"demo":"inline","useWhen":"flat coloured tiles and oversized light headings"},{"name":"Mica","slug":"mica","category":"aesthetic","status":"published","definition":"Fluent's opaque app background material, subtly tinted with the user's desktop wallpaper colour and going neutral when the window loses focus.","aliases":[{"name":"mica material","source":"fluent"},{"name":"Mica Alt","source":"fluent"},{"name":"wallpaper-aware background"}],"tags":["theming"],"relations":{"contrastWith":["glassmorphism","material-you","windows-aero"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"fluent","name":"Mica","url":"https://learn.microsoft.com/en-us/windows/apps/design/style/mica"}],"sources":[{"title":"Microsoft Learn: Mica material","url":"https://learn.microsoft.com/en-us/windows/apps/design/style/mica"},{"title":"Microsoft Learn: Materials used in Windows apps","url":"https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/materials"}],"demo":"inline","useWhen":"an opaque window background tinted by the wallpaper"},{"name":"Microinteraction","slug":"microinteraction","category":"interaction","status":"published","definition":"A small self-contained loop of trigger, rule, feedback, and result, such as a toggle that flips, buzzes, and settles into its new state.","aliases":[{"name":"micro-interaction","source":"community"},{"name":"interaction detail","source":"community"}],"tags":[],"relations":{"contrastWith":["choreography"],"variantOf":[],"partOf":[],"seeAlso":["ripple","haptic-feedback","hover-lift"]},"implementations":[],"sources":[{"title":"Supercharge: UI glossary","url":"https://supercharge.design/blog/ui-glossary-list-of-essential-ui-design-terms"}],"demo":"inline","useWhen":"one tiny complete interaction, trigger to feedback"},{"name":"Microsurvey","slug":"microsurvey","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"in-app survey","source":"community"},{"name":"one-question survey","source":"community"},{"name":"NPS prompt","source":"community"},{"name":"feedback mechanism","source":"cloudscape"},{"name":"was this helpful","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["rating-prompt"],"variantOf":[],"partOf":[],"seeAlso":["status-message","progressive-profiling"]},"implementations":[],"sources":[{"title":"Cloudscape: Feedback mechanisms","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"a one-question survey inside the thing it asks about"},{"name":"Mid-century modern","slug":"mid-century-modern","category":"aesthetic","status":"published","definition":"A 1950s and 60s style of muted mustard, teal, and burnt orange, tapered organic shapes, textured paper grounds, and friendly geometric sans type.","aliases":[{"name":"MCM"},{"name":"atomic age style"},{"name":"Googie","source":"community"}],"tags":[],"relations":{"contrastWith":["art-deco"],"variantOf":[],"partOf":[],"seeAlso":["biophilic-design"]},"implementations":[],"sources":[{"title":"Kittl: 60+ graphic design styles, names and descriptions","url":"https://www.kittl.com/blogs/design-styles-name-stl/"}],"demo":"inline","useWhen":"muted 50s palette with tapered organic shapes"},{"name":"Middle click","slug":"middle-click","category":"interaction","status":"published","definition":"A press of the scroll wheel button, conventionally used to open a link in a new tab, close a tab, or start autoscrolling.","aliases":[{"name":"wheel click","source":"community"},{"name":"middle mouse button","source":"community"},{"name":"auxiliary click","source":"mdn"}],"tags":[],"relations":{"contrastWith":["secondary-click","double-click"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: Element auxclick event","url":"https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event"},{"title":"MDN: Pointer events","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"}],"demo":"inline","useWhen":"the wheel press, not the left or right button"},{"name":"Miller columns","slug":"miller-columns","category":"layout","status":"published","definition":"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.","aliases":[{"name":"column view"},{"name":"Finder columns"},{"name":"cascading lists"}],"tags":["navigation"],"relations":{"contrastWith":["cascader","drill-down-navigation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Miller columns","url":"https://en.wikipedia.org/wiki/Miller_columns"}],"demo":"inline","useWhen":"browsing a deep hierarchy with the path kept visible"},{"name":"Mini cart","slug":"mini-cart","category":"pattern","status":"published","definition":"A compact view of the basket opened from the cart icon, confirming what was just added and offering checkout without leaving the current page.","aliases":[{"name":"cart drawer","source":"community"},{"name":"slide-out cart","source":"community"},{"name":"cart preview","source":"community"},{"name":"basket flyout","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["drawer","save-for-later"],"variantOf":[],"partOf":[],"seeAlso":["order-summary"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the small basket panel that opens from the cart icon"},{"name":"Minimalism","slug":"minimalism","category":"aesthetic","status":"published","definition":"A style that reduces an interface to one typeface, one accent color, and generous empty space, letting whitespace rather than ornament carry hierarchy.","aliases":[{"name":"minimalist web design"},{"name":"minimal UI"},{"name":"reductive design"},{"name":"clean UI","source":"daisyui"},{"name":"exaggerated minimalism","source":"uistyleguide"}],"tags":[],"relations":{"contrastWith":["maximalism","flat-design","e-ink-aesthetic","swiss-style"],"variantOf":[],"partOf":[],"seeAlso":["whitespace"]},"implementations":[],"sources":[{"title":"Superdesign: UI style catalog","url":"https://superdesign.dev/styles"},{"title":"Zoviz: Minimalist vs Maximalist Web Design","url":"https://zoviz.com/blog/minimalist-vs-maximalist-web-design"}],"demo":"inline","useWhen":"hierarchy carried by space, not by decoration"},{"name":"Minimap","slug":"minimap","category":"component","status":"published","definition":"A shrunken overview of a long document or canvas beside the scrollbar, with a box showing which part is currently on screen.","aliases":[{"name":"code minimap","source":"community"},{"name":"overview ruler","source":"community"},{"name":"document map","source":"community"},{"name":"navigator","source":"community"}],"tags":[],"relations":{"contrastWith":["overview-plus-detail","semantic-zoom"],"variantOf":[],"partOf":[],"seeAlso":["scrollbar","code-editor"]},"implementations":[],"sources":[{"title":"NameThatUI element index","url":"https://namethatui.com/"}],"demo":"inline","useWhen":"a zoomed out map of a long document or canvas"},{"name":"Misdirection","slug":"misdirection","category":"pattern","status":"published","definition":"Using contrast, size, and position to pull attention to the option the business prefers while the other option is present but visually demoted.","aliases":[{"name":"visual interference","source":"deceptive-design"},{"name":"false hierarchy","source":"community"},{"name":"attention misdirection","source":"community"},{"name":"greyed-out decline","source":"community"}],"tags":[],"relations":{"contrastWith":["trick-wording","confirmshaming","disguised-ad"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Visual interference","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the choice you want is there but styled to be missed"},{"name":"Mixed state checkbox","slug":"mixed-state-checkbox","category":"accessibility","status":"published","definition":"A checkbox showing a third, indeterminate state when only some of the boxes it governs are checked.","aliases":[{"name":"indeterminate checkbox","source":"html"},{"name":"tri-state checkbox","source":"community"},{"name":"partial checkbox","source":"community"},{"name":"aria-checked mixed","source":"aria"},{"name":"dash checkbox","source":"community"}],"tags":["selection"],"relations":{"contrastWith":["checkbox"],"variantOf":[],"partOf":[],"seeAlso":["treeview"]},"implementations":[],"sources":[{"title":"MDN: aria-checked","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-checked"},{"title":"APG patterns: Checkbox","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"a parent box stands over a partly checked group"},{"name":"Mobile first","slug":"mobile-first","category":"layout","status":"published","definition":"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.","aliases":[{"name":"mobile-first design","source":"community"},{"name":"min-width first","source":"community"},{"name":"progressive enhancement of layout","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["responsive-upscaling"],"variantOf":[],"partOf":[],"seeAlso":["breakpoint","thumb-zone"]},"implementations":[],"sources":[{"title":"Multi-Device Layout Patterns, LukeW","url":"https://www.lukew.com/ff/entry.asp?1514="}],"demo":"inline","useWhen":"which end of the range you start designing from"},{"name":"Modal dialog","slug":"modal-dialog","category":"component","status":"published","definition":"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.","aliases":[{"name":"modal"}],"tags":[],"relations":{"contrastWith":["popover","drawer","alert-dialog","quick-view","bottom-sheet"],"variantOf":[],"partOf":[],"seeAlso":["focus-trap","inert","initial-focus","scrim","lightbox","top-layer","interstitial"]},"implementations":[{"system":"aria-apg","name":"Dialog (Modal)","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"},{"system":"material","name":"Dialogs","url":"https://m3.material.io/components/dialogs/overview"},{"system":"radix","name":"Dialog","url":"https://www.radix-ui.com/primitives/docs/components/dialog"},{"system":"base-ui","name":"Dialog","url":"https://base-ui.com/react/components/dialog"}],"sources":[{"title":"ARIA Authoring Practices Guide: Dialog (Modal) pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"},{"title":"Nielsen Norman Group: Modal and nonmodal dialogs","url":"https://www.nngroup.com/articles/modal-nonmodal-dialog/"}],"demo":"inline","useWhen":"a window that blocks the page until it is dealt with"},{"name":"Modal presentation","slug":"modal-presentation","category":"motion","status":"published","definition":"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.","aliases":[{"name":"cover vertical","source":"uikit"},{"name":"sheet presentation","source":"hig"},{"name":"slide-up modal","source":"community"},{"name":"modality transition","source":"hig"},{"name":"page sheet","source":"uikit"}],"tags":[],"relations":{"contrastWith":["zoom-transition","push-transition"],"variantOf":[],"partOf":[],"seeAlso":["bottom-sheet"]},"implementations":[{"system":"hig","name":"Modality","url":"https://developer.apple.com/design/human-interface-guidelines/modality"}],"sources":[{"title":"Human Interface Guidelines: Modality","url":"https://developer.apple.com/design/human-interface-guidelines/modality"},{"title":"UI Terms","url":"https://uiterms.com/"}],"demo":"inline","useWhen":"a task takes over the screen and must be dismissible"},{"name":"Model selector","slug":"model-selector","category":"component","status":"published","definition":"The control in an assistant interface that picks which model answers, usually a menu carrying a short description of each option.","aliases":[{"name":"model picker","source":"community"},{"name":"model switcher","source":"community"},{"name":"engine selector","source":"community"}],"tags":["ai"],"relations":{"contrastWith":["select"],"variantOf":[],"partOf":[],"seeAlso":["prompt-input","segmented-control"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"choosing which model answers the request"},{"name":"Modifier key","slug":"modifier-key","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"meta key","source":"community"},{"name":"qualifier key","source":"community"},{"name":"Shift, Ctrl, Alt, Cmd","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["quasimode","access-key","chorded-shortcut"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Mnemonics (keyboard)","url":"https://en.wikipedia.org/wiki/Mnemonics_(keyboard)"}],"demo":"inline","useWhen":"a held key changes what the next input does"},{"name":"Modular grid","slug":"modular-grid","category":"layout","status":"published","definition":"A grid with both columns and rows, dividing the page into equal modules that content can span in either direction.","aliases":[{"name":"module grid","source":"community"},{"name":"two dimensional grid","source":"community"},{"name":"swiss grid","source":"community"}],"tags":[],"relations":{"contrastWith":["compound-grid","bento-grid","layout-grid"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"content that needs to span rows as well as columns"},{"name":"Modular scale","slug":"modular-scale","category":"typography","status":"published","definition":"A type scale generated by multiplying a base size by a fixed ratio, so every step is proportionally related to the one before it.","aliases":[{"name":"ratio-based type scale"},{"name":"major third scale"},{"name":"perfect fourth scale"}],"tags":["tokens"],"relations":{"contrastWith":["golden-ratio","type-scale","fluid-typography"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"What the Font are Vertical Rhythm and Modular Scale?","url":"https://www.bounteous.com/insights/2018/03/26/what-font-are-vertical-rhythm-and-modular-scale/"}],"demo":"inline","useWhen":"generating sizes from a ratio instead of picking them"},{"name":"Momentum scrolling","slug":"momentum-scrolling","category":"interaction","status":"published","definition":"Content that keeps moving after the finger lifts, decelerating as though it had mass, so one flick can travel a long way.","aliases":[{"name":"inertial scrolling","source":"community"},{"name":"kinetic scrolling","source":"community"},{"name":"scroll momentum","source":"community"},{"name":"flick scrolling","source":"community"}],"tags":["scroll","touch"],"relations":{"contrastWith":["overscroll","smooth-scrolling","fling"],"variantOf":[],"partOf":[],"seeAlso":["scroll-snap"]},"implementations":[],"sources":[{"title":"MDN: Basic concepts of scroll snap","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap/Basic_concepts"}],"demo":"inline","useWhen":"scrolling that coasts after the gesture ends"},{"name":"Monochromatic palette","slug":"monochromatic-palette","category":"color","status":"published","definition":"A scheme drawn from one hue at many lightness and saturation levels, so hierarchy comes from contrast alone rather than from colour difference.","aliases":[{"name":"monochrome","source":"community"},{"name":"single hue palette"},{"name":"one color scheme","source":"community"}],"tags":[],"relations":{"contrastWith":["color-ramp","analogous-colors","duotone"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"The Ultimate Color Glossary For UI Designers","url":"https://careerfoundry.com/en/blog/ui-design/color-glossary-for-ui-designers/"}],"demo":"inline","useWhen":"one hue carrying the whole interface"},{"name":"Monospace","slug":"monospace","category":"typography","status":"published","definition":"A typeface in which every character occupies the same horizontal width, so characters stack into columns down the page.","aliases":[{"name":"monospaced"},{"name":"fixed-width font"},{"name":"typewriter font"},{"name":"code font"}],"tags":[],"relations":{"contrastWith":["tabular-figures"],"variantOf":[],"partOf":[],"seeAlso":["terminal-aesthetic","code-editor"]},"implementations":[],"sources":[{"title":"Monospaced (Google Fonts Knowledge)","url":"https://fonts.google.com/knowledge/glossary/monospaced"},{"title":"Monospaced fonts (Practical Typography)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"code, terminals, or anything that must line up in columns"},{"name":"Morph transition","slug":"morph-transition","category":"motion","status":"published","definition":"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.","aliases":[{"name":"morph","source":"community"},{"name":"shape morph","source":"community"},{"name":"path morphing","source":"gsap"},{"name":"SVG morph","source":"community"}],"tags":[],"relations":{"contrastWith":["view-transition","cloning","gooey-effect","line-drawing-animation"],"variantOf":[],"partOf":[],"seeAlso":["icon-morph","card-flip"]},"implementations":[],"sources":[{"title":"GSAP: Flip plugin","url":"https://gsap.com/docs/v3/Plugins/Flip/"}],"demo":"inline","useWhen":"two states are the same object in different forms"},{"name":"Morphing control","slug":"morphing-controls","category":"pattern","status":"published","definition":"One control that changes what it says and does according to state, showing play when paused and pause when playing rather than offering both.","aliases":[{"name":"state-dependent button","source":"community"},{"name":"multifunctional control","source":"goodui"}],"tags":[],"relations":{"contrastWith":["segmented-control","progressive-reduction"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: Morphing Controls","url":"https://ui-patterns.com/patterns/morphing-controls"},{"title":"GoodUI: Try multifunctional controls instead of more parts","url":"https://goodui.org/"}],"demo":"inline","useWhen":"one button that becomes the next action each time"},{"name":"Mostly fluid","slug":"mostly-fluid","category":"layout","status":"published","definition":"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.","aliases":[{"name":"mostly fluid pattern","source":"community"}],"tags":[],"relations":{"contrastWith":["column-drop","layout-shifter","tiny-tweaks"],"variantOf":["responsive-web-design"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Multi-Device Layout Patterns, LukeW","url":"https://www.lukew.com/ff/entry.asp?1514="}],"demo":"inline","useWhen":"one grid that just widens, then caps"},{"name":"Motion actuation","slug":"motion-actuation","category":"accessibility","status":"published","definition":"Triggering a function by moving the device itself, such as shake to undo, which needs a plain control alternative and an off switch.","aliases":[{"name":"device motion trigger","source":"community"},{"name":"tilt gesture","source":"community"}],"tags":[],"relations":{"contrastWith":["shake-to-undo","pointer-gestures"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Motion Actuation","url":"https://www.w3.org/TR/WCAG22/#motion-actuation"}],"demo":"inline","useWhen":"the gesture is a shake or tilt of the device"},{"name":"Motion blur","slug":"motion-blur","category":"motion","status":"published","definition":"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.","aliases":[{"name":"directional blur","source":"community"},{"name":"blur transition","source":"community"},{"name":"speed blur","source":"community"}],"tags":[],"relations":{"contrastWith":["progressive-blur","velocity-skew"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"},{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"}],"demo":"inline","useWhen":"something moves fast enough that a sharp frame looks wrong"},{"name":"Motion path","slug":"motion-path","category":"motion","status":"published","definition":"A defined path an element travels along, with its distance and rotation along that path animated instead of its x and y positions.","aliases":[{"name":"offset-path","source":"css"},{"name":"CSS Motion Path","source":"css"},{"name":"path animation","source":"community"},{"name":"follow path","source":"community"}],"tags":[],"relations":{"contrastWith":["orbit-animation","arc-motion"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: offset-path","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path"}],"demo":"inline","useWhen":"an element should follow a specific route"},{"name":"Motion token","slug":"motion-token","category":"motion","status":"published","definition":"A named duration or easing value published by a design system, so timings are chosen from a set rather than typed per component.","aliases":[{"name":"duration token","source":"material"},{"name":"easing token","source":"material"},{"name":"motion curve","source":"fluent"},{"name":"emphasized easing","source":"material"},{"name":"motion scheme","source":"material"},{"name":"spatial token","source":"material"},{"name":"effects token","source":"material"}],"tags":["tokens"],"relations":{"contrastWith":["asymmetric-easing"],"variantOf":[],"partOf":[],"seeAlso":["material-3-expressive","duration"]},"implementations":[{"system":"material","name":"Easing and duration tokens","url":"https://m3.material.io/styles/motion/easing-and-duration/tokens-specs"},{"system":"fluent","name":"Motion","url":"https://fluent2.microsoft.design/motion"}],"sources":[{"title":"Material Design 3: easing and duration tokens","url":"https://m3.material.io/styles/motion/easing-and-duration/tokens-specs"},{"title":"Carbon Design System: motion overview","url":"https://carbondesignsystem.com/elements/motion/overview/"}],"demo":"inline","useWhen":"timings should be system decisions, not per-component ones"},{"name":"Mouse gesture","slug":"mouse-gesture","category":"interaction","status":"published","definition":"A command issued by the shape of a pointer stroke, usually with a button held, so a movement stands in for a menu choice.","aliases":[{"name":"rocker gesture","source":"community"},{"name":"gesture navigation","source":"community"},{"name":"stroke gesture","source":"community"}],"tags":[],"relations":{"contrastWith":["marking-menu"],"variantOf":[],"partOf":[],"seeAlso":["pointer-gestures"]},"implementations":[],"sources":[{"title":"Wikipedia: Pie menu","url":"https://en.wikipedia.org/wiki/Pie_menu"}],"demo":"inline","useWhen":"a drawn stroke that means a command"},{"name":"Multi column layout","slug":"multi-column-layout","category":"layout","status":"published","definition":"An application shell with three or more vertical regions, typically navigation, a list, and a reading pane, as in a mail client.","aliases":[{"name":"three pane layout","source":"community"},{"name":"tri-pane","source":"community"},{"name":"inbox layout","source":"community"},{"name":"multi-column layouts","source":"tailwind"},{"name":"folder pane","source":"community"}],"tags":[],"relations":{"contrastWith":["text-columns","holy-grail-layout","list-detail"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Multi-Column Layouts, Tailwind UI","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/multi-column"}],"demo":"inline","useWhen":"three regions at once: navigate, list, read"},{"name":"Multi select","slug":"multi-select","category":"component","status":"published","definition":"A select that accepts several values at once, usually showing the chosen ones as removable tokens inside the field.","aliases":[{"name":"multiselect","source":"cloudscape"},{"name":"tag picker","source":"fluent"},{"name":"multi combobox","source":"community"}],"tags":["forms","selection"],"relations":{"contrastWith":["combobox","tag-input","listbox","transfer-list"],"variantOf":[],"partOf":[],"seeAlso":["range-select"]},"implementations":[{"system":"fluent","name":"Tag picker","url":"https://fluent2.microsoft.design/components/web/react"}],"sources":[{"title":"Cloudscape: components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"one field, several answers"},{"name":"Multi-touch","slug":"multi-touch","category":"interaction","status":"published","definition":"Input from more than one simultaneous contact point, letting a surface distinguish two-finger scrolling, pinching, rotating and larger finger counts.","aliases":[{"name":"multitouch","source":"community"},{"name":"multifinger gesture","source":"hig"},{"name":"two-finger gesture","source":"material"}],"tags":["touch"],"relations":{"contrastWith":["pointer-gestures"],"variantOf":[],"partOf":[],"seeAlso":["escape-gesture","magic-tap"]},"implementations":[],"sources":[{"title":"MDN: Pointer events","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"},{"title":"Material Design: Gestures","url":"https://m1.material.io/patterns/gestures.html"}],"demo":"inline","useWhen":"naming input that depends on more than one finger at once"},{"name":"Multi-window mode","slug":"multi-window-mode","category":"layout","status":"published","definition":"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.","aliases":[{"name":"split-screen mode","source":"android"},{"name":"freeform windowing","source":"android"},{"name":"desktop windowing","source":"android"},{"name":"multitasking layout","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["spanned-layout","split-view"],"variantOf":[],"partOf":[],"seeAlso":["picture-in-picture"]},"implementations":[],"sources":[{"title":"Support multi-window mode, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/support-multi-window-mode"}],"demo":"inline","useWhen":"the app is only part of the screen"},{"name":"Multimodal interface","slug":"multimodal-interface","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"multimodal UX"},{"name":"voice-first","source":"uistyleguide"},{"name":"voice user interface"},{"name":"VUI"},{"name":"multimodal UI"}],"tags":["ai"],"relations":{"contrastWith":["voice-control","generative-ui","zero-ui"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"NN/g: Voice First, the future of interaction?","url":"https://www.nngroup.com/articles/voice-first/"},{"title":"UXmatters: Voice first versus the multimodal user interfaces of the future","url":"https://www.uxmatters.com/mt/archives/2018/10/voice-first-versus-the-multimodal-user-interfaces-of-the-future.php"}],"demo":"inline","useWhen":"voice, touch, and screen share one interaction"},{"name":"Nagging","slug":"nagging","category":"pattern","status":"published","definition":"Interrupting a task again and again with the same request, so that agreeing becomes the cheapest way to be left alone.","aliases":[{"name":"persistent prompt","source":"community"},{"name":"prompt fatigue","source":"community"},{"name":"repeat ask","source":"community"},{"name":"maybe later loop","source":"community"}],"tags":[],"relations":{"contrastWith":["permission-priming","friend-spam"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":["rating-prompt"]},"implementations":[],"sources":[{"title":"Deceptive Design: Nagging","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the same prompt keeps returning until you give in"},{"name":"Name, role, value","slug":"name-role-value","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"NRV","source":"community"},{"name":"role name value","source":"primer"}],"tags":[],"relations":{"contrastWith":["semantic-html","accessibility-trait","accessibility-annotation","accessible-name"],"variantOf":[],"partOf":[],"seeAlso":["first-rule-of-aria"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Name, Role, Value","url":"https://www.w3.org/TR/WCAG22/#name-role-value"}],"demo":"inline","useWhen":"auditing whether a custom control is really a control"},{"name":"Named color","slug":"named-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"CSS color keywords","source":"css"},{"name":"X11 colors","source":"community"},{"name":"rebeccapurple","source":"css"},{"name":"web colors","source":"community"}],"tags":[],"relations":{"contrastWith":["system-color-keyword","hex-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"},{"title":"MDN: named-color","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/named-color"}],"demo":"inline","useWhen":"the keyword colours built into CSS"},{"name":"Named grid areas","slug":"named-grid-areas","category":"layout","status":"published","definition":"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.","aliases":[{"name":"grid-template-areas","source":"css"},{"name":"named template areas","source":"mdn"},{"name":"ascii art grid","source":"mdn"},{"name":"grid area","source":"css"}],"tags":["web-platform"],"relations":{"contrastWith":["subgrid"],"variantOf":[],"partOf":[],"seeAlso":["scaffold"]},"implementations":[],"sources":[{"title":"Grid template areas, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_template_areas"}],"demo":"inline","useWhen":"placing items by name instead of by number"},{"name":"Named instance","slug":"named-instance","category":"typography","status":"published","definition":"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.","aliases":[{"name":"instance"},{"name":"static instance"},{"name":"predefined instance"}],"tags":[],"relations":{"contrastWith":["font-weight","variable-font","variation-axis"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Designing with Variable Fonts","url":"https://variablefonts.io/about-variable-fonts/"},{"title":"Variations (FontLab manual)","url":"https://help.fontlab.com/fontlab/7/manual/Variable-Fonts/"}],"demo":"inline","useWhen":"picking a named style out of a variable font"},{"name":"Natural language interface","slug":"natural-language-interface","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"NLI"},{"name":"natural language UI"},{"name":"NLUI"},{"name":"language user interface"}],"tags":["ai"],"relations":{"contrastWith":["generative-ui"],"variantOf":[],"partOf":[],"seeAlso":["prompt-input"]},"implementations":[],"sources":[{"title":"Wikipedia: Natural-language user interface","url":"https://en.wikipedia.org/wiki/Natural-language_user_interface"}],"demo":"inline","useWhen":"the input is a sentence, not a selection"},{"name":"Navigation bar","slug":"navigation-bar","category":"component","status":"published","definition":"The horizontal strip of primary destinations across the top of a site, usually holding the logo, the main sections and an account control.","aliases":[{"name":"navbar","source":"bootstrap"},{"name":"top navigation","source":"cloudscape"},{"name":"site header","source":"community"},{"name":"nav","source":"fluent"},{"name":"global header","source":"community"},{"name":"header","source":"component-gallery"}],"tags":["navigation"],"relations":{"contrastWith":["bottom-navigation","toolbar","sticky-header","menu-bar","sidebar","app-bar"],"variantOf":[],"partOf":[],"seeAlso":["hamburger-menu","current-page-indicator"]},"implementations":[{"system":"aria-apg","name":"Navigation landmark","url":"https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html"},{"system":"carbon","name":"UI shell header","url":"https://carbondesignsystem.com/components/UI-shell-header/usage/"},{"system":"radix","name":"Navigation Menu","url":"https://www.radix-ui.com/primitives/docs/components/navigation-menu"},{"system":"base-ui","name":"Navigation Menu","url":"https://base-ui.com/react/components/navigation-menu"},{"system":"shadcn","name":"Navigation Menu","url":"https://ui.shadcn.com/docs/components/navigation-menu"}],"sources":[{"title":"Cloudscape: Top navigation","url":"https://cloudscape.design/components/top-navigation/"},{"title":"ARIA Authoring Practices Guide: Landmark regions","url":"https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/"}],"demo":"inline","useWhen":"the top strip of site level destinations"},{"name":"Navigation menu","slug":"navigation-menu","category":"component","status":"published","definition":"A menu of destinations rather than commands, where opening an item moves you somewhere instead of running an action.","aliases":[{"name":"nav menu","source":"community"},{"name":"nav list","source":"primer"}],"tags":["navigation"],"relations":{"contrastWith":["action-list","mega-menu"],"variantOf":[],"partOf":[],"seeAlso":["sidebar"]},"implementations":[{"system":"base-ui","name":"Navigation Menu","url":"https://base-ui.com/react/components/navigation-menu"}],"sources":[{"title":"Navigation Menu, Base UI","url":"https://base-ui.com/react/components/navigation-menu"}],"demo":"inline","useWhen":"a menu whose items are places, not commands"},{"name":"Navigation rail","slug":"navigation-rail","category":"component","status":"published","definition":"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.","aliases":[{"name":"activity bar","source":"vscode"},{"name":"icon rail"},{"name":"rail"},{"name":"icon sidebar"},{"name":"mini drawer"}],"tags":["navigation"],"relations":{"contrastWith":["sidebar","bottom-navigation","dock"],"variantOf":[],"partOf":[],"seeAlso":["drawer"]},"implementations":[{"system":"material","name":"Navigation rail","url":"https://m3.material.io/components/navigation-rail/guidelines"}],"sources":[{"title":"Navigation rail, Material Design 3","url":"https://m3.material.io/components/navigation-rail/guidelines"}],"demo":"inline","useWhen":"top level navigation on a medium width window"},{"name":"Neo-skeuomorphism","slug":"neo-skeuomorphism","category":"aesthetic","status":"published","definition":"The current return of depth and material to interfaces, using restrained texture, shadow, and highlight instead of literal leather, metal, and felt.","aliases":[{"name":"modern skeuomorphism"},{"name":"tactile UI","source":"community"},{"name":"skeuomorphism revival"},{"name":"new skeuomorphic"}],"tags":[],"relations":{"contrastWith":["skeuomorphism","flat-design-2","claymorphism","neumorphism"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Userology: Flat design is dead, the rise of neo-skeuomorphism","url":"https://www.userology.co/blogs/neo-skeuomorphism-ui-trends-2026-spatial"},{"title":"Versions: The evolution of skeuomorphism","url":"https://versions.com/design/the-evolution-of-skeuomorphism-claymorphism-neumorphism-and-the-return-of-tactile-interfaces/"}],"demo":"inline","useWhen":"depth is back, but abstracted rather than literal"},{"name":"Neon glow","slug":"neon-glow","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"glow effect"},{"name":"outer glow","source":"photoshop"},{"name":"neon text"},{"name":"bloom"},{"name":"text glow","source":"community"}],"tags":[],"relations":{"contrastWith":["gradient-border","letterpress-text","specular-highlight"],"variantOf":[],"partOf":[],"seeAlso":["spotlight-hover","cyberpunk-ui"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"type or borders that look lit rather than filled"},{"name":"Nested interactive","slug":"nested-interactive","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"interactive controls must not be nested","source":"deque"},{"name":"button in a link","source":"community"},{"name":"clickable card problem","source":"community"}],"tags":[],"relations":{"contrastWith":["card","click-through","button-versus-link"],"variantOf":[],"partOf":[],"seeAlso":["hit-testing"]},"implementations":[],"sources":[{"title":"Deque: Interactive controls must not be nested","url":"https://dequeuniversity.com/rules/axe/4.8/nested-interactive"},{"title":"WCAG 2.2: Name, Role, Value","url":"https://www.w3.org/TR/WCAG22/#name-role-value"}],"demo":"inline","useWhen":"a whole card is clickable and so is its button"},{"name":"Neubrutalism","slug":"neubrutalism","category":"aesthetic","status":"published","definition":"A loud style built from thick black outlines, saturated flat color, square corners, and hard offset shadows with zero blur.","aliases":[{"name":"neobrutalism","source":"nngroup"},{"name":"neo-brutalism"},{"name":"new brutalism"},{"name":"hard shadow style","source":"community"},{"name":"sticker UI","source":"community"}],"tags":[],"relations":{"contrastWith":["flat-design","brutalist-web-design","long-shadow"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"NN/g: Neobrutalism: Definition and Best Practices","url":"https://www.nngroup.com/articles/neobrutalism/"},{"title":"NameThatUI: Neobrutalism","url":"https://namethatui.com/styles/neobrutalism"}],"demo":"inline","useWhen":"black outline plus a hard unblurred shadow"},{"name":"Neumorphism","slug":"neumorphism","category":"aesthetic","status":"published","definition":"A style where controls look extruded from or pressed into one background colour, shaped only by soft light and shadow.","aliases":[{"name":"soft UI"},{"name":"neumorphic design"}],"tags":[],"relations":{"contrastWith":["glassmorphism","claymorphism","neo-skeuomorphism","flat-design"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Neumorphism.io: CSS shadow generator","url":"https://neumorphism.io/"},{"title":"Understanding WCAG 2.2: non-text contrast","url":"https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html"}],"demo":"inline","useWhen":"controls extruded from one flat background colour"},{"name":"Neutral palette","slug":"neutral-palette","category":"color","status":"published","definition":"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.","aliases":[{"name":"greyscale","source":"community"},{"name":"grayscale","source":"community"},{"name":"gray ramp","source":"community"},{"name":"neutral ramp","source":"fluent"},{"name":"slate scale","source":"radix"}],"tags":[],"relations":{"contrastWith":["tinted-neutral","color-ramp"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Carbon: color","url":"https://carbondesignsystem.com/elements/color/overview/"}],"demo":"inline","useWhen":"the greys that most of the interface is actually made of"},{"name":"New Wave design","slug":"new-wave-design","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"Swiss punk"},{"name":"New Wave typography"},{"name":"Weingart style","source":"community"},{"name":"postmodern typography"}],"tags":[],"relations":{"contrastWith":["anti-design","grunge-design","swiss-style"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Hue and Eye: New Wave graphic design explained","url":"https://www.hueandeye.org/new-wave-graphic-design/"},{"title":"Wikipedia: Wolfgang Weingart","url":"https://en.wikipedia.org/wiki/Wolfgang_Weingart"}],"demo":"inline","useWhen":"the Swiss grid kept but deliberately violated"},{"name":"No results state","slug":"no-results-state","category":"pattern","status":"published","definition":"What a search or filtered list shows when nothing matched, naming the query, explaining why, and offering a way to loosen the constraints.","aliases":[{"name":"zero results","source":"community"},{"name":"no matches","source":"community"},{"name":"empty search results","source":"community"},{"name":"null state","source":"community"}],"tags":["search"],"relations":{"contrastWith":["empty-state","did-you-mean"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Cloudscape: Empty states","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"the screen shown when a search matches nothing"},{"name":"Non-breaking space","slug":"non-breaking-space","category":"typography","status":"published","definition":"A space that renders normally but forbids a line break, gluing two words together so they never end up on separate lines.","aliases":[{"name":"nbsp","source":"html"},{"name":"hard space"},{"name":"fixed space"},{"name":"no-break space"}],"tags":[],"relations":{"contrastWith":["word-spacing","zero-width-space"],"variantOf":[],"partOf":[],"seeAlso":["en-dash"]},"implementations":[],"sources":[{"title":"Nonbreaking spaces (Practical Typography)","url":"https://practicaltypography.com/nonbreaking-spaces.html"},{"title":"Non-Breaking Space and Soft Hyphen (Tilda)","url":"https://help.tilda.cc/unbroken-space"}],"demo":"inline","useWhen":"keeping a number and its unit on one line"},{"name":"Non-text contrast","slug":"non-text-contrast","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"1.4.11","source":"wcag"},{"name":"UI component contrast","source":"community"},{"name":"3:1","source":"wcag"},{"name":"graphical object contrast","source":"wcag"}],"tags":[],"relations":{"contrastWith":["contrast-ratio","focus-appearance"],"variantOf":[],"partOf":[],"seeAlso":["forced-colors-mode"]},"implementations":[],"sources":[{"title":"Understanding Success Criterion 1.4.11: Non-text Contrast","url":"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html"}],"demo":"inline","useWhen":"contrast for controls and icons rather than text"},{"name":"Notification center","slug":"notification-center","category":"component","status":"published","definition":"A panel collecting notifications that were missed or kept, usually opened from a bell with an unread count.","aliases":[{"name":"notification tray","source":"community"},{"name":"activity center","source":"community"},{"name":"notification drawer","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":["notification-digest"],"variantOf":[],"partOf":[],"seeAlso":["push-notification","activity-feed","live-activity","menu-bar-extra","banner"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers: patterns","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"the panel behind the bell icon"},{"name":"Notification digest","slug":"notification-digest","category":"pattern","status":"published","definition":"Collecting many similar alerts into one summary rather than delivering each, so the count rises but the number of interruptions does not.","aliases":[{"name":"notification grouping","source":"community"},{"name":"notification bundling","source":"community"},{"name":"batched notifications","source":"community"},{"name":"summary notification","source":"android"},{"name":"notification summary","source":"hig"}],"tags":["messaging"],"relations":{"contrastWith":["notification-center","activity-feed"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"many alerts arrive as one grouped summary"},{"name":"Nudge","slug":"nudge","category":"interaction","status":"published","definition":"Moving or changing a value by one small fixed step with an arrow key, with a modifier switching to a larger step.","aliases":[{"name":"arrow key nudge","source":"community"},{"name":"big nudge","source":"community"},{"name":"step","source":"community"},{"name":"increment","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["stepper","key-repeat"],"variantOf":[],"partOf":[],"seeAlso":["snapping","scrubby-slider"]},"implementations":[],"sources":[{"title":"Figma Learn: Adjust alignment, rotation, position, and dimensions","url":"https://help.figma.com/hc/en-us/articles/360039956914-Adjust-alignment-rotation-position-and-dimensions"}],"demo":"inline","useWhen":"moving something by exact steps with the keyboard"},{"name":"Object fit","slug":"object-fit","category":"layout","status":"published","definition":"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.","aliases":[{"name":"aspect fill","source":"community"},{"name":"aspect fit","source":"community"},{"name":"scale to fill","source":"community"}],"tags":["media","web-platform"],"relations":{"contrastWith":["aspect-ratio-box","letterboxing"],"variantOf":[],"partOf":[],"seeAlso":["justified-gallery"]},"implementations":[],"sources":[{"title":"object-fit, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}],"demo":"inline","useWhen":"choosing between cropping and letterboxing"},{"name":"Oblique","slug":"oblique","category":"typography","status":"published","definition":"An upright typeface slanted to the right without redrawing its letters, which is why it lacks the cursive forms a true italic has.","aliases":[{"name":"slanted"},{"name":"sloped roman"},{"name":"slnt axis","source":"opentype"}],"tags":[],"relations":{"contrastWith":["faux-bold","italic"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"},{"title":"OpenType Design-Variation Axis Tag Registry","url":"https://learn.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg"}],"demo":"inline","useWhen":"distinguishing a slanted roman from a real italic"},{"name":"Obstruction","slug":"obstruction","category":"pattern","status":"published","definition":"Putting deliberate hurdles in front of an action the business does not want taken, so the effort itself does the discouraging.","aliases":[{"name":"friction by design","source":"community"},{"name":"intentional friction","source":"community"},{"name":"manage preferences maze","source":"community"}],"tags":[],"relations":{"contrastWith":["roach-motel","privacy-zuckering"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Obstruction","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the path exists but is made exhausting on purpose"},{"name":"Off canvas","slug":"off-canvas","category":"layout","status":"published","definition":"Keeping secondary regions parked outside the viewport and sliding them in on demand, instead of stacking them below the main content.","aliases":[{"name":"off-canvas navigation","source":"community"},{"name":"slide-in panel","source":"community"},{"name":"off canvas menu","source":"community"},{"name":"offcanvas","source":"bootstrap"}],"tags":["navigation"],"relations":{"contrastWith":["sidebar"],"variantOf":["responsive-web-design"],"partOf":[],"seeAlso":["drawer"]},"implementations":[],"sources":[{"title":"Multi-Device Layout Patterns, LukeW","url":"https://www.lukew.com/ff/entry.asp?1514="}],"demo":"inline","useWhen":"secondary panels parked off screen until called"},{"name":"Offline indicator","slug":"offline-indicator","category":"pattern","status":"published","definition":"A persistent notice that the product has lost its connection, saying what still works, what is queued, and when the last sync happened.","aliases":[{"name":"connection status bar","source":"community"},{"name":"you are offline","source":"community"},{"name":"sync status","source":"community"},{"name":"stale data indicator","source":"community"},{"name":"reconnecting banner","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["toast"],"variantOf":[],"partOf":[],"seeAlso":["optimistic-ui","status-message"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the bar telling you the app is working offline"},{"name":"OKLCH","slug":"oklch","category":"color","status":"published","definition":"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.","aliases":[{"name":"Oklab","source":"css"},{"name":"LCH","source":"css"},{"name":"perceptual color notation","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["perceptual-uniformity","hct","hex-color"],"variantOf":[],"partOf":[],"seeAlso":["color-space"]},"implementations":[],"sources":[{"title":"MDN: oklch()","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch"},{"title":"CSS Color Module Level 4","url":"https://www.w3.org/TR/css-color-4/"}],"demo":"inline","useWhen":"writing colour so that equal numeric steps look equal"},{"name":"Oldstyle figures","slug":"oldstyle-figures","category":"typography","status":"published","definition":"Numerals with varying heights, some rising and some dropping below the baseline, so numbers blend into lowercase running text.","aliases":[{"name":"old style figures"},{"name":"text figures"},{"name":"lowercase numerals"},{"name":"hanging figures"},{"name":"onum","source":"opentype"}],"tags":[],"relations":{"contrastWith":["tabular-figures","lining-figures"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"OpenType at Work: Figure Styles (Type Network)","url":"https://typenetwork.com/articles/opentype-at-work-figure-styles"},{"title":"Practical Typography (Matthew Butterick)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"numbers inside a sentence, not in a table"},{"name":"On-color","slug":"on-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"onPrimary","source":"material"},{"name":"on-surface","source":"material"},{"name":"contrast color","source":"community"},{"name":"foreground pair","source":"community"}],"tags":["tokens"],"relations":{"contrastWith":["emphasis-level","currentcolor"],"variantOf":[],"partOf":[],"seeAlso":["contrast-ratio"]},"implementations":[{"system":"material","name":"On primary, On surface, On error","url":"https://m3.material.io/styles/color/roles"}],"sources":[{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"}],"demo":"inline","useWhen":"the foreground colour that ships paired with a fill"},{"name":"Onboarding checklist","slug":"onboarding-checklist","category":"pattern","status":"published","definition":"A persistent list of setup tasks with completion state and a progress meter, kept available so the reader can return to unfinished steps.","aliases":[{"name":"getting started checklist","source":"community"},{"name":"setup checklist","source":"community"},{"name":"task list","source":"govuk"},{"name":"complete multiple tasks","source":"govuk"},{"name":"quick start guide","source":"community"}],"tags":["gamification","onboarding"],"relations":{"contrastWith":["step-indicator","onboarding-tour"],"variantOf":[],"partOf":[],"seeAlso":["first-run-experience","goal-gradient","zero-state"]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Complete multiple tasks","url":"https://design-system.service.gov.uk/patterns/complete-multiple-tasks/"}],"demo":"inline","useWhen":"a setup list you can leave and come back to"},{"name":"Onboarding tour","slug":"onboarding-tour","category":"pattern","status":"published","definition":"A short sequence of pointers layered over a live interface, each naming one control, advanced by the reader and skippable at any point.","aliases":[{"name":"product tour","source":"community"},{"name":"guided tour","source":"ui-patterns"},{"name":"walkthrough","source":"ui-patterns"},{"name":"playthrough","source":"ui-patterns"},{"name":"feature tour","source":"community"},{"name":"in-app tour","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["onboarding-checklist","coach-mark"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: Guided Tour","url":"https://ui-patterns.com/patterns"},{"title":"Cloudscape: Onboarding","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"a stepped overlay walks you around a live screen"},{"name":"One thing per page","slug":"one-thing-per-page","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"question pages","source":"govuk"},{"name":"one question per page","source":"govuk"},{"name":"single question form","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["chunking","wizard"],"variantOf":[],"partOf":[],"seeAlso":["form","check-answers"]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Question pages","url":"https://design-system.service.gov.uk/patterns/question-pages/"}],"demo":"inline","useWhen":"each form screen asks exactly one question"},{"name":"One-time code login","slug":"one-time-code-login","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"OTP","source":"community"},{"name":"email OTP","source":"community"},{"name":"verification code","source":"community"},{"name":"six digit code","source":"community"},{"name":"two-factor code","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["accessible-authentication","magic-link","social-login"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"you type a six digit code sent by mail or text"},{"name":"Opacity","slug":"opacity","category":"color","status":"published","definition":"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.","aliases":[{"name":"transparency","source":"community"},{"name":"translucency","source":"community"}],"tags":[],"relations":{"contrastWith":["lightness","alpha-channel","blend-mode","emphasis-level"],"variantOf":[],"partOf":[],"seeAlso":["fade"]},"implementations":[],"sources":[{"title":"Alpha Compositing","url":"https://ciechanow.ski/alpha-compositing/"}],"demo":"inline","useWhen":"fading an entire element and everything inside it"},{"name":"OpenType features","slug":"opentype-features","category":"typography","status":"published","definition":"Optional glyph substitutions and spacing rules packed inside a font file, addressed by four-letter tags and switched on from CSS.","aliases":[{"name":"font features"},{"name":"feature tags"},{"name":"font-feature-settings","source":"css"},{"name":"OpenType"}],"tags":[],"relations":{"contrastWith":["stylistic-set","contextual-alternates","ligature"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"OpenType font features (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/OpenType_fonts"},{"title":"OpenType Features (Fonts.com)","url":"https://www.fonts.com/content/learning/fyti/using-type-tools/opentype-features"}],"demo":"inline","useWhen":"reaching for a font capability that is off by default"},{"name":"Optical alignment","slug":"optical-alignment","category":"layout","status":"published","definition":"Nudging an element off its measured position so it looks aligned, correcting for shapes whose bounding box lies about their visual centre.","aliases":[{"name":"optical adjustment","source":"community"},{"name":"visual centering","source":"community"},{"name":"optical correction","source":"community"}],"tags":[],"relations":{"contrastWith":["keyline","text-box-trim"],"variantOf":[],"partOf":[],"seeAlso":["visual-balance","hanging-punctuation"]},"implementations":[],"sources":[{"title":"Spacing, Atlassian Design","url":"https://atlassian.design/foundations/spacing"}],"demo":"inline","useWhen":"it measures right but still looks wrong"},{"name":"Optical kerning","slug":"optical-kerning","category":"typography","status":"published","definition":"Letting software space letter pairs by looking at their shapes, instead of using the pair values the type designer built into the font.","aliases":[{"name":"optical spacing","source":"adobe"}],"tags":[],"relations":{"contrastWith":["kerning","tracking"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Metrics vs. optical spacing (Practical Typography)","url":"https://practicaltypography.com/metrics-vs-optical-spacing.html"}],"demo":"inline","useWhen":"a font's own spacing is unreliable at display size"},{"name":"Optical size","slug":"optical-size","category":"typography","status":"published","definition":"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.","aliases":[{"name":"opsz","source":"opentype"},{"name":"optical sizing"},{"name":"optical scaling"},{"name":"font-optical-sizing","source":"css"}],"tags":[],"relations":{"contrastWith":["point-size","ink-trap","variation-axis"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"SF Pro Text and SF Pro Display","url":"https://developer.apple.com/design/human-interface-guidelines/typography"}],"sources":[{"title":"Optical Size axis (Google Fonts Knowledge)","url":"https://fonts.google.com/knowledge/glossary/optical_size_axis"},{"title":"opsz axis tag (OpenType spec)","url":"https://learn.microsoft.com/en-us/typography/opentype/spec/dvaraxistag_opsz"}],"demo":"inline","useWhen":"type that should be redrawn, not just scaled"},{"name":"Optimistic UI","slug":"optimistic-ui","category":"pattern","status":"published","definition":"Showing the result of an action immediately and reconciling with the server afterward, instead of making the user wait for confirmation.","aliases":[{"name":"optimistic update"}],"tags":["perceived-performance"],"relations":{"contrastWith":["skeleton-screen"],"variantOf":[],"partOf":[],"seeAlso":["toast","autosave","offline-indicator","undo"]},"implementations":[],"sources":[{"title":"React: useOptimistic","url":"https://react.dev/reference/react/useOptimistic"}],"demo":"inline","useWhen":"showing the result before the server confirms it"},{"name":"Orbit","slug":"orbit","category":"interaction","status":"published","definition":"Rotating a camera around a fixed point by dragging, so the scene appears to turn while the subject stays centred.","aliases":[{"name":"tumble","source":"community"},{"name":"arcball","source":"community"},{"name":"turntable","source":"community"},{"name":"orbit control","source":"community"}],"tags":[],"relations":{"contrastWith":["pan","rotate-gesture"],"variantOf":[],"partOf":[],"seeAlso":["pointer-lock"]},"implementations":[],"sources":[{"title":"Apple Developer: Explore game input in visionOS","url":"https://developer.apple.com/videos/play/wwdc2024/10094/"}],"demo":"inline","useWhen":"dragging to turn a 3D view around its subject"},{"name":"Orbit animation","slug":"orbit-animation","category":"motion","status":"published","definition":"One element circling another on a continuous path, used for logo constellations and loading states where the revolving is the ornament.","aliases":[{"name":"orbiting elements","source":"community"},{"name":"circular loop animation","source":"community"},{"name":"satellite animation","source":"community"}],"tags":[],"relations":{"contrastWith":["float-animation","motion-path"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"},{"title":"The Vocabulary of Motion","url":"https://motion-vocabulary.vercel.app/"}],"demo":"inline","useWhen":"elements should revolve around a fixed centre"},{"name":"Order summary","slug":"order-summary","category":"pattern","status":"published","definition":"The persistent panel beside a checkout listing items, quantities, and every cost line, kept visible so nothing about the total arrives as a surprise.","aliases":[{"name":"order recap","source":"community"},{"name":"cart summary","source":"community"},{"name":"basket summary","source":"community"},{"name":"cost breakdown","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["check-answers","confirmation-page","drip-pricing"],"variantOf":[],"partOf":[],"seeAlso":["mini-cart","express-checkout"]},"implementations":[],"sources":[{"title":"Baymard Institute: Ecommerce Checkout UX","url":"https://baymard.com/learn/checkout-flow-ux-optimization"}],"demo":"inline","useWhen":"the panel beside checkout that itemises what you will pay"},{"name":"Orientation lock","slug":"orientation-lock","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"orientation","source":"wcag"},{"name":"portrait lock","source":"community"},{"name":"landscape lock","source":"community"},{"name":"rotation lock","source":"community"}],"tags":[],"relations":{"contrastWith":["device-posture"],"variantOf":[],"partOf":[],"seeAlso":["responsive-web-design"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Success Criterion 1.3.4 Orientation","url":"https://www.w3.org/TR/WCAG22/#orientation"},{"title":"Understanding Success Criterion 1.3.4: Orientation, W3C WAI","url":"https://www.w3.org/WAI/WCAG22/Understanding/orientation.html"}],"demo":"inline","useWhen":"a layout only works one way up"},{"name":"Origin-aware animation","slug":"origin-aware-animation","category":"motion","status":"published","definition":"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.","aliases":[{"name":"transform origin","source":"css"},{"name":"animate from trigger","source":"community"},{"name":"origin-aware transition","source":"community"},{"name":"anchored entrance","source":"community"}],"tags":[],"relations":{"contrastWith":["container-transform","zoom-transition","entrance-animation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"},{"title":"The Vocabulary of Motion","url":"https://motion-vocabulary.vercel.app/"}],"demo":"inline","useWhen":"a menu should look like it came from its button"},{"name":"Ornament","slug":"ornament","category":"component","status":"published","definition":"A small panel of controls that floats just outside a window edge in visionOS, staying with the window without covering its contents.","aliases":[{"name":"window ornament","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["hud-panel"],"variantOf":[],"partOf":[],"seeAlso":["spatial-ui"]},"implementations":[{"system":"hig","name":"Ornaments","url":"https://developer.apple.com/design/human-interface-guidelines/ornaments"}],"sources":[{"title":"Apple HIG: Ornaments","url":"https://developer.apple.com/design/human-interface-guidelines/ornaments"},{"title":"Creating Ornaments in visionOS, Create with Swift","url":"https://www.createwithswift.com/creating-ornaments-in-visionos/"}],"demo":"inline","useWhen":"controls must stay reachable without eating the content"},{"name":"Orphan","slug":"orphan","category":"typography","status":"published","definition":"A first line of a paragraph left alone at the bottom of a column or page, with the rest of the paragraph carried over.","aliases":[{"name":"orphan line"},{"name":"orphaned line"}],"tags":["editorial"],"relations":{"contrastWith":["widow","runt"],"variantOf":[],"partOf":[],"seeAlso":["page-break"]},"implementations":[],"sources":[{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"}],"demo":"inline","useWhen":"naming a first line left behind at the bottom of a column"},{"name":"Outline color","slug":"outline-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"outline variant","source":"material"},{"name":"border token","source":"community"},{"name":"divider color","source":"community"},{"name":"subtle borders and separators","source":"radix"}],"tags":["tokens"],"relations":{"contrastWith":["divider","surface-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Outline, Outline variant","url":"https://m3.material.io/styles/color/roles"},{"system":"radix","name":"Steps 6 to 8, borders and focus rings","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"sources":[{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"},{"title":"Radix Colors: understanding the scale","url":"https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale"}],"demo":"inline","useWhen":"the colour of borders and dividers as a named role"},{"name":"Overflow menu","slug":"overflow-menu","category":"component","status":"published","definition":"A menu holding the actions that do not fit in the visible interface, opened from one compact trigger.","aliases":[{"name":"more menu"},{"name":"more actions"}],"tags":[],"relations":{"contrastWith":["priority-plus-navigation","toolbar","menu-button"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"carbon","name":"Overflow menu","url":"https://carbondesignsystem.com/components/overflow-menu/usage/"}],"sources":[{"title":"Overflow menu, Carbon Design System","url":"https://carbondesignsystem.com/components/overflow-menu/usage/"}],"demo":"inline","useWhen":"the actions that did not fit, behind one trigger"},{"name":"Overscan safe area","slug":"overscan-safe-area","category":"layout","status":"published","definition":"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.","aliases":[{"name":"title safe area","source":"community"},{"name":"action safe area","source":"community"},{"name":"overscan margin","source":"android"},{"name":"TV safe area","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["display-cutout"],"variantOf":[],"partOf":[],"seeAlso":["ten-foot-ui","letterboxing"]},"implementations":[],"sources":[{"title":"Layouts in the Leanback UI toolkit, Android Developers","url":"https://developer.android.com/training/tv/playback/leanback/layouts"}],"demo":"inline","useWhen":"laying out for a screen that crops its own edges"},{"name":"Overscroll","slug":"overscroll","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"overscroll affordance","source":"community"},{"name":"edge glow","source":"material"},{"name":"rubber banding","source":"community"},{"name":"bounce scrolling","source":"community"}],"tags":["scroll","touch"],"relations":{"contrastWith":["scroll-chaining","momentum-scrolling"],"variantOf":[],"partOf":[],"seeAlso":["pull-to-refresh"]},"implementations":[],"sources":[{"title":"MDN: overscroll-behavior","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior"},{"title":"CSS-Tricks: overscroll-behavior","url":"https://css-tricks.com/almanac/properties/o/overscroll-behavior/"}],"demo":"inline","useWhen":"input keeps scrolling past the end of the content"},{"name":"Overshoot","slug":"overshoot","category":"motion","status":"published","definition":"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.","aliases":[{"name":"back easing","source":"easings.net"},{"name":"ease back"},{"name":"anticipatory overshoot"},{"name":"settle"}],"tags":[],"relations":{"contrastWith":["bounce-animation","anticipation","damping"],"variantOf":[],"partOf":[],"seeAlso":["cap-height"]},"implementations":[],"sources":[{"title":"Easing Functions Cheat Sheet","url":"https://easings.net/"},{"title":"MDN: easing-function","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function"}],"demo":"inline","useWhen":"motion should read as having weight and momentum"},{"name":"Overview plus detail","slug":"overview-plus-detail","category":"layout","status":"published","definition":"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.","aliases":[{"name":"overview+detail","source":"community"},{"name":"overview and detail","source":"community"},{"name":"minimap pane","source":"community"}],"tags":[],"relations":{"contrastWith":["minimap","focus-plus-context"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"A Review of Overview+Detail, Zooming, and Focus+Context Interfaces, Cockburn, Karlson and Bederson","url":"https://dl.acm.org/doi/10.1145/1456650.1456652"}],"demo":"inline","useWhen":"a map or minimap kept beside the detail"},{"name":"Owned element","slug":"owned-element","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-owns","source":"aria"},{"name":"reparenting","source":"community"},{"name":"adopted children","source":"community"}],"tags":[],"relations":{"contrastWith":["active-descendant","accessibility-grouping"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WAI-ARIA 1.2: aria-owns","url":"https://www.w3.org/TR/wai-aria-1.2/#aria-owns"}],"demo":"inline","useWhen":"a listbox and its options cannot be nested in markup"},{"name":"Page break","slug":"page-break","category":"layout","status":"published","definition":"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.","aliases":[{"name":"CSS fragmentation","source":"mdn"},{"name":"fragmentainer","source":"css"},{"name":"break-inside","source":"css"},{"name":"break-before","source":"css"}],"tags":["editorial","web-platform"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["cmyk","text-columns","orphan"]},"implementations":[],"sources":[{"title":"CSS fragmentation, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fragmentation"}],"demo":"inline","useWhen":"controlling where printed or column content splits"},{"name":"Page curl","slug":"page-curl","category":"motion","status":"published","definition":"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.","aliases":[{"name":"page turn animation","source":"community"},{"name":"curl transition","source":"community"},{"name":"page flip","source":"community"},{"name":"book page turn","source":"community"}],"tags":[],"relations":{"contrastWith":["card-flip"],"variantOf":[],"partOf":[],"seeAlso":["slide-transition"]},"implementations":[],"sources":[{"title":"MacRumors: re-enable the classic page turning animation in Apple Books","url":"https://www.macrumors.com/how-to/re-enable-page-turning-animation-apple-books/"},{"title":"Creating a page curl transition in SwiftUI","url":"https://swiftuisnippets.wordpress.com/2025/11/27/creating-a-page-curl-transition-in-swiftui-bridging-uikits-power/"}],"demo":"inline","useWhen":"turning a page should read as paper rather than as a slide"},{"name":"Page header","slug":"page-header","category":"layout","status":"published","definition":"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.","aliases":[{"name":"page heading","source":"tailwind"},{"name":"masthead","source":"community"},{"name":"page title bar","source":"community"},{"name":"page banner","source":"community"}],"tags":[],"relations":{"contrastWith":["app-bar","hero","title-bar"],"variantOf":[],"partOf":[],"seeAlso":["landmark"]},"implementations":[],"sources":[{"title":"Page Headings, Tailwind UI","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/headings/page-headings"}],"demo":"inline","useWhen":"the title band that owns the page's own actions"},{"name":"Page indicator","slug":"page-indicator","category":"component","status":"published","definition":"The row of small dots under a carousel or onboarding screen showing how many pages there are and which one you are on.","aliases":[{"name":"page control","source":"hig"},{"name":"carousel dots","source":"community"},{"name":"pagination dots","source":"community"},{"name":"slide indicators","source":"bootstrap"},{"name":"position indicator","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["step-indicator"],"variantOf":[],"partOf":[],"seeAlso":["carousel","stories"]},"implementations":[{"system":"hig","name":"Page controls","url":"https://developer.apple.com/design/human-interface-guidelines/page-controls"}],"sources":[{"title":"Page controls, Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/page-controls"}],"demo":"inline","useWhen":"the dots under a swipeable set of screens"},{"name":"Page title","slug":"page-title","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"document title","source":"community"},{"name":"page titled","source":"wcag"},{"name":"title element","source":"whatwg-html"},{"name":"tab title","source":"community"}],"tags":[],"relations":{"contrastWith":["heading-hierarchy","route-announcement"],"variantOf":[],"partOf":[],"seeAlso":["breadcrumbs"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Page Titled","url":"https://www.w3.org/TR/WCAG22/#page-titled"}],"demo":"inline","useWhen":"the label a page carries outside its own viewport"},{"name":"Page transition","slug":"page-transition","category":"motion","status":"published","definition":"Motion that covers a navigation between two whole pages or routes, replacing the hard cut a document load would otherwise produce.","aliases":[{"name":"route transition","source":"community"},{"name":"screen transition","source":"community"},{"name":"navigation transition","source":"hig"}],"tags":["navigation"],"relations":{"contrastWith":["view-transition","push-transition"],"variantOf":[],"partOf":[],"seeAlso":["route-announcement","predictive-back"]},"implementations":[],"sources":[{"title":"MDN: View Transition API","url":"https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API"}],"demo":"inline","useWhen":"navigation between routes should feel continuous"},{"name":"Pagination","slug":"pagination","category":"component","status":"published","definition":"The numbered row of page links under a long result set, with previous and next controls and usually an ellipsis where numbers are skipped.","aliases":[{"name":"pager","source":"community"},{"name":"paging controls","source":"community"},{"name":"page navigation","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["set-size-and-position","cursor-pagination","infinite-scroll"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"shadcn","name":"Pagination","url":"https://ui.shadcn.com/docs/components/pagination"}],"sources":[{"title":"GOV.UK Design System components","url":"https://design-system.service.gov.uk/components/"}],"demo":"inline","useWhen":"results split into numbered pages"},{"name":"Pan","slug":"pan","category":"interaction","status":"published","definition":"Moving the viewport across content in any direction while keeping contact, so the content feels anchored to the finger or cursor.","aliases":[{"name":"pan gesture","source":"hig"},{"name":"drag to pan","source":"community"},{"name":"grab and drag","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["orbit","swipe"],"variantOf":[],"partOf":[],"seeAlso":["infinite-canvas"]},"implementations":[{"system":"material","name":"Pan","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: Gestures (pan)","url":"https://m1.material.io/patterns/gestures.html"}],"demo":"inline","useWhen":"moving the view over content rather than the content itself"},{"name":"Pancake stack","slug":"pancake-stack","category":"layout","status":"published","definition":"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.","aliases":[{"name":"pancake","source":"web-dev"},{"name":"auto 1fr auto","source":"css"},{"name":"full height page","source":"community"}],"tags":[],"relations":{"contrastWith":["sticky-footer","cover","holy-grail-layout"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Pancake stack, web.dev layout patterns","url":"https://web.dev/patterns/layout/pancake-stack/"}],"demo":"inline","useWhen":"header, body, footer with the body taking the slack"},{"name":"Pane","slug":"pane","category":"layout","status":"published","definition":"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.","aliases":[{"name":"fixed pane","source":"material"},{"name":"flexible pane","source":"material"},{"name":"floating pane","source":"material"},{"name":"semi permanent pane","source":"material"}],"tags":[],"relations":{"contrastWith":["supporting-pane"],"variantOf":[],"partOf":[],"seeAlso":["split-view","inspector"]},"implementations":[{"system":"material","name":"Panes","url":"https://m3.material.io/foundations/layout/scaffold/overview"}],"sources":[{"title":"Scaffold, Material Design 3","url":"https://m3.material.io/foundations/layout/scaffold/overview"}],"demo":"inline","useWhen":"naming one region of a multi region window"},{"name":"Pangram","slug":"pangram","category":"typography","status":"published","definition":"A sentence that uses every letter of the alphabet at least once, used to show a whole character set in one line.","aliases":[{"name":"the quick brown fox"},{"name":"alphabet sentence"}],"tags":[],"relations":{"contrastWith":["lorem-ipsum","type-specimen"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Typeface (Wikipedia)","url":"https://en.wikipedia.org/wiki/Typeface_families"}],"demo":"inline","useWhen":"you need one line that shows every letter"},{"name":"Parallax","slug":"parallax","category":"motion","status":"published","definition":"Moving layers at different rates against the same input, so the slower layers read as farther away and the scene gains depth.","aliases":[{"name":"parallax scrolling"},{"name":"parallax effect","source":"hig"},{"name":"depth effect","source":"hig"},{"name":"layered scrolling"}],"tags":["scroll"],"relations":{"contrastWith":["dolly-zoom"],"variantOf":[],"partOf":[],"seeAlso":["prefers-reduced-motion","ken-burns-effect","tilt-effect"]},"implementations":[{"system":"hig","name":"Motion effects (parallax)","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"sources":[{"title":"Apple HIG: Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"demo":"inline","useWhen":"depth should come from relative speed, not shadow"},{"name":"Parenting","slug":"parenting","category":"motion","status":"published","definition":"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.","aliases":[{"name":"layer parenting","source":"community"},{"name":"parent-child motion","source":"community"},{"name":"hierarchical motion","source":"community"},{"name":"linked motion","source":"community"}],"tags":[],"relations":{"contrastWith":["choreography","follow-through"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UX Magazine: creating usability with motion, the UX in Motion Manifesto","url":"https://uxmag.com/articles/creating-usability-with-motion-the-ux-in-motion-manifesto"},{"title":"Issara Willenskomer: the UX in Motion Manifesto","url":"https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc"}],"demo":"inline","useWhen":"several elements must move as one because one of them leads"},{"name":"Particle background","slug":"particle-background","category":"motion","status":"published","definition":"An ambient decorative background of many small moving agents: drifting dots, linked constellations, flocks, or starfields animating behind the page content.","aliases":[{"name":"constellation effect","source":"community"},{"name":"plexus background","source":"community"},{"name":"boids","source":"community"},{"name":"flocking animation","source":"community"},{"name":"starfield","source":"community"}],"tags":[],"relations":{"contrastWith":["confetti-burst"],"variantOf":[],"partOf":[],"seeAlso":["aurora-ui"]},"implementations":[],"sources":[{"title":"particles.js: a lightweight library for particles","url":"https://vincentgarreau.com/particles.js/"},{"title":"Craig Reynolds: Boids, background and update","url":"https://www.red3d.com/cwr/boids/"}],"demo":"inline","useWhen":"the backdrop is alive with drifting points"},{"name":"Passkey","slug":"passkey","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"WebAuthn","source":"community"},{"name":"FIDO2","source":"community"},{"name":"biometric login","source":"community"},{"name":"device credential","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["accessible-authentication","magic-link","social-login"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: Web Authentication API","url":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API"}],"demo":"inline","useWhen":"signing in with a fingerprint instead of a password"},{"name":"Password reveal toggle","slug":"password-reveal-toggle","category":"component","status":"published","definition":"The control inside a password field, usually an eye or the word Show, that switches the characters between masked and readable.","aliases":[{"name":"show password toggle","source":"community"},{"name":"reveal password","source":"community"},{"name":"password visibility toggle","source":"material"},{"name":"unmask button","source":"community"},{"name":"unmask password","source":"community"},{"name":"eye icon","source":"community"},{"name":"password input","source":"govuk"},{"name":"password toggle field","source":"radix"}],"tags":["auth"],"relations":{"contrastWith":[],"variantOf":[],"partOf":["text-field"],"seeAlso":["helper-text"]},"implementations":[],"sources":[{"title":"GOV.UK Design System: Password input","url":"https://design-system.service.gov.uk/components/password-input/"}],"demo":"inline","useWhen":"naming the eye icon inside a password box"},{"name":"Password strength meter","slug":"password-strength-meter","category":"pattern","status":"published","definition":"A gauge that scores a password while it is typed and names what would improve it, replacing a list of rules with continuous feedback.","aliases":[{"name":"strength indicator","source":"community"},{"name":"password meter","source":"community"},{"name":"password quality bar","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["meter"],"variantOf":[],"partOf":[],"seeAlso":["inline-validation"]},"implementations":[],"sources":[{"title":"UI Patterns: Password Strength Meter","url":"https://ui-patterns.com/patterns"},{"title":"GOV.UK Design System: Passwords","url":"https://design-system.service.gov.uk/patterns/passwords/"}],"demo":"inline","useWhen":"the bar that rates a password as you type it"},{"name":"Pause, stop, hide","slug":"pause-stop-hide","category":"accessibility","status":"published","definition":"A visible control for content that moves, blinks, scrolls, or updates on its own, so a reader can stop it before reading around it.","aliases":[{"name":"pause button","source":"community"},{"name":"carousel pause control","source":"community"},{"name":"auto-updating content control","source":"wcag"}],"tags":[],"relations":{"contrastWith":["prefers-reduced-motion","audio-control","flashing-content","timeout-warning"],"variantOf":[],"partOf":[],"seeAlso":["marquee","carousel","attract-mode"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Pause, Stop, Hide","url":"https://www.w3.org/TR/WCAG22/#pause-stop-hide"}],"demo":"inline","useWhen":"something animates or refreshes without being asked"},{"name":"Paywall","slug":"paywall","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"hard paywall","source":"community"},{"name":"content gate","source":"community"},{"name":"subscription wall","source":"community"},{"name":"premium wall","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["metered-paywall","feature-gate"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: Paywall","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"the point where content stops until you pay"},{"name":"Perceptual duration","slug":"perceptual-duration","category":"motion","status":"published","definition":"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.","aliases":[{"name":"perceived duration","source":"community"},{"name":"settling time","source":"community"},{"name":"visual duration","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["duration","frame-rate"],"variantOf":[],"partOf":[],"seeAlso":["damping"]},"implementations":[],"sources":[{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"},{"title":"The Vocabulary of Motion","url":"https://motion-vocabulary.vercel.app/"}],"demo":"inline","useWhen":"a spring must be compared with a duration"},{"name":"Perceptual uniformity","slug":"perceptual-uniformity","category":"color","status":"published","definition":"The property of a colour space where equal numeric distances look like equal visual differences, which is what makes a generated ramp step evenly.","aliases":[{"name":"perceptually uniform","source":"community"},{"name":"even steps","source":"community"},{"name":"uniform color space"}],"tags":[],"relations":{"contrastWith":["relative-luminance","chroma","oklch"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: oklch()","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch"}],"demo":"inline","useWhen":"explaining why an HSL ramp looks uneven and an OKLCH one does not"},{"name":"Permission priming","slug":"permission-priming","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"pre-permission prompt","source":"community"},{"name":"soft ask","source":"community"},{"name":"double permission pattern","source":"web-dev"},{"name":"primer dialog","source":"community"},{"name":"permission pre-prompt","source":"community"}],"tags":["auth","onboarding"],"relations":{"contrastWith":["cookie-consent-banner","nagging"],"variantOf":[],"partOf":[],"seeAlso":["push-notification"]},"implementations":[],"sources":[{"title":"UserOnboard: Permission Priming","url":"https://www.useronboard.com/onboarding-ux-patterns/permission-priming/"},{"title":"web.dev: Permission UX for push notifications","url":"https://web.dev/articles/push-notifications-permissions-ux"}],"demo":"inline","useWhen":"your own dialog asks before the real system prompt does"},{"name":"Petite caps","slug":"petite-caps","category":"typography","status":"published","definition":"Capitals drawn to exactly x-height, shorter than small caps, so they sit flush with the lowercase around them.","aliases":[{"name":"petite capitals"},{"name":"pcap","source":"opentype"}],"tags":[],"relations":{"contrastWith":["small-caps","x-height"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"OpenType font features (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/OpenType_fonts"}],"demo":"inline","useWhen":"you need caps that match x-height exactly"},{"name":"Picture in picture","slug":"picture-in-picture","category":"layout","status":"published","definition":"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.","aliases":[{"name":"PiP","source":"android"},{"name":"mini player","source":"community"},{"name":"floating player","source":"community"}],"tags":["media"],"relations":{"contrastWith":["video-player"],"variantOf":[],"partOf":[],"seeAlso":["multi-window-mode"]},"implementations":[],"sources":[{"title":"Use picture-in-picture (PiP), Android Developers","url":"https://developer.android.com/develop/ui/views/picture-in-picture"}],"demo":"inline","useWhen":"keeping video visible while doing something else"},{"name":"Pilcrow","slug":"pilcrow","category":"typography","status":"published","definition":"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.","aliases":[{"name":"paragraph mark"},{"name":"paragraph symbol"},{"name":"paraph"},{"name":"blind P"}],"tags":[],"relations":{"contrastWith":["first-line-indent"],"variantOf":[],"partOf":[],"seeAlso":["rich-text-editor"]},"implementations":[],"sources":[{"title":"Pilcrow (Wikipedia)","url":"https://en.wikipedia.org/wiki/Pilcrow"},{"title":"Practical Typography (Matthew Butterick)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"naming the paragraph symbol in an editor"},{"name":"PIN input","slug":"pin-input","category":"component","status":"published","definition":"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.","aliases":[{"name":"otp input","source":"shadcn"},{"name":"one time code field","source":"community"},{"name":"verification code input","source":"community"},{"name":"otp field","source":"base-ui"},{"name":"segmented code input","source":"community"},{"name":"segmented input","source":"community"},{"name":"one-time password field","source":"radix"},{"name":"digit entry view","source":"hig"}],"tags":["auth","forms"],"relations":{"contrastWith":["text-field","structured-format"],"variantOf":[],"partOf":[],"seeAlso":["virtual-keyboard"]},"implementations":[{"system":"shadcn","name":"Input OTP","url":"https://ui.shadcn.com/docs/components/input-otp"}],"sources":[{"title":"shadcn/ui: Input OTP","url":"https://ui.shadcn.com/docs/components/input-otp"}],"demo":"inline","useWhen":"entering a short code one character per box"},{"name":"Pinch to zoom","slug":"pinch-to-zoom","category":"interaction","status":"published","definition":"Two fingers moving apart or together on a surface to scale content up or down, with the scale tracking the distance between them.","aliases":[{"name":"pinch open","source":"material"},{"name":"pinch closed","source":"material"},{"name":"pinch out","source":"community"},{"name":"pinch in","source":"community"},{"name":"spread","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["rotate-gesture","double-tap"],"variantOf":[],"partOf":[],"seeAlso":["semantic-zoom"]},"implementations":[{"system":"material","name":"Pinch open / pinch closed","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: Gestures (pinch open and closed)","url":"https://m1.material.io/patterns/gestures.html"},{"title":"UIKit: Handling pinch gestures","url":"https://developer.apple.com/documentation/uikit/handling-pinch-gestures"}],"demo":"inline","useWhen":"two fingers changing the scale of what is on screen"},{"name":"Pixel art UI","slug":"pixel-art-ui","category":"aesthetic","status":"published","definition":"An interface drawn on a visible pixel grid, with bitmap type, hard aliased edges, and icons kept at their original low resolution.","aliases":[{"name":"8-bit UI","source":"community"},{"name":"bitmap UI"},{"name":"pixel UI"},{"name":"pixelated interface"},{"name":"pixel art","source":"uistyleguide"}],"tags":[],"relations":{"contrastWith":["low-poly","scanlines"],"variantOf":[],"partOf":[],"seeAlso":["retro-web-design","stepped-animation"]},"implementations":[],"sources":[{"title":"Sage: Retro Web Design: When Pixel Art Belongs on Your Site","url":"https://sage.agency/blog/websites-that-use-cool-pixel-art-design/"}],"demo":"inline","useWhen":"the pixels are meant to be visible"},{"name":"Pixel density","slug":"pixel-density","category":"layout","status":"published","definition":"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.","aliases":[{"name":"DPI"},{"name":"PPI"},{"name":"retina"},{"name":"device pixel ratio"},{"name":"2x"},{"name":"hidpi"}],"tags":[],"relations":{"contrastWith":["density-independent-pixel"],"variantOf":[],"partOf":[],"seeAlso":["signed-distance-field","font-hinting","font-smoothing"]},"implementations":[],"sources":[{"title":"MDN: devicePixelRatio","url":"https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio"},{"title":"MDN: Resolution media feature","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution"}],"demo":"inline","useWhen":"raster crispness, 2x assets, or dpi/ppi confusion is on the table"},{"name":"Placeholder as label","slug":"placeholder-as-label","category":"accessibility","status":"published","definition":"The antipattern of using placeholder text as a field's only label, which vanishes on typing and usually fails both contrast and naming.","aliases":[{"name":"placeholder-only field","source":"community"},{"name":"ghost label","source":"community"},{"name":"aria-placeholder","source":"aria"}],"tags":["forms"],"relations":{"contrastWith":["floating-label","label-association","helper-text","input-mask"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Labels or Instructions","url":"https://www.w3.org/TR/WCAG22/#labels-or-instructions"},{"title":"A11y Project checklist","url":"https://www.a11yproject.com/checklist/"}],"demo":"inline","useWhen":"naming why a placeholder-only field is broken"},{"name":"Plain language","slug":"plain-language","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"reading level","source":"wcag"},{"name":"plain English","source":"govuk"},{"name":"lower secondary reading level","source":"wcag"}],"tags":[],"relations":{"contrastWith":["chunking","readability","cognitive-load","reader-mode","symbol-support"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Success Criterion 3.1.5 Reading Level","url":"https://www.w3.org/TR/WCAG22/#reading-level"},{"title":"Understanding Success Criterion 3.1.5: Reading Level, W3C WAI","url":"https://www.w3.org/WAI/WCAG22/Understanding/reading-level.html"}],"demo":"inline","useWhen":"the copy is correct but nobody can act on it"},{"name":"Playhead","slug":"playhead","category":"component","status":"published","definition":"The marker showing the current position in a timeline or track, which travels during playback and can be dragged to move it.","aliases":[{"name":"play head","source":"community"},{"name":"position marker","source":"community"},{"name":"needle","source":"community"}],"tags":["media"],"relations":{"contrastWith":["caret"],"variantOf":[],"partOf":[],"seeAlso":["track","scrubber","waveform","scrubbing"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers: pattern index","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"the marker showing where playback is"},{"name":"Point size","slug":"point-size","category":"typography","status":"published","definition":"The nominal size of type, measured in points, which describes the body the letters are drawn on rather than the height of any letter.","aliases":[{"name":"font size"},{"name":"type size"},{"name":"pt","source":"css"}],"tags":[],"relations":{"contrastWith":["density-independent-pixel","em-unit","optical-size","x-height"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Point size (Monotype glossary)","url":"https://www.monotype.com/resources/typographic-terms"},{"title":"Point size (Practical Typography)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"explaining why 16pt in two fonts looks different"},{"name":"Pointer cancellation","slug":"pointer-cancellation","category":"accessibility","status":"published","definition":"Activating a control on pointer release rather than press, so someone who lands on the wrong target can slide off and abort.","aliases":[{"name":"up-event activation","source":"wcag"},{"name":"down-event","source":"wcag"},{"name":"slide off to cancel","source":"community"},{"name":"abort or undo","source":"wcag"}],"tags":[],"relations":{"contrastWith":["press-drag-release","ghost-click","change-of-context"],"variantOf":[],"partOf":[],"seeAlso":["pressed-state"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Pointer Cancellation","url":"https://www.w3.org/TR/WCAG22/#pointer-cancellation"}],"demo":"inline","useWhen":"letting a mis-press be taken back before release"},{"name":"Pointer capture","slug":"pointer-capture","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"setPointerCapture","source":"mdn"},{"name":"mouse capture","source":"community"},{"name":"drag capture","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["pointer-lock","hit-testing"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: Pointer events","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"}],"demo":"inline","useWhen":"a drag must keep its grip after leaving the element"},{"name":"Pointer gestures","slug":"pointer-gestures","category":"accessibility","status":"published","definition":"Path based or multi finger gestures such as pinch, swipe, and drag along a track, which need a single pointer equivalent to stay operable.","aliases":[{"name":"path-based gesture","source":"wcag"},{"name":"multipoint gesture","source":"wcag"},{"name":"single pointer alternative","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["multi-touch","motion-actuation","dragging-alternative"],"variantOf":[],"partOf":[],"seeAlso":["mouse-gesture"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Pointer Gestures","url":"https://www.w3.org/TR/WCAG22/#pointer-gestures"}],"demo":"inline","useWhen":"a pinch or swipe is the only way in"},{"name":"Pointer lock","slug":"pointer-lock","category":"interaction","status":"published","definition":"Hiding the cursor and reading only its movement deltas, so input keeps flowing past the edges of the screen instead of stopping at them.","aliases":[{"name":"mouse lock","source":"mdn"},{"name":"mouse look","source":"community"},{"name":"cursor lock","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["pointer-capture"],"variantOf":[],"partOf":[],"seeAlso":["orbit"]},"implementations":[],"sources":[{"title":"MDN: Pointer Lock API","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API"}],"demo":"inline","useWhen":"input is relative movement, not a screen position"},{"name":"Politeness level","slug":"politeness-level","category":"accessibility","status":"published","definition":"The urgency setting on a live region: polite waits for a pause in speech, assertive interrupts whatever is being read.","aliases":[{"name":"aria-live polite","source":"aria"},{"name":"assertive","source":"aria"},{"name":"live region politeness","source":"community"},{"name":"announcement queue","source":"community"}],"tags":[],"relations":{"contrastWith":["atomic-live-region","busy-state","live-region","verbosity"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: aria-live","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live"}],"demo":"inline","useWhen":"choosing whether an update may interrupt speech"},{"name":"Pop art style","slug":"pop-art-style","category":"aesthetic","status":"published","definition":"A comic and advertising style of flat primary color, heavy black outlines, printed dot shading, speech balloons, and bold condensed capitals.","aliases":[{"name":"pop art"},{"name":"comic style"},{"name":"Ben Day style"},{"name":"Lichtenstein style","source":"community"}],"tags":[],"relations":{"contrastWith":["halftone","risograph"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Kittl: 60+ graphic design styles, names and descriptions","url":"https://www.kittl.com/blogs/design-styles-name-stl/"},{"title":"Inkbot Design: 20 iconic graphic design styles","url":"https://inkbotdesign.com/graphic-design-styles/"}],"demo":"inline","useWhen":"comic outlines, flat primaries, and printed dots"},{"name":"Pop in","slug":"pop-in","category":"motion","status":"published","definition":"An entrance that scales slightly past full size before settling, so the element arrives with a small snap instead of simply being there.","aliases":[{"name":"pop","source":"community"},{"name":"spring in","source":"community"},{"name":"bounce in","source":"community"},{"name":"scale in with overshoot","source":"community"}],"tags":[],"relations":{"contrastWith":["entrance-animation","bounce-animation"],"variantOf":[],"partOf":[],"seeAlso":["squash-and-stretch"]},"implementations":[],"sources":[{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"},{"title":"The Vocabulary of Motion","url":"https://motion-vocabulary.vercel.app/"}],"demo":"inline","useWhen":"an arriving element should feel eager rather than merely present"},{"name":"Popconfirm","slug":"popconfirm","category":"component","status":"published","definition":"A small confirmation bubble anchored to the control you just pressed, asking whether you meant it without opening a dialog over the page.","aliases":[{"name":"inline confirmation","source":"community"},{"name":"confirm popover","source":"community"},{"name":"are you sure popover","source":"community"}],"tags":[],"relations":{"contrastWith":["confirmation-dialog"],"variantOf":["popover"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Ant Design: Popconfirm","url":"https://ant.design/components/popconfirm"}],"demo":"inline","useWhen":"confirming in place instead of in a dialog"},{"name":"Popover","slug":"popover","category":"component","status":"published","definition":"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.","aliases":[{"name":"flyout"}],"tags":["web-platform"],"relations":{"contrastWith":["tooltip","modal-dialog","toggletip","hover-card"],"variantOf":[],"partOf":[],"seeAlso":["kebab-menu","has-popup"]},"implementations":[{"system":"radix","name":"Popover","url":"https://www.radix-ui.com/primitives/docs/components/popover"},{"system":"base-ui","name":"Popover","url":"https://base-ui.com/react/components/popover"},{"system":"shadcn","name":"Popover","url":"https://ui.shadcn.com/docs/components/popover"},{"system":"hig","name":"Popovers","url":"https://developer.apple.com/design/human-interface-guidelines/popovers"}],"sources":[{"title":"MDN: Popover API","url":"https://developer.mozilla.org/en-US/docs/Web/API/Popover_API"}],"demo":"inline","useWhen":"a small anchored surface with controls inside it"},{"name":"Popover arrow","slug":"popover-arrow","category":"component","status":"published","definition":"The small triangle joining a popover or tooltip to the thing it belongs to, which flips and slides as the popover repositions.","aliases":[{"name":"tooltip arrow","source":"radix"},{"name":"beak","source":"community"},{"name":"nub","source":"community"},{"name":"tail","source":"community"},{"name":"pointer","source":"community"}],"tags":[],"relations":{"contrastWith":["chevron"],"variantOf":[],"partOf":["popover","tooltip"],"seeAlso":["anchor-positioning"]},"implementations":[],"sources":[{"title":"Floating UI","url":"https://floating-ui.com/"}],"demo":"inline","useWhen":"the little triangle pointing at the trigger"},{"name":"Positive tabindex","slug":"positive-tabindex","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"tabindex=\"1\"","source":"community"},{"name":"tabindex greater than zero","source":"community"},{"name":"forced tab order","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["roving-tabindex","focus-order","tabbable"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: tabindex","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex"}],"demo":"inline","useWhen":"someone proposes tabindex=\"1\" to fix an order"},{"name":"POUR","slug":"pour","category":"accessibility","status":"published","definition":"The four principles WCAG is built on, perceivable, operable, understandable, and robust, used as a shorthand for sorting an accessibility problem into a bucket.","aliases":[{"name":"perceivable operable understandable robust","source":"wcag"},{"name":"four principles","source":"wcag"}],"tags":[],"relations":{"contrastWith":["functional-need","conformance-level"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Introduction","url":"https://www.w3.org/TR/WCAG22/"}],"demo":"inline","useWhen":"classifying what kind of barrier you are looking at"},{"name":"Predictive back","slug":"predictive-back","category":"motion","status":"published","definition":"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.","aliases":[{"name":"predictive back gesture","source":"android"},{"name":"back preview","source":"android"},{"name":"predictive back animation","source":"material"},{"name":"back-to-home animation","source":"android"}],"tags":[],"relations":{"contrastWith":["interactive-transition"],"variantOf":[],"partOf":[],"seeAlso":["edge-swipe","page-transition"]},"implementations":[{"system":"material","name":"Predictive back","url":"https://github.com/material-components/material-components-android/blob/master/docs/foundations/PredictiveBack.md"}],"sources":[{"title":"Android Developers: predictive back design","url":"https://developer.android.com/design/ui/mobile/guides/patterns/predictive-back"},{"title":"Material Components Android: PredictiveBack","url":"https://github.com/material-components/material-components-android/blob/master/docs/foundations/PredictiveBack.md"}],"demo":"inline","useWhen":"a back swipe should show its destination before it commits"},{"name":"Increased contrast","slug":"prefers-contrast","category":"accessibility","status":"published","definition":"A user preference for more contrast than a theme's default, honoured by strengthening borders, text, and state colours rather than by shifting hues.","aliases":[{"name":"prefers-contrast media query","source":"css"},{"name":"Increase Contrast","source":"hig"},{"name":"high contrast theme","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["forced-colors-mode","inverted-colors","reduced-transparency"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: Using media queries for accessibility","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using_for_accessibility"}],"demo":"inline","useWhen":"the system asks for a higher contrast version"},{"name":"Reduced motion","slug":"prefers-reduced-motion","category":"accessibility","status":"published","definition":"A user preference asking interfaces to cut non-essential animation, honoured by shortening, cross fading, or removing movement rather than by doing nothing.","aliases":[{"name":"motion-reduce","source":"tailwind"},{"name":"motion-safe","source":"tailwind"},{"name":"Reduce Motion","source":"hig"},{"name":"remove animations","source":"android"}],"tags":[],"relations":{"contrastWith":["flashing-content","pause-stop-hide","reduced-transparency"],"variantOf":[],"partOf":[],"seeAlso":["parallax","marquee","shimmer"]},"implementations":[],"sources":[{"title":"MDN: prefers-reduced-motion","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion"},{"title":"WCAG 2.2: Animation from Interactions","url":"https://www.w3.org/TR/WCAG22/#animation-from-interactions"}],"demo":"inline","useWhen":"the reader has asked the system for less movement"},{"name":"Preselected opt-in","slug":"preselected-opt-in","category":"pattern","status":"published","definition":"Arriving at a choice with the answer that benefits the business already ticked, so consent is collected from everyone who does not notice.","aliases":[{"name":"preselection","source":"deceptive-design"},{"name":"prechecked box","source":"community"},{"name":"opt-out by default","source":"community"},{"name":"default consent","source":"community"}],"tags":[],"relations":{"contrastWith":["smart-defaults"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Preselection","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the marketing box is already ticked when you get there"},{"name":"Presence indicator","slug":"presence-indicator","category":"component","status":"published","definition":"The small coloured dot on an avatar reporting whether a person is available, away, busy or offline.","aliases":[{"name":"status dot","source":"community"},{"name":"online indicator","source":"community"},{"name":"presence badge","source":"fluent"},{"name":"activity status","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":["badge"],"variantOf":[],"partOf":[],"seeAlso":["avatar","read-receipt","pulse-animation","avatar-group"]},"implementations":[],"sources":[{"title":"Fluent 2 web components","url":"https://fluent2.microsoft.design/components/web/react"}],"demo":"inline","useWhen":"the green dot on someone's picture"},{"name":"Presentation role","slug":"presentation-role","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"role=presentation","source":"aria"},{"name":"role=none","source":"aria"},{"name":"semantics removed","source":"community"}],"tags":[],"relations":{"contrastWith":["presentational-children","aria-hidden","decorative-image","first-rule-of-aria"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WAI-ARIA 1.2: presentation role","url":"https://www.w3.org/TR/wai-aria-1.2/#presentation"},{"title":"W3C: Using ARIA, rules of ARIA use","url":"https://www.w3.org/TR/using-aria/"}],"demo":"inline","useWhen":"markup you needed for layout is lying about meaning"},{"name":"Presentational children","slug":"presentational-children","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"children are presentational","source":"aria"},{"name":"flattened children","source":"community"}],"tags":[],"relations":{"contrastWith":["accessibility-grouping","accessibility-tree","presentation-role"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WAI-ARIA 1.2: Presentational Children","url":"https://www.w3.org/TR/wai-aria-1.2/#childrenArePresentational"}],"demo":"inline","useWhen":"markup inside a control vanishes from the a11y tree"},{"name":"Press-drag-release","slug":"press-drag-release","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"single-gesture selection","source":"community"},{"name":"press to open, release to select","source":"community"},{"name":"drag-mode menu","source":"community"}],"tags":[],"relations":{"contrastWith":["pointer-cancellation","long-press"],"variantOf":[],"partOf":[],"seeAlso":["marking-menu"]},"implementations":[],"sources":[{"title":"Understanding WCAG 2.5.2: Pointer Cancellation","url":"https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html"},{"title":"Menus (Apple Human Interface Guidelines)","url":"https://developer.apple.com/design/human-interface-guidelines/menus"}],"demo":"inline","useWhen":"a menu that answers one continuous press as well as two clicks"},{"name":"Pressed state","slug":"pressed-state","category":"interaction","status":"published","definition":"The look a control takes while it is actually being held down, confirming that the press was received before the action runs.","aliases":[{"name":"active state","source":"community"},{"name":"pressed","source":"material"},{"name":"down state","source":"community"},{"name":"touch state","source":"community"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["pointer-cancellation","toggle-button","ripple","button"]},"implementations":[{"system":"material","name":"Pressed","url":"https://m3.material.io/foundations/interaction/states/overview"}],"sources":[{"title":"Material Design 3: States","url":"https://m3.material.io/foundations/interaction/states/overview"}],"demo":"inline","useWhen":"the moment a control is under the finger"},{"name":"Pressure sensitivity","slug":"pressure-sensitivity","category":"interaction","status":"published","definition":"Reading how hard a pen or finger presses, plus tilt and twist, so stroke weight and behaviour vary with the shape of the contact.","aliases":[{"name":"pen pressure","source":"community"},{"name":"stylus tilt","source":"mdn"},{"name":"tilt and twist","source":"mdn"},{"name":"tangential pressure","source":"mdn"}],"tags":["touch"],"relations":{"contrastWith":["force-touch"],"variantOf":[],"partOf":[],"seeAlso":["signature-pad"]},"implementations":[],"sources":[{"title":"MDN: Pointer events (pressure, tilt, twist)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"}],"demo":"inline","useWhen":"how hard or how tilted the input is matters"},{"name":"Prime mark","slug":"prime-mark","category":"typography","status":"published","definition":"The slanted tick used for feet, inches, minutes, and seconds, which is a different character from either a straight quote or a curly one.","aliases":[{"name":"primes"},{"name":"foot mark"},{"name":"inch mark"},{"name":"double prime"}],"tags":[],"relations":{"contrastWith":["smart-quotes","superscript"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Foot and inch marks (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"Typography Cheatsheet (Typewolf)","url":"https://www.typewolf.com/cheatsheet"}],"demo":"inline","useWhen":"writing feet and inches, not quoting anyone"},{"name":"Primitive color token","slug":"primitive-color-token","category":"color","status":"published","definition":"A raw palette value named for what it is, like blue-500, sitting under the semantic layer that names colours for what they do.","aliases":[{"name":"global token","source":"fluent"},{"name":"reference token","source":"material"},{"name":"core token","source":"community"},{"name":"base token","source":"community"},{"name":"raw value","source":"community"}],"tags":["tokens"],"relations":{"contrastWith":["color-role","color-alias","color-token","semantic-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"fluent","name":"Global tokens","url":"https://fluent2.microsoft.design/design-tokens"}],"sources":[{"title":"Color token naming: primitive, semantic and component layers","url":"https://colorarchive.org/guides/color-token-naming-guide/"}],"demo":"inline","useWhen":"the raw palette value beneath a semantic name"},{"name":"Priority plus navigation","slug":"priority-plus-navigation","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"priority+ navigation","source":"community"},{"name":"priority plus pattern","source":"community"},{"name":"more menu overflow nav","source":"community"},{"name":"adaptive navigation","source":"community"},{"name":"overflow list","source":"blueprint"}],"tags":["navigation"],"relations":{"contrastWith":["overflow-menu","mega-menu"],"variantOf":[],"partOf":[],"seeAlso":["hamburger-menu"]},"implementations":[],"sources":[{"title":"CSS-Tricks: The Priority+ Navigation Pattern","url":"https://css-tricks.com/the-priority-navigation-pattern/"}],"demo":"inline","useWhen":"the nav shows what fits and hides the rest behind More"},{"name":"Privacy zuckering","slug":"privacy-zuckering","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"privacy dark pattern","source":"community"},{"name":"oversharing by default","source":"community"},{"name":"consent maze","source":"community"}],"tags":[],"relations":{"contrastWith":["obstruction"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: types of deceptive pattern","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"the settings are arranged so sharing is the easy answer"},{"name":"Progress bar","slug":"progress-bar","category":"component","status":"published","definition":"A filling bar reporting how far along a task is, determinate when the end is known and indeterminate when it is not.","aliases":[{"name":"progress indicator","source":"nngroup"},{"name":"loading bar","source":"cloudscape"},{"name":"progress","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["meter","step-indicator","slider","scrubber","progress-ring","reading-progress","spinner"],"variantOf":[],"partOf":[],"seeAlso":["endowed-progress"]},"implementations":[{"system":"material","name":"Progress indicators","url":"https://m3.material.io/components/progress-indicators/overview"},{"system":"hig","name":"Progress indicators","url":"https://developer.apple.com/design/human-interface-guidelines/progress-indicators"},{"system":"fluent","name":"Progress Bar","url":"https://fluent2.microsoft.design/components/web/react/core/progressbar/usage"},{"system":"carbon","name":"Progress bar","url":"https://carbondesignsystem.com/components/progress-bar/usage/"},{"system":"radix","name":"Progress","url":"https://www.radix-ui.com/primitives/docs/components/progress"},{"system":"base-ui","name":"Progress","url":"https://base-ui.com/react/components/progress"},{"system":"shadcn","name":"Progress","url":"https://ui.shadcn.com/docs/components/progress"}],"sources":[{"title":"ARIA Authoring Practices Guide: Communicating Value and Limits for Range Widgets","url":"https://www.w3.org/WAI/ARIA/apg/practices/range-related-properties/"},{"title":"Nielsen Norman Group: Progress Indicators Make a Slow System Less Insufferable","url":"https://www.nngroup.com/articles/progress-indicators/"}],"demo":"inline","useWhen":"showing how far through a task you are"},{"name":"Progress ring","slug":"progress-ring","category":"component","status":"published","definition":"A circular progress indicator that fills around a ring, often with the percentage in the middle.","aliases":[{"name":"progress circle","source":"chakra"},{"name":"ring progress","source":"mantine"},{"name":"circular progress","source":"mui"},{"name":"donut progress","source":"community"},{"name":"activity ring","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["progress-bar","spinner","gauge"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Mantine: components","url":"https://mantine.dev/core/package/"},{"title":"MDN: stroke-dashoffset","url":"https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-dashoffset"}],"demo":"inline","useWhen":"progress drawn as a filling circle"},{"name":"Progressive blur","slug":"progressive-blur","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"gradient blur"},{"name":"graduated blur"},{"name":"layered blur"},{"name":"fade to blur"},{"name":"blur scrim"}],"tags":[],"relations":{"contrastWith":["scroll-edge-fade","vignette","scrim","motion-blur"],"variantOf":[],"partOf":[],"seeAlso":["liquid-glass"]},"implementations":[],"sources":[{"title":"kennethnym: Progressive blur in CSS","url":"https://kennethnym.com/blog/progressive-blur-in-css/"},{"title":"Devs Love Coffee: Making Apple progressive blur on the web","url":"https://www.devslovecoffee.com/blog/making-apple-progressive-blur-on-web"}],"demo":"inline","useWhen":"content should dissolve into blur, not meet an edge"},{"name":"Progressive disclosure","slug":"progressive-disclosure","category":"pattern","status":"published","definition":"Showing the few options most people need and keeping the rest one deliberate step away, so complexity arrives only when it is asked for.","aliases":[],"tags":[],"relations":{"contrastWith":["accordion","disclosure","progressive-reduction"],"variantOf":[],"partOf":[],"seeAlso":["cognitive-load"]},"implementations":[],"sources":[{"title":"Nielsen Norman Group: Progressive disclosure","url":"https://www.nngroup.com/articles/progressive-disclosure/"}],"demo":"inline","useWhen":"keeping advanced options one click away instead of on screen"},{"name":"Progressive image loading","slug":"progressive-image-loading","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"blur-up","source":"community"},{"name":"LQIP","source":"community"},{"name":"low quality image placeholder","source":"community"},{"name":"blurhash","source":"community"},{"name":"dominant colour placeholder","source":"community"}],"tags":["media","perceived-performance"],"relations":{"contrastWith":["skeleton-screen","lazy-loading"],"variantOf":[],"partOf":[],"seeAlso":["aspect-ratio-box"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"a blurred or coloured block stands in until the photo loads"},{"name":"Progressive profiling","slug":"progressive-profiling","category":"pattern","status":"published","definition":"Collecting profile details a few at a time across separate visits, instead of demanding the whole record in one long form at registration.","aliases":[{"name":"incremental profiling","source":"community"},{"name":"drip profiling","source":"community"},{"name":"profile completeness","source":"community"}],"tags":["auth","onboarding"],"relations":{"contrastWith":["gradual-engagement"],"variantOf":[],"partOf":[],"seeAlso":["microsurvey"]},"implementations":[],"sources":[{"title":"UI Patterns: Completeness meter","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"the product asks for one more detail each time you return"},{"name":"Progressive reduction","slug":"progressive-reduction","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"adaptive simplification","source":"community"},{"name":"experience-based UI","source":"community"},{"name":"proficiency-adaptive interface","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["progressive-disclosure","morphing-controls"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"GoodUI: adaptive and progressive ideas","url":"https://goodui.org/"}],"demo":"inline","useWhen":"the label falls away once you have used it enough"},{"name":"Prompt input","slug":"prompt-input","category":"component","status":"published","definition":"The composer at the bottom of an assistant interface: a growing text area with attachment, model and send controls attached to it.","aliases":[{"name":"composer","source":"community"},{"name":"message composer","source":"community"},{"name":"chat input","source":"community"},{"name":"prompt box","source":"community"}],"tags":["ai","messaging"],"relations":{"contrastWith":["textarea","search-field"],"variantOf":[],"partOf":[],"seeAlso":["natural-language-interface","model-selector","generative-ui"]},"implementations":[],"sources":[{"title":"Cloudscape components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"the box you type an assistant request into"},{"name":"Pronunciation","slug":"pronunciation","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"phonetic spelling","source":"community"},{"name":"speech pronunciation","source":"community"}],"tags":[],"relations":{"contrastWith":["ruby-annotation","abbreviation"],"variantOf":[],"partOf":[],"seeAlso":["screen-reader"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Pronunciation","url":"https://www.w3.org/TR/WCAG22/#pronunciation"}],"demo":"inline","useWhen":"the screen reader mangles a name or a number"},{"name":"Property filter","slug":"property-filter","category":"component","status":"published","definition":"A search field that builds structured queries from tokens, letting a reader filter by named properties with operators rather than free text.","aliases":[{"name":"query builder","source":"community"},{"name":"filter builder","source":"community"},{"name":"search syntax field","source":"community"},{"name":"structured search","source":"community"}],"tags":["search"],"relations":{"contrastWith":["rule-builder","faceted-filter","attribute-editor"],"variantOf":[],"partOf":[],"seeAlso":["search-field"]},"implementations":[],"sources":[{"title":"Property filter, Cloudscape Design System","url":"https://cloudscape.design/components/property-filter/"}],"demo":"inline","useWhen":"filtering by named fields inside one search box"},{"name":"Proximity","slug":"proximity","category":"layout","status":"published","definition":"The grouping principle that elements placed close together read as related, which is why spacing decides perceived structure more reliably than borders do.","aliases":[{"name":"law of proximity","source":"community"},{"name":"Gestalt proximity","source":"nngroup"},{"name":"grouping by proximity","source":"community"}],"tags":[],"relations":{"contrastWith":["common-region","whitespace"],"variantOf":[],"partOf":[],"seeAlso":["chunking"]},"implementations":[],"sources":[{"title":"Proximity Principle in Visual Design, NN/g","url":"https://www.nngroup.com/articles/gestalt-proximity/"}],"demo":"inline","useWhen":"arguing that spacing, not lines, makes groups"},{"name":"Psychedelic style","slug":"psychedelic-style","category":"aesthetic","status":"published","definition":"A 1960s poster style of vibrating complementary color, warped and interlocking lettering that fills its own shape, kaleidoscopic symmetry, and liquid distortion.","aliases":[{"name":"psychedelia"},{"name":"60s poster style"},{"name":"trippy style","source":"community"}],"tags":[],"relations":{"contrastWith":["acid-graphics","art-nouveau"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Kittl: 60+ graphic design styles, names and descriptions","url":"https://www.kittl.com/blogs/design-styles-name-stl/"}],"demo":"inline","useWhen":"vibrating color and lettering warped to fill a shape"},{"name":"Pull quote","slug":"pull-quote","category":"typography","status":"published","definition":"A phrase lifted out of an article and set large as a graphic element, to draw a browsing reader into the text.","aliases":[{"name":"pullquote"},{"name":"callout quote"},{"name":"lift-out quote"},{"name":"block quote","source":"community"},{"name":"quote","source":"component-gallery"}],"tags":["editorial"],"relations":{"contrastWith":["blockquote"],"variantOf":[],"partOf":[],"seeAlso":["sidenote"]},"implementations":[],"sources":[{"title":"Pull Quotes (Fonts.com)","url":"https://www.myfonts.com/pages/fontscom-learning-fyti-typographic-tips-pull-quotes/"},{"title":"How to Attract Attention With Pull Quotes (CreativePro)","url":"https://creativepro.com/how-to-attract-attention-pull-quotes/"}],"demo":"inline","useWhen":"advertising a line of the article to a scanner"},{"name":"Pull to refresh","slug":"pull-to-refresh","category":"pattern","status":"published","definition":"Dragging a list downward past its top edge to trigger a reload, with an indicator that appears in the space the drag opens up.","aliases":[{"name":"swipe to refresh","source":"material"},{"name":"drag to refresh","source":"community"},{"name":"pull down to refresh","source":"community"}],"tags":["scroll","touch"],"relations":{"contrastWith":["load-more"],"variantOf":[],"partOf":[],"seeAlso":["overscroll"]},"implementations":[],"sources":[{"title":"UI Patterns: pull to refresh","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"tugging a list down to fetch new items"},{"name":"Pulse","slug":"pulse-animation","category":"motion","status":"published","definition":"A slow repeating change in scale or opacity that keeps an element alive without moving it, used for waiting states and gentle attention.","aliases":[{"name":"breathing animation"},{"name":"throb"},{"name":"heartbeat"},{"name":"pulsing dot"}],"tags":[],"relations":{"contrastWith":["shimmer","float-animation"],"variantOf":[],"partOf":[],"seeAlso":["presence-indicator"]},"implementations":[],"sources":[{"title":"Tailwind CSS: animate-pulse","url":"https://tailwindcss.com/docs/animation"},{"title":"WCAG 2.2 Understanding SC 2.2.2: Pause, Stop, Hide","url":"https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html"}],"demo":"inline","useWhen":"an element must signal life while nothing else happens"},{"name":"Push notification","slug":"push-notification","category":"component","status":"published","definition":"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.","aliases":[{"name":"notification","source":"hig"},{"name":"system notification","source":"community"},{"name":"remote notification","source":"community"},{"name":"heads-up notification","source":"android"}],"tags":["messaging"],"relations":{"contrastWith":["live-activity"],"variantOf":[],"partOf":[],"seeAlso":["aria-notify","notification-center","permission-priming","badge"]},"implementations":[{"system":"hig","name":"Notifications","url":"https://developer.apple.com/design/human-interface-guidelines/notifications"}],"sources":[{"title":"Apple HIG: Notifications","url":"https://developer.apple.com/design/human-interface-guidelines/notifications"}],"demo":"inline","useWhen":"something needs saying while the app is closed"},{"name":"Push transition","slug":"push-transition","category":"motion","status":"published","definition":"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.","aliases":[{"name":"push and pop","source":"hig"},{"name":"navigation push","source":"hig"},{"name":"stack transition","source":"community"},{"name":"drill-down transition","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["slide-transition","modal-presentation","directionality","page-transition"],"variantOf":[],"partOf":[],"seeAlso":["drill-down-navigation"]},"implementations":[{"system":"hig","name":"Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"sources":[{"title":"Apple HIG: Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"demo":"inline","useWhen":"navigating deeper into a stack and back out"},{"name":"QR code","slug":"qr-code","category":"component","status":"published","definition":"A square matrix barcode rendered in the interface to hand a link or credential to a phone camera.","aliases":[{"name":"qrcode","source":"ant-design"},{"name":"scan code","source":"community"},{"name":"2d barcode","source":"community"}],"tags":[],"relations":{"contrastWith":["share-sheet"],"variantOf":[],"partOf":[],"seeAlso":["smart-app-banner"]},"implementations":[],"sources":[{"title":"Ant Design: components overview","url":"https://ant.design/components/overview/"}],"demo":"inline","useWhen":"handing a link to a phone by camera"},{"name":"Quasimode","slug":"quasimode","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"spring-loaded mode","source":"community"},{"name":"held mode","source":"community"}],"tags":["keyboard"],"relations":{"contrastWith":["modifier-key"],"variantOf":[],"partOf":[],"seeAlso":["spring-loading"]},"implementations":[],"sources":[{"title":"Wikipedia: mode (user interface)","url":"https://en.wikipedia.org/wiki/Mode_(user_interface)"}],"demo":"inline","useWhen":"a mode that lasts only while you hold it"},{"name":"Quick return header","slug":"quick-return-header","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"hidey bar","source":"community"},{"name":"headroom","source":"community"},{"name":"hide on scroll header","source":"community"},{"name":"auto-hiding header","source":"community"},{"name":"quick return pattern","source":"android"}],"tags":["scroll"],"relations":{"contrastWith":["sticky-header"],"variantOf":[],"partOf":[],"seeAlso":["scroll-triggered-animation"]},"implementations":[],"sources":[{"title":"Bram.us: hide a header when scrolling down, show it again when scrolling up","url":"https://www.bram.us/2025/10/22/solved-by-css-scroll-state-queries-hide-a-header-when-scrolling-down-show-it-again-when-scrolling-up/"}],"demo":"inline","useWhen":"the bar hides going down and comes back the moment you scroll up"},{"name":"Quick settings tile","slug":"quick-settings-tile","category":"component","status":"published","definition":"A one tap button or toggle an app contributes to the system control surface, so one feature can be reached without opening the app.","aliases":[{"name":"toggle tile","source":"community"},{"name":"Control Center control","source":"hig"}],"tags":["platform-registers"],"relations":{"contrastWith":["widget","switch","app-shortcut"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"Controls","url":"https://developer.apple.com/design/human-interface-guidelines/controls"}],"sources":[{"title":"Apple HIG: Controls","url":"https://developer.apple.com/design/human-interface-guidelines/controls"},{"title":"Android: Create custom Quick Settings tiles","url":"https://developer.android.com/develop/ui/views/quicksettings-tiles"}],"demo":"inline","useWhen":"one app feature deserves a place in system controls"},{"name":"Quick view","slug":"quick-view","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"quick look","source":"hig"},{"name":"peek","source":"community"},{"name":"preview modal","source":"community"},{"name":"item preview","source":"community"},{"name":"hover preview","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["modal-dialog","hover-card","lightbox"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"peeking at an item without leaving the list"},{"name":"Radial menu","slug":"radial-menu","category":"component","status":"published","definition":"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.","aliases":[{"name":"pie menu","source":"community"},{"name":"circular menu","source":"community"},{"name":"wheel menu","source":"community"}],"tags":[],"relations":{"contrastWith":["marking-menu","context-menu","speed-dial"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Pie menu","url":"https://en.wikipedia.org/wiki/Pie_menu"}],"demo":"inline","useWhen":"a menu chosen by direction from where you pressed"},{"name":"Radio group","slug":"radio-group","category":"component","status":"published","definition":"A set of mutually exclusive options, each with its own label and control, exactly one of which can be chosen.","aliases":[{"name":"radio buttons","source":"community"},{"name":"option group","source":"community"}],"tags":["forms","selection"],"relations":{"contrastWith":["checkbox","group-label","selection-card","segmented-control"],"variantOf":[],"partOf":[],"seeAlso":["selection-follows-focus"]},"implementations":[{"system":"aria-apg","name":"Radio Group pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/radio/"},{"system":"material","name":"Radio button","url":"https://m3.material.io/components/radio-button/overview"},{"system":"radix","name":"Radio Group","url":"https://www.radix-ui.com/primitives/docs/components/radio-group"}],"sources":[{"title":"ARIA APG: Radio Group pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/radio/"}],"demo":"inline","useWhen":"one of several, each option labelled and visible"},{"name":"Rag","slug":"rag","category":"typography","status":"published","definition":"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.","aliases":[{"name":"ragged right"},{"name":"ragged edge"},{"name":"flush left ragged right"},{"name":"rag right"}],"tags":["editorial"],"relations":{"contrastWith":["justified-text","river","hyphenation-ladder","text-balancing"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Typography glossary terms","url":"https://weirdwolf.agency/design-glossary-terms-typography/"},{"title":"Justified text (Practical Typography)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"critiquing the uneven edge of a paragraph"},{"name":"Raised cap","slug":"raised-cap","category":"typography","status":"published","definition":"An oversized opening letter that sits on the first line's baseline and rises above the text, rather than sinking into it.","aliases":[{"name":"raised initial"},{"name":"stick-up cap"},{"name":"elevated cap"}],"tags":["editorial"],"relations":{"contrastWith":["drop-cap"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"initial-letter (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter"}],"demo":"inline","useWhen":"the big opening letter rises instead of sinking"},{"name":"RAM technique","slug":"ram-technique","category":"layout","status":"published","definition":"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.","aliases":[{"name":"RAM","source":"web-dev"},{"name":"repeat auto minmax","source":"web-dev"},{"name":"auto-fit minmax","source":"community"},{"name":"auto-fill","source":"css"}],"tags":["web-platform"],"relations":{"contrastWith":["switcher","fluid-grid","breakpoint"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"RAM (Repeat, Auto, Minmax), web.dev layout patterns","url":"https://web.dev/patterns/layout/repeat-auto-minmax/"}],"demo":"inline","useWhen":"a grid that reflows with no breakpoints at all"},{"name":"Range select","slug":"range-select","category":"interaction","status":"published","definition":"Choosing a contiguous run of items by marking one end and holding Shift while marking the other, selecting everything between them.","aliases":[{"name":"shift-click","source":"community"},{"name":"shift select","source":"community"},{"name":"contiguous selection","source":"community"},{"name":"extend selection","source":"community"},{"name":"range selection","source":"merged-candidate"},{"name":"anchor selection","source":"merged-candidate"}],"tags":["keyboard","selection"],"relations":{"contrastWith":["brushing","lasso-selection","bulk-actions"],"variantOf":[],"partOf":[],"seeAlso":["selection-color","multi-select"]},"implementations":[],"sources":[{"title":"ARIA APG: Developing a keyboard interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"demo":"inline","useWhen":"selecting everything between two items at once"},{"name":"Range slider","slug":"range-slider","category":"component","status":"published","definition":"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.","aliases":[{"name":"multi thumb slider","source":"aria-apg"},{"name":"dual slider","source":"community"},{"name":"price range slider","source":"community"},{"name":"two handle slider","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["slider","track","date-range-picker"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Slider (Multi-Thumb)","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/"}],"sources":[{"title":"ARIA APG: Slider (Multi-Thumb) pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/"}],"demo":"inline","useWhen":"the reader picks a from and a to on one track"},{"name":"Rating","slug":"rating","category":"component","status":"published","definition":"A row of stars or similar marks that both shows a score and, when interactive, takes one.","aliases":[{"name":"star rating","source":"community"},{"name":"rate","source":"ant-design"},{"name":"score input","source":"community"},{"name":"rating indicator","source":"hig"}],"tags":["forms"],"relations":{"contrastWith":["meter","reaction-picker"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"Rating indicators","url":"https://developer.apple.com/design/human-interface-guidelines/rating-indicators"}],"sources":[{"title":"Rating indicators, Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/rating-indicators"}],"demo":"inline","useWhen":"a score expressed as filled marks out of five"},{"name":"Rating prompt","slug":"rating-prompt","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"review request","source":"community"},{"name":"app rating prompt","source":"community"},{"name":"review gating","source":"community"},{"name":"rate this app","source":"community"},{"name":"how are we doing","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["microsurvey"],"variantOf":[],"partOf":[],"seeAlso":["nagging"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the app asks how you like it right after something went well"},{"name":"Reaction picker","slug":"reaction-picker","category":"component","status":"published","definition":"A small row of emoji that appears on hover or long press so a message can be answered without a reply.","aliases":[{"name":"reaction bar","source":"community"},{"name":"quick reactions","source":"community"},{"name":"emoji reactions","source":"community"},{"name":"like button","source":"uxpatterns"}],"tags":["messaging"],"relations":{"contrastWith":["rating","emoji-picker"],"variantOf":[],"partOf":[],"seeAlso":["read-receipt"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"answering a message with one emoji"},{"name":"Read aloud","slug":"read-aloud","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"text to speech","source":"community"},{"name":"TTS","source":"community"},{"name":"speak selection","source":"hig"},{"name":"karaoke highlighting","source":"community"}],"tags":[],"relations":{"contrastWith":["screen-reader"],"variantOf":[],"partOf":[],"seeAlso":["line-focus"]},"implementations":[],"sources":[{"title":"Microsoft Support: Use Immersive Reader in Microsoft Edge","url":"https://support.microsoft.com/en-US/edge/use-immersive-reader-in-microsoft-edge"}],"demo":"inline","useWhen":"distinguishing text to speech from a screen reader"},{"name":"Read receipt","slug":"read-receipt","category":"pattern","status":"published","definition":"A per-message marker reporting how far a message got, sent, delivered, or read, drawn as ticks, labels, or the recipient's avatar.","aliases":[{"name":"delivery receipt","source":"community"},{"name":"seen indicator","source":"community"},{"name":"blue ticks","source":"community"},{"name":"message status","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":["typing-indicator"],"variantOf":[],"partOf":[],"seeAlso":["chat-bubble","presence-indicator","reaction-picker","relative-timestamp"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the ticks that say sent, delivered, and read"},{"name":"Readability","slug":"readability","category":"typography","status":"published","definition":"How comfortably a body of text can be read at length, a property of the setting: size, measure, leading, and contrast.","aliases":[{"name":"reading comfort"},{"name":"text readability"}],"tags":[],"relations":{"contrastWith":["plain-language","legibility","typographic-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Readability: The Optimal Line Length (Baymard)","url":"https://baymard.com/blog/line-length-readability"},{"title":"Choose a comfortable measure (webtypography.net)","url":"http://webtypography.net/2.1.2"}],"demo":"inline","useWhen":"judging the setting, not the typeface"},{"name":"Reader mode","slug":"reader-mode","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"reader view","source":"community"},{"name":"Immersive Reader","source":"community"},{"name":"reading mode","source":"community"},{"name":"distraction free reading","source":"community"}],"tags":[],"relations":{"contrastWith":["plain-language","line-focus"],"variantOf":[],"partOf":[],"seeAlso":["semantic-html","measure"]},"implementations":[],"sources":[{"title":"Use Immersive Reader in Microsoft Edge, Microsoft Support","url":"https://support.microsoft.com/en-US/edge/use-immersive-reader-in-microsoft-edge"},{"title":"mozilla/readability, the library behind Firefox Reader View","url":"https://github.com/mozilla/readability"}],"demo":"inline","useWhen":"checking what survives when the design is stripped"},{"name":"Reading flow","slug":"reading-flow","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"flex-visual","source":"css"},{"name":"ordinal group","source":"css"}],"tags":[],"relations":{"contrastWith":["reading-order","focus-order"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: reading-flow","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/reading-flow"}],"demo":"inline","useWhen":"a visual reorder has left tab order zigzagging"},{"name":"Reading order","slug":"reading-order","category":"accessibility","status":"published","definition":"The order content is exposed in the DOM, which drives both speech output and tab order, and which visual reordering can silently contradict.","aliases":[{"name":"meaningful sequence","source":"wcag"},{"name":"DOM order","source":"community"},{"name":"source order","source":"community"},{"name":"visual order mismatch","source":"community"}],"tags":[],"relations":{"contrastWith":["focus-order","reading-flow"],"variantOf":[],"partOf":[],"seeAlso":["logical-properties","content-choreography","masonry"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Meaningful Sequence","url":"https://www.w3.org/TR/WCAG22/#meaningful-sequence"}],"demo":"inline","useWhen":"the visual order and the source order disagree"},{"name":"Reading progress","slug":"reading-progress","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"reading progress bar","source":"community"},{"name":"scroll progress indicator","source":"community"},{"name":"scroll-linked progress bar","source":"community"},{"name":"article progress bar","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["scroll-spy","progress-bar"],"variantOf":[],"partOf":[],"seeAlso":["back-to-top"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the thin bar showing how far through the article you are"},{"name":"Reduced transparency","slug":"reduced-transparency","category":"accessibility","status":"published","definition":"A user preference asking for opaque surfaces instead of blur and translucency, honoured by swapping frosted layers for solid fills.","aliases":[{"name":"prefers-reduced-transparency","source":"css"},{"name":"Reduce Transparency","source":"hig"}],"tags":["theming"],"relations":{"contrastWith":["prefers-reduced-motion","prefers-contrast"],"variantOf":[],"partOf":[],"seeAlso":["glassmorphism","vibrancy"]},"implementations":[],"sources":[{"title":"MDN: Using media queries for accessibility","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using_for_accessibility"}],"demo":"inline","useWhen":"frosted panels have to become solid on request"},{"name":"Redundant entry","slug":"redundant-entry","category":"accessibility","status":"published","definition":"The rule against asking for the same information twice in one process, unless it is re-entered for a real reason such as confirmation.","aliases":[{"name":"re-entering information","source":"wcag"},{"name":"repeat entry","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["smart-defaults","input-purpose"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Redundant Entry","url":"https://www.w3.org/TR/WCAG22/#redundant-entry"}],"demo":"inline","useWhen":"a wizard asks for the address a second time"},{"name":"Reference line","slug":"reference-line","category":"component","status":"published","definition":"A line drawn at a meaningful value across a chart: a target, a threshold, an average, a before-and-after moment.","aliases":[{"name":"threshold line"},{"name":"target line"},{"name":"goal line"},{"name":"benchmark line"}],"tags":["dataviz"],"relations":{"contrastWith":["error-bar","axis"],"variantOf":[],"partOf":["chart"],"seeAlso":[]},"implementations":[],"sources":[{"title":"Material (M2): Data visualization","url":"https://m2.material.io/design/communication/data-visualization.html"}],"demo":"inline","useWhen":"a chart needs a benchmark the eye can compare marks against"},{"name":"Reflow","slug":"reflow","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"400% zoom","source":"community"},{"name":"320 CSS pixels","source":"wcag"},{"name":"no horizontal scrolling","source":"community"}],"tags":[],"relations":{"contrastWith":["responsive-web-design","resize-text","screen-magnification"],"variantOf":[],"partOf":[],"seeAlso":["text-spacing"]},"implementations":[{"system":"fluent","name":"Responsive layouts","url":"https://fluent2.microsoft.design/accessibility"}],"sources":[{"title":"WCAG 2.2: Reflow","url":"https://www.w3.org/TR/WCAG22/#reflow"}],"demo":"inline","useWhen":"checking a layout at heavy zoom, not just on phones"},{"name":"Relative color syntax","slug":"relative-color-syntax","category":"color","status":"published","definition":"CSS notation that builds a new colour from an existing one by naming an origin colour with from and then adjusting individual channels.","aliases":[{"name":"from keyword","source":"css"},{"name":"relative colors","source":"css"},{"name":"channel adjustment","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["color-mix"],"variantOf":[],"partOf":[],"seeAlso":["color-alias"]},"implementations":[],"sources":[{"title":"MDN: Using relative colors","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors"}],"demo":"inline","useWhen":"deriving a colour by editing one channel of another"},{"name":"Relative luminance","slug":"relative-luminance","category":"color","status":"published","definition":"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.","aliases":[{"name":"luminance","source":"community"},{"name":"perceived brightness","source":"community"},{"name":"L1 L2","source":"wcag"}],"tags":[],"relations":{"contrastWith":["contrast-ratio","lightness","perceptual-uniformity"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Understanding Success Criterion 1.4.11: Non-text Contrast","url":"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html"},{"title":"CSS Color Module Level 4","url":"https://www.w3.org/TR/css-color-4/"}],"demo":"inline","useWhen":"explaining why two colours of equal saturation contrast differently"},{"name":"Relative timestamp","slug":"relative-timestamp","category":"component","status":"published","definition":"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.","aliases":[{"name":"relative time","source":"primer"},{"name":"time ago","source":"community"},{"name":"fuzzy timestamp","source":"community"},{"name":"humanized time","source":"community"}],"tags":[],"relations":{"contrastWith":["countdown-timer"],"variantOf":[],"partOf":[],"seeAlso":["read-receipt"]},"implementations":[],"sources":[{"title":"Primer components","url":"https://primer.style/components"}],"demo":"inline","useWhen":"printing a time as how long ago it was"},{"name":"Required field indicator","slug":"required-field-indicator","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"asterisk convention","source":"community"},{"name":"aria-required","source":"aria"},{"name":"required marker","source":"community"},{"name":"optional marking","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["helper-text","invalid-state"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Labels or Instructions","url":"https://www.w3.org/TR/WCAG22/#labels-or-instructions"}],"demo":"inline","useWhen":"deciding how to mark required versus optional fields"},{"name":"Resize handle","slug":"resize-handle","category":"component","status":"published","definition":"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.","aliases":[{"name":"size grip","source":"community"},{"name":"grow box","source":"community"},{"name":"resizer","source":"community"},{"name":"corner grip","source":"community"},{"name":"handlebar","source":"community"}],"tags":[],"relations":{"contrastWith":["splitter","column-resizer","drag-handle"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Size Grip, Microsoft Learn","url":"https://learn.microsoft.com/en-us/windows/win32/winauto/size-grip"}],"demo":"inline","useWhen":"the corner grip that resizes a box"},{"name":"Resize text","slug":"resize-text","category":"accessibility","status":"published","definition":"Text must scale to at least 200 percent without loss of content or function, which rules out fixed pixel heights around wrapping copy.","aliases":[{"name":"text-only zoom","source":"community"},{"name":"browser zoom","source":"community"},{"name":"200% text","source":"wcag"},{"name":"user font size","source":"community"}],"tags":[],"relations":{"contrastWith":["dynamic-type","reflow","screen-magnification","text-spacing"],"variantOf":[],"partOf":[],"seeAlso":["images-of-text"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Resize Text","url":"https://www.w3.org/TR/WCAG22/#resize-text"}],"demo":"inline","useWhen":"the reader has enlarged text, not the whole page"},{"name":"Responsive upscaling","slug":"responsive-upscaling","category":"layout","status":"published","definition":"Designing what a layout does with the space it gains on very wide screens, rather than only what it drops as screens narrow.","aliases":[{"name":"upscaling","source":"baymard"},{"name":"large screen design","source":"community"}],"tags":[],"relations":{"contrastWith":["window-size-class","mobile-first"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Responsive Upscaling: 11 Ideas for Large-Screen E-Commerce Design, Baymard","url":"https://baymard.com/blog/responsive-upscaling"}],"demo":"inline","useWhen":"the layout has more room than it knows what to do with"},{"name":"Responsive web design","slug":"responsive-web-design","category":"layout","status":"published","definition":"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.","aliases":[{"name":"RWD","source":"community"},{"name":"responsive design","source":"community"},{"name":"fluid design","source":"community"}],"tags":[],"relations":{"contrastWith":["reflow","adaptive-layout"],"variantOf":[],"partOf":[],"seeAlso":["orientation-lock"]},"implementations":[],"sources":[{"title":"Responsive Web Design, A List Apart","url":"https://alistapart.com/article/responsive-web-design/"}],"demo":"inline","useWhen":"the umbrella term for one adapting layout"},{"name":"Retro film aesthetic","slug":"retro-film-aesthetic","category":"aesthetic","status":"published","definition":"A treatment that makes digital imagery look shot on film, adding grain, halation, light leaks, faded contrast, dust, and sometimes a corner date stamp.","aliases":[{"name":"vintage analog","source":"uistyleguide"},{"name":"analog nostalgia"},{"name":"film look"},{"name":"35mm look"},{"name":"polaroid look"},{"name":"light leak"}],"tags":[],"relations":{"contrastWith":["grainy-gradient","vhs-aesthetic"],"variantOf":[],"partOf":[],"seeAlso":["vignette"]},"implementations":[],"sources":[{"title":"Wix: web design trends","url":"https://www.wix.com/blog/web-design-trends"}],"demo":"inline","useWhen":"photography faked to look developed rather than rendered"},{"name":"Retro-futurism","slug":"retro-futurism","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"retrofuturism"},{"name":"retro-future"},{"name":"yesterday's tomorrow"}],"tags":[],"relations":{"contrastWith":["cassette-futurism","synthwave","afrofuturism"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Aesthetics Wiki: Retrofuturism","url":"https://aesthetics.fandom.com/wiki/Retrofuturism"},{"title":"Wikipedia: Raygun Gothic","url":"https://en.wikipedia.org/wiki/Raygun_Gothic"}],"demo":"inline","useWhen":"a future imagined by an older decade, not by this one"},{"name":"Retro web design","slug":"retro-web-design","category":"aesthetic","status":"published","definition":"A style that rebuilds the early desktop web on purpose: beveled window chrome, pixel and system type, garish color, and animated banners.","aliases":[{"name":"90s web design"},{"name":"retro UI"},{"name":"nostalgia web"},{"name":"Windows 95 UI","source":"community"}],"tags":[],"relations":{"contrastWith":["vernacular-web","brutalist-web-design","vaporwave"],"variantOf":[],"partOf":[],"seeAlso":["pixel-art-ui"]},"implementations":[],"sources":[{"title":"Superdesign: Retro Web Design: CSS Recipe, Live Examples and Trend Data","url":"https://superdesign.dev/styles/retro"},{"title":"Setproduct: Retro and brutalist UI design, a field guide","url":"https://www.setproduct.com/blog/retro-brutalist-ui-design-2026"}],"demo":"inline","useWhen":"the page imitates a 90s desktop or an early website"},{"name":"Reveal animation","slug":"reveal-animation","category":"motion","status":"published","definition":"Motion that uncovers content already in place, usually by growing a clip or mask outward from a point rather than moving the content itself.","aliases":[{"name":"circular reveal","source":"material"},{"name":"clip-path reveal","source":"community"},{"name":"unfold","source":"community"},{"name":"masking","source":"community"},{"name":"organic mask reveal","source":"community"}],"tags":[],"relations":{"contrastWith":["wipe","line-drawing-animation","height-animation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Circular reveal (createCircularReveal)","url":"https://developer.android.com/training/animation/reveal-or-hide-view"}],"sources":[{"title":"Android: reveal or hide a view using animation","url":"https://developer.android.com/training/animation/reveal-or-hide-view"},{"title":"MDN: clip-path","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path"}],"demo":"inline","useWhen":"content should be uncovered rather than moved in"},{"name":"Review cursor","slug":"review-cursor","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"NVDA review cursor","source":"community"},{"name":"screen review","source":"community"},{"name":"flat review","source":"community"}],"tags":[],"relations":{"contrastWith":["browse-mode","rotor"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"NVDA User Guide: Review cursor","url":"https://download.nvaccess.org/documentation/userGuide.html"}],"demo":"inline","useWhen":"a reader inspects content without leaving the field"},{"name":"Ribbon","slug":"ribbon","category":"component","status":"published","definition":"A tall tabbed toolbar that replaces menus, grouping commands into labelled sections with the important ones drawn larger.","aliases":[{"name":"ribbon bar","source":"community"},{"name":"office ribbon","source":"community"},{"name":"fluent ribbon","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["toolbar","menu-bar","rich-text-toolbar"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Nielsen Norman Group: User interface elements glossary","url":"https://www.nngroup.com/articles/ui-elements-glossary/"}],"demo":"inline","useWhen":"the tall tabbed command strip in Office style apps"},{"name":"Rich text editor","slug":"rich-text-editor","category":"component","status":"published","definition":"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.","aliases":[{"name":"RTE","source":"component-gallery"},{"name":"wysiwyg editor","source":"component-gallery"},{"name":"markdown editor","source":"elastic-eui"},{"name":"editor","source":"atlassian"}],"tags":[],"relations":{"contrastWith":["code-editor","textarea"],"variantOf":[],"partOf":[],"seeAlso":["rich-text-toolbar","inline-edit","pilcrow"]},"implementations":[],"sources":[{"title":"The Component Gallery: Rich text editor","url":"https://component.gallery/components/rich-text-editor/"}],"demo":"inline","useWhen":"authors need formatting without learning a markup language"},{"name":"Rich text toolbar","slug":"rich-text-toolbar","category":"component","status":"published","definition":"The strip of formatting controls above or beside an editor, whose buttons report their state from wherever the caret sits.","aliases":[{"name":"formatting toolbar","source":"community"},{"name":"wysiwyg toolbar","source":"community"},{"name":"editor toolbar","source":"community"},{"name":"format bar","source":"community"}],"tags":[],"relations":{"contrastWith":["toolbar","ribbon","bubble-toolbar"],"variantOf":[],"partOf":[],"seeAlso":["rich-text-editor"]},"implementations":[{"system":"aria-apg","name":"Toolbar","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"sources":[{"title":"ARIA Authoring Practices Guide: Toolbar pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"the formatting strip over a text editor"},{"name":"Ripple","slug":"ripple","category":"motion","status":"published","definition":"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.","aliases":[{"name":"ink ripple","source":"material"},{"name":"touch ripple"}],"tags":[],"relations":{"contrastWith":["state-layer","haptic-feedback"],"variantOf":[],"partOf":[],"seeAlso":["microinteraction","pressed-state"]},"implementations":[{"system":"material","name":"State layer (ripple)","url":"https://m3.material.io/foundations/interaction/states/overview"}],"sources":[{"title":"Material Design 3: States","url":"https://m3.material.io/foundations/interaction/states/overview"}],"demo":"inline","useWhen":"touch feedback that spreads from the contact point"},{"name":"Risograph style","slug":"risograph","category":"aesthetic","status":"published","definition":"A print-inspired look of two or three flat spot colors that misregister slightly and show grain, imitating a riso duplicator.","aliases":[{"name":"riso print","source":"community"},{"name":"riso aesthetic"},{"name":"misregistration style"},{"name":"spot color print look"}],"tags":["editorial"],"relations":{"contrastWith":["duotone","halftone","pop-art-style"],"variantOf":[],"partOf":[],"seeAlso":["digital-collage"]},"implementations":[],"sources":[{"title":"Riso Kagaku: about RISO printers","url":"https://us.riso.com/"}],"demo":"inline","useWhen":"flat spot colors that overprint and slip out of register"},{"name":"River","slug":"river","category":"typography","status":"published","definition":"An accidental channel of white space running down a paragraph where word spaces on consecutive lines happen to line up.","aliases":[{"name":"rivers of white"},{"name":"river of white space"}],"tags":["editorial"],"relations":{"contrastWith":["typographic-color","hyphenation-ladder","rag"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"River (Wikipedia)","url":"https://en.wikipedia.org/wiki/River_(typography)"},{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"}],"demo":"inline","useWhen":"naming the white streak running down a paragraph"},{"name":"Roach motel","slug":"roach-motel","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"hard to cancel","source":"deceptive-design"},{"name":"cancellation friction","source":"community"},{"name":"easy in hard out","source":"community"},{"name":"click to cancel violation","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["forced-continuity","obstruction"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Hard to cancel","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"easy to sign up, deliberately hard to leave"},{"name":"Role description","slug":"role-description","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-roledescription","source":"aria"},{"name":"custom role name","source":"community"}],"tags":[],"relations":{"contrastWith":["accessibility-trait","accessible-name"],"variantOf":[],"partOf":[],"seeAlso":["verbosity"]},"implementations":[],"sources":[{"title":"MDN: aria-roledescription","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-roledescription"}],"demo":"inline","useWhen":"renaming what a widget calls itself out loud"},{"name":"Rotate gesture","slug":"rotate-gesture","category":"interaction","status":"published","definition":"Two fingers turning around a common center to rotate the object or view beneath them, the angle tracking the fingers as they orbit.","aliases":[{"name":"rotate","source":"material"},{"name":"twist","source":"community"},{"name":"two-finger rotate","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["orbit","pinch-to-zoom"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Rotate","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: Gestures (rotate)","url":"https://m1.material.io/patterns/gestures.html"}],"demo":"inline","useWhen":"turning content with two fingers rather than a handle"},{"name":"Rotor","slug":"rotor","category":"accessibility","status":"published","definition":"VoiceOver's dial for choosing what a swipe or flick moves between: headings, links, landmarks, form controls, or characters.","aliases":[{"name":"VoiceOver rotor","source":"hig"},{"name":"gestures rotor","source":"hig"},{"name":"element list","source":"community"},{"name":"quick nav","source":"community"},{"name":"landmark rotor","source":"community"}],"tags":[],"relations":{"contrastWith":["review-cursor","browse-mode"],"variantOf":[],"partOf":[],"seeAlso":["heading-hierarchy","landmark"]},"implementations":[],"sources":[{"title":"Use the VoiceOver rotor on Mac, Apple Support","url":"https://support.apple.com/guide/voiceover/voiceover-rotor-mchlp2719/mac"},{"title":"VoiceOver gestures on iOS, Deque University","url":"https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts"}],"demo":"inline","useWhen":"naming the VoiceOver dial that picks a navigation unit"},{"name":"Route announcement","slug":"route-announcement","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"route announcer","source":"next"},{"name":"SPA navigation announcement","source":"community"},{"name":"page change announcement","source":"community"},{"name":"focus on route change","source":"community"}],"tags":[],"relations":{"contrastWith":["page-title","focus-management"],"variantOf":[],"partOf":[],"seeAlso":["page-transition"]},"implementations":[],"sources":[{"title":"Dave Rupert: Accessible page navigations in single page apps","url":"https://daverupert.com/2019/01/accessible-page-navigations-in-single-page-apps/"}],"demo":"iframe","useWhen":"the URL changed but the page never reloaded"},{"name":"Roving tabindex","slug":"roving-tabindex","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"roving tab index","source":"community"},{"name":"arrow key navigation","source":"community"},{"name":"composite widget focus","source":"aria-apg"}],"tags":["a11y","keyboard"],"relations":{"contrastWith":["active-descendant","positive-tabindex","spatial-navigation","tab-stop"],"variantOf":[],"partOf":[],"seeAlso":["selection-follows-focus"]},"implementations":[{"system":"aria-apg","name":"Roving tabindex","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"sources":[{"title":"ARIA APG: Developing a keyboard interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"demo":"inline","useWhen":"a group of controls that Tab treats as one stop"},{"name":"RTL mirroring","slug":"rtl-mirroring","category":"layout","status":"published","definition":"Flipping a layout horizontally for right to left languages, moving navigation and progression to the other side while leaving some elements unmirrored.","aliases":[{"name":"bidirectional layout","source":"community"},{"name":"bidi","source":"community"},{"name":"right to left layout","source":"community"},{"name":"mirroring","source":"material"}],"tags":[],"relations":{"contrastWith":["bidirectional-text"],"variantOf":[],"partOf":[],"seeAlso":["language-attribute"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"shipping the same screen in Arabic or Hebrew"},{"name":"Ruby annotation","slug":"ruby-annotation","category":"typography","status":"published","definition":"Small guide text set beside or above a run of base text, most often to give the pronunciation of East Asian characters.","aliases":[{"name":"furigana","source":"community"},{"name":"ruby text","source":"html"},{"name":"rubi"},{"name":"phonetic guide"}],"tags":[],"relations":{"contrastWith":["pronunciation","vertical-writing-mode"],"variantOf":[],"partOf":[],"seeAlso":["superscript"]},"implementations":[],"sources":[{"title":"Ruby (W3C Internationalization)","url":"https://www.w3.org/International/questions/qa-ruby.en.html"},{"title":"HTML Ruby Markup Extensions (W3C)","url":"https://www.w3.org/TR/html-ruby-extensions/"}],"demo":"inline","useWhen":"annotating characters with their pronunciation"},{"name":"Rule builder","slug":"rule-builder","category":"pattern","status":"published","definition":"Assembling a condition from dropdowns and values, joined by and or or, so a non-programmer can express a query without writing one.","aliases":[{"name":"condition builder","source":"community"},{"name":"smart playlist rules","source":"community"}],"tags":["search"],"relations":{"contrastWith":["attribute-editor","property-filter"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: interaction design patterns","url":"https://ui-patterns.com/patterns"},{"title":"Cloudscape: patterns","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"building an if-this-then-that condition from dropdowns"},{"name":"Rule of thirds","slug":"rule-of-thirds","category":"layout","status":"published","definition":"Dividing a frame into nine equal cells with two lines each way and placing the important elements on the lines or their intersections.","aliases":[{"name":"thirds grid","source":"community"},{"name":"compositional thirds","source":"photography"}],"tags":[],"relations":{"contrastWith":["focal-point","golden-ratio"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"placing a focal point off centre on purpose"},{"name":"Runt","slug":"runt","category":"typography","status":"published","definition":"A single word left alone on the last line of a paragraph or heading.","aliases":[{"name":"lonely word"},{"name":"hanging word"}],"tags":["editorial"],"relations":{"contrastWith":["widow","orphan","text-balancing"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"An end to typographic widows on the web (Clagnut)","url":"https://clagnut.com/blog/2424"},{"title":"text-wrap balance vs pretty (LogRocket)","url":"https://blog.logrocket.com/css-text-wrap-balance-vs-text-wrap-pretty/"}],"demo":"inline","useWhen":"naming the lone word on a heading's last line"},{"name":"Safe area","slug":"safe-area","category":"layout","status":"published","definition":"The part of the screen guaranteed clear of notches, system bars and rounded corners, where interactive content can safely sit.","aliases":[{"name":"safe area inset","source":"community"},{"name":"safe area layout guide","source":"hig"},{"name":"safe zone","source":"community"},{"name":"env(safe-area-inset-bottom)","source":"css"},{"name":"window insets","source":"android"}],"tags":["platform-registers"],"relations":{"contrastWith":["display-cutout","home-indicator","edge-to-edge"],"variantOf":[],"partOf":[],"seeAlso":["focus-not-obscured","layout-margins","status-bar"]},"implementations":[{"system":"hig","name":"safeAreaLayoutGuide","url":"https://developer.apple.com/documentation/uikit/uiview/safearealayoutguide"}],"sources":[{"title":"env() CSS function, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/env"},{"title":"Using safe-area-inset to build mobile-safe layouts, Polypane","url":"https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/"}],"demo":"inline","useWhen":"the region a control can occupy without being clipped"},{"name":"Sans-serif","slug":"sans-serif","category":"typography","status":"published","definition":"A typeface drawn without finishing strokes on the ends of its stems, which is the default register of most interface type.","aliases":[{"name":"sans"},{"name":"grotesque","source":"community"},{"name":"gothic","source":"community"}],"tags":[],"relations":{"contrastWith":["serif"],"variantOf":[],"partOf":[],"seeAlso":["superfamily"]},"implementations":[],"sources":[{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"naming type without finishing strokes"},{"name":"Saturation","slug":"saturation","category":"color","status":"published","definition":"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.","aliases":[{"name":"intensity","source":"community"},{"name":"vividness"},{"name":"colourfulness"},{"name":"colorfulness"},{"name":"S in HSL"}],"tags":[],"relations":{"contrastWith":["hue","lightness","chroma"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"}],"demo":"inline","useWhen":"describing how vivid or washed out a colour looks"},{"name":"Save for later","slug":"save-for-later","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"wishlist","source":"community"},{"name":"saved items","source":"community"},{"name":"read it later","source":"community"},{"name":"favorites","source":"ui-patterns"},{"name":"watchlist","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["mini-cart"],"variantOf":[],"partOf":[],"seeAlso":["soft-delete"]},"implementations":[],"sources":[{"title":"UI Patterns: Favorites","url":"https://ui-patterns.com/patterns/favorites"}],"demo":"inline","useWhen":"parking an item without buying or discarding it"},{"name":"Scaffold","slug":"scaffold","category":"layout","status":"published","definition":"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.","aliases":[{"name":"layout scaffold","source":"material"},{"name":"app scaffolding","source":"community"}],"tags":[],"relations":{"contrastWith":["canonical-layout","app-shell"],"variantOf":[],"partOf":[],"seeAlso":["app-silhouette","named-grid-areas"]},"implementations":[{"system":"material","name":"Scaffold","url":"https://m3.material.io/foundations/layout/scaffold/overview"}],"sources":[{"title":"Scaffold, Material Design 3","url":"https://m3.material.io/foundations/layout/scaffold/overview"}],"demo":"inline","useWhen":"the named slots a screen's parts drop into"},{"name":"Scanlines","slug":"scanlines","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"CRT effect"},{"name":"raster lines"},{"name":"screen door effect","source":"community"},{"name":"TV lines","source":"community"}],"tags":[],"relations":{"contrastWith":["vhs-aesthetic","glitch-aesthetic","pixel-art-ui"],"variantOf":[],"partOf":[],"seeAlso":["terminal-aesthetic"]},"implementations":[],"sources":[{"title":"Superdesign: Retro Web Design","url":"https://superdesign.dev/styles/retro"}],"demo":"inline","useWhen":"the screen is dressed as an old CRT monitor"},{"name":"Scarcity indicator","slug":"scarcity-indicator","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"low stock warning","source":"community"},{"name":"limited availability","source":"community"},{"name":"only N left","source":"community"},{"name":"scarcity","source":"ui-patterns"}],"tags":["commerce"],"relations":{"contrastWith":["countdown-timer","fake-scarcity"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: Scarcity","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"only two left in stock, printed next to the buy button"},{"name":"Scope bar","slug":"scope-bar","category":"component","status":"published","definition":"The row of category buttons directly under a search field that narrows what the query searches, such as All, Mail, Files.","aliases":[{"name":"search scope bar","source":"hig"},{"name":"search filters","source":"community"},{"name":"search tabs","source":"community"}],"tags":["search"],"relations":{"contrastWith":["tabs","segmented-control"],"variantOf":[],"partOf":[],"seeAlso":["search-field"]},"implementations":[],"sources":[{"title":"Apple Human Interface Guidelines: Search fields","url":"https://developer.apple.com/design/human-interface-guidelines/search-fields"}],"demo":"inline","useWhen":"buttons under a search box that limit its reach"},{"name":"Screen curtain","slug":"screen-curtain","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"VoiceOver screen curtain","source":"hig"},{"name":"blackout mode","source":"community"},{"name":"screen off navigation","source":"community"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["screen-reader","explore-by-touch"]},"implementations":[],"sources":[{"title":"Apple Support: Use Screen Curtain with VoiceOver","url":"https://support.apple.com/en-us/111797"}],"demo":"inline","useWhen":"testing whether a flow works with the screen dark"},{"name":"Screen magnification","slug":"screen-magnification","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"screen magnifier","source":"community"},{"name":"ZoomText","source":"community"},{"name":"magnifier keyhole","source":"community"},{"name":"low vision zoom","source":"community"}],"tags":[],"relations":{"contrastWith":["resize-text","reflow","screen-reader"],"variantOf":[],"partOf":[],"seeAlso":["fisheye-view"]},"implementations":[],"sources":[{"title":"AbilityNet: Screen magnification","url":"https://abilitynet.org.uk/factsheets/screen-magnification"}],"demo":"inline","useWhen":"a toast at the corner will never be seen"},{"name":"Screen reader","slug":"screen-reader","category":"accessibility","status":"published","definition":"Software that speaks or brailles the accessibility tree and supplies its own keyboard commands for moving through a page.","aliases":[{"name":"NVDA","source":"community"},{"name":"JAWS","source":"community"},{"name":"VoiceOver","source":"hig"},{"name":"TalkBack","source":"android"},{"name":"Narrator","source":"microsoft"}],"tags":[],"relations":{"contrastWith":["braille-display","voice-control","screen-magnification","read-aloud"],"variantOf":[],"partOf":[],"seeAlso":["accessibility-tree","pronunciation","screen-curtain","verbosity"]},"implementations":[],"sources":[{"title":"WebAIM articles","url":"https://webaim.org/articles/"},{"title":"web.dev: accessibility glossary","url":"https://web.dev/learn/accessibility/glossary/"}],"demo":"inline","useWhen":"naming the software that reads an interface aloud"},{"name":"Scrim","slug":"scrim","category":"color","status":"published","definition":"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.","aliases":[{"name":"overlay","source":"community"},{"name":"backdrop","source":"community"},{"name":"image overlay","source":"community"},{"name":"gradient overlay","source":"community"},{"name":"dim layer","source":"community"}],"tags":[],"relations":{"contrastWith":["progressive-blur","vignette","watermark","focus-trap"],"variantOf":[],"partOf":[],"seeAlso":["modal-dialog","lightbox"]},"implementations":[{"system":"material","name":"Scrim","url":"https://m3.material.io/styles/color/roles"}],"sources":[{"title":"Designing Accessible Text Over Images","url":"https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1/"},{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"}],"demo":"inline","useWhen":"darkening what is behind so the layer above stays readable"},{"name":"Scroll anchoring","slug":"scroll-anchoring","category":"interaction","status":"published","definition":"Keeping the reader's position fixed when content loads or resizes above it, by adjusting scroll offset so the visible text does not jump.","aliases":[{"name":"anchor scrolling","source":"community"},{"name":"overflow-anchor","source":"mdn"},{"name":"scroll jump prevention","source":"community"}],"tags":["perceived-performance","scroll","web-platform"],"relations":{"contrastWith":["focus-not-obscured","layout-shift"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: overscroll-behavior (scrolling behaviour reference)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior"}],"demo":"inline","useWhen":"content loads above and the view must not jump"},{"name":"Scroll chaining","slug":"scroll-chaining","category":"interaction","status":"published","definition":"When an inner scroller reaches its end and the gesture continues, the scroll passes to the page behind it unless that handoff is blocked.","aliases":[{"name":"scroll propagation","source":"community"},{"name":"overscroll-behavior: contain","source":"mdn"},{"name":"scroll bleed","source":"community"}],"tags":["scroll","web-platform"],"relations":{"contrastWith":["scroll-lock","overscroll"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: overscroll-behavior","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior"}],"demo":"inline","useWhen":"an inner scroll spills over into the page behind"},{"name":"Scroll container","slug":"scroll-container","category":"layout","status":"published","definition":"The element that actually scrolls its overflowing content, distinct from the page, and the box the browser calls the scrollport.","aliases":[{"name":"scrollport","source":"css"},{"name":"scrolling box","source":"css"},{"name":"overflow container","source":"community"},{"name":"scroll view","source":"hig"}],"tags":["scroll"],"relations":{"contrastWith":["viewport"],"variantOf":[],"partOf":[],"seeAlso":["focusable-scroll-region","drag-autoscroll","scrollbar","scroll-edge-fade"]},"implementations":[],"sources":[{"title":"CSS Overflow Module Level 3","url":"https://www.w3.org/TR/css-overflow-3/"},{"title":"CSS scroll snap, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap"}],"demo":"inline","useWhen":"identifying which box is doing the scrolling"},{"name":"Scroll edge fade","slug":"scroll-edge-fade","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"edge fade","source":"community"},{"name":"scroll fade","source":"community"},{"name":"overflow fade","source":"community"},{"name":"fade mask","source":"community"},{"name":"scroll shadow","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["progressive-blur"],"variantOf":[],"partOf":[],"seeAlso":["scroll-container","truncation"]},"implementations":[],"sources":[{"title":"MDN: mask-image","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask-image"},{"title":"Lea Verou: Pure CSS scrolling shadows with background-attachment local","url":"https://lea.verou.me/blog/2012/04/background-attachment-local/"}],"demo":"inline","useWhen":"showing a list continues past its clipped edge"},{"name":"Scroll hijacking","slug":"scroll-hijacking","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"scrolljacking","source":"community"},{"name":"hijacked scrolling","source":"community"},{"name":"scroll takeover","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["scroll-linked-animation","scroll-pinning"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the page takes over what one scroll of the wheel does"},{"name":"Scroll-linked animation","slug":"scroll-linked-animation","category":"motion","status":"published","definition":"An animation whose progress is bound to scroll position rather than to time, so scrolling back rewinds it exactly.","aliases":[{"name":"scroll scrubbing"},{"name":"scroll-driven animation","source":"css"},{"name":"scroll progress timeline","source":"css"},{"name":"scroll timeline","source":"css"}],"tags":["scroll","web-platform"],"relations":{"contrastWith":["scroll-hijacking","scroll-triggered-animation"],"variantOf":[],"partOf":[],"seeAlso":["scrubbing","velocity-skew","view-progress-timeline"]},"implementations":[],"sources":[{"title":"MDN: CSS scroll-driven animations","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations"}],"demo":"inline","useWhen":"the reader's scroll should drive the animation frame by frame"},{"name":"Scroll lock","slug":"scroll-lock","category":"interaction","status":"published","definition":"Freezing the page behind an open overlay so a wheel or swipe moves the overlay's own content and never the document underneath.","aliases":[{"name":"body scroll lock","source":"community"},{"name":"scroll blocking","source":"community"},{"name":"freeze background scroll","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["inert","scroll-chaining"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: overscroll-behavior","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior"}],"demo":"inline","useWhen":"the page must hold still while an overlay is open"},{"name":"Scroll pinning","slug":"scroll-pinning","category":"motion","status":"published","definition":"Holding a section fixed in place while the page keeps scrolling, spending scroll distance on an animation instead of on movement.","aliases":[{"name":"pin","source":"gsap"},{"name":"sticky section","source":"community"},{"name":"pinned section","source":"community"},{"name":"sticky scroll","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["scroll-snap","scrollytelling","scroll-hijacking","stacking-cards"],"variantOf":[],"partOf":[],"seeAlso":["sticky-sidebar","collapsing-toolbar"]},"implementations":[],"sources":[{"title":"GSAP: ScrollTrigger","url":"https://gsap.com/docs/v3/Plugins/ScrollTrigger/"}],"demo":"inline","useWhen":"a section should hold still while its content advances"},{"name":"Scroll snap","slug":"scroll-snap","category":"layout","status":"published","definition":"Snap positions declared on a scroll container so scrolling settles on a chosen item edge instead of stopping wherever momentum runs out.","aliases":[{"name":"snap scrolling","source":"community"},{"name":"snap points","source":"community"},{"name":"paging scroll","source":"community"},{"name":"full page scroll","source":"community"}],"tags":["scroll","web-platform"],"relations":{"contrastWith":["scroll-pinning","smooth-scrolling"],"variantOf":[],"partOf":[],"seeAlso":["carousel","momentum-scrolling"]},"implementations":[],"sources":[{"title":"CSS scroll snap, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap"}],"demo":"inline","useWhen":"scrolling that must land on an item, not between two"},{"name":"Scroll spy","slug":"scroll-spy","category":"pattern","status":"published","definition":"Navigation that watches the scroll position and highlights the entry for the section currently in view.","aliases":[{"name":"scrollspy"}],"tags":["navigation","scroll"],"relations":{"contrastWith":["table-of-contents","reading-progress"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: Intersection Observer API","url":"https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API"}],"demo":"inline","useWhen":"navigation that highlights the section you are reading"},{"name":"Scroll-triggered animation","slug":"scroll-triggered-animation","category":"motion","status":"published","definition":"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.","aliases":[{"name":"animate on scroll","source":"community"},{"name":"reveal on scroll","source":"community"},{"name":"AOS","source":"community"},{"name":"in-view animation","source":"framer-motion"},{"name":"toggleActions","source":"gsap"},{"name":"scroll reveal","source":"community"},{"name":"animation-trigger","source":"css"},{"name":"timeline-trigger","source":"css"}],"tags":["scroll"],"relations":{"contrastWith":["scroll-linked-animation","view-progress-timeline"],"variantOf":[],"partOf":[],"seeAlso":["lazy-loading","quick-return-header"]},"implementations":[],"sources":[{"title":"GSAP: ScrollTrigger","url":"https://gsap.com/docs/v3/Plugins/ScrollTrigger/"},{"title":"Chrome for Developers: CSS scroll-triggered animations are coming","url":"https://developer.chrome.com/blog/scroll-triggered-animations"}],"demo":"inline","useWhen":"scrolling should start the motion, not steer it"},{"name":"Scrollbar","slug":"scrollbar","category":"component","status":"published","definition":"The bar beside a scrollable region whose thumb shows both how much content there is and where in it you are.","aliases":[{"name":"scroller","source":"hig"},{"name":"scroll bar"},{"name":"overlay scrollbar"},{"name":"scroll indicator"},{"name":"scroll area","source":"radix"}],"tags":["scroll"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["scrollbar-color","minimap","track","scroll-container"]},"implementations":[{"system":"base-ui","name":"Scroll Area","url":"https://base-ui.com/react/components/scroll-area"}],"sources":[{"title":"User Interface Elements Glossary, NN/g","url":"https://www.nngroup.com/articles/ui-elements-glossary/"}],"demo":"inline","useWhen":"the bar that shows and sets scroll position"},{"name":"Scrollbar color","slug":"scrollbar-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"scrollbar thumb","source":"community"},{"name":"custom scrollbar","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["selection-color"],"variantOf":[],"partOf":[],"seeAlso":["scrollbar"]},"implementations":[],"sources":[{"title":"MDN: scrollbar-color","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-color"}],"demo":"inline","useWhen":"matching the scrollbar to a dark or branded theme"},{"name":"Scrollytelling","slug":"scrollytelling","category":"pattern","status":"published","definition":"A narrative layout where a pinned graphic stays fixed while text scrolls past it, each step changing what the graphic shows.","aliases":[{"name":"scroll driven narrative","source":"community"},{"name":"pinned scroll","source":"community"},{"name":"sticky graphic","source":"community"},{"name":"scroll story","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["scroll-pinning"],"variantOf":[],"partOf":[],"seeAlso":["timeline","stacking-cards"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"one visual that changes as the story scrolls past"},{"name":"Scrubber","slug":"scrubber","category":"component","status":"published","definition":"The seek control of a media player: a track showing elapsed and buffered time with a playhead you drag to move through it.","aliases":[{"name":"seek bar"},{"name":"progress scrubber"},{"name":"timeline scrubber"},{"name":"transport slider"}],"tags":["media"],"relations":{"contrastWith":["slider","progress-bar","waveform","scrubbing","media-controls"],"variantOf":[],"partOf":[],"seeAlso":["playhead","timeline"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers: patterns","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"the bar you drag to move through a video"},{"name":"Scrubbing","slug":"scrubbing","category":"interaction","status":"published","definition":"Dragging a playhead along a timeline to move through media by hand, previewing frames as the position changes rather than waiting for playback.","aliases":[{"name":"scrub","source":"community"},{"name":"seeking","source":"community"},{"name":"timeline scrubbing","source":"community"}],"tags":["media"],"relations":{"contrastWith":["scrubber"],"variantOf":[],"partOf":[],"seeAlso":["playhead","scroll-linked-animation"]},"implementations":[],"sources":[{"title":"Cloudinary: Video scrubbing","url":"https://cloudinary.com/glossary/video-scrubbing"},{"title":"Audacity manual: Scrubbing and seeking","url":"https://manual.audacityteam.org/man/scrubbing_and_seeking.html"}],"demo":"inline","useWhen":"dragging through time to find a moment"},{"name":"Scrubby slider","slug":"scrubby-slider","category":"interaction","status":"published","definition":"A numeric field whose label can be dragged sideways to change the value, giving a slider's feel without a slider taking up room.","aliases":[{"name":"number scrubbing","source":"community"},{"name":"scrubby sliders","source":"photoshop"},{"name":"drag to change value","source":"community"},{"name":"sliding value","source":"figma"},{"name":"draggable number input","source":"community"}],"tags":[],"relations":{"contrastWith":["knob"],"variantOf":[],"partOf":[],"seeAlso":["nudge"]},"implementations":[],"sources":[{"title":"CSS-Tricks: Number scrubbing","url":"https://css-tricks.com/number-scrubbing/"},{"title":"John Nack on Adobe: Scrubby sliders and more","url":"https://blogs.adobe.com/jnack/2009/02/scrubby_sliders_more.html"}],"demo":"inline","useWhen":"dragging a label to change the number beside it"},{"name":"Search field","slug":"search-field","category":"component","status":"published","definition":"A text input specialised for queries, with a magnifier, a clear control and often suggestions that appear as you type.","aliases":[{"name":"search box","source":"community"},{"name":"searchbox","source":"fluent"},{"name":"search bar","source":"material"},{"name":"omnibox","source":"community"},{"name":"search input","source":"component-gallery"},{"name":"text filter","source":"cloudscape"}],"tags":["search"],"relations":{"contrastWith":["combobox","command-palette","faceted-search","prompt-input"],"variantOf":["text-field"],"partOf":[],"seeAlso":["property-filter","scope-bar"]},"implementations":[{"system":"material","name":"Search","url":"https://m3.material.io/components/search/overview"},{"system":"hig","name":"Search fields","url":"https://developer.apple.com/design/human-interface-guidelines/search-fields"},{"system":"fluent","name":"Searchbox","url":"https://fluent2.microsoft.design/components/web/react/core/searchbox/usage/"},{"system":"carbon","name":"Search","url":"https://carbondesignsystem.com/components/search/usage/"},{"system":"polaris","name":"Search field","url":"https://shopify.dev/docs/api/app-home/polaris-web-components/forms/search-field"}],"sources":[{"title":"MDN: <input type=\"search\">","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/search"},{"title":"Nielsen Norman Group: Search: Visible and Simple","url":"https://www.nngroup.com/articles/search-visible-and-simple/"}],"demo":"inline","useWhen":"the input is for searching, not for data entry"},{"name":"Secondary click","slug":"secondary-click","category":"interaction","status":"published","definition":"The alternate pointer press, usually the right button or a two-finger tap, reserved for opening contextual actions rather than activating.","aliases":[{"name":"right click","source":"community"},{"name":"context click","source":"community"},{"name":"two-finger click","source":"hig"},{"name":"control-click","source":"hig"}],"tags":[],"relations":{"contrastWith":["context-menu","double-click","middle-click","tap"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: Pointer events","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"}],"demo":"inline","useWhen":"the press that asks for options instead of acting"},{"name":"Seed color","slug":"seed-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"source color","source":"material"},{"name":"key color","source":"material"},{"name":"base color","source":"community"},{"name":"primary seed","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["hct","color-harmonization","brand-color"],"variantOf":[],"partOf":[],"seeAlso":["material-you","identicon"]},"implementations":[{"system":"radix","name":"Custom palette generation","url":"https://www.radix-ui.com/colors/docs/overview/custom-palettes"}],"sources":[{"title":"Material 3: how the color system works","url":"https://m3.material.io/styles/color/system/how-the-system-works"}],"demo":"inline","useWhen":"one colour in, a whole palette out"},{"name":"Segmented control","slug":"segmented-control","category":"component","status":"published","definition":"A single control holding two to five mutually exclusive options side by side, with the current one shown as a filled segment.","aliases":[{"name":"content switcher","source":"carbon"},{"name":"segmented button","source":"material"}],"tags":[],"relations":{"contrastWith":["tabs","radio-group","toggle-group","button-group","morphing-controls","scope-bar"],"variantOf":[],"partOf":[],"seeAlso":["sliding-indicator","model-selector"]},"implementations":[{"system":"hig","name":"Segmented controls","url":"https://developer.apple.com/design/human-interface-guidelines/segmented-controls"},{"system":"material","name":"Segmented buttons","url":"https://m3.material.io/components/segmented-buttons/overview"},{"system":"radix","name":"Toggle Group","url":"https://www.radix-ui.com/primitives/docs/components/toggle-group"}],"sources":[],"demo":"inline","useWhen":"two to five exclusive options, all visible at once"},{"name":"Select","slug":"select","category":"component","status":"published","definition":"A closed control that shows the current choice and opens a list of options when pressed, with no typing.","aliases":[{"name":"dropdown list","source":"nngroup"},{"name":"picker","source":"hig"},{"name":"select menu"},{"name":"pull down menu"},{"name":"native select","source":"shadcn"}],"tags":["forms"],"relations":{"contrastWith":["combobox","menu-button","listbox","date-picker","model-selector","tree-select","wheel-picker","dropdown"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"base-ui","name":"Select","url":"https://base-ui.com/react/components/select"}],"sources":[{"title":"Select, Base UI","url":"https://base-ui.com/react/components/select"}],"demo":"inline","useWhen":"one choice from a known list, no typing"},{"name":"Select all across pages","slug":"select-all-across-pages","category":"pattern","status":"published","definition":"Offering to extend a selection from the visible page to every matching row, after a header checkbox has selected only what is on screen.","aliases":[{"name":"select all matching","source":"community"},{"name":"select all 1,204 items","source":"community"},{"name":"cross-page selection","source":"community"}],"tags":["selection"],"relations":{"contrastWith":["bulk-actions"],"variantOf":[],"partOf":[],"seeAlso":["set-size-and-position"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"select all offers to also take the rows you cannot see"},{"name":"Selection card","slug":"selection-card","category":"component","status":"published","definition":"A radio or checkbox dressed as a card, where the whole tile is the target and the control itself is small or absent.","aliases":[{"name":"radio card","source":"chakra"},{"name":"checkbox card","source":"chakra"},{"name":"tiles","source":"cloudscape"},{"name":"choice card","source":"community"},{"name":"option card","source":"community"},{"name":"control card","source":"blueprint"}],"tags":["forms","selection"],"relations":{"contrastWith":["radio-group","card","comparison-table"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Chakra UI: components overview","url":"https://chakra-ui.com/docs/components/concepts/overview"}],"demo":"inline","useWhen":"choosing between options drawn as big tiles"},{"name":"Selection color","slug":"selection-color","category":"color","status":"published","definition":"The highlight painted behind text a reader has selected, which a page can restyle and thereby break the contrast the operating system had guaranteed.","aliases":[{"name":"::selection","source":"css"},{"name":"text selection background","source":"community"}],"tags":["selection","theming"],"relations":{"contrastWith":["scrollbar-color"],"variantOf":[],"partOf":[],"seeAlso":["range-select","marching-ants"]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type (Highlight system colors)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"}],"demo":"inline","useWhen":"styling the highlight behind selected text"},{"name":"Selection follows focus","slug":"selection-follows-focus","category":"interaction","status":"published","definition":"A widget where moving focus also selects, so arrowing through tabs or a listbox changes the selection immediately rather than on a second press.","aliases":[{"name":"automatic activation","source":"aria-apg"},{"name":"manual activation","source":"aria-apg"},{"name":"follow focus","source":"community"}],"tags":["a11y","keyboard","selection"],"relations":{"contrastWith":["change-of-context"],"variantOf":[],"partOf":[],"seeAlso":["roving-tabindex","tabs","radio-group"]},"implementations":[{"system":"aria-apg","name":"Deciding When to Make Selection Automatically Follow Focus","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"sources":[{"title":"ARIA APG: Developing a keyboard interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"}],"demo":"inline","useWhen":"arrowing changes the choice, not just the highlight"},{"name":"Selection handle","slug":"selection-handle","category":"interaction","status":"published","definition":"The draggable grip at each end of a touch text selection, used to widen or narrow the range a finger cannot adjust precisely.","aliases":[{"name":"selection handles","source":"community"},{"name":"text selection grabber","source":"community"},{"name":"selection anchor","source":"community"},{"name":"text handle","source":"community"}],"tags":["selection","touch"],"relations":{"contrastWith":["caret"],"variantOf":[],"partOf":[],"seeAlso":["bubble-toolbar"]},"implementations":[],"sources":[{"title":"iOS HIG: Gestures (touch and hold in text)","url":"https://developer.apple.com/design/human-interface-guidelines/gestures"}],"demo":"inline","useWhen":"adjusting a touch selection by its endpoints"},{"name":"Semantic color","slug":"semantic-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"semantic colour"},{"name":"semantic color token","source":"community"}],"tags":["tokens"],"relations":{"contrastWith":["color-role","color-ramp","color-token","primitive-color-token"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"carbon","name":"Color tokens","url":"https://carbondesignsystem.com/elements/color/tokens/"}],"sources":[{"title":"Carbon Design System: color token usage","url":"https://carbondesignsystem.com/elements/color/usage/"}],"demo":"inline","useWhen":"naming the colour after its job instead of its hue"},{"name":"Semantic HTML","slug":"semantic-html","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"native semantics","source":"primer"},{"name":"implicit role","source":"primer"},{"name":"use the platform","source":"community"},{"name":"div soup","source":"community"},{"name":"divitis","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["first-rule-of-aria","name-role-value"],"variantOf":[],"partOf":[],"seeAlso":["heading-hierarchy","accessibility-trait","accessibility-tree","reader-mode"]},"implementations":[{"system":"polaris","name":"Semantic markup","url":"https://github.com/Shopify/polaris/blob/main/documentation/Accessibility.md"}],"sources":[{"title":"Primer: Semantic HTML and ARIA","url":"https://primer.style/accessibility/design-guidance/semantic-html-and-aria/"}],"demo":"inline","useWhen":"choosing between a native element and a rebuilt one"},{"name":"Semantic zoom","slug":"semantic-zoom","category":"layout","status":"published","definition":"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.","aliases":[{"name":"SemanticZoom","source":"fluent"},{"name":"zoomed out view","source":"fluent"},{"name":"zoomed in view","source":"fluent"}],"tags":[],"relations":{"contrastWith":["minimap","focus-plus-context"],"variantOf":[],"partOf":[],"seeAlso":["pinch-to-zoom","zoom-transition","infinite-canvas"]},"implementations":[{"system":"fluent","name":"Semantic zoom","url":"https://learn.microsoft.com/en-us/windows/apps/design/controls/semantic-zoom"}],"sources":[{"title":"Semantic zoom, Microsoft Learn","url":"https://learn.microsoft.com/en-us/windows/apps/design/controls/semantic-zoom"}],"demo":"inline","useWhen":"zooming out to headings, not to smaller text"},{"name":"Sensory characteristics","slug":"sensory-characteristics","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"shape and position instructions","source":"wcag"},{"name":"the button on the right","source":"community"}],"tags":[],"relations":{"contrastWith":["link-purpose","use-of-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Sensory Characteristics","url":"https://www.w3.org/TR/WCAG22/#sensory-characteristics"}],"demo":"inline","useWhen":"copy points at a control by shape or position"},{"name":"Sentence case","slug":"sentence-case","category":"typography","status":"published","definition":"Capitalising only the first word of a label or heading, plus any proper nouns, as you would in an ordinary sentence.","aliases":[{"name":"sentence-style capitalization","source":"material"},{"name":"normal case"}],"tags":[],"relations":{"contrastWith":["title-case","all-caps"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Writing style (Carbon Design System)","url":"https://carbondesignsystem.com/guidelines/content/writing-style/"},{"title":"Title case vs sentence case in UI","url":"https://www.everyinteraction.com/articles/title-case-vs-sentence-case-in-ui/"}],"demo":"inline","useWhen":"Google-style UI copy and anything meant to be read"},{"name":"Sequential palette","slug":"sequential-palette","category":"color","status":"published","definition":"A data palette that runs light to dark in one direction, encoding an ordered quantity so that darker always means more.","aliases":[{"name":"sequential scale","source":"community"},{"name":"single-hue scale","source":"community"},{"name":"heatmap scale","source":"community"}],"tags":["dataviz"],"relations":{"contrastWith":["diverging-palette","categorical-palette"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Color palettes for data visualization","url":"https://colorarchive.org/guides/data-visualization-color-palettes/"}],"demo":"inline","useWhen":"colour encoding an ordered quantity"},{"name":"Serif","slug":"serif","category":"typography","status":"published","definition":"The small finishing stroke at the end of a letter's stem, and by extension the class of typefaces that have them.","aliases":[{"name":"serif font"},{"name":"roman","source":"community"},{"name":"bracketed serif"}],"tags":[],"relations":{"contrastWith":["sans-serif"],"variantOf":[],"partOf":[],"seeAlso":["typeface"]},"implementations":[],"sources":[{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"},{"title":"Classification (Google Fonts Knowledge)","url":"https://fonts.google.com/knowledge/glossary/classification"}],"demo":"inline","useWhen":"naming the little feet on the ends of strokes"},{"name":"Set size and position","slug":"set-size-and-position","category":"accessibility","status":"published","definition":"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\".","aliases":[{"name":"aria-setsize","source":"aria"},{"name":"aria-posinset","source":"aria"},{"name":"item 6 of 16","source":"community"},{"name":"virtual list count","source":"community"}],"tags":[],"relations":{"contrastWith":["list-virtualization","pagination"],"variantOf":[],"partOf":[],"seeAlso":["select-all-across-pages"]},"implementations":[],"sources":[{"title":"MDN: aria-setsize","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-setsize"}],"demo":"inline","useWhen":"only twenty rows of ten thousand are in the DOM"},{"name":"Shade","slug":"shade","category":"color","status":"published","definition":"A colour with black mixed in, darker than the original hue and typically used for pressed states, borders and dark theme surfaces.","aliases":[{"name":"dark variant"},{"name":"600, 700, 800","source":"tailwind"}],"tags":[],"relations":{"contrastWith":["tint"],"variantOf":[],"partOf":[],"seeAlso":["color-ramp","color-mix"]},"implementations":[],"sources":[{"title":"Design Glossary: Basic Color Terminology","url":"https://design4users.com/basic-color-terminology/"}],"demo":"inline","useWhen":"a darker version of a colour made by adding black"},{"name":"Shake","slug":"shake-animation","category":"motion","status":"published","definition":"A short lateral wobble used to reject an input, borrowed from the head shake and read as no rather than as an error message.","aliases":[{"name":"error shake"},{"name":"wrong password shake"},{"name":"head shake"},{"name":"wobble"}],"tags":[],"relations":{"contrastWith":["jiggle-mode"],"variantOf":[],"partOf":[],"seeAlso":["inline-validation","haptic-feedback"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"an input is refused and should be felt, not just read"},{"name":"Shake to undo","slug":"shake-to-undo","category":"interaction","status":"published","definition":"Physically shaking a device to trigger undo or redo, an accelerometer gesture Apple defines system wide for reversing a recent edit.","aliases":[{"name":"shake gesture","source":"community"},{"name":"shake to redo","source":"community"}],"tags":[],"relations":{"contrastWith":["motion-actuation","undo"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"iOS HIG: Gestures (shake)","url":"https://developer.apple.com/design/human-interface-guidelines/gestures"}],"demo":"inline","useWhen":"undo triggered by motion rather than a control"},{"name":"Share sheet","slug":"share-sheet","category":"component","status":"published","definition":"The system panel of destinations and actions for sending the current item elsewhere, populated by whatever apps are installed.","aliases":[{"name":"activity view","source":"hig"},{"name":"share dialog","source":"community"},{"name":"share menu","source":"community"},{"name":"web share","source":"community"}],"tags":[],"relations":{"contrastWith":["action-sheet","qr-code","copy-button"],"variantOf":[],"partOf":[],"seeAlso":["context-menu"]},"implementations":[],"sources":[{"title":"Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/"}],"demo":"inline","useWhen":"the system panel for sending something onward"},{"name":"Shared axis","slug":"shared-axis","category":"motion","status":"published","definition":"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.","aliases":[{"name":"shared axis transition","source":"material"},{"name":"axis transition","source":"community"},{"name":"z-axis transition","source":"material"}],"tags":[],"relations":{"contrastWith":["fade-through","directionality","container-transform"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Shared axis","url":"https://m3.material.io/styles/motion/transitions"}],"sources":[{"title":"Material Design 3: Transitions","url":"https://m3.material.io/styles/motion/transitions"}],"demo":"inline","useWhen":"two views sit next to each other in a sequence or hierarchy"},{"name":"Shimmer","slug":"shimmer","category":"motion","status":"published","definition":"The moving highlight that sweeps across placeholder shapes to signal that content is still on its way.","aliases":[{"name":"shimmer effect"},{"name":"loading shimmer"},{"name":"wave","source":"mui"}],"tags":["perceived-performance"],"relations":{"contrastWith":["pulse-animation","specular-highlight"],"variantOf":[],"partOf":[],"seeAlso":["skeleton-screen","prefers-reduced-motion"]},"implementations":[],"sources":[{"title":"WCAG 2.2 Understanding SC 2.2.2: Pause, Stop, Hide","url":"https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html"},{"title":"MDN: prefers-reduced-motion","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion"}],"demo":"inline","useWhen":"the highlight travelling across a placeholder"},{"name":"Show more toggle","slug":"show-more-toggle","category":"component","status":"published","definition":"The control at the end of clamped text that expands it to full length and, when honest, collapses it again.","aliases":[{"name":"read more","source":"community"},{"name":"expandable text","source":"uxpatterns"},{"name":"spoiler","source":"mantine"},{"name":"see more","source":"community"},{"name":"truncate toggle","source":"community"}],"tags":[],"relations":{"contrastWith":["disclosure","load-more","truncation"],"variantOf":[],"partOf":[],"seeAlso":["line-clamp"]},"implementations":[],"sources":[{"title":"Expandable text, UX Patterns for Developers","url":"https://uxpatterns.dev/patterns/content-management/expandable-text"}],"demo":"inline","useWhen":"expanding text that was cut off after n lines"},{"name":"Sidebar","slug":"sidebar","category":"layout","status":"published","definition":"A persistent vertical region alongside the main content holding navigation or secondary controls, often collapsible on narrow screens.","aliases":[{"name":"side navigation","source":"community"},{"name":"side nav","source":"community"},{"name":"aside","source":"html"},{"name":"primary side bar","source":"vscode"}],"tags":["navigation"],"relations":{"contrastWith":["drawer","split-view","navigation-bar","navigation-rail","off-canvas"],"variantOf":[],"partOf":[],"seeAlso":["navigation-menu","local-navigation"]},"implementations":[],"sources":[{"title":"The Sidebar, Every Layout","url":"https://every-layout.dev/layouts/sidebar/"}],"demo":"inline","useWhen":"navigation that lives beside the content, not above it"},{"name":"Sidenote","slug":"sidenote","category":"layout","status":"published","definition":"A note placed in the outer margin beside the line it belongs to, rather than collected at the foot of the page.","aliases":[{"name":"margin note","source":"community"},{"name":"marginalia","source":"print"},{"name":"side note","source":"community"},{"name":"tufte sidenote","source":"community"}],"tags":["editorial"],"relations":{"contrastWith":["sticky-sidebar"],"variantOf":[],"partOf":[],"seeAlso":["superscript","breakout","pull-quote","blockquote"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"an aside that must stay level with its sentence"},{"name":"Sign language interpretation","slug":"sign-language-interpretation","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"signed video","source":"community"},{"name":"interpreter inset","source":"community"},{"name":"sign language (prerecorded)","source":"wcag"}],"tags":["media"],"relations":{"contrastWith":["captions"],"variantOf":[],"partOf":[],"seeAlso":["video-player"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Sign Language (Prerecorded)","url":"https://www.w3.org/TR/WCAG22/#sign-language-prerecorded"}],"demo":"inline","useWhen":"captions are not the reader's first language"},{"name":"Signature pad","slug":"signature-pad","category":"component","status":"published","definition":"A drawing area that captures a handwritten signature by pointer or touch, with a clear control and a baseline to sign on.","aliases":[{"name":"signature capture","source":"community"},{"name":"draw signature","source":"community"},{"name":"sign here box","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["image-well"],"variantOf":[],"partOf":[],"seeAlso":["pressure-sensitivity"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"capturing a handwritten signature"},{"name":"Signed distance field","slug":"signed-distance-field","category":"typography","status":"published","definition":"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.","aliases":[{"name":"SDF"},{"name":"distance field","source":"community"},{"name":"MSDF","source":"community"},{"name":"multi-channel signed distance field","source":"community"}],"tags":[],"relations":{"contrastWith":["font-hinting"],"variantOf":[],"partOf":[],"seeAlso":["pixel-density"]},"implementations":[],"sources":[{"title":"Chris Green (Valve), SIGGRAPH 2007: Improved alpha-tested magnification for vector textures","url":"https://steamcdn-a.akamaihd.net/apps/valve/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf"},{"title":"Wikipedia: Signed distance function","url":"https://en.wikipedia.org/wiki/Signed_distance_function"}],"demo":"inline","useWhen":"text or icons must scale sharply inside a GPU pipeline"},{"name":"Signifier","slug":"signifier","category":"interaction","status":"published","definition":"The visible cue that advertises an affordance, such as a grip texture, an underline, or a shadow that says this can be pressed.","aliases":[{"name":"perceptible signifier","source":"community"},{"name":"visual cue","source":"community"},{"name":"interaction cue","source":"community"}],"tags":[],"relations":{"contrastWith":["affordance"],"variantOf":[],"partOf":[],"seeAlso":["visual-hierarchy"]},"implementations":[],"sources":[{"title":"Supercharge: UI glossary","url":"https://supercharge.design/blog/ui-glossary-list-of-essential-ui-design-terms"}],"demo":"inline","useWhen":"the cue that tells you an action is possible"},{"name":"Site footer","slug":"site-footer","category":"layout","status":"published","definition":"The closing region of a site holding secondary navigation, legal links, and contact details that do not deserve top level placement.","aliases":[{"name":"footer","source":"community"},{"name":"fat footer","source":"community"},{"name":"mega footer","source":"community"},{"name":"sitemap footer","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["utility-navigation","sticky-footer"],"variantOf":[],"partOf":[],"seeAlso":["universal-navigation"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"everything that must exist but must not compete"},{"name":"Situational disability","slug":"situational-disability","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"persona spectrum","source":"microsoft"},{"name":"temporary disability","source":"microsoft"},{"name":"situational impairment","source":"community"},{"name":"permanent temporary situational","source":"microsoft"}],"tags":[],"relations":{"contrastWith":["curb-cut-effect","functional-need"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Microsoft Design: Inclusive 101 guidebook","url":"https://inclusive.microsoft.design/articles/inclusive-101-guidebook"}],"demo":"inline","useWhen":"widening who a barrier actually affects"},{"name":"60-30-10 rule","slug":"sixty-thirty-ten-rule","category":"color","status":"published","definition":"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.","aliases":[{"name":"60/30/10","source":"community"},{"name":"color proportion rule"},{"name":"dominant secondary accent"}],"tags":[],"relations":{"contrastWith":["color-harmony"],"variantOf":[],"partOf":[],"seeAlso":["accent-color","visual-balance"]},"implementations":[],"sources":[{"title":"The 60-30-10 Rule (UX Planet)","url":"https://uxplanet.org/the-60-30-10-rule-a-foolproof-way-to-choose-colors-for-your-ui-design-d15625e56d25"}],"demo":"inline","useWhen":"deciding how much of each colour to use, not which colours"},{"name":"Skeleton screen","slug":"skeleton-screen","category":"pattern","status":"published","definition":"A loading state made of grey shapes standing where the content will be, showing the layout before the data arrives.","aliases":[{"name":"skeleton"},{"name":"content placeholder"}],"tags":["perceived-performance"],"relations":{"contrastWith":["spinner","empty-state","optimistic-ui","progressive-image-loading"],"variantOf":[],"partOf":[],"seeAlso":["shimmer","layout-shift","aspect-ratio-box"]},"implementations":[{"system":"shadcn","name":"Skeleton","url":"https://ui.shadcn.com/docs/components/skeleton"},{"system":"carbon","name":"Skeleton states","url":"https://carbondesignsystem.com/patterns/loading-pattern/"}],"sources":[{"title":"Luke Wroblewski: Mobile design details, avoid the spinner","url":"https://www.lukew.com/ff/entry.asp?1797"}],"demo":"inline","useWhen":"showing the shape of content while it loads"},{"name":"Skeuomorphism","slug":"skeuomorphism","category":"aesthetic","status":"published","definition":"A style that makes interface elements imitate real objects and materials, using leather, metal, paper, and glossy highlights so their purpose reads as familiar.","aliases":[{"name":"skeuomorphic design"},{"name":"realistic UI","source":"community"},{"name":"skeuomorph"},{"name":"textured UI","source":"community"}],"tags":[],"relations":{"contrastWith":["flat-design","aqua","neo-skeuomorphism","interface-metaphor"],"variantOf":[],"partOf":[],"seeAlso":["affordance"]},"implementations":[],"sources":[{"title":"Skeuomorphism, Aesthetics Wiki","url":"https://aesthetics.fandom.com/wiki/Skeuomorphism"},{"title":"NN/g: Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users","url":"https://www.nngroup.com/articles/flat-design/"}],"demo":"inline","useWhen":"the control is dressed as the physical object it replaces"},{"name":"Skip link","slug":"skip-link","category":"accessibility","status":"published","definition":"A link at the very start of a page, revealed on focus, that jumps past repeated navigation to the main content.","aliases":[{"name":"bypass blocks","source":"wcag"},{"name":"skip navigation","source":"webaim"},{"name":"skip to main content"},{"name":"skip to content"}],"tags":["keyboard","navigation"],"relations":{"contrastWith":["landmark","hidden-but-focusable"],"variantOf":[],"partOf":[],"seeAlso":["visually-hidden","focus-order"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Understanding Bypass Blocks","url":"https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html"},{"title":"WebAIM: Skip navigation links","url":"https://webaim.org/techniques/skipnav/"}],"demo":"inline","useWhen":"the first-tab link past the navigation"},{"name":"Slash command","slug":"slash-command","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"slash menu","source":"community"},{"name":"inline command menu","source":"community"},{"name":"block menu","source":"community"},{"name":"slash command menu","source":"merged-candidate"},{"name":"slash commands","source":"merged-candidate"}],"tags":["ai","messaging"],"relations":{"contrastWith":["command-palette","mention-autocomplete"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"AI UX Playground: slash commands","url":"https://aiuxplayground.com/pattern/slash-command/"}],"demo":"inline","useWhen":"typing / in the message box opens a command menu"},{"name":"Slide transition","slug":"slide-transition","category":"motion","status":"published","definition":"A transition where content translates in or out along one axis, using direction to say whether the user moved forward, back, up, or down.","aliases":[{"name":"slide in"},{"name":"slide over"},{"name":"translate transition"}],"tags":[],"relations":{"contrastWith":["crossfade","push-transition"],"variantOf":[],"partOf":[],"seeAlso":["page-curl"]},"implementations":[],"sources":[{"title":"Material Design 3: Transitions","url":"https://m3.material.io/styles/motion/transitions"}],"demo":"inline","useWhen":"the change has a direction the reader should feel"},{"name":"Slider","slug":"slider","category":"component","status":"published","definition":"A control that sets a value by dragging a handle along a track, showing the whole range at once.","aliases":[{"name":"range input","source":"community"},{"name":"range control","source":"nngroup"},{"name":"track bar","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["stepper","progress-bar","carousel","scrubber","image-comparison-slider","knob","range-slider"],"variantOf":[],"partOf":[],"seeAlso":["tick-marks"]},"implementations":[{"system":"aria-apg","name":"Slider","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider/"},{"system":"material","name":"Sliders","url":"https://m3.material.io/components/sliders/overview"},{"system":"hig","name":"Sliders","url":"https://developer.apple.com/design/human-interface-guidelines/sliders"},{"system":"carbon","name":"Slider","url":"https://carbondesignsystem.com/components/slider/usage/"},{"system":"radix","name":"Slider","url":"https://www.radix-ui.com/primitives/docs/components/slider"},{"system":"base-ui","name":"Slider","url":"https://base-ui.com/react/components/slider"},{"system":"shadcn","name":"Slider","url":"https://ui.shadcn.com/docs/components/slider"}],"sources":[{"title":"ARIA Authoring Practices Guide: Slider pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/slider/"},{"title":"Sliders, Material Design 3","url":"https://m3.material.io/components/sliders/overview"}],"demo":"inline","useWhen":"picking a value where the range matters more than the number"},{"name":"Sliding indicator","slug":"sliding-indicator","category":"motion","status":"published","definition":"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.","aliases":[{"name":"magic line","source":"community"},{"name":"animated tab indicator","source":"community"},{"name":"sliding underline","source":"community"},{"name":"moving pill","source":"community"},{"name":"spring pill","source":"community"},{"name":"magic indicator","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["current-page-indicator"],"variantOf":[],"partOf":[],"seeAlso":["tabs","segmented-control"]},"implementations":[],"sources":[{"title":"CSS-Tricks: creating an animated menu indicator with CSS selectors","url":"https://css-tricks.com/creating-an-animated-menu-indicator-with-css-selectors/"},{"title":"CSS Script: magic line navigation","url":"https://www.cssscript.com/magic-line-navigation/"}],"demo":"inline","useWhen":"selection should move between items rather than blink between them"},{"name":"Small caps","slug":"small-caps","category":"typography","status":"published","definition":"Capital letters drawn at roughly lowercase height, with weight adjusted to match, so an abbreviation does not shout inside running text.","aliases":[{"name":"smallcaps"},{"name":"SC","source":"opentype"},{"name":"font-variant-caps: small-caps","source":"css"}],"tags":[],"relations":{"contrastWith":["abbreviation","all-caps","petite-caps"],"variantOf":[],"partOf":[],"seeAlso":["drop-cap"]},"implementations":[],"sources":[{"title":"Practical Typography: Small caps","url":"https://practicaltypography.com/"},{"title":"MDN: OpenType font features","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/OpenType_fonts"}],"demo":"inline","useWhen":"setting acronyms inside body text without shouting"},{"name":"Small multiples","slug":"small-multiples","category":"layout","status":"published","definition":"The same small chart repeated in a grid, once per category, so comparison happens by eye movement instead of overplotting.","aliases":[{"name":"trellis chart"},{"name":"panel chart"},{"name":"grid of charts"},{"name":"lattice chart"}],"tags":["dataviz"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["brushing","dual-axis"]},"implementations":[],"sources":[{"title":"Wikipedia: Small multiple","url":"https://en.wikipedia.org/wiki/Small_multiple"}],"demo":"inline","useWhen":"one chart would need too many series to stay readable"},{"name":"Smart app banner","slug":"smart-app-banner","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"app install banner","source":"community"},{"name":"open in app prompt","source":"community"},{"name":"app interstitial","source":"community"},{"name":"install prompt","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["interstitial","banner"],"variantOf":[],"partOf":[],"seeAlso":["qr-code"]},"implementations":[],"sources":[{"title":"Apple Developer: Promoting apps with Smart App Banners","url":"https://developer.apple.com/documentation/webkit/promoting-apps-with-smart-app-banners"},{"title":"Google Search Central: Avoid intrusive interstitials and dialogs","url":"https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials"}],"demo":"inline","useWhen":"the strip on a mobile site pushing you into the app"},{"name":"Smart defaults","slug":"smart-defaults","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"good defaults","source":"ui-patterns"},{"name":"sensible defaults","source":"community"},{"name":"prefilled values","source":"community"},{"name":"recommended option","source":"goodui"}],"tags":["forms"],"relations":{"contrastWith":["redundant-entry","preselected-opt-in"],"variantOf":[],"partOf":[],"seeAlso":["forgiving-format"]},"implementations":[],"sources":[{"title":"UI Patterns: Good Defaults","url":"https://ui-patterns.com/patterns"},{"title":"GoodUI: Try Smart Defaults instead of asking to do extra work","url":"https://goodui.org/"}],"demo":"inline","useWhen":"the form arrives already answered the way you would have"},{"name":"Smart guides","slug":"smart-guides","category":"interaction","status":"published","definition":"Alignment lines that appear only while dragging, showing which edges or centers the moving object currently lines up with.","aliases":[{"name":"alignment guides","source":"community"},{"name":"dynamic guides","source":"community"},{"name":"magnetic guides","source":"community"},{"name":"red lines","source":"community"}],"tags":[],"relations":{"contrastWith":["snapping"],"variantOf":[],"partOf":[],"seeAlso":["keyline"]},"implementations":[],"sources":[{"title":"CreativePro: Smart(er) guides","url":"https://creativepro.com/smarter-guides/"}],"demo":"inline","useWhen":"the guide lines that appear mid-drag"},{"name":"Smart quotes","slug":"smart-quotes","category":"typography","status":"published","definition":"The curved opening and closing quotation marks a typeface actually draws, as opposed to the straight vertical marks inherited from typewriters.","aliases":[{"name":"curly quotes"},{"name":"typographer's quotes"},{"name":"dumb quotes"},{"name":"straight quotes"},{"name":"curved apostrophe"}],"tags":[],"relations":{"contrastWith":["hanging-punctuation","prime-mark"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Straight and curly quotes (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"The Definitive Guide to Quotes, Apostrophes, and Primes","url":"https://creativepro.com/the-definitive-guide-to-quotes-apostrophes-and-primes/"}],"demo":"inline","useWhen":"your quotes look like typewriter ticks"},{"name":"Smooth scrolling","slug":"smooth-scrolling","category":"motion","status":"published","definition":"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.","aliases":[{"name":"scroll-behavior: smooth","source":"css"},{"name":"animated scroll","source":"community"},{"name":"scroll to","source":"community"},{"name":"scrollIntoView","source":"community"}],"tags":["scroll","web-platform"],"relations":{"contrastWith":["momentum-scrolling","scroll-snap"],"variantOf":[],"partOf":[],"seeAlso":["back-to-top"]},"implementations":[],"sources":[{"title":"MDN: scroll-behavior","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior"},{"title":"CSS-Tricks almanac: scroll-behavior","url":"https://css-tricks.com/almanac/properties/s/scroll-behavior/"}],"demo":"inline","useWhen":"a jump would leave the reader unsure where they landed"},{"name":"Snapping","slug":"snapping","category":"interaction","status":"published","definition":"Pulling a dragged object into exact alignment once it comes within a small distance of a grid, guide, or another object's edge.","aliases":[{"name":"snap to grid","source":"community"},{"name":"magnetic snapping","source":"community"},{"name":"snap to object","source":"community"},{"name":"snap tolerance","source":"community"}],"tags":[],"relations":{"contrastWith":["smart-guides","drop-indicator"],"variantOf":[],"partOf":[],"seeAlso":["drag-and-drop","nudge"]},"implementations":[],"sources":[{"title":"Wikipedia: Snap (computer graphics)","url":"https://en.wikipedia.org/wiki/Snap_(computer_graphics)"}],"demo":"inline","useWhen":"a drag jumps into alignment near a guide"},{"name":"Sneak into basket","slug":"sneak-into-basket","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"sneaking","source":"deceptive-design"},{"name":"added extras","source":"community"},{"name":"unwanted add-on","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["drip-pricing"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Sneaking","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"something you never picked is in your basket"},{"name":"Social login","slug":"social-login","category":"pattern","status":"published","definition":"Signing in by delegating identity to an existing account elsewhere, presented as a row of provider buttons above or instead of a password form.","aliases":[{"name":"social sign-in","source":"community"},{"name":"continue with Google","source":"community"},{"name":"third-party login","source":"community"},{"name":"OAuth login","source":"community"},{"name":"federated login","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["passkey","magic-link","one-time-code-login"],"variantOf":[],"partOf":[],"seeAlso":["guest-checkout","express-checkout"]},"implementations":[],"sources":[{"title":"Carbon Design System: Login pattern","url":"https://carbondesignsystem.com/patterns/login-pattern/"}],"demo":"inline","useWhen":"the row of continue with Google and Apple buttons"},{"name":"Social proof","slug":"social-proof","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"testimonials","source":"ui-patterns"},{"name":"review count","source":"community"},{"name":"used by logos","source":"community"},{"name":"activity notification","source":"community"},{"name":"N people are viewing this","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["logo-cloud","fake-social-proof","leaderboard"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: Social Proof","url":"https://ui-patterns.com/patterns"},{"title":"GoodUI: Try Social Proof instead of talking about yourself","url":"https://goodui.org/"}],"demo":"inline","useWhen":"the interface shows what others chose to steady your choice"},{"name":"Soft delete","slug":"soft-delete","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"trash","source":"community"},{"name":"recycle bin","source":"community"},{"name":"archive","source":"community"},{"name":"deleted items","source":"community"},{"name":"recently deleted","source":"hig"}],"tags":[],"relations":{"contrastWith":["type-to-confirm","confirmation-dialog","undo"],"variantOf":[],"partOf":[],"seeAlso":["save-for-later","strikethrough"]},"implementations":[],"sources":[{"title":"Cloudscape: Delete patterns","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"deleted things go to a bin you can dig them out of"},{"name":"Soft hyphen","slug":"soft-hyphen","category":"typography","status":"published","definition":"An invisible character placed inside a word that marks where a hyphen may appear if the word has to break, and stays hidden otherwise.","aliases":[{"name":"shy","source":"html"},{"name":"discretionary hyphen"},{"name":"optional hyphen"},{"name":"U+00AD"}],"tags":[],"relations":{"contrastWith":["zero-width-space","hyphenation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Optional hyphens (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"Non-breaking space and soft hyphen (Tilda)","url":"https://help.tilda.cc/unbroken-space"}],"demo":"inline","useWhen":"telling the browser where a long word may break"},{"name":"Solarpunk","slug":"solarpunk","category":"aesthetic","status":"published","definition":"An optimistic ecological future style of daylight palettes, plant growth over structure, stained glass colour, art nouveau curves, and visible solar and wind technology.","aliases":[{"name":"solar punk"},{"name":"eco-futurism"},{"name":"utopian solarpunk","source":"designmd"}],"tags":[],"relations":{"contrastWith":["afrofuturism","cyberpunk-ui","frutiger-aero"],"variantOf":[],"partOf":[],"seeAlso":["biophilic-design"]},"implementations":[],"sources":[{"title":"Aesthetics Wiki: Solarpunk","url":"https://aesthetics.fandom.com/wiki/Solarpunk"}],"demo":"inline","useWhen":"a hopeful green future rather than a dystopian one"},{"name":"Sonification","slug":"sonification","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"data sonification","source":"community"},{"name":"audio chart","source":"community"},{"name":"audio graph","source":"community"},{"name":"data table alternative","source":"community"}],"tags":["dataviz"],"relations":{"contrastWith":["chart-description"],"variantOf":[],"partOf":[],"seeAlso":["chart"]},"implementations":[],"sources":[{"title":"University of Washington: Making data visualizations accessible","url":"https://www.washington.edu/accesstech/dataviz/"},{"title":"Wikipedia: Data sonification","url":"https://en.wikipedia.org/wiki/Data_sonification"}],"demo":"inline","useWhen":"a chart has to be perceivable without sight"},{"name":"Sort indicator","slug":"sort-indicator","category":"component","status":"published","definition":"The small arrow in a column header showing that the table is sorted by that column and in which direction.","aliases":[{"name":"sort arrow","source":"community"},{"name":"sort caret","source":"community"},{"name":"sort direction indicator","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["sort-state","chevron"],"variantOf":[],"partOf":["data-table"],"seeAlso":[]},"implementations":[],"sources":[{"title":"Data table, Carbon Design System","url":"https://carbondesignsystem.com/components/data-table/usage/"}],"demo":"inline","useWhen":"the arrow in a header showing the sort"},{"name":"Sort state","slug":"sort-state","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"aria-sort","source":"aria"},{"name":"sort direction","source":"community"},{"name":"sortable column indicator","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["sort-indicator"],"variantOf":[],"partOf":[],"seeAlso":["table-header-association"]},"implementations":[],"sources":[{"title":"MDN: aria-sort","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-sort"}],"demo":"inline","useWhen":"a sorted column shows an arrow but says nothing"},{"name":"Spacer","slug":"spacer","category":"layout","status":"published","definition":"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.","aliases":[{"name":"pane spacer","source":"material"},{"name":"flexible space","source":"community"}],"tags":[],"relations":{"contrastWith":["whitespace","stack"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Spacer","url":"https://m3.material.io/foundations/layout/scaffold/overview"}],"sources":[{"title":"Scaffold, Material Design 3","url":"https://m3.material.io/foundations/layout/scaffold/overview"}],"demo":"inline","useWhen":"the empty element that does the spacing"},{"name":"Spacing scale","slug":"spacing-scale","category":"layout","status":"published","definition":"The fixed, named set of spacing values a system allows, so gaps come from a shortlist instead of being invented per screen.","aliases":[{"name":"space scale","source":"community"},{"name":"spacing tokens","source":"community"},{"name":"spacing ramp","source":"community"},{"name":"space tokens","source":"atlassian"}],"tags":["tokens"],"relations":{"contrastWith":["fluid-space-scale","density","eight-point-grid","gutter"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Spacing, Atlassian Design","url":"https://atlassian.design/foundations/spacing"}],"demo":"inline","useWhen":"why the gap is 12 and not 13"},{"name":"Spanned layout","slug":"spanned-layout","category":"layout","status":"published","definition":"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.","aliases":[{"name":"spanning","source":"microsoft-dual-screen"},{"name":"spanned state","source":"microsoft-dual-screen"},{"name":"seam","source":"community"},{"name":"display mask","source":"microsoft-dual-screen"},{"name":"dual-screen layout","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["device-posture","multi-window-mode"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Surface Duo device modes, Microsoft Learn","url":"https://learn.microsoft.com/en-us/dual-screen/design/postures"}],"demo":"inline","useWhen":"one app stretched across two screens"},{"name":"Sparkline","slug":"sparkline","category":"component","status":"published","definition":"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.","aliases":[{"name":"mini chart","source":"community"},{"name":"inline chart","source":"community"},{"name":"trend line","source":"community"},{"name":"micro chart","source":"community"}],"tags":["dataviz"],"relations":{"contrastWith":["chart","stat","waveform"],"variantOf":[],"partOf":[],"seeAlso":["meter","direct-labeling"]},"implementations":[],"sources":[{"title":"Cloudscape Design System: components","url":"https://cloudscape.design/components/"},{"title":"Sparkline (Wikipedia)","url":"https://en.wikipedia.org/wiki/Sparkline"}],"demo":"inline","useWhen":"a trend line small enough to sit inline"},{"name":"Spatial navigation","slug":"spatial-navigation","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"directional navigation","source":"wicg"},{"name":"arrow key focus","source":"community"},{"name":"D-pad navigation","source":"community"},{"name":"10-foot UI navigation","source":"community"}],"tags":["keyboard","navigation","platform-registers"],"relations":{"contrastWith":["roving-tabindex","switch-access"],"variantOf":[],"partOf":[],"seeAlso":["ten-foot-ui","focus-order"]},"implementations":[],"sources":[{"title":"CSS Spatial Navigation Level 1","url":"https://drafts.csswg.org/css-nav-1/"},{"title":"WICG: spatial-navigation","url":"https://github.com/WICG/spatial-navigation"}],"demo":"inline","useWhen":"the input is a remote or a game pad, not a keyboard"},{"name":"Spatial UI","slug":"spatial-ui","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"spatial design","source":"apple"},{"name":"visionOS UI"},{"name":"XR interface"},{"name":"3D UI"},{"name":"mixed reality UI"}],"tags":["platform-registers"],"relations":{"contrastWith":["liquid-glass"],"variantOf":[],"partOf":[],"seeAlso":["ornament","look-and-pinch","hyperreal-3d","dimensionality"]},"implementations":[{"system":"hig","name":"Spatial layout","url":"https://developer.apple.com/design/human-interface-guidelines/spatial-layout"}],"sources":[{"title":"WWDC23: Design for spatial user interfaces","url":"https://developer.apple.com/videos/play/wwdc2023/10076/"},{"title":"Create with Swift: Ensuring interface legibility and contrast in visionOS","url":"https://www.createwithswift.com/ensuring-interface-legibility-and-contrast-in-visionos/"}],"demo":"inline","useWhen":"the interface floats in the room, not on a screen"},{"name":"Specular highlight","slug":"specular-highlight","category":"aesthetic","status":"published","definition":"The bright reflection drawn on a surface to say it is glossy, placed where a light source would strike a curved object.","aliases":[{"name":"highlight"},{"name":"sheen"},{"name":"glint","source":"community"}],"tags":[],"relations":{"contrastWith":["neon-glow","gloss","shimmer"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: Aqua (user interface)","url":"https://en.wikipedia.org/wiki/Aqua_(user_interface)"}],"demo":"inline","useWhen":"the bright spot that makes a surface read as shiny"},{"name":"Speed dial","slug":"speed-dial","category":"component","status":"published","definition":"A floating action button that fans out into three to six smaller related actions when pressed or hovered.","aliases":[{"name":"fab menu","source":"material"},{"name":"expanding fab","source":"community"},{"name":"radial fab","source":"community"}],"tags":[],"relations":{"contrastWith":["floating-action-button","split-button","radial-menu"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Material UI: Speed Dial","url":"https://mui.com/material-ui/react-speed-dial/"}],"demo":"inline","useWhen":"one prominent button that unfolds into a few actions"},{"name":"Spinner","slug":"spinner","category":"component","status":"published","definition":"An indeterminate loading indicator that shows work is happening without saying how much of it is left.","aliases":[{"name":"throbber","source":"community"},{"name":"inline loading","source":"carbon"},{"name":"loading indicator","source":"material"},{"name":"activity indicator","source":"hig"}],"tags":["perceived-performance"],"relations":{"contrastWith":["progress-ring","progress-bar","skeleton-screen"],"variantOf":[],"partOf":[],"seeAlso":["busy-state"]},"implementations":[{"system":"material","name":"Progress indicators","url":"https://m3.material.io/components/progress-indicators/overview"},{"system":"hig","name":"Progress indicators","url":"https://developer.apple.com/design/human-interface-guidelines/progress-indicators"},{"system":"carbon","name":"Loading","url":"https://carbondesignsystem.com/components/loading/usage/"}],"sources":[],"demo":"inline","useWhen":"work is happening and nobody knows for how long"},{"name":"Split button","slug":"split-button","category":"component","status":"published","definition":"A two part control where the main area runs a default action and an attached arrow opens a menu of related alternatives.","aliases":[{"name":"split menu button"},{"name":"button dropdown","source":"cloudscape"},{"name":"dropdown button"},{"name":"menu split button","source":"fluent"},{"name":"combo button","source":"merged-candidate"}],"tags":[],"relations":{"contrastWith":["menu-button","speed-dial"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"User-Interface Elements: Glossary, NN/g","url":"https://www.nngroup.com/articles/ui-elements-glossary/"}],"demo":"inline","useWhen":"one obvious action plus a menu of its variants"},{"name":"Split-flap animation","slug":"split-flap-animation","category":"motion","status":"published","definition":"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.","aliases":[{"name":"split-flap display","source":"community"},{"name":"flip clock","source":"community"},{"name":"Solari board","source":"community"},{"name":"flip digit","source":"community"},{"name":"flap animation","source":"community"}],"tags":[],"relations":{"contrastWith":["count-up-animation","typewriter-effect"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Wikipedia: split-flap display","url":"https://en.wikipedia.org/wiki/Split-flap_display"},{"title":"Design engineering: a split-flap display component","url":"https://hello-mat.com/design-engineering/component/split-flap-display"}],"demo":"inline","useWhen":"a changing value should read as mechanical rather than digital"},{"name":"Split screen layout","slug":"split-screen-layout","category":"layout","status":"published","definition":"A page cut into two equal full height halves, each carrying its own message or path, with no hierarchy between them.","aliases":[{"name":"split design","source":"community"},{"name":"50/50 layout","source":"community"},{"name":"dual pane hero","source":"community"}],"tags":[],"relations":{"contrastWith":["split-view","zigzag-layout"],"variantOf":[],"partOf":[],"seeAlso":["hero"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"two equally weighted choices on one page"},{"name":"Split view","slug":"split-view","category":"layout","status":"published","definition":"A layout of two or more side by side panes where a choice in the leading pane decides what the trailing pane shows.","aliases":[{"name":"split views","source":"hig"},{"name":"two pane layout","source":"community"},{"name":"dual pane","source":"community"},{"name":"side by side panes","source":"community"}],"tags":[],"relations":{"contrastWith":["drawer","holy-grail-layout","sidebar","list-detail","multi-window-mode","split-screen-layout"],"variantOf":[],"partOf":[],"seeAlso":["splitter","pane"]},"implementations":[{"system":"hig","name":"Split views","url":"https://developer.apple.com/design/human-interface-guidelines/split-views"}],"sources":[{"title":"Split views, Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/split-views"}],"demo":"inline","useWhen":"two panes where one drives the other"},{"name":"Splitter","slug":"splitter","category":"component","status":"published","definition":"The draggable bar between two panes that changes how much room each one gets, keyboard operable as a slider between limits.","aliases":[{"name":"window splitter","source":"aria-apg"},{"name":"resizable","source":"shadcn"},{"name":"split panel","source":"cloudscape"},{"name":"sash","source":"community"},{"name":"grab handle","source":"community"}],"tags":[],"relations":{"contrastWith":["divider","column-resizer","resize-handle"],"variantOf":[],"partOf":[],"seeAlso":["split-view"]},"implementations":[{"system":"aria-apg","name":"Window Splitter","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"},{"system":"shadcn","name":"Resizable","url":"https://ui.shadcn.com/docs/components"}],"sources":[{"title":"ARIA APG: window splitter pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"the draggable bar between two resizable panes"},{"name":"Spotlight hover","slug":"spotlight-hover","category":"motion","status":"published","definition":"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.","aliases":[{"name":"spotlight card","source":"community"},{"name":"glowing hover effect","source":"community"},{"name":"mouse-following gradient","source":"community"},{"name":"glow border hover","source":"community"},{"name":"proximity glow","source":"community"}],"tags":[],"relations":{"contrastWith":["tilt-effect"],"variantOf":[],"partOf":[],"seeAlso":["neon-glow","cursor-follower"]},"implementations":[],"sources":[{"title":"Frontend Masters: how to build a glowing hover effect that follows the pointer","url":"https://frontendmasters.com/blog/glowing-hover-effect/"},{"title":"Cruip: how to create a spotlight card hover effect with Tailwind CSS","url":"https://cruip.com/how-to-create-a-spotlight-card-hover-effect-with-tailwind-css/"}],"demo":"inline","useWhen":"a card should light up under the pointer rather than change colour"},{"name":"Spotted pattern","slug":"spotted-pattern","category":"layout","status":"published","definition":"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.","aliases":[{"name":"spotted scanning","source":"community"}],"tags":[],"relations":{"contrastWith":["marking-pattern","lawn-mower-pattern","commitment-pattern","f-pattern"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Text Scanning Patterns: Eyetracking Evidence, NN/g","url":"https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/"}],"demo":"inline","useWhen":"predicting a keyword hunt rather than reading"},{"name":"Spring animation","slug":"spring-animation","category":"motion","status":"published","definition":"Motion driven by a simulated spring (mass, stiffness, damping) instead of a fixed duration, so the element settles rather than stopping on a schedule.","aliases":[{"name":"spring"},{"name":"spring physics"},{"name":"physics-based animation"},{"name":"stiffness and damping","source":"framer-motion"},{"name":"tension"},{"name":"mass"}],"tags":[],"relations":{"contrastWith":["easing","squash-and-stretch","interruptible-animation","duration"],"variantOf":[],"partOf":[],"seeAlso":["deformable-ui","bounce-animation"]},"implementations":[{"system":"hig","name":"Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"sources":[{"title":"Spring Animations in Pure CSS with linear()","url":"https://www.carmenansio.com/articles/spring-physics-css/"},{"title":"Chrome for Developers: the linear() easing function","url":"https://developer.chrome.com/docs/css-ui/css-linear-easing-function"}],"demo":"inline","useWhen":"motion should react to how it was interrupted, not a timer"},{"name":"Spring loading","slug":"spring-loading","category":"interaction","status":"published","definition":"Hovering a dragged item over a container until it opens, so a drag can travel through nested destinations without being dropped and restarted.","aliases":[{"name":"spring-loaded folders","source":"hig"},{"name":"hover to open during drag","source":"community"},{"name":"drag hover expand","source":"community"}],"tags":[],"relations":{"contrastWith":["drag-autoscroll"],"variantOf":[],"partOf":[],"seeAlso":["submenu","quasimode"]},"implementations":[],"sources":[{"title":"MacPaw: What is spring loading on Mac","url":"https://macpaw.com/how-to/use-spring-loading-on-mac"}],"demo":"inline","useWhen":"a drag opens what it hovers so it can go deeper"},{"name":"Squash and stretch","slug":"squash-and-stretch","category":"motion","status":"published","definition":"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.","aliases":[{"name":"squish","source":"community"},{"name":"press squash","source":"community"},{"name":"non-uniform scale","source":"community"}],"tags":[],"relations":{"contrastWith":["spring-animation"],"variantOf":[],"partOf":[],"seeAlso":["deformable-ui","anticipation","pop-in"]},"implementations":[],"sources":[{"title":"Interaction Design Foundation: UI Animation, How to Apply Disney's 12 Principles of Animation to UI Design","url":"https://ixdf.org/literature/article/ui-animation-how-to-apply-disney-s-12-principles-of-animation-to-ui-design"}],"demo":"inline","useWhen":"a control should feel physical when pressed or launched"},{"name":"Squircle","slug":"squircle","category":"aesthetic","status":"published","definition":"A rounded square whose corners curve continuously into the sides instead of meeting a circular arc, the shape behind iOS app icons.","aliases":[{"name":"superellipse"},{"name":"continuous corner radius","source":"apple"},{"name":"smooth corners"},{"name":"iOS icon shape","source":"community"},{"name":"G2 continuity","source":"community"}],"tags":[],"relations":{"contrastWith":["blob-shape","chamfer"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"corners that blend in rather than snap to an arc"},{"name":"sRGB","slug":"srgb","category":"color","status":"published","definition":"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.","aliases":[{"name":"standard RGB"},{"name":"RGB","source":"community"},{"name":"web-safe color space","source":"community"}],"tags":[],"relations":{"contrastWith":["wide-gamut","color-space","cmyk","hex-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"CSS Color Module Level 4","url":"https://www.w3.org/TR/css-color-4/"},{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"}],"demo":"inline","useWhen":"the assumed colour space behind a hex code"},{"name":"Stack","slug":"stack","category":"layout","status":"published","definition":"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.","aliases":[{"name":"the stack","source":"every-layout"},{"name":"vertical stack","source":"community"},{"name":"owl selector","source":"community"},{"name":"flow","source":"community"},{"name":"VStack","source":"swiftui"}],"tags":[],"relations":{"contrastWith":["cluster","spacer"],"variantOf":[],"partOf":[],"seeAlso":["density"]},"implementations":[],"sources":[{"title":"The Stack, Every Layout","url":"https://every-layout.dev/layouts/stack/"}],"demo":"inline","useWhen":"one rule for the space between everything vertical"},{"name":"Stacking cards","slug":"stacking-cards","category":"motion","status":"published","definition":"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.","aliases":[{"name":"stacked cards on scroll","source":"community"},{"name":"card stack scroll","source":"community"},{"name":"sticky stacking sections","source":"community"},{"name":"deck scroll","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["scroll-pinning"],"variantOf":[],"partOf":[],"seeAlso":["scrollytelling","swipe-deck"]},"implementations":[],"sources":[{"title":"CSS-Tricks: stacked cards with sticky positioning","url":"https://css-tricks.com/stacked-cards-with-sticky-positioning-and-a-dash-of-sass/"},{"title":"Stacking cards, scroll-driven animations","url":"https://scroll-driven-animations.style/demos/stacking-cards/css/"}],"demo":"inline","useWhen":"sequential sections should pile up instead of scrolling away"},{"name":"Stacking context","slug":"stacking-context","category":"layout","status":"published","definition":"A self contained depth ordering created by certain properties, inside which z-index only competes locally and can never escape to the level above.","aliases":[{"name":"z-index context","source":"community"},{"name":"paint order","source":"community"},{"name":"layer context","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["containing-block","top-layer"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Stacking context, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context"}],"demo":"inline","useWhen":"why a huge z-index still sits behind something"},{"name":"Stagger","slug":"stagger","category":"motion","status":"published","definition":"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.","aliases":[{"name":"staggering"},{"name":"delay cascade"},{"name":"staggered animation"}],"tags":[],"relations":{"contrastWith":["view-transition","delay"],"variantOf":[],"partOf":[],"seeAlso":["easing","follow-through"]},"implementations":[],"sources":[{"title":"Material Design 3: Motion overview","url":"https://m3.material.io/styles/motion/overview"}],"demo":"inline","useWhen":"the same entrance played one item after another"},{"name":"Stat","slug":"stat","category":"component","status":"published","definition":"A single number shown large with a label and often a change indicator, the unit a dashboard is built from.","aliases":[{"name":"statistic","source":"ant-design"},{"name":"metric card"},{"name":"kpi card"},{"name":"big number"},{"name":"scorecard"}],"tags":["dataviz"],"relations":{"contrastWith":["meter","complication","sparkline"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Chakra UI components overview","url":"https://chakra-ui.com/docs/components/concepts/overview"}],"demo":"inline","useWhen":"one number shown big with its label"},{"name":"State layer","slug":"state-layer","category":"color","status":"published","definition":"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.","aliases":[{"name":"state overlay"},{"name":"hover layer"},{"name":"interaction state layer","source":"material"},{"name":"ripple color","source":"material"}],"tags":["tokens"],"relations":{"contrastWith":["hover-lift","interaction-color-step","ripple","container-color","surface-tint"],"variantOf":[],"partOf":[],"seeAlso":["tint","focus-ring"]},"implementations":[],"sources":[{"title":"Material: states","url":"https://m2.material.io/go/design-states/"},{"title":"Spectrum design data: states","url":"https://opensource.adobe.com/spectrum-design-data/registry/states"}],"demo":"inline","useWhen":"one overlay opacity expressing hover, focus and pressed"},{"name":"Static color","slug":"static-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"static color palette","source":"spectrum"},{"name":"fixed color","source":"material"},{"name":"theme-independent color","source":"community"},{"name":"always white","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["inverse-color","color-theme","brand-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Spectrum: color system","url":"https://spectrum.adobe.com/page/color-system/"}],"demo":"inline","useWhen":"a colour that must not flip with the theme"},{"name":"Status bar","slug":"status-bar","category":"layout","status":"published","definition":"A thin strip along the edge of a window or screen that reports state and offers only minor actions, never the primary ones.","aliases":[{"name":"system status bar","source":"community"},{"name":"info bar","source":"community"}],"tags":[],"relations":{"contrastWith":["utility-bar"],"variantOf":[],"partOf":[],"seeAlso":["safe-area"]},"implementations":[],"sources":[{"title":"Visual Studio Code User Interface","url":"https://code.visualstudio.com/docs/editing/userinterface"}],"demo":"inline","useWhen":"an edge strip that reports rather than commands"},{"name":"Status color","slug":"status-color","category":"color","status":"published","definition":"The small fixed set of colours a product reserves for outcome, typically success, warning, danger and info, so meaning is consistent wherever it appears.","aliases":[{"name":"feedback colors","source":"community"},{"name":"intent colors","source":"community"},{"name":"critical","source":"polaris"},{"name":"error color","source":"material"},{"name":"state colors","source":"community"}],"tags":["tokens"],"relations":{"contrastWith":["accent-color","brand-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Error","url":"https://m3.material.io/styles/color/roles"}],"sources":[{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"}],"demo":"inline","useWhen":"colours that report an outcome rather than a brand"},{"name":"Status message","slug":"status-message","category":"accessibility","status":"published","definition":"A change in content that reports progress, result, or state and must be announced without taking focus, such as a count of search results.","aliases":[{"name":"role=status","source":"aria"},{"name":"status region","source":"community"},{"name":"polite status","source":"community"}],"tags":[],"relations":{"contrastWith":["toast","banner","live-region"],"variantOf":[],"partOf":[],"seeAlso":["microsurvey","offline-indicator"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Status Messages","url":"https://www.w3.org/TR/WCAG22/#status-messages"}],"demo":"inline","useWhen":"reporting an outcome the reader did not navigate to"},{"name":"Steampunk","slug":"steampunk","category":"aesthetic","status":"published","definition":"A Victorian industrial style of brass, riveted plate, wood, and leather, with gauges, cogs, and valve controls standing in for ordinary interface widgets.","aliases":[{"name":"steampunk style"},{"name":"Victorian futurism"},{"name":"dieselpunk","source":"community"}],"tags":[],"relations":{"contrastWith":["cassette-futurism","art-nouveau"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Kittl: 60+ graphic design styles, names and descriptions","url":"https://www.kittl.com/blogs/design-styles-name-stl/"},{"title":"My Steampunk Style: What is retro-futurism?","url":"https://my-steampunk-style.com/blogs/steampunk-blog/retro-futurism"}],"demo":"inline","useWhen":"brass gauges and cogs instead of plain controls"},{"name":"Step indicator","slug":"step-indicator","category":"component","status":"published","definition":"A row or column of numbered stages showing where you are in a multi step flow and what remains.","aliases":[{"name":"steps","source":"ant-design"},{"name":"progress steps","source":"community"},{"name":"wizard steps","source":"community"},{"name":"progress tracker","source":"community"}],"tags":[],"relations":{"contrastWith":["stepper","progress-bar","page-indicator","onboarding-checklist","current-page-indicator","steps-left"],"variantOf":[],"partOf":[],"seeAlso":["wizard"]},"implementations":[{"system":"carbon","name":"Progress indicator","url":"https://carbondesignsystem.com/components/progress-indicator/usage/"}],"sources":[{"title":"Progress indicator, Carbon Design System","url":"https://carbondesignsystem.com/components/progress-indicator/usage/"}],"demo":"inline","useWhen":"showing progress through a numbered flow"},{"name":"Stepped animation","slug":"stepped-animation","category":"motion","status":"published","definition":"Motion that jumps between a fixed number of discrete positions instead of interpolating, the mechanic behind sprite sheets, ticking clock hands and segmented spinners.","aliases":[{"name":"steps() easing","source":"css"},{"name":"step timing function","source":"css"},{"name":"stepped easing","source":"community"},{"name":"sprite animation","source":"community"},{"name":"jump-start","source":"css"}],"tags":[],"relations":{"contrastWith":["linear-easing"],"variantOf":[],"partOf":[],"seeAlso":["frame-rate","pixel-art-ui"]},"implementations":[],"sources":[{"title":"MDN: steps() easing function","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function/steps"},{"title":"CSS-Tricks almanac: steps()","url":"https://css-tricks.com/almanac/functions/s/steps/"}],"demo":"inline","useWhen":"the movement should tick rather than glide"},{"name":"Stepper","slug":"stepper","category":"component","status":"published","definition":"A small two part control with minus and plus that nudges a number up or down one step at a time.","aliases":[{"name":"spin button","source":"fluent"},{"name":"spinbutton","source":"aria-apg"},{"name":"number input","source":"community"},{"name":"quantity selector","source":"community"},{"name":"input stepper","source":"nngroup"}],"tags":["forms"],"relations":{"contrastWith":["step-indicator","slider","wheel-picker","nudge"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"Steppers","url":"https://developer.apple.com/design/human-interface-guidelines/steppers"},{"system":"aria-apg","name":"Spinbutton","url":"https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/"},{"system":"carbon","name":"Number input","url":"https://carbondesignsystem.com/components/number-input/usage/"},{"system":"base-ui","name":"Number field","url":"https://base-ui.com/react/components/number-field"}],"sources":[{"title":"Steppers, Apple Human Interface Guidelines","url":"https://developer.apple.com/design/human-interface-guidelines/steppers"},{"title":"ARIA Authoring Practices Guide: Spinbutton pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/"}],"demo":"inline","useWhen":"adjusting a number by small known increments"},{"name":"Steps left","slug":"steps-left","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"completeness meter","source":"ui-patterns"},{"name":"step 2 of 5","source":"community"}],"tags":["gamification"],"relations":{"contrastWith":["step-indicator","endowed-progress"],"variantOf":[],"partOf":[],"seeAlso":["goal-gradient"]},"implementations":[],"sources":[{"title":"UI Patterns: Steps Left","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"the flow says step 2 of 5"},{"name":"Sticky add to cart","slug":"sticky-add-to-cart","category":"pattern","status":"published","definition":"A condensed product bar that pins itself to an edge once the real buy button has scrolled away, keeping price and purchase always reachable.","aliases":[{"name":"sticky buy bar","source":"community"},{"name":"persistent add to cart","source":"community"},{"name":"floating purchase bar","source":"community"},{"name":"sticky CTA","source":"community"}],"tags":["commerce"],"relations":{"contrastWith":["sticky-footer"],"variantOf":[],"partOf":[],"seeAlso":["floating-action-button"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the buy bar that sticks once the real button scrolls off"},{"name":"Sticky footer","slug":"sticky-footer","category":"layout","status":"published","definition":"A footer held against the bottom of the viewport when the page is short, and pushed below the content when the page is long.","aliases":[{"name":"bottom stuck footer","source":"community"},{"name":"footer to bottom","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["sticky-header","pancake-stack","site-footer","sticky-add-to-cart"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[],"demo":"inline","useWhen":"a footer that will not float in the middle of a short page"},{"name":"Sticky header","slug":"sticky-header","category":"layout","status":"published","definition":"A header that scrolls away with the page until it reaches the top edge, then stays fixed there while the rest keeps moving.","aliases":[{"name":"sticky nav","source":"community"},{"name":"fixed header","source":"community"},{"name":"pinned header","source":"community"},{"name":"persistent header","source":"community"},{"name":"affix","source":"bootstrap"}],"tags":["scroll"],"relations":{"contrastWith":["navigation-bar","sticky-footer","quick-return-header","collapsing-toolbar","frozen-column","sticky-sidebar"],"variantOf":[],"partOf":[],"seeAlso":["focus-not-obscured"]},"implementations":[],"sources":[{"title":"Using container scroll-state queries, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries"}],"demo":"inline","useWhen":"a header that pins itself once it hits the top"},{"name":"Sticky hover","slug":"sticky-hover","category":"interaction","status":"published","definition":"A hover style that stays applied on a touch device after a tap, because there is no pointer to leave and clear the state.","aliases":[{"name":"stuck hover","source":"community"},{"name":"hover on touch","source":"community"},{"name":"phantom hover","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["hover","tap-delay"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UXmatters: Designing for touch","url":"https://www.uxmatters.com/mt/archives/2020/02/designing-for-touch.php"}],"demo":"inline","useWhen":"a tapped control stays looking hovered"},{"name":"Sticky sidebar","slug":"sticky-sidebar","category":"layout","status":"published","definition":"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.","aliases":[{"name":"pinned sidebar","source":"community"},{"name":"sticky rail","source":"community"},{"name":"sticky aside","source":"community"},{"name":"sticky column","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["sticky-header","sidenote"],"variantOf":[],"partOf":[],"seeAlso":["scroll-pinning","table-of-contents"]},"implementations":[],"sources":[{"title":"position, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/position"}],"demo":"inline","useWhen":"a side column that follows you down a long article"},{"name":"Stories","slug":"stories","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"story format","source":"community"},{"name":"ephemeral stories","source":"community"},{"name":"story rail","source":"community"},{"name":"segmented progress bars","source":"community"}],"tags":["messaging"],"relations":{"contrastWith":["carousel","swipe-deck"],"variantOf":[],"partOf":[],"seeAlso":["page-indicator"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the timed full-screen cards you tap through"},{"name":"Streak","slug":"streak","category":"pattern","status":"published","definition":"A count of consecutive periods in which the reader did the thing, displayed prominently and lost if a period is missed.","aliases":[{"name":"daily streak","source":"community"},{"name":"streak counter","source":"community"},{"name":"streak freeze","source":"community"},{"name":"chain","source":"community"}],"tags":["gamification"],"relations":{"contrastWith":["leaderboard","goal-gradient"],"variantOf":[],"partOf":[],"seeAlso":["achievement-badge"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"the running count of consecutive days you kept going"},{"name":"Streaming announcement","slug":"streaming-announcement","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"token flood","source":"community"},{"name":"streaming live region","source":"community"},{"name":"generation complete announcement","source":"community"}],"tags":["ai","messaging"],"relations":{"contrastWith":["typing-indicator"],"variantOf":[],"partOf":[],"seeAlso":["live-region","typewriter-effect"]},"implementations":[],"sources":[{"title":"Primer: Copilot accessibility principles","url":"https://primer.style/accessibility/foundations/copilot-principles/"},{"title":"Harvard User Research Center: Review of generative AI chatbots accessibility","url":"https://urc.library.harvard.edu/blog/review-generative-ai-chatbots-accessibility"}],"demo":"inline","useWhen":"a reply types itself in and floods the announcer"},{"name":"Strikethrough","slug":"strikethrough","category":"typography","status":"published","definition":"A rule drawn through the middle of text to mark it as removed, superseded, or no longer the current price.","aliases":[{"name":"line-through","source":"css"},{"name":"strike"},{"name":"struck out"},{"name":"crossed out"}],"tags":[],"relations":{"contrastWith":["underline"],"variantOf":[],"partOf":[],"seeAlso":["soft-delete"]},"implementations":[],"sources":[{"title":"CSS text module (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text"}],"demo":"inline","useWhen":"showing text that no longer applies"},{"name":"Structured format","slug":"structured-format","category":"pattern","status":"published","definition":"Splitting one value across several small fields with fixed shapes, which teaches the expected format but costs the reader extra focus moves.","aliases":[{"name":"split field","source":"community"},{"name":"multi-part input","source":"community"},{"name":"date input three fields","source":"govuk"}],"tags":["forms"],"relations":{"contrastWith":["input-mask","pin-input"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"UI Patterns: Structured Format","url":"https://ui-patterns.com/patterns/StructuredFormat"},{"title":"GOV.UK Design System: date input","url":"https://design-system.service.gov.uk/components/date-input/"}],"demo":"inline","useWhen":"one value split across several little boxes"},{"name":"Stylistic set","slug":"stylistic-set","category":"typography","status":"published","definition":"A numbered bundle of alternate glyphs inside a font, switched on as a group to change the look of certain letters.","aliases":[{"name":"stylistic sets"},{"name":"ss01","source":"opentype"},{"name":"character variants","source":"opentype"},{"name":"alternate glyphs"}],"tags":[],"relations":{"contrastWith":["contextual-alternates","opentype-features","swash"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Syntax for OpenType features in CSS (Adobe Fonts)","url":"https://helpx.adobe.com/fonts/using/open-type-syntax.html"},{"title":"A Practical Guide to Alternate Characters (Pangram Pangram)","url":"https://pangrampangram.com/blogs/journal/opentype-features"}],"demo":"inline","useWhen":"switching a font's single-storey a on"},{"name":"Subgrid","slug":"subgrid","category":"layout","status":"published","definition":"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.","aliases":[{"name":"grid-template-columns: subgrid","source":"css"},{"name":"nested grid alignment","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["baseline-grid","named-grid-areas"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Subgrid, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Subgrid"}],"demo":"inline","useWhen":"card internals that must align across sibling cards"},{"name":"Submenu","slug":"submenu","category":"component","status":"published","definition":"A menu that opens sideways from a menu item, marked by a trailing arrow, and stays open while the pointer travels diagonally toward it.","aliases":[{"name":"nested menu","source":"community"},{"name":"cascading menu","source":"community"},{"name":"child menu","source":"community"}],"tags":[],"relations":{"contrastWith":["mega-menu","cascader"],"variantOf":[],"partOf":[],"seeAlso":["spring-loading"]},"implementations":[],"sources":[{"title":"User Interface Elements Glossary, NN/g","url":"https://www.nngroup.com/articles/ui-elements-glossary/"}],"demo":"inline","useWhen":"a menu that opens out of another menu"},{"name":"Superfamily","slug":"superfamily","category":"typography","status":"published","definition":"A type system whose serif, sans, and sometimes mono members share one skeleton, so they pair by construction rather than by taste.","aliases":[{"name":"super family"},{"name":"type system","source":"community"},{"name":"matched family"}],"tags":[],"relations":{"contrastWith":["font-pairing","variable-font"],"variantOf":[],"partOf":[],"seeAlso":["sans-serif"]},"implementations":[],"sources":[{"title":"How to Pair Fonts (Pangram Pangram)","url":"https://pangrampangram.com/blogs/journal/how-to-pair-fonts"}],"demo":"inline","useWhen":"picking two typefaces that are guaranteed to agree"},{"name":"Superscript","slug":"superscript","category":"typography","status":"published","definition":"Small raised characters used for footnote markers, ordinals, and exponents, ideally drawn by the font rather than shrunk by software.","aliases":[{"name":"superior figures"},{"name":"subscript"},{"name":"inferior figures"},{"name":"ordinals","source":"opentype"},{"name":"sups","source":"opentype"}],"tags":[],"relations":{"contrastWith":["prime-mark"],"variantOf":[],"partOf":[],"seeAlso":["sidenote","ruby-annotation"]},"implementations":[],"sources":[{"title":"Ordinals (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"OpenType font features (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/OpenType_fonts"}],"demo":"inline","useWhen":"footnote markers, ordinals, and exponents"},{"name":"Supporting pane","slug":"supporting-pane","category":"layout","status":"published","definition":"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.","aliases":[{"name":"secondary pane","source":"community"},{"name":"focus pane and supporting pane","source":"material"}],"tags":[],"relations":{"contrastWith":["inspector","list-detail","pane"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Supporting pane (SupportingPaneScaffold)","url":"https://developer.android.com/develop/adaptive-apps/guides/canonical-layouts"}],"sources":[{"title":"Canonical layouts, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/canonical-layouts"}],"demo":"inline","useWhen":"helper content that cannot stand on its own"},{"name":"Surface color","slug":"surface-color","category":"color","status":"published","definition":"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.","aliases":[{"name":"background color","source":"community"},{"name":"surface container","source":"material"},{"name":"layer token","source":"carbon"},{"name":"bg-surface","source":"polaris"},{"name":"canvas","source":"community"}],"tags":["tokens"],"relations":{"contrastWith":["container-color","outline-color","elevation-overlay"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Surface, Surface container (lowest to highest)","url":"https://m3.material.io/styles/color/roles"}],"sources":[{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"},{"title":"Carbon: color","url":"https://carbondesignsystem.com/elements/color/overview/"}],"demo":"inline","useWhen":"naming the plane content sits on, not the page background"},{"name":"Surface tint","slug":"surface-tint","category":"color","status":"published","definition":"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.","aliases":[{"name":"surfaceTint","source":"material"},{"name":"tonal elevation","source":"material"},{"name":"tonal surface color","source":"material"}],"tags":["theming"],"relations":{"contrastWith":["elevation-overlay","state-layer","container-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Surface tint","url":"https://m3.material.io/styles/color/roles"}],"sources":[{"title":"Material 3: color roles","url":"https://m3.material.io/styles/color/roles"},{"title":"Flutter: ElevationOverlay.applyOverlay","url":"https://api.flutter.dev/flutter/material/ElevationOverlay/applyOverlay.html"}],"demo":"inline","useWhen":"elevation shown by tinting a surface rather than by shadow"},{"name":"Swash","slug":"swash","category":"typography","status":"published","definition":"A letter drawn with an ornamental flourish, usually an extended entry or exit stroke on an italic capital.","aliases":[{"name":"swash caps"},{"name":"swsh","source":"opentype"},{"name":"flourish"}],"tags":[],"relations":{"contrastWith":["stylistic-set","contextual-alternates"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"OpenType features (Typofonderie)","url":"https://typofonderie.com/help/opentype-features"},{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"}],"demo":"inline","useWhen":"naming the decorative tail on a fancy capital"},{"name":"Swatch","slug":"swatch","category":"color","status":"published","definition":"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.","aliases":[{"name":"color chip","source":"community"},{"name":"color sample","source":"community"},{"name":"palette square","source":"community"}],"tags":[],"relations":{"contrastWith":["color-well","chip"],"variantOf":[],"partOf":[],"seeAlso":["color-picker","transparency-checkerboard"]},"implementations":[],"sources":[{"title":"The EyeDropper API (mentions the preview swatch)","url":"https://developer.chrome.com/docs/capabilities/web-apis/eyedropper"}],"demo":"inline","useWhen":"a small block standing in for a colour value"},{"name":"Swipe","slug":"swipe","category":"interaction","status":"published","definition":"A quick directional drag of a finger across the screen, faster and coarser than a drag, usually without a specific on-screen target.","aliases":[{"name":"paging swipe","source":"material"},{"name":"swipe gesture","source":"community"},{"name":"flick","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["fling","pan","edge-swipe"],"variantOf":[],"partOf":[],"seeAlso":["swipe-actions"]},"implementations":[{"system":"material","name":"Swipe","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: Gestures","url":"https://m1.material.io/patterns/gestures.html"},{"title":"Material Design 3: Gestures","url":"https://m3.material.io/foundations/interaction/gestures"}],"demo":"inline","useWhen":"a fast directional stroke, not a controlled drag"},{"name":"Swipe actions","slug":"swipe-actions","category":"interaction","status":"published","definition":"Buttons hidden behind a list row that a partial sideways swipe reveals, so destructive or common actions live under the item itself.","aliases":[{"name":"swipe to reveal","source":"community"},{"name":"leading and trailing actions","source":"community"},{"name":"row actions","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["context-menu","swipe-to-dismiss"],"variantOf":[],"partOf":[],"seeAlso":["swipe"]},"implementations":[],"sources":[{"title":"LogRocket: Designing accessible swipe contextual action triggers","url":"https://blog.logrocket.com/ux-design/accessible-swipe-contextual-action-triggers/"}],"demo":"inline","useWhen":"actions parked behind a row until it is swiped"},{"name":"Swipe deck","slug":"swipe-deck","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"card stack","source":"community"},{"name":"tinder swipe","source":"community"},{"name":"swipe cards","source":"community"},{"name":"yes no deck","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["swipe-to-dismiss","stories"],"variantOf":[],"partOf":[],"seeAlso":["stacking-cards"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"a stack of cards you swipe left or right to judge"},{"name":"Swipe to dismiss","slug":"swipe-to-dismiss","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"swipe away","source":"community"},{"name":"dismissible","source":"material"},{"name":"flick to dismiss","source":"community"},{"name":"swipe to clear","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["swipe-actions","swipe-deck"],"variantOf":[],"partOf":[],"seeAlso":["interactive-transition","undo"]},"implementations":[],"sources":[{"title":"NN/g: Using Swipe to Trigger Contextual Actions","url":"https://www.nngroup.com/articles/contextual-swipe/"}],"demo":"inline","useWhen":"throwing a card or notification off the screen to clear it"},{"name":"Swiss style","slug":"swiss-style","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"International Typographic Style"},{"name":"Swiss design"},{"name":"grid system design"},{"name":"Helvetica style","source":"community"},{"name":"Swiss modernism"},{"name":"Swiss modernism 2.0","source":"uistyleguide"}],"tags":[],"relations":{"contrastWith":["new-wave-design","bauhaus-style","minimalism"],"variantOf":[],"partOf":[],"seeAlso":["editorial-web-design"]},"implementations":[],"sources":[{"title":"Wikipedia: International Typographic Style","url":"https://en.wikipedia.org/wiki/International_Typographic_Style"},{"title":"Wikipedia: Swiss Style (design)","url":"https://en.wikipedia.org/wiki/Swiss_Style_(design)"}],"demo":"inline","useWhen":"grid, Helvetica, and nothing decorative"},{"name":"Switch","slug":"switch","category":"component","status":"published","definition":"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.","aliases":[{"name":"toggle switch","source":"primer"},{"name":"toggle","source":"community"},{"name":"on off switch","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["checkbox","quick-settings-tile","toggle-button"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Switch","url":"https://www.w3.org/WAI/ARIA/apg/patterns/switch/"},{"system":"material","name":"Switch","url":"https://m3.material.io/components/switch/overview"},{"system":"hig","name":"Toggle","url":"https://developer.apple.com/design/human-interface-guidelines/toggles"},{"system":"carbon","name":"Toggle","url":"https://carbondesignsystem.com/components/toggle/usage/"},{"system":"polaris","name":"Switch","url":"https://shopify.dev/docs/api/app-home/polaris-web-components/forms/switch"},{"system":"base-ui","name":"Switch","url":"https://base-ui.com/react/components/switch"}],"sources":[{"title":"ARIA Authoring Practices Guide: Switch pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/switch/"},{"title":"Nielsen Norman Group: Toggle-Switch Guidelines","url":"https://www.nngroup.com/articles/toggle-switch-guidelines/"}],"demo":"inline","useWhen":"a setting that takes effect immediately"},{"name":"Switch access","slug":"switch-access","category":"accessibility","status":"published","definition":"Operating a device with one or two switches, where a scanning cursor steps through targets in turn and a press selects the highlighted one.","aliases":[{"name":"switch control","source":"apple"},{"name":"scanning","source":"community"},{"name":"single switch","source":"community"}],"tags":[],"relations":{"contrastWith":["dwell-activation","spatial-navigation","voice-control"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Android Accessibility Help: Get started with Switch Access","url":"https://support.google.com/accessibility/android/answer/6122836"}],"demo":"inline","useWhen":"input is a single button and time, not a pointer"},{"name":"Switcher","slug":"switcher","category":"layout","status":"published","definition":"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.","aliases":[{"name":"the switcher","source":"every-layout"},{"name":"flexbox holy albatross","source":"community"},{"name":"container based switch","source":"community"}],"tags":[],"relations":{"contrastWith":["cluster","ram-technique"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Switcher, W3C Design System","url":"https://design-system.w3.org/layouts/switcher.html"}],"demo":"inline","useWhen":"side by side until it does not fit, then stacked"},{"name":"Symbol support","slug":"symbol-support","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"WAI-Adapt","source":"w3c"},{"name":"personalization semantics","source":"w3c"},{"name":"AAC symbols","source":"community"},{"name":"adapt-symbol","source":"w3c"}],"tags":[],"relations":{"contrastWith":["icon","plain-language"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WAI-Adapt: Symbols Module","url":"https://www.w3.org/TR/adapt-symbols/"},{"title":"WAI-Adapt Explainer","url":"https://www.w3.org/TR/adapt/"}],"demo":"inline","useWhen":"the words and icons themselves are the barrier"},{"name":"Synthwave","slug":"synthwave","category":"aesthetic","status":"published","definition":"A neon 1980s look built on sunset gradients, glowing perspective grids, and chrome type, close to vaporwave but sincere rather than ironic.","aliases":[{"name":"outrun"},{"name":"retrowave"},{"name":"neon 80s","source":"community"},{"name":"SynthWave '84","source":"vscode"}],"tags":[],"relations":{"contrastWith":["vaporwave","cyberpunk-ui","retro-futurism"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Vaporwave | Aesthetics Wiki","url":"https://aesthetics.fandom.com/wiki/Vaporwave"},{"title":"Digital Heroes: Vaporwave Retro Brand Design 2026","url":"https://digitalheroesco.com/styles/vaporwave/"}],"demo":"inline","useWhen":"neon grid and sunset 80s futurism, played straight"},{"name":"System color keyword","slug":"system-color-keyword","category":"color","status":"published","definition":"A CSS keyword such as Canvas, CanvasText or LinkText that resolves to a colour chosen by the operating system rather than by the page.","aliases":[{"name":"system colors","source":"css"},{"name":"CanvasText","source":"css"},{"name":"AccentColor","source":"css"},{"name":"ButtonFace","source":"css"}],"tags":["theming"],"relations":{"contrastWith":["forced-colors-mode","named-color"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: <color> CSS type","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value"},{"title":"Windows High Contrast Mode and CSS custom properties","url":"https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/"}],"demo":"inline","useWhen":"styling with the colours the OS itself picked"},{"name":"System font","slug":"system-font","category":"typography","status":"published","definition":"The typeface the operating system uses for its own interface, requested by keyword so each platform supplies its native face.","aliases":[{"name":"system-ui","source":"css"},{"name":"native font"},{"name":"platform font"},{"name":"San Francisco"},{"name":"Segoe UI"},{"name":"Roboto"}],"tags":[],"relations":{"contrastWith":["web-font","font-stack"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"hig","name":"System fonts (SF Pro, New York)","url":"https://developer.apple.com/design/human-interface-guidelines/typography"},{"system":"fluent","name":"Segoe UI Variable","url":"https://fluent2.microsoft.design/typography"}],"sources":[{"title":"System fonts (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"Typography (Fluent 2)","url":"https://fluent2.microsoft.design/typography"}],"demo":"inline","useWhen":"you want the app to look native and load nothing"},{"name":"Tab stop","slug":"tab-stop","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"tab index position","source":"community"},{"name":"single tab stop","source":"aria-apg"}],"tags":["keyboard"],"relations":{"contrastWith":["roving-tabindex","tabbable"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"ARIA APG: Developing a Keyboard Interface","url":"https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/"},{"title":"Erik Kroes: A glossary of web accessibility terms","url":"https://www.erikkroes.nl/glossary/"}],"demo":"inline","useWhen":"counting how many Tab presses a widget costs"},{"name":"Tabbable","slug":"tabbable","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"focusable vs tabbable","source":"community"},{"name":"programmatically focusable","source":"community"},{"name":"sequentially focusable","source":"html"}],"tags":["keyboard"],"relations":{"contrastWith":["tab-stop","positive-tabindex","focusable-disabled"],"variantOf":[],"partOf":[],"seeAlso":["focusable-scroll-region"]},"implementations":[],"sources":[{"title":"MDN: tabindex","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex"},{"title":"Eric Eggert: Two different kinds of focusable UI elements","url":"https://yatil.net/blog/focusable-ui-elements"},{"title":"TetraLogical: When to use tabindex=0","url":"https://tetralogical.com/blog/2024/04/04/when-to-use-tabindex-0/"}],"demo":"inline","useWhen":"distinguishing script focus from Tab reachability"},{"name":"Header association","slug":"table-header-association","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"scope attribute","source":"html"},{"name":"headers attribute","source":"html"},{"name":"row header","source":"community"},{"name":"column header","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["frozen-column"],"variantOf":[],"partOf":[],"seeAlso":["data-table","sort-state"]},"implementations":[],"sources":[{"title":"W3C WAI: Tables tutorial","url":"https://www.w3.org/WAI/tutorials/tables/"},{"title":"WebAIM: Creating accessible tables","url":"https://webaim.org/techniques/tables/data"}],"demo":"inline","useWhen":"a table cell must announce which column it is in"},{"name":"Table of contents","slug":"table-of-contents","category":"pattern","status":"published","definition":"A list of a document's sections, linked in reading order, shown beside or above the text.","aliases":[{"name":"contents"},{"name":"in-page navigation","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["scroll-spy","local-navigation"],"variantOf":[],"partOf":[],"seeAlso":["sticky-sidebar","heading-hierarchy"]},"implementations":[],"sources":[{"title":"DPUB-ARIA: doc-toc role","url":"https://www.w3.org/TR/dpub-aria-1.0/#doc-toc"},{"title":"nav element, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav"}],"demo":"inline","useWhen":"the document's own sections, in reading order"},{"name":"Tabs","slug":"tabs","category":"component","status":"published","definition":"A set of labelled panels in one region, where selecting a label swaps the panel beneath it.","aliases":[{"name":"tab view","source":"hig"},{"name":"tabbed interface","source":"community"},{"name":"tab set","source":"community"}],"tags":[],"relations":{"contrastWith":["segmented-control","scope-bar","accordion","local-navigation"],"variantOf":[],"partOf":[],"seeAlso":["sliding-indicator","selection-follows-focus"]},"implementations":[{"system":"aria-apg","name":"Tabs pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"},{"system":"material","name":"Tabs","url":"https://m3.material.io/components/tabs/overview"},{"system":"carbon","name":"Tabs","url":"https://carbondesignsystem.com/components/tabs/usage/"}],"sources":[{"title":"ARIA APG: Tabs pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/tabs/"}],"demo":"inline","useWhen":"labelled panels in one region, one showing at a time"},{"name":"Tabular figures","slug":"tabular-figures","category":"typography","status":"published","definition":"Numerals drawn to identical widths so digits stack into columns, and so a changing number does not shift the text around it.","aliases":[{"name":"tabular numbers"},{"name":"tabular-nums","source":"css"},{"name":"monospaced figures"},{"name":"tnum","source":"opentype"},{"name":"fixed-width numerals"}],"tags":["tables"],"relations":{"contrastWith":["monospace","lining-figures","oldstyle-figures"],"variantOf":[],"partOf":[],"seeAlso":["count-up-animation"]},"implementations":[],"sources":[{"title":"Facts about figures: numeric styles with OpenType features","url":"https://www.rwt.io/typography-tips/facts-about-figures-numeric-styles-with-opentype-features/"},{"title":"OpenType at Work: Figure Styles","url":"https://typenetwork.com/articles/opentype-at-work-figure-styles"}],"demo":"inline","useWhen":"numbers in a table, a timer, or a live counter"},{"name":"Tag","slug":"tag","category":"component","status":"published","definition":"A small label attached to an item to classify it, often coloured by category and sometimes removable.","aliases":[{"name":"label","source":"primer"},{"name":"keyword"},{"name":"compound tag","source":"blueprint"}],"tags":[],"relations":{"contrastWith":["chip","badge"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"fluent","name":"Tag","url":"https://fluent2.microsoft.design/components/web/react"}],"sources":[{"title":"GOV.UK Design System: components","url":"https://design-system.service.gov.uk/components/"}],"demo":"inline","useWhen":"a small label that classifies an item"},{"name":"Tag input","slug":"tag-input","category":"component","status":"published","definition":"A field that turns each entry into a removable tag sitting inside the field, with the caret waiting after the last one.","aliases":[{"name":"token field"},{"name":"tags input","source":"mantine"},{"name":"chips input"},{"name":"pill input"}],"tags":["forms"],"relations":{"contrastWith":["chip","multi-select"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Blueprint: Tag input","url":"https://blueprintjs.com/docs/#core/components/tag-input"}],"demo":"inline","useWhen":"a reader types an open ended set of short values"},{"name":"Tap","slug":"tap","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"touch","source":"material"},{"name":"single tap","source":"community"},{"name":"press","source":"community"}],"tags":["touch"],"relations":{"contrastWith":["long-press","secondary-click","double-tap"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Touch","url":"https://m1.material.io/patterns/gestures.html"}],"sources":[{"title":"Material Design: Gestures (touch mechanics)","url":"https://m1.material.io/patterns/gestures.html"},{"title":"iOS HIG: Gestures","url":"https://developer.apple.com/design/human-interface-guidelines/gestures"}],"demo":"inline","useWhen":"the touch gesture that activates something"},{"name":"Tap delay","slug":"tap-delay","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"300ms click delay","source":"community"},{"name":"click delay","source":"community"},{"name":"touch delay","source":"community"}],"tags":["perceived-performance","touch"],"relations":{"contrastWith":["ghost-click","sticky-hover","drag-threshold"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Chrome for Developers: 300ms tap delay, gone away","url":"https://developer.chrome.com/blog/300ms-tap-delay-gone-away"}],"demo":"inline","useWhen":"naming the historic lag between tap and response"},{"name":"Target spacing","slug":"target-spacing","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"spacing exception","source":"wcag"},{"name":"24px circle test","source":"community"},{"name":"target offset","source":"community"},{"name":"undersized target","source":"wcag"}],"tags":["touch"],"relations":{"contrastWith":["touch-target-size","hit-slop"],"variantOf":[],"partOf":[],"seeAlso":["fitts-law"]},"implementations":[],"sources":[{"title":"WCAG 2.2: Target Size (Minimum)","url":"https://www.w3.org/TR/WCAG22/#target-size-minimum"},{"title":"TetraLogical: Foundations, target size","url":"https://tetralogical.com/blog/2022/12/20/foundations-target-size/"}],"demo":"inline","useWhen":"small controls that cannot grow but can be separated"},{"name":"Tearsheet","slug":"tearsheet","category":"component","status":"published","definition":"A tall modal anchored to the bottom of the viewport that holds a multi step creation flow, stackable when one flow opens another.","aliases":[{"name":"full page modal","source":"community"},{"name":"create flow modal","source":"community"},{"name":"full screen dialog","source":"material"}],"tags":[],"relations":{"contrastWith":["bottom-sheet","wizard"],"variantOf":["modal-dialog"],"partOf":[],"seeAlso":[]},"implementations":[{"system":"carbon","name":"Tearsheet","url":"https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx"}],"sources":[{"title":"Carbon for IBM Products: TearsheetShell","url":"https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx"}],"demo":"inline","useWhen":"a full height modal for a creation flow"},{"name":"10-foot UI","slug":"ten-foot-ui","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"ten-foot experience","source":"community"},{"name":"TV UI","source":"community"},{"name":"leanback UI","source":"android"},{"name":"living-room UI","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["spatial-navigation","overscan-safe-area"]},"implementations":[],"sources":[{"title":"Wikipedia: 10-foot user interface","url":"https://en.wikipedia.org/wiki/10-foot_user_interface"},{"title":"Android for TV: design guidance","url":"https://developer.android.com/design/ui/tv"}],"demo":"inline","useWhen":"the screen is across the room and the input is a remote"},{"name":"Terminal aesthetic","slug":"terminal-aesthetic","category":"aesthetic","status":"published","definition":"A look borrowed from the command line: monospace type on a fixed character grid, a block cursor, and green or amber text on black.","aliases":[{"name":"TUI aesthetic"},{"name":"console UI"},{"name":"monospace UI","source":"community"},{"name":"hacker aesthetic","source":"community"},{"name":"green screen","source":"community"}],"tags":[],"relations":{"contrastWith":["brutalist-web-design","cyberpunk-ui","e-ink-aesthetic"],"variantOf":[],"partOf":[],"seeAlso":["monospace","cassette-futurism","scanlines"]},"implementations":[],"sources":[{"title":"Setproduct: Retro and brutalist UI design, a 2026 field guide","url":"https://www.setproduct.com/blog/retro-brutalist-ui-design-2026"}],"demo":"inline","useWhen":"the UI dressed as a command line"},{"name":"Terrazzo","slug":"terrazzo","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"terrazzo pattern"},{"name":"chip pattern"},{"name":"speckle pattern"},{"name":"confetti texture"}],"tags":[],"relations":{"contrastWith":["dot-grid-background","grainy-gradient","memphis-design"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Creative Market: Design Trend Report, Terrazzo","url":"https://creativemarket.com/blog/design-trend-report-terrazzo"},{"title":"Desenio: Design focus, terrazzo","url":"https://desenio.com/design-magazine/trends-2/design-focus-this-fall-terrazzo/"}],"demo":"inline","useWhen":"a speckled chip pattern used as a background fill"},{"name":"Text balancing","slug":"text-balancing","category":"typography","status":"published","definition":"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.","aliases":[{"name":"balanced text","source":"css"},{"name":"text-wrap: balance","source":"css"},{"name":"text-wrap: pretty","source":"css"},{"name":"text balance","source":"tailwind"},{"name":"headline balancing"}],"tags":["web-platform"],"relations":{"contrastWith":["rag","runt"],"variantOf":[],"partOf":[],"seeAlso":["measure"]},"implementations":[],"sources":[{"title":"text-wrap (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap"},{"title":"When to use text-wrap: balance vs pretty (LogRocket)","url":"https://blog.logrocket.com/css-text-wrap-balance-vs-text-wrap-pretty/"}],"demo":"inline","useWhen":"a two line heading breaks badly"},{"name":"Text box trim","slug":"text-box-trim","category":"typography","status":"published","definition":"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.","aliases":[{"name":"leading-trim","source":"community"},{"name":"text-box-edge","source":"css"},{"name":"capsize","source":"community"},{"name":"cap height trimming"}],"tags":["web-platform"],"relations":{"contrastWith":["optical-alignment","half-leading"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"CSS text-box-trim (Chrome for Developers)","url":"https://developer.chrome.com/blog/css-text-box-trim"},{"title":"text-box-trim (CSS-Tricks Almanac)","url":"https://css-tricks.com/almanac/properties/t/text-box-trim/"}],"demo":"inline","useWhen":"you want a label's box to match the letters, not the font"},{"name":"Text columns","slug":"text-columns","category":"layout","status":"published","definition":"Flowing one block of running text into several columns that fill and balance automatically, with an optional rule drawn between them.","aliases":[{"name":"CSS multi-column layout","source":"mdn"},{"name":"multicol","source":"community"},{"name":"column-count","source":"css"},{"name":"column rule","source":"css"},{"name":"newspaper columns","source":"community"}],"tags":["editorial"],"relations":{"contrastWith":["measure","magazine-layout","multi-column-layout"],"variantOf":[],"partOf":[],"seeAlso":["hyphenation","page-break"]},"implementations":[],"sources":[{"title":"CSS multi-column layout, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_multicol_layout"}],"demo":"inline","useWhen":"one passage of text split into columns"},{"name":"Text field","slug":"text-field","category":"component","status":"published","definition":"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.","aliases":[{"name":"text input","source":"govuk"},{"name":"textbox","source":"nngroup"},{"name":"input field","source":"community"},{"name":"form field","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["textarea","pin-input","input-group"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Text fields","url":"https://m3.material.io/components/text-fields/overview"},{"system":"hig","name":"Text fields","url":"https://developer.apple.com/design/human-interface-guidelines/text-fields"},{"system":"fluent","name":"Input","url":"https://fluent2.microsoft.design/components/web/react/core/input/usage"},{"system":"carbon","name":"Text input","url":"https://carbondesignsystem.com/components/text-input/usage/"},{"system":"polaris","name":"Text field","url":"https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textfield"},{"system":"radix","name":"Text Field","url":"https://www.radix-ui.com/themes/docs/components/text-field"},{"system":"base-ui","name":"Input","url":"https://base-ui.com/react/components/input"},{"system":"shadcn","name":"Input","url":"https://ui.shadcn.com/docs/components/input"}],"sources":[{"title":"GOV.UK Design System: Text input","url":"https://design-system.service.gov.uk/components/text-input/"},{"title":"W3C WAI tutorials: Labeling controls","url":"https://www.w3.org/WAI/tutorials/forms/labels/"}],"demo":"inline","useWhen":"one line of free text or a number"},{"name":"Text spacing","slug":"text-spacing","category":"accessibility","status":"published","definition":"The requirement that a reader can increase line height, letter spacing, word spacing, and paragraph spacing without any content being lost or clipped.","aliases":[{"name":"WCAG 1.4.12","source":"wcag"},{"name":"text spacing override"},{"name":"user stylesheet spacing"}],"tags":[],"relations":{"contrastWith":["resize-text","leading"],"variantOf":[],"partOf":[],"seeAlso":["reflow"]},"implementations":[],"sources":[{"title":"1.4.12 Text Spacing (Deque University)","url":"https://dequeuniversity.com/resources/wcag2.1/1.4.12-text-spacing"}],"demo":"inline","useWhen":"proving a layout survives reader-set spacing"},{"name":"Text area","slug":"textarea","category":"component","status":"published","definition":"A multi-line text box, usually resizable, for input that will not fit on one line: a comment, a description, an address, a note.","aliases":[{"name":"multiline input","source":"community"},{"name":"comment box","source":"community"},{"name":"text area","source":"cloudscape"}],"tags":["forms"],"relations":{"contrastWith":["text-field","prompt-input","rich-text-editor"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Text field (multi-line)","url":"https://m3.material.io/components/text-fields/overview"},{"system":"hig","name":"Text views","url":"https://developer.apple.com/design/human-interface-guidelines/text-views"},{"system":"fluent","name":"Textarea","url":"https://fluent2.microsoft.design/components/web/react/core/textarea/usage"},{"system":"carbon","name":"Text area","url":"https://carbondesignsystem.com/components/text-input/usage/"},{"system":"polaris","name":"TextArea","url":"https://shopify.dev/docs/api/app-home/polaris-web-components/forms/textarea"},{"system":"radix","name":"TextArea","url":"https://www.radix-ui.com/themes/docs/components/text-area"},{"system":"shadcn","name":"Textarea","url":"https://ui.shadcn.com/docs/components/textarea"}],"sources":[{"title":"MDN: the textarea element","url":"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea"},{"title":"GOV.UK Design System: Textarea","url":"https://design-system.service.gov.uk/components/textarea/"}],"demo":"inline","useWhen":"input that runs to several lines"},{"name":"The fold","slug":"the-fold","category":"layout","status":"published","definition":"The bottom edge of the first screenful, above which content is seen without any scrolling and below which it must be earned.","aliases":[{"name":"above the fold","source":"community"},{"name":"below the fold","source":"community"},{"name":"first viewport","source":"community"},{"name":"initial viewport","source":"community"}],"tags":["scroll"],"relations":{"contrastWith":["false-bottom","viewport"],"variantOf":[],"partOf":[],"seeAlso":["hero"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"arguing about what must be visible before a scroll"},{"name":"Throttle","slug":"throttle","category":"interaction","status":"published","definition":"Capping how often a continuous stream of input is acted on, so a response fires at a steady rate instead of on every event.","aliases":[{"name":"throttling","source":"community"},{"name":"rate limiting input","source":"community"},{"name":"sampling","source":"community"}],"tags":["perceived-performance"],"relations":{"contrastWith":["debounce"],"variantOf":[],"partOf":[],"seeAlso":["frame-rate"]},"implementations":[],"sources":[{"title":"MDN: Pointer events","url":"https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events"}],"demo":"inline","useWhen":"limiting how often a continuous input is answered"},{"name":"Thumb zone","slug":"thumb-zone","category":"layout","status":"published","definition":"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.","aliases":[{"name":"reachability","source":"community"},{"name":"thumb arc","source":"community"},{"name":"one handed reach","source":"community"},{"name":"green zone","source":"community"}],"tags":["platform-registers","touch"],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["fitts-law","mobile-first"]},"implementations":[],"sources":[{"title":"The Thumb Zone: Designing For Mobile Users","url":"https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/"}],"demo":"inline","useWhen":"placing primary actions within easy reach on phones"},{"name":"Thumbnail","slug":"thumbnail","category":"component","status":"published","definition":"A small stand-in image for a larger one, cropped rather than letterboxed so a row of them lines up.","aliases":[{"name":"thumb"},{"name":"preview image"},{"name":"poster"}],"tags":["media"],"relations":{"contrastWith":["avatar","image"],"variantOf":[],"partOf":[],"seeAlso":["file-attachment","filmstrip"]},"implementations":[{"system":"polaris","name":"Thumbnail","url":"https://shopify.dev/docs/api/app-home/polaris-web-components"}],"sources":[{"title":"Polaris web components","url":"https://shopify.dev/docs/api/app-home/polaris-web-components"}],"demo":"inline","useWhen":"a small preview image of a bigger one"},{"name":"Tick marks","slug":"tick-marks","category":"component","status":"published","definition":"The small notches printed along a slider track that show the discrete stops the handle can land on.","aliases":[{"name":"stop indicators","source":"material"},{"name":"slider ticks","source":"community"},{"name":"detents","source":"community"},{"name":"scale marks","source":"community"}],"tags":[],"relations":{"contrastWith":["axis","track"],"variantOf":[],"partOf":[],"seeAlso":["slider"]},"implementations":[{"system":"material","name":"Stop indicator","url":"https://m3.material.io/components/sliders/overview"}],"sources":[{"title":"Sliders, Material Design 3","url":"https://m3.material.io/components/sliders/overview"}],"demo":"inline","useWhen":"naming the notches printed along a slider"},{"name":"3D tilt","slug":"tilt-effect","category":"motion","status":"published","definition":"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.","aliases":[{"name":"tilt card","source":"community"},{"name":"3D hover tilt","source":"community"},{"name":"perspective hover","source":"community"},{"name":"parallax card","source":"community"},{"name":"vanilla-tilt","source":"community"}],"tags":[],"relations":{"contrastWith":["spotlight-hover"],"variantOf":[],"partOf":[],"seeAlso":["parallax","hover-lift"]},"implementations":[],"sources":[{"title":"Animation Vocabulary","url":"https://animations.dev/vocabulary"},{"title":"The Vocabulary of Motion","url":"https://motion-vocabulary.vercel.app/"}],"demo":"inline","useWhen":"a card should read as a physical object under the pointer"},{"name":"Time picker","slug":"time-picker","category":"component","status":"published","definition":"A control for choosing a time of day, either as a dial you tap around or as hour and minute lists.","aliases":[{"name":"time input","source":"cloudscape"},{"name":"clock picker","source":"community"},{"name":"timepicker","source":"ant-design"}],"tags":["forms"],"relations":{"contrastWith":["date-picker","wheel-picker"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Time pickers","url":"https://m3.material.io/components/time-pickers/overview"}],"sources":[{"title":"Ant Design components overview","url":"https://ant.design/components/overview/"}],"demo":"inline","useWhen":"choosing a clock time"},{"name":"Timeline","slug":"timeline","category":"component","status":"published","definition":"A vertical or horizontal line of dated events, each pinned to the line by a marker and reading in order.","aliases":[{"name":"history list","source":"community"},{"name":"event stream","source":"community"},{"name":"vertical timeline","source":"community"}],"tags":[],"relations":{"contrastWith":["activity-feed"],"variantOf":[],"partOf":[],"seeAlso":["scrubber","scrollytelling"]},"implementations":[],"sources":[{"title":"Ant Design components overview","url":"https://ant.design/components/overview/"}],"demo":"inline","useWhen":"events in order along a line"},{"name":"Timeout warning","slug":"timeout-warning","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"session timeout dialog","source":"community"},{"name":"timing adjustable","source":"wcag"},{"name":"extend session","source":"community"},{"name":"idle timeout","source":"community"},{"name":"re-authenticating","source":"wcag"},{"name":"session timeout warning","source":"merged-candidate"},{"name":"session timeout","source":"merged-candidate"},{"name":"stay signed in prompt","source":"merged-candidate"},{"name":"session expiry warning","source":"merged-candidate"}],"tags":[],"relations":{"contrastWith":["countdown-timer","pause-stop-hide"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: Timeouts","url":"https://www.w3.org/TR/WCAG22/#timeouts"},{"title":"WCAG 2.2: Timing Adjustable","url":"https://www.w3.org/TR/WCAG22/#timing-adjustable"}],"demo":"inline","useWhen":"a session is about to expire under the reader"},{"name":"Tint","slug":"tint","category":"color","status":"published","definition":"A colour with white mixed in, lighter than the original hue and used for faint fills, hover washes and subtle backgrounds.","aliases":[{"name":"pastel"},{"name":"wash"}],"tags":[],"relations":{"contrastWith":["shade","color-temperature"],"variantOf":[],"partOf":[],"seeAlso":["color-ramp","state-layer","color-mix"]},"implementations":[],"sources":[{"title":"Design Glossary: Basic Color Terminology","url":"https://design4users.com/basic-color-terminology/"}],"demo":"inline","useWhen":"a lighter version of a colour made by adding white"},{"name":"Tinted neutral","slug":"tinted-neutral","category":"color","status":"published","definition":"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.","aliases":[{"name":"hued gray","source":"community"},{"name":"brand-tinted grey"},{"name":"gray scale companion","source":"radix"},{"name":"brand-tinted gray"}],"tags":[],"relations":{"contrastWith":["color-temperature","neutral-palette"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Radix Colors: custom palettes","url":"https://www.radix-ui.com/colors/docs/overview/custom-palettes"}],"demo":"inline","useWhen":"greys that quietly carry the brand hue"},{"name":"Tiny tweaks","slug":"tiny-tweaks","category":"layout","status":"published","definition":"The lightest responsive pattern: a single column design that only adjusts type size, image size and margins as the screen changes.","aliases":[{"name":"tiny tweaks pattern","source":"community"}],"tags":[],"relations":{"contrastWith":["column-drop","mostly-fluid"],"variantOf":["responsive-web-design"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Multi-Device Layout Patterns, LukeW","url":"https://www.lukew.com/ff/entry.asp?1514"}],"demo":"inline","useWhen":"one column that only nudges type and margins"},{"name":"Title bar","slug":"title-bar","category":"component","status":"published","definition":"The strip along the top of a window carrying its title and window controls, and the region you drag to move the window.","aliases":[{"name":"window title bar","source":"community"},{"name":"titlebar","source":"community"},{"name":"unified title bar","source":"hig"},{"name":"caption bar","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["window-controls","page-header","app-bar"],"variantOf":[],"partOf":[],"seeAlso":["toolbar","chrome"]},"implementations":[],"sources":[{"title":"Traffic Lights (Window Controls), NameThatUI","url":"https://namethatui.com/macos/traffic-lights"}],"demo":"inline","useWhen":"the draggable strip at the top of a window"},{"name":"Title case","slug":"title-case","category":"typography","status":"published","definition":"Capitalising the first letter of each significant word in a heading or label, leaving short articles, conjunctions and prepositions lowercase.","aliases":[{"name":"headline case"},{"name":"capital case"},{"name":"start case"}],"tags":[],"relations":{"contrastWith":["all-caps","sentence-case"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Title case capitalization (APA Style)","url":"https://apastyle.apa.org/style-grammar-guidelines/capitalization/title-case"},{"title":"Title case (Wikipedia)","url":"https://en.wikipedia.org/wiki/Title_case"}],"demo":"inline","useWhen":"Apple-style headings, buttons, and menu labels"},{"name":"Tittle","slug":"tittle","category":"typography","status":"published","definition":"The dot above a lowercase i or j.","aliases":[{"name":"the dot on the i"},{"name":"superscript dot"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["glyph","counter"]},"implementations":[],"sources":[{"title":"A Glossary of Typographic Terms (Monotype)","url":"https://www.monotype.com/resources/typographic-terms"},{"title":"Weird Glyphs (Pangram Pangram)","url":"https://pangrampangram.com/blogs/journal/weird-glyphs"}],"demo":"inline","useWhen":"you need the word for the dot on an i"},{"name":"Toast","slug":"toast","category":"component","status":"published","definition":"A brief, self-dismissing message that appears at a screen edge to confirm an action or report status without interrupting the user's flow.","aliases":[{"name":"snackbar","source":"material"}],"tags":["messaging"],"relations":{"contrastWith":["banner","alert-dialog","callout","offline-indicator","status-message"],"variantOf":[],"partOf":[],"seeAlso":["optimistic-ui","undo"]},"implementations":[{"system":"material","name":"Snackbar","url":"https://m3.material.io/components/snackbar/overview"},{"system":"base-ui","name":"Toast","url":"https://base-ui.com/react/components/toast"},{"system":"shadcn","name":"Sonner","url":"https://ui.shadcn.com/docs/components/sonner"},{"system":"carbon","name":"Toast notification","url":"https://carbondesignsystem.com/components/notification/usage/"}],"sources":[{"title":"ARIA Authoring Practices Guide: Alert pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/alert/"}],"demo":"inline","useWhen":"a passing confirmation that cleans up after itself"},{"name":"Tofu","slug":"tofu","category":"typography","status":"published","definition":"The empty rectangle a font renders when it has no glyph for a character, named for the block of bean curd it resembles.","aliases":[{"name":"notdef glyph"},{"name":".notdef"},{"name":"missing glyph box"},{"name":"empty box character"},{"name":"replacement box"}],"tags":[],"relations":{"contrastWith":["emoji-presentation","fallback-font","glyph"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Tofu (Words of Type)","url":"https://wiki.wordsoftype.com/en/entry/tofu"},{"title":"Notdef glyph (Wikipedia)","url":"https://en.wikipedia.org/wiki/Notdef_glyph"}],"demo":"inline","useWhen":"naming the empty box where a character should be"},{"name":"Toggle button","slug":"toggle-button","category":"component","status":"published","definition":"A button that stays pressed, reporting an on or off state through aria-pressed rather than firing and returning.","aliases":[{"name":"sticky button","source":"community"},{"name":"pressed button","source":"community"}],"tags":[],"relations":{"contrastWith":["switch","toggle-group"],"variantOf":["button"],"partOf":[],"seeAlso":["pressed-state"]},"implementations":[{"system":"base-ui","name":"Toggle","url":"https://base-ui.com/react/overview/quick-start"}],"sources":[{"title":"Base UI: components","url":"https://base-ui.com/react/overview/quick-start"}],"demo":"inline","useWhen":"a button that stays down once you press it"},{"name":"Toggle group","slug":"toggle-group","category":"component","status":"published","definition":"A set of toggle buttons treated as one control, either single select like radios or multi select like a row of formatting toggles.","aliases":[{"name":"toggle button group","source":"mui"},{"name":"button toggle"},{"name":"choice group","source":"fluent"}],"tags":[],"relations":{"contrastWith":["segmented-control","button-group","toggle-button"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"base-ui","name":"Toggle Group","url":"https://base-ui.com/react/components/toggle-group"},{"system":"shadcn","name":"Toggle Group","url":"https://ui.shadcn.com/docs/components/toggle-group"}],"sources":[{"title":"Toggle Group, Base UI","url":"https://base-ui.com/react/components/toggle-group"}],"demo":"inline","useWhen":"several toggles that belong to one decision"},{"name":"Toggletip","slug":"toggletip","category":"component","status":"published","definition":"A tip revealed by clicking rather than hovering, so it works by touch and may contain links or controls a tooltip could not.","aliases":[{"name":"toggle tip"},{"name":"info popover"},{"name":"help bubble"},{"name":"info label","source":"fluent"}],"tags":[],"relations":{"contrastWith":["tooltip","popover","hoverable-dismissible-persistent","coach-mark"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"carbon","name":"Toggletip","url":"https://carbondesignsystem.com/components/toggletip/usage/"},{"system":"fluent","name":"Info label","url":"https://fluent2.microsoft.design/components/web/react/core/infolabel/usage"}],"sources":[{"title":"Inclusive Components: Tooltips and toggletips","url":"https://inclusive-components.design/tooltips-toggletips/"}],"demo":"inline","useWhen":"a hint you click open, not hover open"},{"name":"Toolbar","slug":"toolbar","category":"component","status":"published","definition":"A grouped row of controls acting on the current view, sharing one tab stop and moving focus between its items with arrow keys.","aliases":[{"name":"tool bar","source":"community"},{"name":"action bar","source":"community"},{"name":"command bar","source":"fluent"}],"tags":[],"relations":{"contrastWith":["navigation-bar","button-group","menu-bar","ribbon","rich-text-toolbar","utility-bar","overflow-menu","app-bar"],"variantOf":[],"partOf":[],"seeAlso":["title-bar"]},"implementations":[{"system":"aria-apg","name":"Toolbar","url":"https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"},{"system":"radix","name":"Toolbar","url":"https://www.radix-ui.com/primitives/docs/components/toolbar"},{"system":"base-ui","name":"Toolbar","url":"https://base-ui.com/react/components/toolbar"}],"sources":[{"title":"ARIA Authoring Practices Guide: Toolbar pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"}],"demo":"inline","useWhen":"a row of controls acting on what is on screen"},{"name":"Tooltip","slug":"tooltip","category":"component","status":"published","definition":"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.","aliases":[],"tags":[],"relations":{"contrastWith":["popover","hover-card","toggletip","accessible-description","hoverable-dismissible-persistent"],"variantOf":[],"partOf":[],"seeAlso":["hover-intent","coach-mark"]},"implementations":[{"system":"aria-apg","name":"Tooltip","url":"https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/"},{"system":"material","name":"Tooltips","url":"https://m3.material.io/components/tooltips/overview"},{"system":"radix","name":"Tooltip","url":"https://www.radix-ui.com/primitives/docs/components/tooltip"},{"system":"base-ui","name":"Tooltip","url":"https://base-ui.com/react/components/tooltip"}],"sources":[{"title":"ARIA Authoring Practices Guide: Tooltip pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/"},{"title":"Nielsen Norman Group: Tooltip guidelines","url":"https://www.nngroup.com/articles/tooltip-guidelines/"}],"demo":"inline","useWhen":"a label that names the control under the pointer"},{"name":"Top layer","slug":"top-layer","category":"layout","status":"published","definition":"The layer above everything else in a document where fullscreen elements, modal dialogs and popovers render, escaping every ancestor's clipping and stacking order.","aliases":[{"name":"browser top layer","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["stacking-context","imposter"],"variantOf":[],"partOf":[],"seeAlso":["modal-dialog","anchor-positioning"]},"implementations":[],"sources":[{"title":"Top layer, MDN glossary","url":"https://developer.mozilla.org/en-US/docs/Glossary/Top_layer"}],"demo":"inline","useWhen":"explaining why a dialog is not trapped by overflow"},{"name":"Touch target","slug":"touch-target","category":"interaction","status":"published","definition":"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.","aliases":[{"name":"hit target","source":"hig"},{"name":"click target","source":"community"}],"tags":["a11y","touch"],"relations":{"contrastWith":["touch-target-size","hit-slop"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Understanding SC 2.5.8: Target Size (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"},{"title":"Smashing Magazine: accessible tap target sizes","url":"https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/"}],"demo":"inline","useWhen":"sizing what the finger must hit, not what is drawn"},{"name":"Touch target size","slug":"touch-target-size","category":"accessibility","status":"published","definition":"The minimum area a control must offer a finger or imprecise pointer, measured on the activation region rather than the painted glyph.","aliases":[{"name":"tap target"},{"name":"hit area"},{"name":"target size","source":"wcag"},{"name":"minimum touch target","source":"material"},{"name":"44pt minimum","source":"hig"},{"name":"48dp minimum","source":"material"},{"name":"dwell target"}],"tags":["touch"],"relations":{"contrastWith":["touch-target","fitts-law","target-spacing"],"variantOf":[],"partOf":[],"seeAlso":["icon-button","explore-by-touch","density"]},"implementations":[{"system":"material","name":"Touch target size (48dp)","url":"https://support.google.com/accessibility/android/answer/7101858"}],"sources":[{"title":"WCAG 2.2: Target Size (Minimum)","url":"https://www.w3.org/TR/WCAG22/#target-size-minimum"},{"title":"TetraLogical: Foundations, target sizes","url":"https://tetralogical.com/blog/2022/12/20/foundations-target-size/"}],"demo":"inline","useWhen":"sizing something for a fingertip, not a cursor"},{"name":"Track","slug":"track","category":"component","status":"published","definition":"The groove a slider thumb or scrollbar travels along, usually drawn as filled before the handle and empty after it.","aliases":[{"name":"groove","source":"community"},{"name":"slider track","source":"community"},{"name":"trough","source":"community"}],"tags":[],"relations":{"contrastWith":["tick-marks","range-slider"],"variantOf":[],"partOf":["slider"],"seeAlso":["scrollbar","playhead"]},"implementations":[{"system":"material","name":"Track","url":"https://m3.material.io/components/sliders/overview"}],"sources":[{"title":"Sliders, Material Design 3","url":"https://m3.material.io/components/sliders/overview"}],"demo":"inline","useWhen":"naming the groove a handle slides in"},{"name":"Tracking","slug":"tracking","category":"typography","status":"published","definition":"The uniform space added to or removed from every letter across a run of text.","aliases":[{"name":"letter-spacing","source":"css"},{"name":"letterspacing"}],"tags":[],"relations":{"contrastWith":["leading","kerning","optical-kerning","word-spacing"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"MDN: letter-spacing","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing"},{"title":"Letterspacing (Practical Typography)","url":"https://practicaltypography.com/letterspacing.html"}],"demo":"inline","useWhen":"space added to every letter across a run"},{"name":"Transcript","slug":"transcript","category":"accessibility","status":"published","definition":"A full text version of time based media, readable without playing it and searchable by both people and machines.","aliases":[{"name":"text transcript","source":"community"},{"name":"media alternative","source":"wcag"},{"name":"descriptive transcript","source":"community"}],"tags":["media"],"relations":{"contrastWith":["audio-description","captions"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WebAIM: Captions, Transcripts, and Audio Descriptions","url":"https://webaim.org/articles/"}],"demo":"inline","useWhen":"offering the whole of a video or podcast as text"},{"name":"Transfer list","slug":"transfer-list","category":"component","status":"published","definition":"Two side by side lists with arrow buttons between them, used to move items from available to chosen and back.","aliases":[{"name":"transfer","source":"ant-design"},{"name":"dual listbox"},{"name":"pick list"},{"name":"shuttle"},{"name":"list builder"}],"tags":["selection"],"relations":{"contrastWith":["listbox","drag-and-drop","multi-select"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Ant Design: components overview","url":"https://ant.design/components/overview/"}],"demo":"inline","useWhen":"picking a subset by moving items between two lists"},{"name":"Transparency checkerboard","slug":"transparency-checkerboard","category":"color","status":"published","definition":"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.","aliases":[{"name":"transparency grid","source":"adobe"},{"name":"alpha grid","source":"community"}],"tags":[],"relations":{"contrastWith":["alpha-channel"],"variantOf":[],"partOf":[],"seeAlso":["swatch"]},"implementations":[],"sources":[{"title":"Wikipedia: Transparency (graphic)","url":"https://en.wikipedia.org/wiki/Transparency_(graphic)"},{"title":"MDN: conic-gradient() checkerboard example","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient"}],"demo":"inline","useWhen":"showing that a region is transparent rather than white"},{"name":"Tree select","slug":"tree-select","category":"component","status":"published","definition":"A select whose popup is a tree, so options can be chosen at any depth with parents collapsing over their children.","aliases":[{"name":"treeselect","source":"ant-design"},{"name":"hierarchy picker","source":"community"},{"name":"folder picker","source":"community"}],"tags":[],"relations":{"contrastWith":["cascader","treeview","select"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Ant Design: components overview","url":"https://ant.design/components/overview/"}],"demo":"inline","useWhen":"picking from a tree inside a field"},{"name":"Tree grid","slug":"treegrid","category":"component","status":"published","definition":"A table whose rows nest and expand like a tree, so hierarchy and columns of data coexist in one grid.","aliases":[{"name":"tree table","source":"community"},{"name":"hierarchical table","source":"community"},{"name":"expandable rows table","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["data-table","treeview","expandable-row","data-grid"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"aria-apg","name":"Treegrid","url":"https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/"}],"sources":[{"title":"ARIA APG: Treegrid pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/"}],"demo":"inline","useWhen":"a table whose rows contain child rows"},{"name":"Tree view","slug":"treeview","category":"component","status":"published","definition":"A nested list where branches expand and collapse in place, navigated with arrow keys as a single tab stop.","aliases":[{"name":"tree","source":"fluent"},{"name":"outline view","source":"hig"},{"name":"file tree"},{"name":"folder tree"},{"name":"explorer"}],"tags":[],"relations":{"contrastWith":["list","tree-select","treegrid"],"variantOf":[],"partOf":[],"seeAlso":["mixed-state-checkbox"]},"implementations":[{"system":"aria-apg","name":"Tree View","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"},{"system":"fluent","name":"Tree","url":"https://fluent2.microsoft.design/components/web/react"}],"sources":[{"title":"ARIA Authoring Practices Guide: Tree View pattern","url":"https://www.w3.org/WAI/ARIA/apg/patterns/"}],"demo":"inline","useWhen":"nested items that expand in place"},{"name":"Triadic color scheme","slug":"triadic-colors","category":"color","status":"published","definition":"A palette of three hues spaced evenly around the colour wheel, vivid by construction and usually applied with one hue dominant.","aliases":[{"name":"triad","source":"community"},{"name":"tetradic","source":"community"},{"name":"square scheme","source":"community"}],"tags":[],"relations":{"contrastWith":["analogous-colors","complementary-colors"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Design Glossary: Basic Color Terminology","url":"https://design4users.com/basic-color-terminology/"}],"demo":"inline","useWhen":"three hues balanced evenly around the wheel"},{"name":"Trick wording","slug":"trick-wording","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"trick question","source":"community"},{"name":"double negative checkbox","source":"community"},{"name":"confusing wording","source":"community"}],"tags":[],"relations":{"contrastWith":["confirmshaming","misdirection"],"variantOf":["dark-pattern"],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Deceptive Design: Trick wording","url":"https://www.deceptive.design/types"}],"demo":"inline","useWhen":"untick this box to not stop receiving emails"},{"name":"True black theme","slug":"true-black-theme","category":"color","status":"published","definition":"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.","aliases":[{"name":"AMOLED theme","source":"community"},{"name":"pure black mode","source":"community"},{"name":"OLED dark mode","source":"community"},{"name":"black theme","source":"community"}],"tags":["theming"],"relations":{"contrastWith":["dark-mode"],"variantOf":[],"partOf":[],"seeAlso":["elevation-overlay"]},"implementations":[],"sources":[{"title":"Dark mode color guide","url":"https://devpalettes.com/blog/dark-mode-color-guide/"}],"demo":"inline","useWhen":"a dark theme at pure black for OLED, not near black"},{"name":"Truncated axis","slug":"truncated-axis","category":"pattern","status":"published","definition":"Starting a value axis above zero so differences look bigger than they are; honest for lines and dots, a lie for bars.","aliases":[{"name":"broken axis"},{"name":"axis truncation"},{"name":"cut y-axis"},{"name":"non-zero baseline"},{"name":"zero baseline"}],"tags":["dataviz"],"relations":{"contrastWith":["axis","dual-axis"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Calling Bullshit: Misleading axes","url":"https://www.callingbullshit.org/tools/tools_misleading_axes.html"},{"title":"Fundamentals of Data Visualization: Proportional ink","url":"https://clauswilke.com/dataviz/proportional-ink.html"}],"demo":"inline","useWhen":"judging whether cutting the y-axis exaggerates or clarifies"},{"name":"Truncation","slug":"truncation","category":"typography","status":"published","definition":"Cutting text that does not fit and marking the cut, usually with an ellipsis, so the reader knows something was removed.","aliases":[{"name":"text truncation"},{"name":"ellipsis"},{"name":"text-overflow","source":"css"},{"name":"truncate","source":"tailwind"},{"name":"clipping text"}],"tags":[],"relations":{"contrastWith":["show-more-toggle","marquee","line-clamp","word-break"],"variantOf":[],"partOf":[],"seeAlso":["scroll-edge-fade"]},"implementations":[],"sources":[{"title":"MDN: CSS text module","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text"},{"title":"Tailwind CSS: text-overflow","url":"https://tailwindcss.com/docs/text-overflow"}],"demo":"inline","useWhen":"text has to fit a box it does not fit"},{"name":"Tween","slug":"tween","category":"motion","status":"published","definition":"A single animation from one value to another over a duration, named for the in-between frames a computer fills in.","aliases":[{"name":"tweening"},{"name":"inbetweening"},{"name":"in-betweens"}],"tags":[],"relations":{"contrastWith":["keyframe"],"variantOf":[],"partOf":[],"seeAlso":["choreography","duration"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"naming one animation as a unit you can play or reverse"},{"name":"12 column grid","slug":"twelve-column-grid","category":"layout","status":"published","definition":"The web's default column count, chosen because twelve divides cleanly into halves, thirds, quarters and sixths.","aliases":[{"name":"twelve columns","source":"community"},{"name":"12-col","source":"community"},{"name":"12-span grid","source":"web-dev"}],"tags":[],"relations":{"contrastWith":["fluid-grid","layout-grid"],"variantOf":[],"partOf":[],"seeAlso":["column-offset"]},"implementations":[],"sources":[{"title":"Grid system, Bootstrap","url":"https://getbootstrap.com/docs/5.3/layout/grid/"}],"demo":"inline","useWhen":"why almost every layout grid has twelve columns"},{"name":"Type scale","slug":"type-scale","category":"typography","status":"published","definition":"The fixed set of text sizes a design allows, chosen so sizes relate to each other rather than being picked one at a time.","aliases":[{"name":"type ramp","source":"fluent"},{"name":"typescale","source":"material"},{"name":"type sets","source":"carbon"},{"name":"text styles","source":"hig"},{"name":"font size scale"}],"tags":["tokens"],"relations":{"contrastWith":["leading","heading-hierarchy","modular-scale","typographic-hierarchy","typography-token"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Type scale","url":"https://m3.material.io/styles/typography/type-scale-tokens"},{"system":"fluent","name":"Type ramp","url":"https://fluent2.microsoft.design/typography"},{"system":"hig","name":"Text styles","url":"https://developer.apple.com/design/human-interface-guidelines/typography"}],"sources":[{"title":"Fluent 2: Typography","url":"https://fluent2.microsoft.design/typography"},{"title":"Material Design 3: Type scale tokens","url":"https://m3.material.io/styles/typography/type-scale-tokens"}],"demo":"inline","useWhen":"deciding what sizes are allowed to exist at all"},{"name":"Type specimen","slug":"type-specimen","category":"typography","status":"published","definition":"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.","aliases":[{"name":"specimen sheet"},{"name":"font specimen"},{"name":"type sample"}],"tags":[],"relations":{"contrastWith":["pangram","lorem-ipsum"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"How to Pair Fonts (Pangram Pangram)","url":"https://pangrampangram.com/blogs/journal/how-to-pair-fonts"}],"demo":"inline","useWhen":"showing off a typeface rather than using it"},{"name":"Type to confirm","slug":"type-to-confirm","category":"pattern","status":"published","definition":"Guarding a destructive action by making the reader type the name of the thing being destroyed before the confirm button becomes usable.","aliases":[{"name":"type the name to confirm","source":"community"},{"name":"confirmation by typing","source":"community"},{"name":"delete confirmation input","source":"community"},{"name":"friction dialog","source":"community"}],"tags":["auth"],"relations":{"contrastWith":["confirmation-dialog","soft-delete","hold-to-confirm"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Cloudscape: Delete patterns","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"you must type the repo name to delete it"},{"name":"Typeahead","slug":"typeahead","category":"pattern","status":"published","definition":"Offering suggestions that update on every keystroke, drawn from a live query, so the reader picks a result rather than finishing the phrase.","aliases":[{"name":"autosuggest","source":"community"},{"name":"search as you type","source":"community"},{"name":"instant search","source":"community"},{"name":"predictive search","source":"community"},{"name":"lookahead","source":"community"},{"name":"suggest","source":"blueprint"}],"tags":["forms","search"],"relations":{"contrastWith":["combobox","inline-autocomplete","did-you-mean"],"variantOf":[],"partOf":[],"seeAlso":["address-autocomplete","debounce"]},"implementations":[{"system":"aria-apg","name":"Editable Combobox With List Autocomplete","url":"https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/"}],"sources":[{"title":"UI Patterns: autocomplete","url":"https://ui-patterns.com/patterns"}],"demo":"inline","useWhen":"suggestions appear and change as you type"},{"name":"Typeface","slug":"typeface","category":"typography","status":"published","definition":"The designed set of letterforms itself, as distinct from a font, which is one particular file or instance you actually use.","aliases":[{"name":"font","source":"community"},{"name":"type family"},{"name":"font family","source":"css"}],"tags":[],"relations":{"contrastWith":["web-font","glyph"],"variantOf":[],"partOf":[],"seeAlso":["font-pairing","serif"]},"implementations":[],"sources":[{"title":"Font (Google Fonts Knowledge)","url":"https://fonts.google.com/knowledge/glossary/font"},{"title":"Family, type family, or font family (Google Fonts Knowledge)","url":"https://fonts.google.com/knowledge/glossary/family_or_type_family_or_font_family"}],"demo":"inline","useWhen":"distinguishing the design from the file"},{"name":"Typewriter effect","slug":"typewriter-effect","category":"motion","status":"published","definition":"Revealing text one character at a time, as if it were being typed, usually with a blinking caret trailing the last letter.","aliases":[{"name":"typing animation"},{"name":"text scramble"},{"name":"streaming text"},{"name":"typed text"},{"name":"text morph"}],"tags":["ai"],"relations":{"contrastWith":["count-up-animation","split-flap-animation","kinetic-typography"],"variantOf":[],"partOf":[],"seeAlso":["streaming-announcement"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"text should arrive as if being written right now"},{"name":"Typing indicator","slug":"typing-indicator","category":"component","status":"published","definition":"The three bouncing dots shown while someone is composing a reply, or while an assistant is preparing one.","aliases":[{"name":"typing dots","source":"community"},{"name":"is typing","source":"community"},{"name":"composing indicator","source":"community"},{"name":"thinking indicator","source":"community"}],"tags":["ai","messaging"],"relations":{"contrastWith":["streaming-announcement","read-receipt"],"variantOf":[],"partOf":[],"seeAlso":["chat-bubble"]},"implementations":[],"sources":[{"title":"MUI X Chat: typing indicators","url":"https://mui.com/x/react-chat/behavior/typing-indicators/"},{"title":"MDN: aria-live","url":"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live"}],"demo":"inline","useWhen":"showing that a reply is being composed"},{"name":"Typographic color","slug":"typographic-color","category":"typography","status":"published","definition":"The overall lightness or darkness a block of text produces when you stop reading it and look at it as a grey texture.","aliases":[{"name":"type color"},{"name":"grey value"},{"name":"gray value"},{"name":"page texture"}],"tags":[],"relations":{"contrastWith":["readability","river"],"variantOf":[],"partOf":[],"seeAlso":["whitespace","font-weight"]},"implementations":[],"sources":[{"title":"Color (Practical Typography)","url":"https://practicaltypography.com/color.html"}],"demo":"inline","useWhen":"judging a paragraph as texture rather than words"},{"name":"Typographic hierarchy","slug":"typographic-hierarchy","category":"typography","status":"published","definition":"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.","aliases":[{"name":"type hierarchy"},{"name":"visual hierarchy of text"}],"tags":[],"relations":{"contrastWith":["visual-hierarchy","type-scale","heading"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"material","name":"Type roles: display, headline, title, body, label","url":"https://m3.material.io/styles/typography/type-scale-tokens"}],"sources":[{"title":"Hierarchical headings (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"Typography (Fluent 2)","url":"https://fluent2.microsoft.design/typography"}],"demo":"inline","useWhen":"making importance readable without reading"},{"name":"Typography token","slug":"typography-token","category":"typography","status":"published","definition":"A named bundle of type values (family, size, weight, line height, tracking) that a design system hands out instead of raw numbers.","aliases":[{"name":"type token"},{"name":"type style"},{"name":"font token"},{"name":"text style","source":"hig"},{"name":"typography role","source":"material"}],"tags":["tokens"],"relations":{"contrastWith":["type-scale"],"variantOf":[],"partOf":[],"seeAlso":["color-token"]},"implementations":[{"system":"material","name":"Type scale tokens","url":"https://m3.material.io/styles/typography/type-scale-tokens"}],"sources":[{"title":"Material 3: Type scale tokens","url":"https://m3.material.io/styles/typography/type-scale-tokens"},{"title":"Fluent 2: Design tokens","url":"https://fluent2.microsoft.design/design-tokens"}],"demo":"inline","useWhen":"naming a text style so it can be reused and themed"},{"name":"Underline","slug":"underline","category":"typography","status":"published","definition":"A rule drawn under text, on the web the default marker for a link, ideally set to skip the descenders it would otherwise cross.","aliases":[{"name":"text-decoration: underline","source":"css"},{"name":"underscore"},{"name":"skip ink","source":"css"},{"name":"text-decoration-skip-ink","source":"css"}],"tags":["a11y"],"relations":{"contrastWith":["link","strikethrough"],"variantOf":[],"partOf":[],"seeAlso":["italic"]},"implementations":[],"sources":[{"title":"Underlining (Practical Typography)","url":"https://practicaltypography.com/"},{"title":"CSS text module (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text"}],"demo":"inline","useWhen":"marking a link without relying on color alone"},{"name":"Undo","slug":"undo","category":"pattern","status":"published","definition":"Letting an action run immediately and offering to reverse it afterwards, instead of stopping to ask whether the reader really meant it.","aliases":[{"name":"undo toast","source":"community"},{"name":"undo snackbar","source":"material"},{"name":"revert","source":"community"}],"tags":[],"relations":{"contrastWith":["soft-delete","shake-to-undo","autosave"],"variantOf":[],"partOf":[],"seeAlso":["toast","swipe-to-dismiss","optimistic-ui","unsaved-changes-guard"]},"implementations":[],"sources":[{"title":"UI Patterns: Undo","url":"https://ui-patterns.com/patterns"},{"title":"GoodUI: try undos instead of prompting for confirmation","url":"https://goodui.org/"}],"demo":"inline","useWhen":"the action happens first and offers a way back"},{"name":"Universal navigation","slug":"universal-navigation","category":"layout","status":"published","definition":"A slim bar that links a subsite back to its parent organisation's other sites, sitting above the subsite's own global navigation.","aliases":[{"name":"universal nav","source":"community"},{"name":"corporate bar","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["global-navigation"],"variantOf":[],"partOf":[],"seeAlso":["site-footer"]},"implementations":[],"sources":[{"title":"Universal Navigation: Connecting Subsites to Main Sites, NN/g","url":"https://www.nngroup.com/articles/universal-navigation/"}],"demo":"inline","useWhen":"connecting a subsite back to the parent org"},{"name":"Unsaved changes guard","slug":"unsaved-changes-guard","category":"pattern","status":"published","definition":"Warning the reader that edits will be lost before a navigation or close is allowed to proceed, and offering to save or discard first.","aliases":[{"name":"dirty state warning","source":"community"},{"name":"leave site dialog","source":"community"},{"name":"communicating unsaved changes","source":"cloudscape"},{"name":"beforeunload prompt","source":"mdn"},{"name":"discard changes prompt","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["confirmation-dialog","autosave"],"variantOf":[],"partOf":[],"seeAlso":["undo"]},"implementations":[],"sources":[{"title":"Cloudscape: Communicating unsaved changes","url":"https://cloudscape.design/patterns/"}],"demo":"inline","useWhen":"leaving a form asks whether to discard your edits"},{"name":"Use of color","slug":"use-of-color","category":"accessibility","status":"published","definition":"The rule that colour must never be the only carrier of meaning, so a red field also needs an icon, wording, or shape change.","aliases":[{"name":"colour alone","source":"wcag"},{"name":"don't rely on color","source":"community"},{"name":"redundant coding","source":"community"},{"name":"pattern fill","source":"community"},{"name":"texture encoding","source":"community"},{"name":"color alone","source":"merged-candidate"},{"name":"color as the only cue","source":"merged-candidate"},{"name":"color-only information","source":"merged-candidate"},{"name":"greyscale test","source":"merged-candidate"},{"name":"grayscale test","source":"merged-candidate"}],"tags":["dataviz"],"relations":{"contrastWith":["color-vision-deficiency","sensory-characteristics"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"carbon","name":"Use of color and color blindness","url":"https://carbondesignsystem.com/guidelines/accessibility/color/"}],"sources":[{"title":"WCAG 2.2: Use of Color","url":"https://www.w3.org/TR/WCAG22/#use-of-color"}],"demo":"inline","useWhen":"the only difference between two states is hue"},{"name":"Utility bar","slug":"utility-bar","category":"component","status":"published","definition":"A persistent bar docked to the bottom of an application holding small tools that open into panels without leaving the current page.","aliases":[{"name":"docked utility bar","source":"lightning"},{"name":"docked composer","source":"lightning"},{"name":"app footer bar","source":"community"},{"name":"tool tray","source":"community"}],"tags":[],"relations":{"contrastWith":["toolbar","status-bar","dock"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Salesforce Lightning Design System: components","url":"https://www.lightningdesignsystem.com/components/overview/"}],"demo":"inline","useWhen":"tools docked along the bottom of the app"},{"name":"Utility navigation","slug":"utility-navigation","category":"layout","status":"published","definition":"The strip of secondary tools and account actions, sign in, search, language, cart, kept apart from the links that describe the site's content.","aliases":[{"name":"utility nav","source":"community"},{"name":"pre-header","source":"community"}],"tags":["navigation"],"relations":{"contrastWith":["global-navigation","site-footer"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Utility Navigation: What It Is and How to Design It, NN/g","url":"https://www.nngroup.com/articles/utility-navigation/"}],"demo":"inline","useWhen":"the small links above or beside the main nav"},{"name":"Vaporwave","slug":"vaporwave","category":"aesthetic","status":"published","definition":"A retro internet look of magenta and cyan gradients, grid horizons, Japanese type, statuary, and 90s desktop chrome used ironically.","aliases":[{"name":"vapourwave"},{"name":"aesthetic","source":"community"},{"name":"mallsoft","source":"community"},{"name":"80s 90s nostalgia UI"}],"tags":[],"relations":{"contrastWith":["y2k-aesthetic","retro-web-design","synthwave"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Vaporwave | Aesthetics Wiki","url":"https://aesthetics.fandom.com/wiki/Vaporwave"},{"title":"Shutterstock: What Is the Vaporwave Aesthetic","url":"https://www.shutterstock.com/blog/vaporwave-aesthetic-retro-design"}],"demo":"inline","useWhen":"90s mall and desktop imagery reused with irony"},{"name":"Variable font","slug":"variable-font","category":"typography","status":"published","definition":"One font file that contains a continuous design space, so any weight, width, or other axis value between the extremes can be requested.","aliases":[{"name":"variable fonts"},{"name":"VF"},{"name":"OpenType variations"},{"name":"variable typeface"}],"tags":[],"relations":{"contrastWith":["variation-axis","named-instance","superfamily"],"variantOf":[],"partOf":[],"seeAlso":["kinetic-typography"]},"implementations":[],"sources":[{"title":"Variable fonts (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts"},{"title":"Designing with Variable Fonts","url":"https://variablefonts.io/about-variable-fonts/"}],"demo":"inline","useWhen":"you need many weights without many files"},{"name":"Variation axis","slug":"variation-axis","category":"typography","status":"published","definition":"One dimension a variable font can move along, named by a four-letter tag: lowercase for the five registered axes, uppercase for custom ones.","aliases":[{"name":"font axis"},{"name":"design axis"},{"name":"registered axes","source":"opentype"},{"name":"custom axis"},{"name":"wght wdth slnt ital opsz","source":"opentype"}],"tags":[],"relations":{"contrastWith":["named-instance","grade-axis","optical-size","variable-font"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"OpenType Design-Variation Axis Tag Registry","url":"https://learn.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg"},{"title":"Variable fonts (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts"}],"demo":"inline","useWhen":"naming a single dial inside a variable font"},{"name":"Velocity skew","slug":"velocity-skew","category":"motion","status":"published","definition":"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.","aliases":[{"name":"skew on scroll","source":"gsap"},{"name":"scroll velocity skew","source":"community"},{"name":"velocity-based distortion","source":"community"},{"name":"getVelocity","source":"gsap"}],"tags":["scroll"],"relations":{"contrastWith":["motion-blur"],"variantOf":[],"partOf":[],"seeAlso":["scroll-linked-animation"]},"implementations":[],"sources":[{"title":"GSAP forums: skew on scroll velocity","url":"https://gsap.com/community/forums/topic/25971-skew-on-scroll-velocity/"},{"title":"GSAP docs: ScrollTrigger.getVelocity()","url":"https://gsap.com/docs/v3/Plugins/ScrollTrigger/getVelocity()/"}],"demo":"inline","useWhen":"scroll speed itself should be visible"},{"name":"Verbosity","slug":"verbosity","category":"accessibility","status":"published","definition":"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.","aliases":[{"name":"speech verbosity","source":"community"},{"name":"punctuation level","source":"community"},{"name":"verbosity setting","source":"community"}],"tags":[],"relations":{"contrastWith":["politeness-level"],"variantOf":[],"partOf":[],"seeAlso":["screen-reader","role-description","braille-display"]},"implementations":[],"sources":[{"title":"NVDA User Guide","url":"https://download.nvaccess.org/documentation/userGuide.html"}],"demo":"inline","useWhen":"arguing about how much detail a label should carry"},{"name":"Vernacular web","slug":"vernacular-web","category":"aesthetic","status":"published","definition":"The amateur homepage look of the GeoCities era: tiled backgrounds, sparkle GIFs, under construction signs, midi music, and hit counters.","aliases":[{"name":"GeoCities aesthetic"},{"name":"old web","source":"community"},{"name":"web 1.0"},{"name":"amateur web"},{"name":"under construction web","source":"community"}],"tags":[],"relations":{"contrastWith":["anti-design","retro-web-design"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"A Vernacular Web, Olia Lialina","url":"https://art.teleportacia.org/observation/vernacular/"},{"title":"NameThatUI: visual style catalog","url":"https://namethatui.com/styles"}],"demo":"inline","useWhen":"the hand-made amateur homepage look"},{"name":"Vertical rhythm","slug":"vertical-rhythm","category":"typography","status":"published","definition":"Spacing every block of text by multiples of one line height so the page keeps an even beat from top to bottom.","aliases":[{"name":"typographic rhythm"},{"name":"baseline rhythm"}],"tags":[],"relations":{"contrastWith":["baseline-grid","first-line-indent","leading"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"What the Font are Vertical Rhythm and Modular Scale?","url":"https://www.bounteous.com/insights/2018/03/26/what-font-are-vertical-rhythm-and-modular-scale/"}],"demo":"inline","useWhen":"spacing paragraphs and headings by one consistent unit"},{"name":"Vertical writing mode","slug":"vertical-writing-mode","category":"typography","status":"published","definition":"Setting lines to run top to bottom in columns rather than left to right, as traditional Chinese, Japanese, and Korean typography does.","aliases":[{"name":"writing-mode","source":"css"},{"name":"vertical text"},{"name":"tategaki","source":"community"},{"name":"text-orientation","source":"css"}],"tags":[],"relations":{"contrastWith":["logical-properties","bidirectional-text","ruby-annotation"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"CSS text module (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text"}],"demo":"inline","useWhen":"typesetting CJK text in columns"},{"name":"VHS aesthetic","slug":"vhs-aesthetic","category":"aesthetic","status":"published","definition":"A look that imitates a worn videotape: tracking bands, smeared color bleeding past edges, interlace comb artifacts, and burned-in timecode or REC overlays.","aliases":[{"name":"VHS look"},{"name":"tape aesthetic"},{"name":"analog horror look"},{"name":"camcorder overlay"}],"tags":[],"relations":{"contrastWith":["retro-film-aesthetic","glitch-aesthetic","scanlines"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Aesthetics Wiki: Retrofuturism (analog subgenres)","url":"https://aesthetics.fandom.com/wiki/Retrofuturism"}],"demo":"inline","useWhen":"artifacts of magnetic tape used as decoration"},{"name":"Vibrancy","slug":"vibrancy","category":"color","status":"published","definition":"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.","aliases":[{"name":"vibrant material","source":"hig"}],"tags":[],"relations":{"contrastWith":["glassmorphism"],"variantOf":[],"partOf":[],"seeAlso":["reduced-transparency","liquid-glass"]},"implementations":[{"system":"hig","name":"Vibrancy","url":"https://developer.apple.com/design/human-interface-guidelines/materials"}],"sources":[{"title":"Apple HIG: Materials","url":"https://developer.apple.com/design/human-interface-guidelines/materials"},{"title":"Apple HIG: Dark Mode","url":"https://developer.apple.com/design/human-interface-guidelines/dark-mode"}],"demo":"inline","useWhen":"foreground colour that reacts to the blur behind it"},{"name":"Video player","slug":"video-player","category":"component","status":"published","definition":"A framed video with the controls needed to play, seek, mute and caption it, sized so the controls never crowd the picture.","aliases":[{"name":"video","source":"component-gallery"},{"name":"media player","source":"community"},{"name":"player","source":"community"}],"tags":["media"],"relations":{"contrastWith":["picture-in-picture"],"variantOf":[],"partOf":[],"seeAlso":["audio-description","sign-language-interpretation","media-controls"]},"implementations":[],"sources":[{"title":"The Component Gallery: Video","url":"https://component.gallery/components/video/"}],"demo":"inline","useWhen":"video is the content and the reader controls playback"},{"name":"View progress timeline","slug":"view-progress-timeline","category":"motion","status":"published","definition":"A scroll timeline measured by one element's passage through the scrollport, with named ranges for entering, being contained, covering, and exiting.","aliases":[{"name":"view timeline","source":"css"},{"name":"view()","source":"css"},{"name":"entry and exit range","source":"css"},{"name":"cover and contain","source":"css"},{"name":"animation-range","source":"css"}],"tags":["scroll","web-platform"],"relations":{"contrastWith":["scroll-triggered-animation"],"variantOf":[],"partOf":[],"seeAlso":["scroll-linked-animation"]},"implementations":[],"sources":[{"title":"MDN: CSS scroll-driven animations","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations"}],"demo":"inline","useWhen":"the animation should track one element, not the whole page"},{"name":"View transition","slug":"view-transition","category":"motion","status":"published","definition":"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.","aliases":[{"name":"MPA view transition"},{"name":"cross-document view transition"},{"name":"hero animation","source":"flutter"},{"name":"shared element transition"}],"tags":["web-platform"],"relations":{"contrastWith":["stagger","crossfade","morph-transition","page-transition"],"variantOf":[],"partOf":[],"seeAlso":["easing"]},"implementations":[{"system":"material","name":"Transitions","url":"https://m3.material.io/styles/motion/transitions/transition-patterns"}],"sources":[{"title":"MDN: View Transition API","url":"https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API"},{"title":"CSS View Transitions Module Level 1","url":"https://www.w3.org/TR/css-view-transitions-1/"}],"demo":"iframe","useWhen":"one state of a page morphing into the next"},{"name":"Viewport","slug":"viewport","category":"layout","status":"published","definition":"The visible rectangle of a page inside the browser window, excluding the browser's own bars, and the unit basis for vh and vw.","aliases":[{"name":"visual viewport","source":"css"},{"name":"layout viewport","source":"css"},{"name":"viewport units","source":"community"},{"name":"svh, lvh, dvh","source":"css"}],"tags":[],"relations":{"contrastWith":["the-fold","scroll-container","infinite-canvas"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Viewport concepts, MDN","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/CSSOM_view/Viewport_concepts"}],"demo":"inline","useWhen":"the visible window, not the whole document"},{"name":"Vignette","slug":"vignette","category":"aesthetic","status":"published","definition":"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.","aliases":[{"name":"vignetting","source":"community"},{"name":"lens vignette","source":"community"},{"name":"edge darkening","source":"community"}],"tags":[],"relations":{"contrastWith":["scrim","progressive-blur"],"variantOf":[],"partOf":[],"seeAlso":["retro-film-aesthetic"]},"implementations":[],"sources":[{"title":"Wikipedia: Vignetting","url":"https://en.wikipedia.org/wiki/Vignetting"}],"demo":"inline","useWhen":"the edges of an image quietly dimmed to hold focus"},{"name":"Virtual keyboard","slug":"virtual-keyboard","category":"component","status":"published","definition":"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.","aliases":[{"name":"on-screen keyboard","source":"community"},{"name":"soft keyboard","source":"android"},{"name":"software keyboard","source":"community"},{"name":"touch keyboard","source":"community"}],"tags":["platform-registers","touch"],"relations":{"contrastWith":["input-purpose"],"variantOf":[],"partOf":[],"seeAlso":["pin-input","emoji-picker"]},"implementations":[{"system":"hig","name":"Virtual keyboards","url":"https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards"}],"sources":[{"title":"Apple HIG: Virtual keyboards","url":"https://developer.apple.com/design/human-interface-guidelines/virtual-keyboards"}],"demo":"inline","useWhen":"the field type decides which keys a reader is given"},{"name":"Visual balance","slug":"visual-balance","category":"layout","status":"published","definition":"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.","aliases":[{"name":"symmetrical balance","source":"community"},{"name":"asymmetrical balance","source":"community"},{"name":"radial balance","source":"community"},{"name":"compositional balance","source":"community"},{"name":"visual weight","source":"community"}],"tags":[],"relations":{"contrastWith":[],"variantOf":[],"partOf":[],"seeAlso":["visual-hierarchy","sixty-thirty-ten-rule","optical-alignment"]},"implementations":[],"sources":[{"title":"Design Principles: Compositional, Symmetrical And Asymmetrical Balance","url":"https://www.smashingmagazine.com/2015/06/design-principles-compositional-balance-symmetry-asymmetry/"}],"demo":"inline","useWhen":"saying why a layout feels tippy or settled"},{"name":"Visual hierarchy","slug":"visual-hierarchy","category":"aesthetic","status":"published","definition":"The ordering of elements by visual weight, size, contrast, position and spacing, so a reader learns what matters most without being told.","aliases":[{"name":"hierarchy","source":"community"},{"name":"information hierarchy","source":"community"},{"name":"visual order","source":"community"}],"tags":[],"relations":{"contrastWith":["typographic-hierarchy","focal-point"],"variantOf":[],"partOf":[],"seeAlso":["visual-balance","signifier","gutenberg-diagram"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"deciding what a reader should notice first"},{"name":"Visually hidden","slug":"visually-hidden","category":"accessibility","status":"published","definition":"Content removed from the visual layout but left in the accessibility tree, so screen readers announce what the design leaves unsaid.","aliases":[{"name":"screen reader only text"},{"name":"sr-only"},{"name":"screen reader only"}],"tags":[],"relations":{"contrastWith":["aria-hidden","live-region","alt-text","hidden-but-focusable"],"variantOf":[],"partOf":[],"seeAlso":["skip-link","label-in-name","honeypot-field"]},"implementations":[],"sources":[{"title":"The A11Y Project: How to hide content","url":"https://www.a11yproject.com/posts/how-to-hide-content/"},{"title":"WebAIM: CSS in action, invisible content","url":"https://webaim.org/techniques/css/invisiblecontent/"}],"demo":"inline","useWhen":"text for screen readers that never shows on screen"},{"name":"Voice control","slug":"voice-control","category":"accessibility","status":"published","definition":"Operating an interface by speaking control names or numbered overlays, which makes the visible wording of a control its address.","aliases":[{"name":"speech input","source":"community"},{"name":"Voice Access","source":"android"},{"name":"Dragon","source":"community"},{"name":"show numbers","source":"community"}],"tags":[],"relations":{"contrastWith":["switch-access","multimodal-interface","label-in-name","screen-reader","zero-ui"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"WCAG 2.2: 2.5.3 Label in Name","url":"https://www.w3.org/TR/WCAG22/#label-in-name"},{"title":"Use Voice Control commands on Mac, Apple Support","url":"https://support.apple.com/guide/mac-help/use-voice-control-commands-mh40719/mac"},{"title":"Get started with Voice Access, Android Accessibility Help","url":"https://support.google.com/accessibility/android/answer/6151848"}],"demo":"inline","useWhen":"the reader clicks by saying the button's name"},{"name":"Watermark","slug":"watermark","category":"component","status":"published","definition":"Repeating faint text or a mark tiled across content to claim it or to mark it as a draft or a preview.","aliases":[{"name":"overlay watermark","source":"community"},{"name":"draft stamp","source":"community"},{"name":"tiled watermark","source":"community"}],"tags":[],"relations":{"contrastWith":["scrim"],"variantOf":[],"partOf":[],"seeAlso":["dot-grid-background"]},"implementations":[],"sources":[{"title":"Ant Design components overview","url":"https://ant.design/components/overview/"}],"demo":"inline","useWhen":"faint repeated text laid over content"},{"name":"Waveform","slug":"waveform","category":"component","status":"published","definition":"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.","aliases":[{"name":"audio waveform","source":"community"},{"name":"waveform scrubber","source":"community"},{"name":"voice message bars","source":"community"}],"tags":["media"],"relations":{"contrastWith":["scrubber","sparkline"],"variantOf":[],"partOf":[],"seeAlso":["playhead"]},"implementations":[],"sources":[{"title":"UX Patterns for Developers: patterns","url":"https://uxpatterns.dev/patterns"}],"demo":"inline","useWhen":"audio drawn as bars you can scrub"},{"name":"Web font","slug":"web-font","category":"typography","status":"published","definition":"A font file downloaded by the page rather than taken from the reader's device, declared in CSS and delivered like any other asset.","aliases":[{"name":"webfont"},{"name":"custom font"},{"name":"@font-face","source":"css"},{"name":"WOFF2"}],"tags":["web-platform"],"relations":{"contrastWith":["system-font","font-stack","typeface"],"variantOf":[],"partOf":[],"seeAlso":["font-subsetting"]},"implementations":[],"sources":[{"title":"CSS fonts module (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts"}],"demo":"inline","useWhen":"type the page ships rather than borrows"},{"name":"Welcome mat","slug":"welcome-mat","category":"component","status":"published","definition":"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.","aliases":[{"name":"welcome screen","source":"community"},{"name":"what's new modal","source":"community"},{"name":"onboarding splash","source":"community"},{"name":"getting started panel","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["first-run-experience","interstitial","feature-spotlight"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Lightning Design System: components overview","url":"https://www.lightningdesignsystem.com/components/overview/"}],"demo":"inline","useWhen":"a first run introduction to a whole feature"},{"name":"Wheel picker","slug":"wheel-picker","category":"component","status":"published","definition":"A spinning drum of values that snaps to the item under a fixed selection line, the iOS way of choosing from a short list.","aliases":[{"name":"picker wheel","source":"hig"},{"name":"drum picker","source":"community"},{"name":"spinner picker","source":"community"},{"name":"wheel style date picker","source":"nngroup"},{"name":"slot machine picker","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["select","time-picker","stepper"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"User Interface Elements Glossary, NN/g","url":"https://www.nngroup.com/articles/ui-elements-glossary/"}],"demo":"inline","useWhen":"the iOS drum you spin to pick a value"},{"name":"Whitespace","slug":"whitespace","category":"layout","status":"published","definition":"The empty area between and around elements, treated as an active design material rather than as leftover space.","aliases":[{"name":"negative space","source":"community"},{"name":"white space","source":"community"},{"name":"breathing room","source":"community"},{"name":"macro whitespace","source":"community"},{"name":"micro whitespace","source":"community"}],"tags":[],"relations":{"contrastWith":["proximity","layout-margins","spacer"],"variantOf":[],"partOf":[],"seeAlso":["minimalism","typographic-color"]},"implementations":[],"sources":[{"title":"White space (visual arts)","url":"https://en.wikipedia.org/wiki/White_space_(visual_arts)"}],"demo":"inline","useWhen":"the empty space doing the grouping work"},{"name":"Wide gamut","slug":"wide-gamut","category":"color","status":"published","definition":"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.","aliases":[{"name":"Display P3","source":"community"},{"name":"P3","source":"community"},{"name":"rec2020","source":"css"},{"name":"HDR color","source":"community"}],"tags":["web-platform"],"relations":{"contrastWith":["color-gamut","gamut-mapping","srgb"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[{"system":"radix","name":"P3 scales","url":"https://www.radix-ui.com/colors"}],"sources":[{"title":"Wide Gamut Color in CSS with Display-P3","url":"https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/"},{"title":"CSS Color Module Level 4","url":"https://www.w3.org/TR/css-color-4/"}],"demo":"inline","useWhen":"reaching for colours sRGB cannot express"},{"name":"Widget","slug":"widget","category":"component","status":"published","definition":"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.","aliases":[{"name":"home screen widget","source":"community"},{"name":"app widget","source":"android"},{"name":"glance","source":"android"}],"tags":["platform-registers"],"relations":{"contrastWith":["card","app-shortcut","complication","live-activity","quick-settings-tile"],"variantOf":[],"partOf":[],"seeAlso":["dashboard-grid"]},"implementations":[{"system":"hig","name":"Widgets","url":"https://developer.apple.com/design/human-interface-guidelines/widgets"}],"sources":[{"title":"Apple Human Interface Guidelines: Widgets","url":"https://developer.apple.com/design/human-interface-guidelines/widgets"}],"demo":"inline","useWhen":"app content is useful without opening the app"},{"name":"Widow","slug":"widow","category":"typography","status":"published","definition":"A short last line of a paragraph, often a single word, stranded at the top of the next column or page.","aliases":[{"name":"typographic widow"},{"name":"widow line"}],"tags":["editorial"],"relations":{"contrastWith":["orphan","runt"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"An end to typographic widows on the web (Clagnut)","url":"https://clagnut.com/blog/2424"},{"title":"Widow and orphan control (Practical Typography)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"naming a stranded last line at the top of a column"},{"name":"Window controls","slug":"window-controls","category":"component","status":"published","definition":"The cluster of close, minimise and zoom controls in a window's title bar, three coloured dots on macOS and three glyphs on Windows.","aliases":[{"name":"traffic lights","source":"community"},{"name":"title bar buttons","source":"hig"},{"name":"caption buttons","source":"community"},{"name":"window buttons","source":"community"},{"name":"close minimize maximize","source":"community"}],"tags":["platform-registers"],"relations":{"contrastWith":["close-button","title-bar"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Traffic Lights (Window Controls), NameThatUI","url":"https://namethatui.com/macos/traffic-lights"}],"demo":"inline","useWhen":"the close, minimise and maximise cluster"},{"name":"Window size class","slug":"window-size-class","category":"layout","status":"published","definition":"A named bucket for how much width an app window has, such as compact, medium and expanded, used in place of raw device categories.","aliases":[{"name":"size class","source":"hig"},{"name":"compact, medium, expanded","source":"material"},{"name":"window size classes","source":"android"},{"name":"regular and compact","source":"hig"},{"name":"viewport range","source":"merged-candidate"},{"name":"viewport ranges","source":"merged-candidate"}],"tags":["platform-registers"],"relations":{"contrastWith":["device-posture","breakpoint","responsive-upscaling"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Canonical layouts, Android Developers","url":"https://developer.android.com/develop/adaptive-apps/guides/canonical-layouts"}],"demo":"inline","useWhen":"reasoning about window width, not device type"},{"name":"Windows Aero","slug":"windows-aero","category":"aesthetic","status":"published","definition":"The Windows Vista and 7 look built on translucent glass window frames, soft outer glows, reflections, and animated window transitions.","aliases":[{"name":"Aero Glass","source":"microsoft"},{"name":"Aero","source":"microsoft"},{"name":"Windows 7 glass"},{"name":"glass window borders","source":"community"}],"tags":[],"relations":{"contrastWith":["glassmorphism","mica","aqua"],"variantOf":[],"partOf":[],"seeAlso":["metro-design"]},"implementations":[],"sources":[{"title":"Wikipedia: Windows Aero","url":"https://en.wikipedia.org/wiki/Windows_Aero"},{"title":"NameThatUI: visual style catalog","url":"https://namethatui.com/styles"}],"demo":"inline","useWhen":"see-through window chrome from the Vista and 7 era"},{"name":"Wipe","slug":"wipe","category":"motion","status":"published","definition":"A transition where a moving edge or mask travels across the frame, replacing what was there with what comes next.","aliases":[{"name":"mask reveal","source":"community"},{"name":"clip reveal","source":"community"},{"name":"swipe transition","source":"community"}],"tags":[],"relations":{"contrastWith":["dissolve","reveal-animation"],"variantOf":[],"partOf":[],"seeAlso":["image-comparison-slider"]},"implementations":[],"sources":[{"title":"School of Motion: motion design dictionary","url":"https://schoolofmotion.com/blog/motion-design-dictionary"}],"demo":"inline","useWhen":"a reveal should have a visible leading edge"},{"name":"Wizard","slug":"wizard","category":"component","status":"published","definition":"A flow broken into ordered steps with back and next controls, where each step validates before the next one is allowed.","aliases":[{"name":"multi step form","source":"community"},{"name":"guided flow","source":"community"},{"name":"setup assistant","source":"community"}],"tags":["forms"],"relations":{"contrastWith":["one-thing-per-page","tearsheet","form"],"variantOf":[],"partOf":[],"seeAlso":["step-indicator"]},"implementations":[],"sources":[{"title":"Cloudscape: components","url":"https://cloudscape.design/components/"}],"demo":"inline","useWhen":"a long task split into ordered steps"},{"name":"Word break","slug":"word-break","category":"typography","status":"published","definition":"Whether a long unbroken string is allowed to split mid-word rather than overflow its container, and where that split may happen.","aliases":[{"name":"overflow-wrap","source":"css"},{"name":"word-wrap","source":"css"},{"name":"break-word"},{"name":"anywhere breaking"}],"tags":["web-platform"],"relations":{"contrastWith":["hyphenation","truncation","zero-width-space"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"CSS text module (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text"}],"demo":"inline","useWhen":"a long URL or token is bursting out of its box"},{"name":"Word spacing","slug":"word-spacing","category":"typography","status":"published","definition":"The width of the gaps between words, which justification stretches and which, set too wide, opens rivers down a paragraph.","aliases":[{"name":"word space"},{"name":"interword spacing"}],"tags":[],"relations":{"contrastWith":["tracking","kerning","non-breaking-space"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Word spaces (Practical Typography)","url":"https://practicaltypography.com/"}],"demo":"inline","useWhen":"the gaps between words, not between letters"},{"name":"X-height","slug":"x-height","category":"typography","status":"published","definition":"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.","aliases":[{"name":"lowercase height"},{"name":"mean line"}],"tags":[],"relations":{"contrastWith":["cap-height","point-size","ascender","petite-caps"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"X-height (Wikipedia)","url":"https://en.wikipedia.org/wiki/X-height"},{"title":"Typography Terms: Glossary (NN/g)","url":"https://www.nngroup.com/articles/typography-terms-ux/"}],"demo":"inline","useWhen":"explaining why two fonts at the same size look different"},{"name":"Y2K aesthetic","slug":"y2k-aesthetic","category":"aesthetic","status":"published","definition":"The turn of the millennium look of chrome type, bubble shapes, translucent plastic, and lens flares, revived as a web and app style.","aliases":[{"name":"Y2K futurism"},{"name":"millennium aesthetic"},{"name":"chrome aesthetic","source":"community"},{"name":"cybercore","source":"community"},{"name":"liquid chrome","source":"community"},{"name":"3D chrome","source":"community"}],"tags":[],"relations":{"contrastWith":["maximalism","frutiger-aero","aqua","cassette-futurism","vaporwave"],"variantOf":[],"partOf":[],"seeAlso":["acid-graphics"]},"implementations":[],"sources":[{"title":"NameThatUI: visual style catalog","url":"https://namethatui.com/styles"},{"title":"Frutiger Aero | 2000 Aesthetics Wiki","url":"https://2000-aesthetics.fandom.com/wiki/Frutiger_Aero"}],"demo":"inline","useWhen":"chrome, bubbles, and translucent plastic futurism"},{"name":"Yo-yo loop","slug":"yoyo-loop","category":"motion","status":"published","definition":"A repeating animation that plays forward then backward instead of jumping back to the start, so a loop has no visible seam.","aliases":[{"name":"yoyo","source":"gsap"},{"name":"alternate","source":"css"},{"name":"ping-pong","source":"community"},{"name":"boomerang","source":"community"}],"tags":[],"relations":{"contrastWith":["fill-mode"],"variantOf":[],"partOf":[],"seeAlso":["marquee"]},"implementations":[],"sources":[{"title":"MDN: animation-direction","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction"}],"demo":"inline","useWhen":"a loop must repeat without a snap back to frame one"},{"name":"Z pattern","slug":"z-pattern","category":"layout","status":"published","definition":"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.","aliases":[{"name":"Z-shaped pattern","source":"community"},{"name":"zigzag scanning","source":"community"}],"tags":[],"relations":{"contrastWith":["f-pattern"],"variantOf":[],"partOf":[],"seeAlso":["focal-point"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"laying out a sparse page with one clear action"},{"name":"Zebra striping","slug":"zebra-striping","category":"component","status":"published","definition":"Alternating row backgrounds in a table so the eye can track a single row across many columns.","aliases":[{"name":"striped rows","source":"bootstrap"},{"name":"banded rows","source":"community"},{"name":"alternating row colors","source":"community"},{"name":"row banding","source":"community"}],"tags":["tables"],"relations":{"contrastWith":["divider"],"variantOf":[],"partOf":[],"seeAlso":["data-table","keyline"]},"implementations":[],"sources":[{"title":"Data table, Carbon Design System","url":"https://carbondesignsystem.com/components/data-table/usage/"}],"demo":"inline","useWhen":"shading every other row of a table"},{"name":"Zero state","slug":"zero-state","category":"pattern","status":"published","definition":"The first-run screen a feature shows before any data exists, written to teach the feature rather than to report emptiness.","aliases":[{"name":"zero data state","source":"community"}],"tags":["onboarding"],"relations":{"contrastWith":["empty-state","first-run-experience"],"variantOf":[],"partOf":[],"seeAlso":["onboarding-checklist","coach-mark"]},"implementations":[],"sources":[{"title":"Empty states in application design, NN/g","url":"https://www.nngroup.com/articles/empty-state-interface-design/"}],"demo":"inline","useWhen":"the teaching screen shown before any data exists"},{"name":"Zero UI","slug":"zero-ui","category":"pattern","status":"published","definition":"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.","aliases":[{"name":"zero interface","source":"uistyleguide"},{"name":"invisible interface"},{"name":"no UI"},{"name":"screenless interface"},{"name":"calm technology"}],"tags":["ai"],"relations":{"contrastWith":["multimodal-interface","voice-control"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Designer Daily: The invisible interface, an introduction to designing for Zero UI","url":"https://www.designer-daily.com/the-invisible-interface-an-introduction-to-designing-for-zero-ui-201632"},{"title":"Microsoft Advertising: Zero UI, the invisible interface revolution","url":"https://about.ads.microsoft.com/en/blog/post/june-2025/zero-ui-the-invisible-interface-revolution"},{"title":"UX Planet: Zero UI, how to design invisible interfaces","url":"https://uxplanet.org/zero-ui-2c56a8e952df"}],"demo":"inline","useWhen":"the interaction has no screen to design"},{"name":"Zero-width space","slug":"zero-width-space","category":"typography","status":"published","definition":"An invisible character that takes no width and adds a legal break point, letting a long string wrap without showing a hyphen.","aliases":[{"name":"ZWSP"},{"name":"U+200B"},{"name":"invisible break"}],"tags":[],"relations":{"contrastWith":["word-break","non-breaking-space","soft-hyphen"],"variantOf":[],"partOf":[],"seeAlso":[]},"implementations":[],"sources":[{"title":"Zero-width space (Wikipedia)","url":"https://en.wikipedia.org/wiki/Zero-width_space"}],"demo":"inline","useWhen":"breaking a long identifier with no visible mark"},{"name":"Zigzag layout","slug":"zigzag-layout","category":"layout","status":"published","definition":"Alternating rows that flip which side the image and the text sit on, so the eye zigzags down a list of features.","aliases":[{"name":"alternating layout","source":"community"},{"name":"zig zag","source":"community"},{"name":"interleaved rows","source":"community"},{"name":"ping pong layout","source":"community"}],"tags":[],"relations":{"contrastWith":["split-screen-layout"],"variantOf":[],"partOf":[],"seeAlso":["feed-layout"]},"implementations":[],"sources":[],"demo":"inline","useWhen":"a run of feature blocks that would otherwise read as a list"},{"name":"Zoom transition","slug":"zoom-transition","category":"motion","status":"published","definition":"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.","aliases":[{"name":"zoom navigation transition","source":"hig"},{"name":"scale-in presentation","source":"community"},{"name":"open from source","source":"community"}],"tags":[],"relations":{"contrastWith":["modal-presentation","origin-aware-animation"],"variantOf":[],"partOf":[],"seeAlso":["semantic-zoom","dolly-zoom"]},"implementations":[{"system":"hig","name":"Zoom transition","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"sources":[{"title":"Apple HIG: Motion","url":"https://developer.apple.com/design/human-interface-guidelines/motion"}],"demo":"inline","useWhen":"the destination should visibly come from what was tapped"}]}