Card content
Colors
The 11 color roles, their CSS variables, and how they apply to components.
Color roles
Each role provides a base color, a background tint, a hover shade, and a focus ring. Toggle dark mode to see how they adapt.
| Role | Base | Background | Hover | Focus | Inverse |
|---|---|---|---|---|---|
| primary | |||||
| secondary | |||||
| tertiary | |||||
| contrast | |||||
| accent | |||||
| success | |||||
| info | |||||
| warning | |||||
| error | |||||
| pop (lighter accent) | |||||
| spark (lighter contrast) |
Base theme colors
background
color
muted
muted-border
h1
h3
h6
Color themes
µCSS ships with 20 pre-built color themes. Each theme remaps the 11 color roles to different color families. The default theme is Azure (mu.css). To use another theme, load mu.{name}.css instead.
Azure
Red
Pink
Fuchsia
Purple
Violet
Indigo
Blue
Cyan
Jade
Green
Lime
Yellow
Amber
Pumpkin
Orange
Sand
Grey
Zinc
Slate
Role mapping per theme
Each theme is named after its primary color. Most themes share the same defaults for secondary (slate), tertiary (sand), success (green), info (cyan), warning (amber), and error (red). The table below highlights the differences.
| Theme | primary | secondary | tertiary | contrast | accent | pop | spark | success | info | warning | error |
|---|---|---|---|---|---|---|---|---|---|---|---|
| azure | azure | slate | sand | fuchsia | lime | lime | fuchsia | green | cyan | amber | red |
| red | red | slate | sand | indigo | jade | jade | indigo | green | azure | amber | pink |
| pink | pink | slate | sand | azure | lime | lime | azure | green | cyan | amber | red |
| fuchsia | fuchsia | slate | sand | blue | lime | lime | blue | green | cyan | amber | red |
| purple | purple | slate | sand | pumpkin | jade | jade | pumpkin | green | cyan | amber | red |
| violet | violet | slate | sand | pumpkin | jade | jade | pumpkin | green | cyan | amber | red |
| indigo | indigo | slate | sand | pink | lime | lime | pink | green | cyan | amber | red |
| blue | blue | slate | sand | pink | lime | lime | pink | green | cyan | amber | red |
| cyan | cyan | slate | sand | fuchsia | lime | lime | fuchsia | green | azure | amber | red |
| jade | jade | slate | sand | violet | pumpkin | pumpkin | violet | green | cyan | amber | red |
| green | green | slate | sand | blue | pink | pink | blue | jade | cyan | amber | red |
| lime | lime | slate | sand | pink | azure | azure | pink | green | cyan | amber | red |
| yellow | yellow | slate | sand | purple | jade | jade | purple | green | cyan | amber | red |
| amber | amber | slate | sand | purple | jade | jade | purple | green | cyan | yellow | red |
| pumpkin | pumpkin | slate | sand | violet | jade | jade | violet | green | cyan | amber | red |
| orange | orange | slate | sand | violet | jade | jade | violet | green | cyan | amber | red |
| sand | sand | slate | grey | purple | jade | jade | purple | green | cyan | amber | red |
| grey | grey | slate | sand | violet | orange | orange | violet | green | cyan | amber | red |
| zinc | zinc | slate | grey | violet | pumpkin | pumpkin | violet | green | cyan | amber | red |
| slate | slate | grey | sand | pink | lime | lime | pink | green | cyan | amber | red |
The default theme is azure (first row). Each cell shows the color family assigned to the role. Pop derives from accent with lighter shades. Spark derives from contrast with lighter shades.
Buttons
Filled
Outline
Alerts
Primary — informational message.
Secondary — subtle notice.
Tertiary — accent notice.
Contrast — high emphasis.
Accent — eye-catching highlight.
Success — operation completed.
Info — helpful information.
Warning — proceed with caution.
Error — something went wrong.
Pop — lighter accent variant.
Spark — lighter contrast variant.
Badges
Solid
Primary Secondary Tertiary Contrast Accent Success Info Warning Error Pop Spark
Outline
Primary Secondary Tertiary Contrast Accent Success Info Warning Error Pop Spark
Cards
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Card content
Progress bars
Spinners
Utility classes
µCSS provides utility classes for text color (.c-{role}), background (.bg-{role}), and border (.border-{role}).
Text color .c-*
Primary · Secondary · Tertiary · Contrast · Accent · Success · Info · Warning · Error · Pop · Spark
Text color inverse .c-inverse
For readable text on filled backgrounds — typically white or black.
Primary Secondary Tertiary Contrast Accent Success Info Warning Error Pop Spark
Background .bg-*
Primary Secondary Tertiary Contrast Accent Success Info Warning Error Pop Spark
Border .border-*
Primary Secondary Tertiary Contrast Accent Success Info Warning Error Pop Spark
Links
CSS variable pattern
Each role follows the same naming convention:
--mu-{role}
--mu-{role}-background
--mu-{role}-hover
--mu-{role}-hover-background
--mu-{role}-focus
--mu-{role}-inverse
--mu-{role}-underlineWhere {role} is one of: primary, secondary, tertiary, contrast, accent, success, info, warning, error, pop, spark.
CSS class pattern
Components that accept color variants follow the pattern .{component}-{role}:
| Component | Class pattern | Example |
|---|---|---|
| Button | .btn-{role} |
.btn-primary, .btn-accent |
| Button (outline) | .btn-outline .btn-{role} |
.btn-outline .btn-error |
| Alert | .alert-{role} |
.alert-warning, .alert-info |
| Badge | .badge-{role} |
.badge-success, .badge-pop |
| Badge (outline) | .badge-outline .badge-{role} |
.badge-outline .badge-error |
| Card | .card-{role} |
.card-info, .card-spark |
| Hero | .hero-{role} |
.hero-primary, .hero-accent |
| Progress | .progress-{role} |
.progress-success, .progress-warning |
| Spinner | .spinner-{role} |
.spinner-primary, .spinner-error |
| Text color | .c-{role} |
.c-error, .c-accent |
| Text color (inverse) | .c-inverse |
.bg-primary .c-inverse |
| Background | .bg-{role} |
.bg-primary, .bg-success |
| Border | .border-{role} |
.border-warning, .border-info |
All patterns accept the 11 roles: primary, secondary, tertiary, contrast, accent, success, info, warning, error, pop, spark.