Glossary

Standard design system terms and concepts.

Accessibility: The practice of designing and building interfaces that can be used by people with disabilities, including those who rely on screen readers, keyboard navigation, or alternative input devices. Most design systems target WCAG 2.1 AA conformance.
Atomic Design: A methodology by Brad Frost that organizes UI into five levels: atoms (buttons, inputs), molecules (search bars), organisms (headers), templates, and pages. It provides a mental model for building interfaces from small, reusable parts.
Breakpoint: A predefined viewport width at which a layout adapts its structure — for example, switching from a single column to a multi-column grid. Common breakpoints target mobile, tablet, and desktop screen sizes.
Component: A reusable, self-contained UI building block with a defined API (props, slots, events). Components encapsulate structure, styling, and behavior so they can be composed into larger interfaces.
Component Library: A collection of pre-built, reusable UI components distributed as a package. Examples include Ant Design, Chakra UI, and Polaris. A component library is one part of a broader design system.
Composition: The pattern of building complex UI by nesting simpler components together. A form is composed of inputs, labels, and buttons. Composable components are designed to work together without tight coupling.
Controlled vs. Uncontrolled: A controlled component has its state managed by a parent via props; an uncontrolled component manages its own internal state. Most design system components support both patterns.
Dark Mode: An alternative color scheme that uses light text on dark backgrounds. Design systems implement dark mode through design tokens or CSS custom properties that swap values based on a theme class or media query.
Design Language: The overarching visual and interaction philosophy that guides a design system — covering color, typography, spacing, motion, and tone. Examples include Google's Material Design and IBM's Carbon.
Design System: A comprehensive collection of reusable components, design tokens, guidelines, and tooling that enables teams to build consistent, accessible digital products at scale. It bridges design and engineering.
Design Token: A named value that stores a design decision — such as a color, spacing unit, font size, or shadow. Tokens are platform-agnostic and can be compiled into CSS custom properties, iOS constants, or Android resources.
Elevation: The visual layering of surfaces using shadows and z-index to indicate hierarchy. Higher elevation suggests an element floats above the page — used for modals, popovers, and dropdown menus.
Figma Library: A shared Figma file containing reusable components, styles, and variables that designers can pull into their projects. Most design systems publish an official Figma library alongside their code.
Focus Management: The practice of programmatically moving keyboard focus to the right element at the right time — especially when opening or closing modals, navigating menus, or managing complex interactions.
Headless Component: A component that provides behavior and accessibility without any visual styling. Developers apply their own CSS. Examples include Radix UI, Headless UI, and Ariakit.
Internationalization: Designing components to support multiple languages, including right-to-left text, locale-specific formatting, and translated strings. Many enterprise design systems include internationalization support.
Layout Primitive: A foundational component that controls spacing and arrangement — such as Stack, Grid, Flex, or Container. Layout primitives enforce consistent spacing through tokens rather than ad-hoc CSS.
Motion / Animation: Standardized transitions and animations defined by a design system to convey state changes, guide attention, and reinforce spatial relationships. Motion tokens typically specify duration, easing, and delay.
Pattern: A reusable solution to a common UX problem that combines multiple components — such as a login form, search experience, or onboarding flow. Patterns are higher-level than individual components.
Primitive: The most basic, unstyled building block in a design system — providing core behavior like click handling, focus trapping, or portal rendering without imposing visual design.
Props / API: The configurable parameters a component accepts — such as size, variant, disabled, or onChange. A well-designed component API is consistent across the system and follows predictable naming conventions.
Responsive Design: An approach where components and layouts adapt to different screen sizes and orientations. Design systems define breakpoints, fluid grids, and responsive props to handle this consistently.
Semantic Token: A design token named by its purpose rather than its value — for example, color-text-error instead of red-600. Semantic tokens enable theming because the name stays the same while the value changes per theme.
Slot: A designated area within a component where custom content can be inserted. Slots allow components to be flexible without exposing internal implementation — common in Vue, Svelte, and web component APIs.
Spacing Scale: A predefined set of spacing values (4px, 8px, 12px, 16px, 24px, 32px…) used for margins, padding, and gaps. A consistent scale prevents arbitrary spacing and enforces visual rhythm.
Storybook: An open-source tool for developing and documenting UI components in isolation. Many design systems use Storybook as their primary component playground, testing environment, and living documentation.
Style Props: Component props that map directly to CSS properties — such as padding, color, or display. Used by systems like Chakra UI and Theme UI for inline, token-aware styling.
Theming: The ability to change a design system's visual appearance by swapping a set of design tokens — enabling brand customization, dark mode, high contrast, and multi-brand products from the same components.
Type Scale: A predefined set of font sizes and line heights that establish a typographic hierarchy — from captions and body text to headings and display text. Type scales ensure consistent readability across products.
Variant: A visual variation of a component that serves a different purpose — such as a primary, secondary, or destructive button variant. Variants share the same API but differ in appearance or emphasis.
WAI-ARIA: A W3C specification that defines attributes (roles, states, properties) to make dynamic web content accessible to assistive technologies. Design systems use ARIA roles like dialog, tablist, and combobox to communicate widget semantics.
Web Component: A set of browser-native APIs (Custom Elements, Shadow DOM, HTML Templates) for creating reusable, encapsulated UI elements that work across any framework. Systems like Calcite, Clarity, and Momentum use web components.