Brand Colors

Define your primary brand colors. These will be the foundation of your entire token system.

Token Name Color Hex Value

Primary Brand

color.brand.primary

Secondary Brand Optional

Color Scale Generation

Choose how many color variations to generate for each brand color.

Minimal 5 steps: 100, 300, 500, 700, 900

Standard 7 steps: 50, 200, 400, 500, 600, 800, 950

Full 10 steps: 50-900 complete scale

Generated Scale Preview

Primary

Secondary

Neutral Colors

Configure your neutral palette for backgrounds, text, and borders.

Theme Mode

Which theme modes will your design system support?

☀️ Light Only

🌙 Dark Only

🌓 Both Themes

Neutral Base Color

Choose a base color to generate your neutral scale. Leave gray for pure neutrals, or add a tint.

Base Neutral

Generated Neutral Scale

Semantic Colors

Define colors for feedback states like success, warning, error, and info.

State Base Color Hex Value Generated Scale

Success

Warning

Error

Info

Color Tokens

Review your complete token structure before exporting.

color.core.brand

color.core.secondary

color.core.neutral

color.core.success

color.core.warning

color.core.error

color.core.info

Background

Content (Foreground)

Border

Export Tokens

Download your tokens in multiple formats.

Figma Variables

Import directly into Figma as variables

CSS

CSS Variables

Ready-to-use CSS custom properties

Tokens Studio

Compatible with Tokens Studio plugin

Tailwind Config

Extend your Tailwind theme