Semantic Colors
3 brand colors, each expanded into a full role set: brand, accent, base, surface, muted, and success / warning / error / info at fixed hue anchors. Every text-pairing role carries an on-color guaranteed to pass WCAG AA.
Set
Default
#7c5cff
brand
--color-brand: #7c5cff
--on-brand: #000000
accent
--color-accent: #958300
--on-accent: #000000
base
--color-base: #0c0c15
surface
--color-surface: #191926
muted
--color-muted: #706f83
success
--color-success: #479c4d
--on-success: #000000
warning
--color-warning: #b47a00
--on-warning: #000000
error
--color-error: #e24947
--on-error: #000000
info
--color-info: #2f8adc
--on-info: #000000
css
:root {
--color-brand: #7c5cff;
--on-brand: #000000;
--color-accent: #958300;
--on-accent: #000000;
--color-base: #0c0c15;
--color-surface: #191926;
--color-muted: #706f83;
--color-success: #479c4d;
--on-success: #000000;
--color-warning: #b47a00;
--on-warning: #000000;
--color-error: #e24947;
--on-error: #000000;
--color-info: #2f8adc;
--on-info: #000000;
}Set
Vivid
#2563eb
brand
--color-brand: #2563eb
--on-brand: #ffffff
accent
--color-accent: #ab5b00
--on-accent: #ffffff
base
--color-base: #090d16
surface
--color-surface: #141b26
muted
--color-muted: #687284
success
--color-success: #479c4d
--on-success: #000000
warning
--color-warning: #b47a00
--on-warning: #000000
error
--color-error: #e24947
--on-error: #000000
info
--color-info: #2f8adc
--on-info: #000000
css
:root {
--color-brand: #2563eb;
--on-brand: #ffffff;
--color-accent: #ab5b00;
--on-accent: #ffffff;
--color-base: #090d16;
--color-surface: #141b26;
--color-muted: #687284;
--color-success: #479c4d;
--on-success: #000000;
--color-warning: #b47a00;
--on-warning: #000000;
--color-error: #e24947;
--on-error: #000000;
--color-info: #2f8adc;
--on-info: #000000;
}Set
Muted
#64748b
brand
--color-brand: #64748b
--on-brand: #ffffff
accent
--color-accent: #807058
--on-accent: #ffffff
base
--color-base: #080e16
surface
--color-surface: #131b26
muted
--color-muted: #677283
success
--color-success: #778d77
--on-success: #000000
warning
--color-warning: #91856a
--on-warning: #000000
error
--color-error: #9d7d7a
--on-error: #000000
info
--color-info: #74899e
--on-info: #000000
css
:root {
--color-brand: #64748b;
--on-brand: #ffffff;
--color-accent: #807058;
--on-accent: #ffffff;
--color-base: #080e16;
--color-surface: #131b26;
--color-muted: #677283;
--color-success: #778d77;
--on-success: #000000;
--color-warning: #91856a;
--on-warning: #000000;
--color-error: #9d7d7a;
--on-error: #000000;
--color-info: #74899e;
--on-info: #000000;
}