One class. One job. Straight from a token.

Token, utility, or component

Three layers carry style, and choosing the right one is most of the craft. Reach for the layer that answers the question you actually have.

The catalog

Every class below is one declaration, and every sized value traces to a token. These stay in markup so you read the layout at a glance.

Utilities at work

A handful of structural helpers, read in one glance. This is fair use. The moment the same cluster becomes a card you build twenty times, give it a name and let the helpers go.

<!-- Ticket status: label left, state right, one token gap -->
<div class="d-flex items-center justify-between gap-4">
    <span class="text-muted text-sm">Ticket status</span>
    <span class="font-semibold text-success">Confirmed</span>
</div>

<!-- Long venue name that must never break the row -->
<div class="d-flex items-center gap-2 min-w-0">
    <span class="truncate">Teatro Metropolitano Jose Gutierrez Gomez</span>
</div>

<!-- Icon-only button: eyes see the X, screen readers hear the label -->
<button class="d-inline-flex items-center focus-ring cursor-pointer">
    <span class="sr-only">Close ticket details</span>
    <svg aria-hidden="true">...</svg>
</button>

The two helpers that matter most

Two exist purely to serve assistive technology. Treat them as required infrastructure, not decoration.

Visually hidden is a solved problem with a canonical recipe. The common shortcut of display: none is wrong for it: that also drops the element from the accessibility tree, the opposite of the goal. This hides the pixels while keeping the text for a screen reader.

/* The canonical visually-hidden utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

Which layer, in five questions

When you are unsure which tool to reach for, walk down until one fits.