Utilities (u-*) · MCSS-Lite

Pick this part

Pick a utility for

A single, local override that no layout or component covers, such as removing a paragraph margin inside a card.
u-sr-only for text that screen readers need but the layout already shows visually, such as an icon-only label.

Pick another part for

Spacing between components: use l-stack or l-cluster.
Restyling a component everywhere: set its component token on :root.

Build it

Pick the one utility that does the job.
Add it next to the part it adjusts. Utilities win over layouts and components, so use them sparingly.

quarterly-board-report-reviewed-by-finance-and-legal-v14.pdf

brand-guidelines-2026-with-every-approved-logo-lockup.pdf

Show markup 13 lines

<div class="l-grid l-grid--2-col">
  <div class="c-card">
    <p class="c-card__body u-truncate u-font-mono">quarterly-board-report-reviewed-by-finance-and-legal-v14.pdf</p>
  </div>
  <div class="c-card">
    <p class="c-card__body u-truncate u-font-mono">brand-guidelines-2026-with-every-approved-logo-lockup.pdf</p>
  </div>
</div>

<button type="button" class="c-button c-button--ghost">
  <svg class="c-icon" aria-hidden="true" focusable="false"><use href="#mcss-icon-edit"></use></svg>
  <span class="u-sr-only">Edit post</span>
</button>

Check your build

Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.

Fits

Remove a paragraph margin inside a component.

Storage: 4 GB of 10 GB

<section class="c-card">
  <p class="u-margin-0">Storage: 4 GB of 10 GB</p>
</section>

validate: 0 issues

Doesn't fit

Don't guess a utility that doesn't exist.

<p class="u-mt-4">Storage: 4 GB of 10 GB</p>

validate

error Unknown class "u-mt-4". Utilities that exist: u-text-center, u-text-left, u-text-right, u-hidden, u-visible, u-invisible, u-margin-0, u-padding-0, u-font-normal, u-font-medium, u-font-semibold, u-font-bold, u-font-mono, u-truncate, u-sr-only. Only classes from the MCSS-Lite contracts exist. [unknown-class]

Spec sheet

Utilities
Class	What it does
`u-text-center`	Center-align text.
`u-text-left`	Align text to the start (left in left-to-right languages).
`u-text-right`	Align text to the end (right in left-to-right languages).
`u-hidden`	display: none.
`u-visible`	visibility: visible.
`u-invisible`	visibility: hidden; keeps the space.
`u-margin-0`	Remove margin, e.g. from a heading or paragraph inside a component.
`u-padding-0`	Remove padding.
`u-font-normal`	Normal font weight.
`u-font-medium`	Medium font weight.
`u-font-semibold`	Semibold font weight.
`u-font-bold`	Bold font weight.
`u-font-mono`	Monospace font.
`u-truncate`	Single line with an ellipsis.
`u-sr-only`	Visually hidden but read by screen readers.