Color Design System
How Pixeliro turns one brand color into a complete 46-role semantic token system — covering every UI surface, text style, border, and status color.
Why Semantic Color Tokens?
Hardcoding colors like #6366F1 across hundreds of components creates a maintenance nightmare. When your brand color changes, you search-and-replace across every file. Semantic tokens solve this.
Instead of color: #6366F1, you write color: var(--kit-primary). The token name describes the role, not the color value. Change the value once at the root — every component updates.
The 5 Token Groups
Brand
5 tokens| Token | Role | Usage Examples |
|---|---|---|
| --kit-primary | Primary brand action color | Buttons, links, active states |
| --kit-primary-hover | Hover/pressed variant | Button hover, link active |
| --kit-primary-fg | Text on primary background | Button labels, badge text |
| --kit-secondary | Secondary accent | Tags, secondary buttons |
| --kit-accent | Highlight / attention | Badges, highlights, promotions |
Status
4 tokens| Token | Role | Usage Examples |
|---|---|---|
| --kit-success | Positive outcome | Confirmation, checkmarks |
| --kit-danger | Error / destructive | Error messages, delete buttons |
| --kit-warning | Caution / attention | Warnings, unsaved changes |
| --kit-info | Informational | Tips, help text, links |
Surface
4 tokens| Token | Role | Usage Examples |
|---|---|---|
| --kit-bg | Page background | Body, main content area |
| --kit-surface | Elevated cards/panels | Cards, modals, dropdowns |
| --kit-surface-2 | Nested surfaces | Input backgrounds, table rows |
| --kit-surface-3 | Deeply nested | Skeleton loaders, dividers |
Border
3 tokens| Token | Role | Usage Examples |
|---|---|---|
| --kit-border | Default border | Card borders, dividers |
| --kit-border-strong | Emphasized border | Active inputs, selected items |
| --kit-border-focus | Focus ring color | Keyboard focus indicators |
Text
5 tokens| Token | Role | Usage Examples |
|---|---|---|
| --kit-text | Primary text | Headings, body text |
| --kit-text-2 | Secondary text | Descriptions, labels |
| --kit-text-3 | Tertiary / muted | Placeholders, timestamps |
| --kit-text-disabled | Disabled state | Disabled buttons, inactive tabs |
| --kit-text-inverse | Text on dark/colored bg | Button text, toast text |
How Token Generation Works
- You pick a primary brand color (e.g.
#6366F1) - Pixeliro converts it to HSL and derives secondary (hue +210°, saturation ×0.6) and accent (hue +40°, saturation 0.9)
- Status colors are fixed (green/red/amber/blue) — they shouldn't change with your brand
- Surface, border, and text tokens use neutral-derived lightness scales — automatically light or dark mode
- The result is 28 color tokens + 14 typography + 6 radius + 4 shadow + 6 spacing = 58 total tokens
Light & Dark Mode
The same token names work in both modes. Only the values change:
| Token | Light | Dark |
|---|---|---|
| --kit-bg | #FFFFFF | #0F172A |
| --kit-text | #0F172A | #F8FAFC |
| --kit-surface | #F8FAFC | #1E293B |
| --kit-border | #E2E8F0 | #334155 |