Tokens
Colors
The full UnflowUI primitive color palette — 16 families, each with 11 shades from 50 to 950.
The color palette consists of 16 named families. Each shade is available as a Tailwind class (bg-brand-500, text-grey-100) and as a CSS variable (--color-brand-500).
Base
| Token | Value |
|---|---|
white | #F5F6FB |
black | #14141A |
Note: white and black are design-system whites and blacks, not CSS #fff/#000. Using them ensures consistent contrast across themes.
Brand (Unflow green)
The primary brand color. Used for primary interactive elements and highlights.
| Shade | CSS variable |
|---|---|
| 50 | --color-brand-50 |
| 100 | --color-brand-100 |
| 200 | --color-brand-200 |
| 300 | --color-brand-300 |
| 400 | --color-brand-400 |
| 500 | --color-brand-500 |
| 600 | --color-brand-600 |
| 700 | --color-brand-700 |
| 800 | --color-brand-800 |
| 900 | --color-brand-900 |
| 950 | --color-brand-950 |
Semantic color families
The following families each have the same 50–950 shade scale:
| Family | Primary use |
|---|---|
grey | Neutral UI surfaces, borders, text |
teal | Status / info |
green | Success, available status |
lime | Positive accents |
yellow | Warning |
orange | Away status, cautionary |
red | Error, destructive, unavailable status |
pink | Accents |
fuchsia | Accents |
purple | Accents |
violet | Accents, highlights |
indigo | Interactive accent (links, highlights) |
blue | Info accents |
cyan | Informational |
Using color tokens
In Tailwind:
<div className="bg-brand-500 text-white" />
<p className="text-grey-600" />
<span className="border-red-300" />In CSS:
.my-element {
background-color: var(--color-brand-500);
color: var(--color-grey-50);
}