Glossary

Our design system glossary is your go-to reference for a shared vocabulary — a living document that grows with our blueprints and best practices. Here you’ll find clear definitions, practical examples, and curated links to deep-dive resources so you can quickly get up to speed, collaborate more effectively, and apply these concepts with confidence. Check back often as we expand and refine this guide alongside our system’s evolution.

A
Back to top
Accessibility
Designing interfaces so they are perceivable, operable, understandable, and robust for all users, including those who rely on assistive technologies. This involves semantic markup, ARIA roles, keyboard navigation support, sufficient color contrast, and focus management to ensure screen readers, voice control, and alternative input devices can interact with every element.
Resources:
- Accessibility Philosophy
  Core philosophy and principles for accessibility in our design system.
- Accessibility Standards
  Detailed accessibility standards and requirements.
- Accessibility Tokens
  Design tokens related to accessibility.
Automation
Scripts, CLI tools, and build processes that automate repetitive or error-prone tasks - such as token generation, style audits, accessibility checks, and release workflows - to improve efficiency and reduce manual overhead. Automation can integrate with design tools and CI/CD pipelines to enforce standards and maintain quality at scale.
Resources:
- Automation & CI/CD
  Automation, pipelines, and CI/CD for design systems.
Token Aliasing
A technique for mapping high-level semantic tokens (e.g., "primary-button-color") to underlying design token values (e.g., palette swatches) to decouple usage intent from implementation. Aliasing facilitates global theme adjustments without modifying component code, enhancing maintainability and flexibility.
Resources:
- Theming Strategies
  Token aliasing and theming strategies.
B
Back to top
Breakpoints
Defined viewport width thresholds where layout, typography, and component behavior adjust to accommodate different device form factors. Breakpoints work in tandem with responsive grids and fluid scaling techniques to create adaptive experiences that maintain usability and visual harmony.
Resources:
- Layout & Breakpoints
  Breakpoints and responsive layout strategies.
C
Back to top
Component Props
The configurable inputs or attributes provided to components that control their visual appearance, content, and behavior. Clear, well-typed props with thorough documentation enable predictable customization, enforce type safety, and establish a reliable contract between component authors and consumers, fostering reusable and maintainable code.
Color Palette
A defined collection of brand and functional colors - primary, secondary, neutrals, alerts, and accents - paired with usage guidelines that specify when and how each hue should be applied. A robust palette ensures visual coherence, accessibility compliance (contrast ratios), and adaptability for theming and contextual variations.
Resources:
- Color
  Color palette, tokens, and usage guidelines.
Component Library
A centralized repository of reusable UI components, each accompanied by documented APIs, accessibility considerations, usage examples, and visual specifications. A well-maintained component library accelerates development, reduces duplication, and fosters consistency by providing a shared set of building blocks for design and engineering teams.
Resources:
- Component Standards
  Documentation and standards for reusable UI components.
Contribution Guidelines
A clear set of rules and conventions for how to propose, review, and merge changes to the design system's code, documentation, and tokens. Good guidelines outline branch naming, commit message format, review criteria, and sign-off requirements to streamline collaboration and maintain quality.
Resources:
- Governance
  Contribution, review, and governance guidelines for the design system.
Changelog
A human-readable record of design system updates—new features, bug fixes, breaking changes, and deprecations—organized by version and release date. A well-maintained changelog fosters transparency, eases upgrades for consumers, and provides historical context for the system's evolution.
Resources:
- Design System Blueprints
  Changelog and release notes for the design system.
D
Back to top
Design Tokens
A system of named, platform-agnostic variables that capture fundamental design decisions - such as color, spacing, typography, and motion - in a centralized repository. By serving as the single source of truth for both designers and developers, tokens enable consistent theming, easy brand customization, scalability across multiple platforms, and streamlined maintenance throughout the product lifecycle.
Resources:
- Theming
  How design tokens enable theming in our system.
- Token Standards
  Standards for defining and using design tokens.
