Variables

µCSS exposes all its design tokens as CSS variables (--mu-*) defined on :root. Override any variable to customize the framework without modifying the source files.

Typography #

Description	Variable	Default
Sans-serif font stack	`--mu-font-family-sans-serif`	`system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`
Monospace font stack	`--mu-font-family-monospace`	`ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace`
Active font	`--mu-font-family`	`var(--mu-font-family-sans-serif)`
Base size (responsive: 106.25% to 131.25%)	`--mu-font-size`	`100%`
Normal weight	`--mu-font-weight`	`400`
Line height	`--mu-line-height`	`1.5`
Underline offset	`--mu-text-underline-offset`	`0.1rem`

Responsive sizing #

The base font size increases at each breakpoint:

Breakpoint	`--mu-font-size`
< 576px	100%
≥ 576px	106.25%
≥ 768px	112.5%
≥ 1024px	118.75%
≥ 1280px	125%
≥ 1536px	131.25%

Spacing #

Description	Variable	Default
Base unit (padding, margins)	`--mu-spacing`	`1rem`
Typographic vertical spacing	`--mu-typography-spacing-vertical`	`1rem`
Vertical spacing between sections	`--mu-block-spacing-vertical`	`var(--mu-spacing)`
Horizontal spacing between sections	`--mu-block-spacing-horizontal`	`var(--mu-spacing)`
Grid column gutter	`--mu-grid-column-gap`	`var(--mu-spacing)`
Grid row gutter	`--mu-grid-row-gap`	`var(--mu-spacing)`

Borders and outlines #

Description	Variable	Default
Corner rounding	`--mu-border-radius`	`0.25rem`
Border thickness (1px)	`--mu-border-width`	`0.0625rem`
Focus outline thickness (2px)	`--mu-outline-width`	`0.125rem`

Transitions #

Description	Variable	Default
Animation duration and easing	`--mu-transition`	`0.2s ease-in-out`

Navigation #

Description	Variable	Default
Vertical padding of nav items	`--mu-nav-element-spacing-vertical`	`1rem`
Horizontal padding of nav items	`--mu-nav-element-spacing-horizontal`	`0.5rem`
Vertical padding of nav links	`--mu-nav-link-spacing-vertical`	`0.5rem`
Horizontal padding of nav links	`--mu-nav-link-spacing-horizontal`	`0.5rem`
Breadcrumb separator	`--mu-nav-breadcrumb-divider`	`">"`

Forms #

Description	Variable	Default
Vertical padding of fields	`--mu-form-element-spacing-vertical`	`0.75rem`
Horizontal padding of fields	`--mu-form-element-spacing-horizontal`	`1rem`
Field border	`--mu-form-element-border-color`	`#cfd5e2`
Border on focus	`--mu-form-element-active-border-color`	`var(--mu-primary-border)`
Opacity of disabled fields	`--mu-form-element-disabled-opacity`	`0.5`

Base colors #

These variables change between light and dark themes (see Dark mode).

Description	Variable	Light	Dark
Page background	`--mu-background-color`	`#fff`	`rgb(19, 22.5, 30.5)`
Main text	`--mu-color`	`#373c44`	`#c2c7d0`
Secondary text	`--mu-muted-color`	`#646b79`	`#8891a4`
Subtle borders	`--mu-muted-border-color`	`rgb(231, 234, 239.5)`	`rgb(48, 54.5, 69)`
Selection highlight	`--mu-text-selection-color`	`rgba(2, 154, 232, 0.25)`	`rgba(1, 170, 255, 0.1875)`
Inverted background (always opposite of page)	`--mu-inverted-background`	`#181c25`	`#eff1f4`
Inverted text (always opposite of page)	`--mu-inverted-color`	`#fff`	`#000`

Role colors #

11 color roles, each providing 7 variants. Values depend on the theme (see build/mu.theme.json).

Variants per role #

For each role (primary, secondary, tertiary, contrast, accent, success, info, warning, error, pop, spark):

