Foundations
Foundations define the core building blocks of the Universal Design System.
Foundations
Foundations define the core building blocks of the Universal Design System. They are the shared rules, tokens, and behaviors that ensure consistency, accessibility, and scalability across all components, patterns, and products.
If components are what you build, foundations are what everything is built on.
What Foundations Are
Foundations are system-level primitives that:
Apply across all components
Are authored as design tokens and variables
Map directly to Figma, code, and component APIs
Encode visual, structural, and interaction decisions
They provide a single source of truth for things like color meaning, spacing scales, component sizing, and interaction feedback.
What Foundations Are Not
Foundations do not describe:
Individual components (see Components)
Product-specific decisions
One-off stylistic overrides
How to Use Foundations
For Designers
Use Foundations to understand which tokens to apply and why
Reference them when creating or modifying components in Figma
Follow them to maintain consistency across screens and flows
For Developers
Use Foundations as the contract behind component props
Reference token definitions instead of hard-coding values
Ensure visual and interaction behavior matches system intent
Foundation Categories
Each category represents a distinct system concern. Together, they form a complete design and interaction language.
Color
Defines how color is used semantically and thematically across the system, including themes, semantic meanings, and stylistic layers.
Typography
Establishes font families, text styles, and typographic scales to ensure readable, accessible, and consistent text across products.
Icons
Defines how the icon system is used within UDS, including sizing, weights, alignment, color usage, and accessibility guidelines. (Icon assets are sourced from Phosphor; this section documents system usage, not the icon catalog.)
Spacing
Defines the spacing scale and how space is applied between and within elements, including padding, margin, gap, and gutters.
Borders
Defines border radius, width, and related properties used to express structure, affordance, and hierarchy.
Size
Defines how components scale as a unit (e.g. sm, base, lg), coordinating height, padding, typography, icon size, and other internal dimensions.
Layout
Defines layout primitives such as grids, device contexts, breakpoints, and positioning rules that support responsive design.
Effects
Defines visual effects applied across the system, such as opacity and interaction rings, used to communicate focus, state, and feedback.
Interaction
Defines shared interaction concepts and states, including status, visibility, and disclosure behavior, ensuring consistent user feedback and accessibility.
Relationship to Tokens and Code
Every foundation maps to:
Figma variables / tokens
Component properties
Implementation in code (CSS, Tailwind utilities, or equivalents)
Foundations exist to keep these layers aligned.
Accessibility by Default
Accessibility is embedded throughout Foundations, not treated as an afterthought. Color contrast, touch targets, focus states, visibility, and interaction feedback are all defined at the foundational level to support inclusive design from the start.
Next Steps
Explore a specific foundation category to understand its rules and tokens
Use foundations as references when building or consuming components
If you’re creating new components, foundations define the constraints you must follow
Last updated
Was this helpful?