Dark Mode
An alternate theming strategy that switches the color palette, contrast levels, and shading to optimize interfaces for low-light environments, reduce eye strain, and conserve battery life on OLED displays. Dark mode guidelines include token definitions, accessibility checks, and smooth transition patterns for toggling between themes.
Resources:
- Theming Strategies
  Dark mode, theming, and color strategies.
Documentation
Structured guides, API references, design token catalogs, and interactive examples that provide clarity and instruction for system contributors and consumers. High-quality documentation offers searchability, version tracking, and contextual usage scenarios to streamline onboarding and reduce support overhead.
Resources:
- Design System Blueprints
  Documentation, guides, and onboarding resources.
Developer Experience (DX)
The overall quality of the tooling, documentation, and workflows that engineers encounter when integrating and extending the design system. High DX means clear code samples, auto-generated docs, IDE support, and smooth release processes that minimize friction and accelerate development.
Resources:
- Code Tooling
  Developer tooling, documentation, and workflow support.
Design System Audit
A periodic, systematic review of components, tokens, documentation, and usage patterns to identify inconsistencies, outdated assets, or accessibility gaps. Audits combine automated checks (linting, token coverage) with manual evaluations (visual reviews, user interviews) to keep the system healthy and aligned with evolving requirements.
Resources:
- Automation & CI/CD
  Automated checks and audit processes for design systems.
Design System Roadmap
A strategic plan that outlines upcoming priorities, milestones, and long-term goals for the design system—such as new component areas, major refactors, or accessibility initiatives. A roadmap aligns stakeholders, communicates expectations, and helps product teams plan their integrations around scheduled work.
Resources:
- Design System Blueprints
  Roadmap and future plans for the design system.
E
Back to top
Elevation
A visual design concept that uses shadows, layering, and z-index values to convey depth, hierarchy, and interactivity. Consistent elevation levels guide user focus, differentiate interactive surfaces from the background, and reinforce spatial relationships between elements in the interface.
Resources:
- Elevation & Shadows
  Elevation tokens, shadows, and depth guidelines.
F
Back to top
Font Ramp
A curated scale of typographic sizes mapped to specific UI roles - such as headings, body text, captions, and labels - often implemented as tokens that support fluid or responsive scaling. A font ramp establishes typographic hierarchy, optimizes readability across devices, and enforces consistent text styling throughout the interface.
Resources:
- Typography
  Typographic scales, font ramps, and text roles.
G
Back to top
Governance
The framework of processes, roles, and decision-making guidelines that dictates how a design system is contributed to, reviewed, and evolved. Governance covers version control policies, design review workflows, contribution guidelines, and stakeholder alignment activities, ensuring system consistency, quality control, and community buy-in over time.
Resources:
- Governance
  How we govern the design system.
Grid System
A layout framework composed of columns, gutters, and margins that defines how content is aligned, spaced, and structured on a page. An adaptable grid system supports responsive breakpoints, establishes a consistent visual rhythm, and simplifies the creation of complex layouts across devices.
Resources:
- Grid Systems
  Grid systems, columns, and layout structure.
I
Back to top
Iconography
A curated set of symbols and visual metaphors that communicate actions, statuses, and concepts in a compact form. Iconography guidelines cover stylistic consistency (stroke weight, grid alignment), semantic clarity, accessibility (aria-labels and alt text), and source or licensing information to ensure icons are used appropriately and effectively.
Resources:
- Icons
  Iconography, usage, and accessibility.
K
Back to top
Key Performance Indicators (KPIs)
Quantitative metrics used to measure the design system's impact—like adoption rate, component reuse frequency, issue resolution time, and accessibility compliance. Tracking KPIs informs decisions about where to invest in improvements, demonstrates ROI to leadership, and highlights areas of technical debt or training needs.
Resources:
- Design System Blueprints
  KPIs and measurement strategies for the design system.
