DocsDesign tokens

Design tokens

Complete reference of all CSS custom properties available in omverse-ui.

All tokens are declared with @theme in omverse-ui/styles and are available as both CSS variables and Tailwind utility classes. Override any token in your own :root block — see the Theming page for details.

Colors

Primary

TokenDescription

--color-primaryPrimary brand color

--color-on-primaryForeground color on primary surfaces

--color-primary-containerTinted background for primary-related UI

--color-on-primary-containerForeground on primary-container

Secondary

TokenDescription

--color-secondarySecondary brand color

--color-on-secondaryForeground color on secondary surfaces

--color-secondary-containerTinted background for secondary-related UI

--color-on-secondary-containerForeground on secondary-container

Background

TokenDescription

--color-backgroundPage / app background

--color-surfaceCard and panel background

--color-surface-variantAlternate surface — chip backgrounds, tab lists

Text

TokenDescription

--color-text-primaryalias of --color-on-surfacePrimary text — headings and body

--color-text-secondaryalias of --color-on-surface-variantSecondary text — labels and captions

--color-text-tertiaryMuted text — placeholders and hints

Border

TokenDescription

--color-outlineStrong border — input rings and dividers

--color-outline-variantSubtle border — sidebar edges and card outlines

Status

TokenDescription

--color-errorError / destructive actions

--color-on-errorForeground on error surfaces

--color-successSuccess states — mapped to #10B981

--color-warningWarning states — mapped to #F59E0B

--color-infoInformational states

Border radius

TokenValueDescription

--radius-sm6pxSmall — badges, chips

--radius-md8pxMedium — inputs, buttons

--radius-lg12pxLarge — cards, modals

--radius-xl16pxExtra large — drawers, sheets