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.
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.
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.
Use the sidebar to browse each token category. Every page includes live previews so you can see exactly how tokens render in context.