UI Foundations

Token-first, Figma-aligned design system.

UI Foundations

A token-first design system that provides components and tools to help product teams work more efficiently and make applications more cohesive across brands and platforms.

Foundations

Rational

Every decision is informed by real usage, Figma source data, and documented reasoning.

Inclusive

Semantic HTML, keyboard access, and assistive-technology support are baseline requirements.

Focused

Deliver what is needed, when it is needed. No unnecessary decoration or irrelevant content.

Resources

Getting Started Install the package, set up CSS, and configure brand and mode switching. Design Tokens Understand the 4-layer token architecture from Figma to CSS. Accessibility Standards and practices for inclusive, compliant experiences. Content Standards Writing guidelines for labels, messages, and in-product copy.

Explore

Tokens

Colors, typography, spacing, and other visual foundations.

Components

Interactive components with API docs, playgrounds, and usage guidelines.

Examples

Page layouts and forms built from existing components.

Implementations

npm Package CSS and React components ready for production use. Figma Library Source of truth for design tokens and component specs. Starter Template Minimal project template to get started quickly.