Categorical colors

Categorical colors are reusable, non-semantic identities for charts, datasets, categories, calendars, avatars, tabs, modules, and other product areas. They differentiate items; they do not communicate status.

Each family has five levels:

Level	Intended use
`100`	Subtle backgrounds
`300`	Soft accents, borders, and decorative surfaces
`500`	Canonical categorical identity
`700`	Strong accents, text, and icons
`900`	Strong foregrounds and dark surfaces

900

Canonical values

Palette	100	300	500	700	900
Rose	`#FEE8EC`	`#F5A3B5`	`#D24572`	`#90314E`	`#501C2B`
Orange	`#FCEBE0`	`#E8B08B`	`#C96E20`	`#834511`	`#49260A`
Gold	`#F6F2E3`	`#D9CB95`	`#B89D2B`	`#715F14`	`#3C320A`
Lime	`#EEF5E4`	`#BED499`	`#83A730`	`#526A1B`	`#2B380E`
Teal	`#E4F3ED`	`#97CBB8`	`#239576`	`#1D6651`	`#12382C`
Cyan	`#E3F2F4`	`#94C9CF`	`#22909B`	`#15636B`	`#0F373B`
Sky	`#E4F1FA`	`#97C4E4`	`#2B88C0`	`#215E83`	`#143448`
Indigo	`#E9EEFE`	`#A6BBFA`	`#526EE3`	`#3D519F`	`#212D58`
Violet	`#F1EBFE`	`#C7AFF4`	`#9260DA`	`#644394`	`#372552`
Magenta	`#FCE7F9`	`#E6A4E0`	`#BE47B8`	`#82337D`	`#481D45`

Usage

Use a categorical token when the category itself is the intent:

.chart-series-a {
    stroke: var(--lesli-color-categorical-violet-500);
}

.category-label {
    background-color: var(--lesli-color-categorical-lime-100);
    color: var(--lesli-color-categorical-lime-700);
}

When color communicates a shared business grouping, use the corresponding collection-* token. The categorical assignment is an implementation detail of that Collection.

Do not assume 500 supports white text. For ordinary text, the documented palettes provide reliable patterns with a dark foreground on 100 and white on 700.

Edit this page

Last Update: 2026/09/27