Colors

Semantic tokens, not raw hues. Components reference these names, so overriding one variable re-tints every surface that uses it — in both themes.

This page is generated from registry/boardcn/styles/theme.css. Values shown as var(--color-…) point at a primitive in the palette; a token with a dark value listed flips under the .dark class.

Text

Foreground colors for copy, from primary headings down to placeholders.

text-disabledneutral-300 · dark neutral-800
text-disabled-dangerred-300
text-error-placeholderred-400
text-error-primaryred-500 · dark red-400
text-placeholderneutral-400
text-primaryneutral-950 · dark neutral-50
text-secondaryneutral-500
text-tertiaryneutral-400 · dark neutral-600
text-whitewhite

Background

Surface fills — page, cards, and the hover and active states of each.

background-fullwhite · dark neutral-925
background-inner-defaultwhite · dark color-mix(in srgb, var(--color-neutral-800) 60%, transparent
background-primary-activeneutral-200 · dark neutral-800
background-primary-defaultwhite · dark neutral-800
background-primary-disabledneutral-100 · dark neutral-800
background-primary-hoverneutral-100 · dark color-mix(in srgb, var(--color-neutral-700) 60%, transparent
background-quaternary-defaultneutral-300 · dark neutral-700
background-quaternary-errorred-200
background-quaternary-hoverneutral-400 · dark neutral-600
background-recent-hire-roleneutral-100 · dark color-mix(in srgb, var(--color-neutral-900) 60%, transparent
background-secondary-defaultneutral-100 · dark neutral-900
background-secondary-hoverneutral-200 · dark neutral-800
background-tertiary-defaultneutral-200 · dark neutral-800
background-tertiary-errorred-100 · dark color-mix(in srgb, var(--color-red-950) 60%, transparent
background-tertiary-hoverneutral-300 · dark neutral-700

Border

Hairlines and focus rings for buttons, inputs, tables, and cards.

border-ai-profile-cardneutral-200 · dark neutral-800
border-button-activeneutral-400 · dark neutral-600
border-button-defaultneutral-200 · dark neutral-700
border-button-groupneutral-200 · dark color-mix(in srgb, var(--color-neutral-600) 60%, transparent
border-button-hoverneutral-300 · dark neutral-500
border-button-whitewhite · dark zinc-800
border-checkbox-activeneutral-400 · dark neutral-500
border-checkbox-defaultneutral-300 · dark neutral-700
border-checkbox-hoverneutral-400 · dark neutral-500
border-checkbox-whitewhite
border-component-detail-containerneutral-200 · dark neutral-800
border-error-defaultred-500 · dark red-400
border-focus-ringaccent-500
border-sidebar-profile-hoverneutral-300 · dark neutral-600
border-tableneutral-200 · dark neutral-800

Icon

Icon colors, which track text but resolve a step differently.

foreground-disabledneutral-400 · dark neutral-700
foreground-disabled-dangerred-300 · dark red-400
foreground-fullwhite · dark neutral-700
foreground-icon-disabledneutral-300 · dark neutral-800
foreground-icon-errorred-600 · dark red-400
foreground-icon-hoverblack · dark white
foreground-icon-primaryneutral-950 · dark neutral-50
foreground-icon-quaternaryneutral-300 · dark neutral-700
foreground-icon-secondaryneutral-500
foreground-icon-tertiaryneutral-400 · dark neutral-600

Accent

The CTA hue. Override these eleven variables and every interactive surface re-tints.

accent-100blue-100
accent-200blue-200
accent-300blue-300
accent-400blue-400
accent-50blue-50
accent-500blue-500
accent-600blue-600
accent-700blue-700
accent-800blue-800
accent-900blue-900
accent-950blue-950

Chart

Categorical series colors, each with an active variant for hover and selection.

chart-1teal-400
chart-1-activeteal-500
chart-2lime-400
chart-2-activelime-500
chart-3pink-400
chart-3-activepink-500
chart-4sky-400
chart-4-activesky-500
chart-5purple-400
chart-5-activepurple-500
chart-6blue-400
chart-6-activeblue-500
chart-7emerald-400
chart-7-activeemerald-500
chart-8yellow-400
chart-8-activeyellow-500
chart-agents-barpurple-300 · dark purple-500
chart-agents-bar-activepurple-400 · dark purple-600
chart-cursorneutral-300 · dark neutral-700
chart-neutralneutral-300 · dark neutral-800
chart-trackneutral-200 · dark neutral-800

Status

Semantic pairs for chips, dots, and notifications.

status-blue-backgroundblue-200 · dark color-mix(in srgb, var(--color-blue-950) 60%, transparent
status-blue-textblue-800 · dark blue-300
status-cyan-backgroundcyan-200 · dark color-mix(in srgb, var(--color-cyan-950) 60%, transparent
status-cyan-textcyan-800 · dark cyan-400
status-dot-green-halogreen-100 · dark color-mix(in srgb, var(--color-green-800) 40%, transparent
status-dot-indigo-haloindigo-100 · dark color-mix(in srgb, var(--color-indigo-800) 40%, transparent
status-dot-yellow-haloyellow-200 · dark color-mix(in srgb, var(--color-yellow-800) 40%, transparent
status-lime-backgroundlime-200 · dark color-mix(in srgb, var(--color-lime-950) 60%, transparent
status-lime-textlime-800 · dark lime-500
status-purple-backgroundpurple-100 · dark color-mix(in srgb, var(--color-purple-900) 50%, transparent
status-purple-textpurple-600 · dark purple-300
status-rose-backgroundrose-200 · dark color-mix(in srgb, var(--color-rose-950) 60%, transparent
status-rose-textrose-800 · dark rose-500
status-yellow-backgroundyellow-200 · dark color-mix(in srgb, var(--color-yellow-950) 60%, transparent
status-yellow-textyellow-800 · dark yellow-500