Colors Reference ↓

Semantic palette

primary
--color-primary
secondary
--color-secondary
brand
--color-brand
accent
--color-accent
info
--color-info
success
--color-success
warning
--color-warning
danger
--color-danger
default
--color-default
black
--color-black

Surface palette

muted
--ui-color-surface
invert
--ui-color-invert
white
--color-white

Text colors

Aa :primary
Aa :secondary
Aa :brand
Aa :accent
Aa :info
Aa :success
Aa :warning
Aa :danger
Aa :muted
Aa :default
Aa :black
Aa :white

Semantic usage — badges

Primary Secondary Brand Accent Info Success Warning Danger
Primary Secondary Brand Accent Info Success Warning Danger

Semantic usage — buttons

Semantic usage — status messages

Deployment successful view logs →
Trial expires in 3 days upgrade →
Payment failed update billing →
Scheduled maintenance Saturday 02:00 UTC read more →

Reference

Base

TokenDefault value
--color-primary#3b82f6
--color-secondary#6366f1
--color-brand#8b5cf6
--color-accent#14b8a6
--color-info#0ea5e9
--color-success#22c55e
--color-warning#f59e0b
--color-danger#ef4444
--color-default#6b7280
--color-black#000000
--color-white#ffffff
--color-disabled#d1d5db

Modifiers

ClassValues
.ui-text:*primary, secondary, success, warning, danger, info, brand, accent, muted, default, black, white
.ui-background:*primary, secondary, success, warning, danger, info, brand, accent, default, muted, invert, black, white

Options

Class / AttributeDescription