Colors
Every color is generated from one brand color, with AA contrast in light and dark.
Color roles
Use roles in components, never raw values.
--fd-bg--fd-surface--fd-surface-raised--fd-surface-sunken--fd-border--fd-border-strong--fd-text--fd-text-muted--fd-text-subtle--fd-primary--fd-primary-hover--fd-primary-subtle--fd-success--fd-success-subtle--fd-warning--fd-warning-subtle--fd-danger--fd-danger-subtle--fd-info--fd-info-subtle
Brand scale
50 to 950, generated in OKLCH from the selected brand color.
--fd-brand-50--fd-brand-100--fd-brand-200--fd-brand-300--fd-brand-400--fd-brand-500--fd-brand-600--fd-brand-700--fd-brand-800--fd-brand-900--fd-brand-950
Neutral scale
The selected neutral tone builds surfaces and text.
--fd-neutral-50--fd-neutral-100--fd-neutral-200--fd-neutral-300--fd-neutral-400--fd-neutral-500--fd-neutral-600--fd-neutral-700--fd-neutral-800--fd-neutral-900--fd-neutral-950
Chart palette
Categorical colors in fixed order, derived from the brand.
--fd-chart-1--fd-chart-2--fd-chart-3--fd-chart-4--fd-chart-5--fd-chart-6