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

VariableDefaultDescription
--mu-font-family-sans-serifsystem-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serifSans-serif font stack
--mu-font-family-monospaceui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospaceMonospace font stack
--mu-font-familyvar(--mu-font-family-sans-serif)Active font
--mu-font-size100%Base size (responsive: 106.25% to 131.25%)
--mu-font-weight400Normal weight
--mu-line-height1.5Line height
--mu-text-underline-offset0.1remUnderline offset

Responsive sizing

The base font size increases at each breakpoint:

Breakpoint--mu-font-size
< 576px100%
≥ 576px106.25%
≥ 768px112.5%
≥ 1024px118.75%
≥ 1280px125%
≥ 1536px131.25%

Spacing

VariableDefaultDescription
--mu-spacing1remBase unit (padding, margins)
--mu-typography-spacing-vertical1remTypographic vertical spacing
--mu-block-spacing-verticalvar(--mu-spacing)Vertical spacing between sections
--mu-block-spacing-horizontalvar(--mu-spacing)Horizontal spacing between sections
--mu-grid-column-gapvar(--mu-spacing)Grid column gutter
--mu-grid-row-gapvar(--mu-spacing)Grid row gutter

Borders and outlines

VariableDefaultDescription
--mu-border-radius0.25remCorner rounding
--mu-border-width0.0625remBorder thickness (1px)
--mu-outline-width0.125remFocus outline thickness (2px)

Transitions

VariableDefaultDescription
--mu-transition0.2s ease-in-outAnimation duration and easing

Forms

VariableDefaultDescription
--mu-form-element-spacing-vertical0.75remVertical padding of fields
--mu-form-element-spacing-horizontal1remHorizontal padding of fields
--mu-form-element-border-color#cfd5e2Field border
--mu-form-element-active-border-colorvar(--mu-primary-border)Border on focus
--mu-form-element-disabled-opacity0.5Opacity of disabled fields

Base colors

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

VariableLightDarkDescription
--mu-background-color#fffrgb(19, 22.5, 30.5)Page background
--mu-color#373c44#c2c7d0Main text
--mu-muted-color#646b79#8891a4Secondary text
--mu-muted-border-colorrgb(231, 234, 239.5)rgb(48, 54.5, 69)Subtle borders
--mu-text-selection-colorrgba(2, 154, 232, 0.25)rgba(1, 170, 255, 0.1875)Selection highlight

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):

SuffixDescription
(base)Main color of the role
-backgroundColored background (light tint in light mode, dark tint in dark mode)
-hoverHover color
-hover-backgroundHover background
-focusFocus ring color (semi-transparent)
-inverseText on colored background (#fff or #000)
-underlineSemi-transparent 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

VariableDescription
--mu-h1-color<h1> color
--mu-h2-color<h2> color
--mu-h3-color<h3> color
--mu-h4-color<h4> color
--mu-h5-color<h5> color
--mu-h6-color<h6> color

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

Components

Code

VariableDescription
--mu-code-background-colorBackground of <code>, <pre>, <samp> elements
--mu-code-colorCode text
--mu-code-kbd-background-colorBackground of <kbd>
--mu-code-kbd-colorText of <kbd>

Card

VariableDescription
--mu-card-background-colorCard background
--mu-card-border-colorCard border
--mu-card-box-shadowCard shadow
--mu-card-sectioning-background-colorHeader/footer background

Table

VariableDescription
--mu-table-border-colorTable border
--mu-table-row-stripped-background-colorStriped row background

Accordion

VariableDescription
--mu-accordion-border-colorAccordion border
--mu-accordion-active-summary-colorActive title color
--mu-accordion-close-summary-colorClosed title color
--mu-accordion-open-summary-colorOpen title color

Dropdown

VariableDescription
--mu-dropdown-background-colorMenu background
--mu-dropdown-border-colorMenu border
--mu-dropdown-colorMenu text
--mu-dropdown-hover-background-colorHover background
--mu-dropdown-box-shadowMenu shadow

Progress

VariableDescription
--mu-progress-background-colorBar background
--mu-progress-colorProgress color

Tooltip

VariableDescription
--mu-tooltip-background-colorTooltip background
--mu-tooltip-colorTooltip text

Switch

VariableDescription
--mu-switch-background-colorUnchecked background
--mu-switch-checked-background-colorChecked background
--mu-switch-colorThumb color

Range

VariableDescription
--mu-range-border-colorTrack border
--mu-range-active-border-colorActive border
--mu-range-thumb-colorThumb color
--mu-range-thumb-active-colorActive thumb

Blockquote

VariableDescription
--mu-blockquote-border-colorQuote border
--mu-blockquote-footer-colorQuote footer color

Modal

VariableDescription
--mu-modal-overlay-background-colorOverlay background
--mu-modal-overlay-backdrop-filterBlur filter (blur(0.375rem))

Buttons

VariableDescription
--mu-button-box-shadowButton shadow
--mu-button-hover-box-shadowHover shadow

Shadows

VariableDescription
--mu-box-shadowDefault shadow (used by cards, dropdowns)

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