L
Back to top
Localization
The process of adapting UI content, formatting (dates, numbers), and design layouts to meet the linguistic, cultural, and regulatory requirements of different regions. Localization encompasses translation workflows, pluralization rules, region-specific assets, and right-to-left accommodations to deliver a contextually accurate user experience.
Resources:
- Layout & Localization
  Localization and internationalization strategies.
M
Back to top
Motion
Guidelines, tokens, and design patterns for defining animations, transitions, and interactive feedback - such as easing curves, durations, and keyframe definitions - that enhance usability and delight without compromising performance. Motion design balances aesthetic appeal, accessibility (respecting reduced-motion preferences), and user guidance.
Resources:
- Motion & Duration
  Motion tokens, animation guidelines, and accessibility.
O
Back to top
Onboarding
A curated set of tutorials, walkthroughs, and interactive guides that help new users and teams quickly understand, integrate, and contribute to the design system. Effective onboarding reduces the time to adoption, clarifies governance processes, and encourages community participation.
Resources:
- Onboarding
  Onboarding and getting started with the design system.
P
Back to top
Playbook
A comprehensive guide that documents the design system's patterns, workflows, best practices, and decision rationales. A playbook serves as a centralized reference for onboarding new team members, aligning cross-functional stakeholders on conventions, and capturing tribal knowledge to streamline collaboration and accelerate design-to-development handoff.
Resources:
- Design System Blueprints
  Overview and entry point for all design system documentation.
Design Principles
The foundational philosophies and heuristics - such as clarity, consistency, accessibility, and scalability - that guide design decisions and component behaviors within the system. Clear principles align teams on core values, inform trade-off reasoning, and ensure a cohesive user experience across products.
Resources:
- Design System Blueprints
  Core philosophies and principles for the design system.
Performance
Metrics, best practices, and optimization techniques - such as code splitting, lazy loading, tree shaking, and critical CSS extraction - that ensure fast load times, smooth interactions, and efficient resource usage. Performance considerations span from asset optimization to runtime rendering strategies across diverse devices and network conditions.
Resources:
- Foundations
  Performance, optimization, and best practices.
Prototyping
The practice of building interactive mockups or sandbox environments - using tools like Storybook, Figma, or code playgrounds - to test component behaviors, validate design concepts, and refine user flows before production. Prototyping accelerates feedback loops, uncovers usability issues early, and aligns stakeholders on the intended experience.
Resources:
- Prototyping
  Prototyping and testing design concepts.
Performance Budget
Predefined thresholds for key performance metrics—such as bundle size, render time, and animation smoothness—that guide design and development decisions. Enforcing a budget helps prevent regressions, encourages optimization (lazy loading, code splitting), and ensures the system remains performant on a variety of devices and network conditions.
Resources:
- Foundations
  Performance, optimization, and best practices.
R
Back to top
Responsive Design
An approach to UI development that ensures layouts, typography, and interactions adapt fluidly to various screen sizes and devices using fluid grids, flexible images, and media queries. Responsive design prioritizes content accessibility and usability on both mobile and desktop contexts without compromising the visual experience.
Resources:
- Layout & Responsive Design
  Responsive layouts, breakpoints, and adaptive design.
RTL Support
The conventions, CSS techniques, and content adjustments required to properly render and interact with right-to-left languages - such as Arabic and Hebrew - including layout mirroring, text direction, and context-aware iconography. RTL support ensures global accessibility and localization readiness.
Resources:
- Layout & Localization
  RTL support and layout mirroring strategies.
S
Back to top
Slots
A pattern for creating highly flexible components by defining placeholder "slots" within a component's template where custom content or child components can be injected. Slots preserve the encapsulation of the base component while empowering developers to tailor markup and behavior for diverse use cases without altering the underlying implementation.
Resources:
- Component Standards
  Best practices for component flexibility and slot usage.
Spacing
A set of standardized measurements - often defined as tokens - for margins, padding, and gaps that govern the whitespace within and between UI elements. Consistent spacing scales maintain visual rhythm, improve readability, and ensure harmonious layouts across different components and screen sizes.
Resources:
- Spacing & Sizing
  Guidelines and tokens for spacing and sizing in layouts.
