Introduction

The foundation layer defines the core visual language of OpenUI.

These tokens - colors, spacing, typography, radius, and shadows - ensure every component shares a consistent look and feel across themes and modes.

Design tokens

Every value in the system is expressed as a CSS custom property.

This means you can override any token at any scope - globally, per section, or per component - without touching component code.

Theming

OpenUI ships with light and dark modes built in.

Switch modes or layer your own palette by reassigning the token values in the Theme Builder.

Explore

Use the sidebar to browse each token category.

Every page includes live previews so you can see exactly how tokens render in context.