Description	Suffix
Main color of the role	(base)
Colored background (light tint in light mode, dark tint in dark mode)	`-background`
Hover color	`-hover`
Hover background	`-hover-background`
Focus ring color (semi-transparent)	`-focus`
Text on colored background (`#fff` or `#000`)	`-inverse`
Semi-transparent underline	`-underline`

Example #

.custom-element {
    color: var(--mu-primary);
    background-color: var(--mu-primary-background);
    border: 1px solid var(--mu-primary);
}

.custom-element:hover {
    color: var(--mu-primary-hover);
    background-color: var(--mu-primary-hover-background);
}

Headings #

Description	Variable
`<h1>` color	`--mu-h1-color`
`<h2>` color	`--mu-h2-color`
`<h3>` color	`--mu-h3-color`
`<h4>` color	`--mu-h4-color`
`<h5>` color	`--mu-h5-color`
`<h6>` color	`--mu-h6-color`

Each heading level uses a slightly lighter shade than the previous one.

Components #

Code #

Description	Variable
Background of `<code>`, `<pre>`, `<samp>` elements	`--mu-code-background-color`
Code text	`--mu-code-color`
Background of `<kbd>`	`--mu-code-kbd-background-color`
Text of `<kbd>`	`--mu-code-kbd-color`

Card #

Description	Variable
Card background	`--mu-card-background-color`
Card border	`--mu-card-border-color`
Card shadow	`--mu-card-box-shadow`
Header/footer background	`--mu-card-sectioning-background-color`

Table #

Description	Variable
Table border	`--mu-table-border-color`
Striped row background	`--mu-table-row-stripped-background-color`

Accordion #

Description	Variable
Accordion border	`--mu-accordion-border-color`
Active title color	`--mu-accordion-active-summary-color`
Closed title color	`--mu-accordion-close-summary-color`
Open title color	`--mu-accordion-open-summary-color`

Dropdown #

Description	Variable
Menu background	`--mu-dropdown-background-color`
Menu border	`--mu-dropdown-border-color`
Menu text	`--mu-dropdown-color`
Hover background	`--mu-dropdown-hover-background-color`
Menu shadow	`--mu-dropdown-box-shadow`

Progress #

Description	Variable
Bar background	`--mu-progress-background-color`
Progress color	`--mu-progress-color`

Tooltip #

Description	Variable
Tooltip background	`--mu-tooltip-background-color`
Tooltip text	`--mu-tooltip-color`

Switch #

Description	Variable
Unchecked background	`--mu-switch-background-color`
Checked background	`--mu-switch-checked-background-color`
Thumb color	`--mu-switch-color`

Range #

Description	Variable
Track border	`--mu-range-border-color`
Active border	`--mu-range-active-border-color`
Thumb color	`--mu-range-thumb-color`
Active thumb	`--mu-range-thumb-active-color`

Blockquote #

Description	Variable
Quote border	`--mu-blockquote-border-color`
Quote footer color	`--mu-blockquote-footer-color`

Modal #

Description	Variable
Overlay background	`--mu-modal-overlay-background-color`
Blur filter (`blur(0.375rem)`)	`--mu-modal-overlay-backdrop-filter`

Buttons #

Description	Variable
Button shadow	`--mu-button-box-shadow`
Hover shadow	`--mu-button-hover-box-shadow`

Shadows #

Description	Variable
Default shadow (used by cards, dropdowns)	`--mu-box-shadow`

Global override #

To customize the framework, override the variables on :root:

:root {
    --mu-font-family: "Inter", sans-serif;
    --mu-border-radius: 0.5rem;
    --mu-spacing: 1.25rem;
    --mu-primary: #e63946;
}

For theme-specific overrides, target the corresponding selectors (see Dark mode).

Accessibility #

All color variables are designed to maintain WCAG AA contrast ratios in both light and dark modes.
The responsive font sizing ensures readability across screen sizes without requiring user zoom.
Focus-related variables (--mu-outline-width, -focus suffixes) ensure visible focus indicators for keyboard navigation.
When overriding variables, verify that your custom values maintain sufficient contrast ratios.

See also: Dark mode · Container · Grid