Colors
Colors hold your brand's palette as tokens, in the shape your AI tools consume. Each token carries a value AI tools can use directly, and you can attach rules that explain when and how to use it.
Light and dark values
Every color token has both a light value and a dark value. You set them side by side, so your brand reads correctly in either theme and AI tools always have the right value for the mode they are generating for.
Groups
Color tokens are organized into three groups, matching the token set of the component library your AI tools build with:
- General. Core surface and content tokens such as background, foreground, primary, secondary, muted, accent, and border.
- Chart. The chart palette tokens used for data visualization.
- Sidebar. The sidebar surface, foreground, and accent tokens.
The color picker
When you edit a token, the color picker supports hex, rgb, and oklch. A format toggle switches between them, so you can paste a value in whatever format you already have and read it back in the format you prefer.
New brands start on the default neutral palette with a near-black primary. Replace it with your own values, or import a palette. See Importing styles.
Per-token rules
Each token can hold its own rules. Use them to capture intent that a raw value cannot, for example which token to reach for in a given context or which pairing to avoid.
Like every rule, a color rule carries text, a Guidance marker (Do, Don't, Caution, or Info), and an Importance (Required, Recommended, or Optional). For palette-wide guidance, author General rules groups for the Colors category instead of attaching to a single token.
