Color Systems
The color section of the guides covers four things: primary, neutral, accent, and status. Each lives on its own page in the sidebar under Color.
Primary
This is your main brand color. It shows up on buttons, links, highlights, anything that needs to stand out.
Pick one of four starting palettes (Ocean Blue, Forest Green, Sunset Orange, Deep Purple) and the guide generates a full shade scale from 50 to 900. Adjust from there.
The foreground swatch below the palette selector controls the color used for text and icons sitting on top of your primary. Click the edit icon to change it.
Pro accounts get a live WCAG contrast checker. As you adjust, AA and AAA badges on the swatches update in real time.
Neutral
Neutrals are the quiet workhorse of your palette. Backgrounds, text, borders, surfaces, they all pull from here.
Blend mixes a small amount of your primary into the neutral palette. At 0% it's pure gray. Push it up and the neutrals get a subtle tint toward your brand color, which can make the whole palette feel less disconnected.
Invert flips the shade scale. Useful when you're building a dark theme and want lighter neutral values to map to darker UI layers.
The guide also shows foreground and background token assignments that map specific shades to their semantic roles. Adjust these to match whatever light or dark palette you're going for.
Accent
Accent colors are for the details: callouts, secondary actions, bits of visual interest. The guide generates options based on color theory relationships with your primary.
Pick a harmony type:
| Harmony | How it works |
|---|---|
| Complementary | The color directly opposite your primary on the color wheel |
| Split Complementary | Two colors flanking the complement |
| Triadic | Three colors evenly spaced around the wheel |
| Analogous | Colors sitting next to your primary on the wheel |
Each option shows a swatch preview. Pick one and the tokens get created.
Pro accounts can toggle the Accessibility Guide to overlay WCAG scores on the swatches.
Status
Status colors cover success, warning, and destructive (error) states. They need to be clearly distinct from each other and readable at the same time.
Blend nudges the status colors toward your primary so they feel like they belong to the same system.
Brightness with Auto adjust on keeps lightness values balanced across all three palettes automatically.
Each status color has a foreground swatch (for text and icons in that state), a contrast ratio shown as a number like 6.28, AA and AAA badges, and a full shade grid from 50 to 900. Click the edit icon on any foreground swatch to adjust it.