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.

Color Documentation

Typography

Establishes font families, text styles, and typographic scales to ensure readable, accessible, and consistent text across products.

Typography Documentation

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.)

Icon Documentation

Spacing

Defines the spacing scale and how space is applied between and within elements, including padding, margin, gap, and gutters.

Spacing Documentation

Borders

Defines border radius, width, and related properties used to express structure, affordance, and hierarchy.

Border Documentation

Size

Defines how components scale as a unit (e.g. sm, base, lg), coordinating height, padding, typography, icon size, and other internal dimensions.

Size Documentation

Layout

Defines layout primitives such as grids, device contexts, breakpoints, and positioning rules that support responsive design.

Layout Documentation

Effects

Defines visual effects applied across the system, such as opacity and interaction rings, used to communicate focus, state, and feedback.

Effects Documentation

Interaction

Defines shared interaction concepts and states, including status, visibility, and disclosure behavior, ensuring consistent user feedback and accessibility.

Interaction Documentation

---

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