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

Use token roles and documented pattern behavior to guide interface decisions.

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 Keyboard, labeling, and testing guidance for your interface. Content Standards Writing guidelines for labels, messages, and in-product copy.

Explore

Tokens

Colors, typography, spacing, and other visual foundations.

Patterns

HTML and CSS building blocks with usage guidance and playgrounds.

Examples

Page layouts and forms built from existing components.

Implementations

npm Package CSS patterns, tokens, and optional light-DOM Web Components. Figma Library Design library with variables and component specifications. Starter Template Minimal project template to get started quickly.