Colors

Color	Description	Example
brand Example: bg-brand Default brand color	Default brand color	bg-brand
brand-light Example: bg-brand-light Light brand color	Light brand color	bg-brand-light
brand-dark Example: bg-brand-dark Brand brand color	Brand brand color	bg-brand-dark
brand-content Example: bg-brand-content Text for brand	Text for brand	bg-brand-content
accent Example: bg-accent Default accent color	Default accent color	bg-accent
accent-light Example: bg-accent-light Light accent color	Light accent color	bg-accent-light
accent-dark Example: bg-accent-dark Accent brand color	Accent brand color	bg-accent-dark
accent-content Example: bg-accent-content Text for accent	Text for accent	bg-accent-content
success Example: bg-success Success text	Success text	bg-success
success-light Example: bg-success-light Success alert light	Success alert light	bg-success-light
success-dark Example: bg-success-dark Success alert dark	Success alert dark	bg-success-dark
error Example: bg-error Error text	Error text	bg-error
error-light Example: bg-error-light Error alert background	Error alert background	bg-error-light
error-dark Example: bg-error-dark Error alert background	Error alert background	bg-error-dark
warning Example: bg-warning Warning text	Warning text	bg-warning
warning-light Example: bg-warning-light Warning alert background	Warning alert background	bg-warning-light
warning-dark Example: bg-warning-dark Warning alert background	Warning alert background	bg-warning-dark
info Example: bg-info Info text	Info text	bg-info
info-light Example: bg-info-light Info alert background	Info alert background	bg-info-light
info-dark Example: bg-info-dark Info alert background	Info alert background	bg-info-dark
surface-background Example: bg-surface-background Surface Background element. Used for the page background	Surface Background element. Used for the page background	bg-surface-background
surface Example: bg-surface Surface Elements such as cards, sidebars etc	Surface Elements such as cards, sidebars etc	bg-surface
surface-1 Example: bg-surface-1 Surface Elements such as cards, sidebars etc	Surface Elements such as cards, sidebars etc	bg-surface-1
surface-2 Example: bg-surface-2 Surface Elements such as cards, sidebars etc	Surface Elements such as cards, sidebars etc	bg-surface-2
surface-3 Example: bg-surface-3 Surface Elements such as cards, sidebars etc	Surface Elements such as cards, sidebars etc	bg-surface-3
content Example: bg-content Default text	Default text	bg-content
content-1 Example: bg-content-1 Content for text such as cards, sidebars etc	Content for text such as cards, sidebars etc	bg-content-1
content-2 Example: bg-content-2 Content for text such as cards, sidebars etc	Content for text such as cards, sidebars etc	bg-content-2
content-3 Example: bg-content-3 Content for text such as cards, sidebars etc	Content for text such as cards, sidebars etc	bg-content-3