States
The visual and interactive representations of component statuses - such as default, hover, active, focus, disabled, and loading - and their associated style treatments and behavioral expectations. Well-defined states improve usability and accessibility by clearly signaling interactivity and providing consistent user feedback.
Resources:
- Component States & Variants
  Defining and documenting component states and variants.
Semantic HTML
The practice of using HTML elements according to their meaning (e.g., <button> for actions, <nav> for navigation, <article> for standalone content) to improve accessibility, SEO, and maintainability. Semantic markup gives assistive technologies and search engines reliable structure, and also provides a solid foundation for styling and scripting.
Resources:
- Accessibility Standards
  Semantic HTML and accessibility best practices.
T
Back to top
Typography
The rules and assets governing typeface selection, font weights, line heights, letter spacing, and usage guidelines to achieve readability, tone, and brand consistency. Typography also encompasses responsive scaling, variable font techniques, accessibility considerations (contrast and legibility), and cross-platform uniformity.
Resources:
- Typography
  Typography guidelines, scales, and best practices.
Tooling
The suite of utilities, plugins, and integrations - such as linters, code generators, design-tool plugins, and component playgrounds - that support the creation, maintenance, and consumption of the design system. Effective tooling enhances developer experience, enforces standards, and accelerates design-to-code workflows.
Resources:
- Code Tooling
  Code tooling, linters, and developer utilities.
Testing
The strategies, frameworks, and tooling - such as unit tests, integration tests, visual regression tests, and accessibility audits - used to validate component functionality, appearance, and performance over time. A comprehensive testing approach catches regressions early, ensures system reliability, and builds confidence in design system updates.
Resources:
- Code Tooling
  Testing, code quality, and developer utilities.
Token Naming Convention
A standardized schema for naming design tokens—covering categories like color, spacing, typography, and motion—in a way that conveys intent, scope, and hierarchy. Consistent conventions reduce ambiguity, prevent token proliferation, and simplify automated tooling for token extraction and mapping.
Resources:
- Token Naming & Hierarchy
  Naming conventions and hierarchy for design tokens.
U
Back to top
UI Patterns
Reusable combinations of components and layout rules that solve common interface challenges—like form validation, data tables, or navigation bars—providing a higher-level blueprint than individual components. Documenting patterns clarifies when and how to assemble components for typical use cases, speeding design and guiding developers.
Resources:
- UX Patterns
  Reusable interface patterns and best practices.
V
Back to top
Component Variants
Predefined stylistic or behavioral configurations of a base component - such as size, theme, or state - that group related props into named presets. Variants streamline component APIs by providing common use cases out of the box, while still allowing further customization when needed.
Resources:
- Component States & Variants
  Defining and documenting component states and variants.
Versioning
The scheme for assigning, tracking, and communicating design system releases - often using semantic versioning - to manage backward compatibility, feature deprecation, and upgrade paths for consumers. Clear versioning fosters trust, enables controlled rollouts, and simplifies maintenance of dependent projects.
Resources:
- Design System Blueprints
  Versioning, release management, and change tracking.

Glossary

Jump to:

A

Accessibility

Automation

Token Aliasing

B

Breakpoints

C

Component Props

Color Palette

Component Library

Contribution Guidelines

Changelog

D

Design Tokens

Dark Mode

Documentation

Developer Experience (DX)

Design System Audit

Design System Roadmap

E

Elevation

F

Font Ramp

G

Governance

Grid System

I

Iconography

K

Key Performance Indicators (KPIs)

L

Localization

M

Motion

O

Onboarding

P

Playbook

Design Principles

Performance

Prototyping

Performance Budget

R

Responsive Design

RTL Support

S

Slots

Spacing

States

Semantic HTML

T

Typography

Tooling

Testing

Token Naming Convention

U

UI Patterns

V

Component Variants

Versioning