Color

Every color a component can draw on is a --ox-color-* custom property, declared once in tokens.css and overridden for dark in theme.css. A component never hardcodes a hex value; it references one of these 79 tokens, which means switching data-color-scheme repaints the whole page with no component-level work. Each swatch below shows the token name and both its light and dark resolved values as text, so the page carries the same information for a reader who cannot distinguish the colors.

Core colors

Accent, surface, text, icon, status, and border tokens: the vocabulary most components reach for directly.

Categorical palette

Ten color families, each with a background, border, icon, and text token, for status badges, tags, and chart series that need more than the accent color to stay distinguishable.

Blue

Cyan

Gray

Green

Orange

Pink

Purple

Red

Teal

Yellow