Camada utilities/ da DS v4.1 — classes atômicas que referenciam
apenas tokens canônicos. Use-as para compor seções rápidas
sem escrever CSS inline. Para padrões repetidos com 4+
propriedades, prefira criar um componente BEM em components/.
Spacing — .mt-*, .py-*, .gap-*, .section-py-*
Escala: 0, 1, 2, 3, 4, 5, 6, 8 (mapeada para --space-*). Section padding usa --section-{sm,md,lg,xl} (clamp responsivo).
Margin top (.mt-*)
HTML
<h2>Título</h2>
<p class="mt-2">Lead próximo do título</p>
<p class="mt-6">Parágrafo afastado</p>Padding em eixo (.py-* / .px-*)
HTML
<section class="py-8 px-6">
<!-- conteúdo com folga uniforme -->
</section>Gap em flex/grid (.gap-*)
gap-2 (8px):
gap-6 (24px):
Section padding fluido (.section-py-*)
HTML
<section class="section-py-lg">
<!-- LP padrão: padding vertical fluido por viewport -->
</section>Layout — .flex, .grid, .items-*, .justify-*
Building blocks para qualquer composição. Sempre combinar com .gap-* para o espaçamento.
Flex row + alinhamentos
.flex .items-center .justify-between:
.flex .items-end .justify-center:
Grid colunas (.grid-cols-*)
.grid .grid-cols-3 .gap-4:
Centralizar bloco + max-width
Bloco centralizado com largura máxima de 640px.
HTML
<div class="mx-auto max-w-prose">
<p>Texto editorial limitado a 65ch.</p>
</div>Responsive — .hide-mobile, .show-mobile
Breakpoint: 768px (== --bp-md). Mobile-first: as classes *-desktop são opt-in para conteúdo exclusivo de desktop.
Redimensione a janela do navegador (ou abra DevTools em modo mobile) para ver as classes se alternarem em 768px.
HTML
<nav>
<ul class="hide-mobile">...links desktop...</ul>
<button class="show-desktop:hidden hide-desktop">Menu</button>
</nav>Tabela de referência
Classes utilitárias e o CSS gerado por cada uma.
Spacing
| Classe | CSS gerado |
|---|---|
.mt-{0..8} | margin-top: var(--space-{1..8}) |
.mb-{0..8} | margin-bottom: var(--space-{1..8}) |
.my-{0,2,4,6,8} | margin-block (top+bottom) |
.mx-{0,2,4,6,auto} | margin-inline (left+right) |
.pt-{0..8} · .pb-{0..8} | padding-top / padding-bottom |
.py-{0..8} | padding-block |
.px-{0,3..8} | padding-inline |
.p-{0,3..8} | padding em todos os lados |
.gap-{1..6} | gap: var(--space-{1..6}) |
.section-py-{sm,md,lg,xl} | padding-block: var(--section-{sm..xl}) |
Layout
| Classe | CSS gerado |
|---|---|
.flex · .inline-flex | display: flex / inline-flex |
.grid | display: grid |
.block · .inline-block · .hidden | display: … |
.flex-col · .flex-row · .flex-wrap · .flex-1 | flex-direction / flex-wrap / flex: 1 |
.grid-cols-{2,3,4} | grid-template-columns: repeat(N, minmax(0,1fr)) |
.items-{center,start,end,stretch,baseline} | align-items: … |
.justify-{center,between,start,end,around} | justify-content: … |
.text-{center,left,right} | text-align: … |
.w-full · .h-full | width/height: 100% |
.max-w-{sm,md,lg,xl,prose} | max-width: 480/640/800/720px/65ch |
.mx-auto | margin-inline: auto |
Responsive
| Classe | Comportamento |
|---|---|
.hide-mobile | Oculto em viewport < 768px |
.show-mobile | Visível sempre (default, alias semântico) |
.hide-desktop | Oculto em viewport ≥ 768px |
.show-desktop | Oculto em < 768px; visível em ≥ 768px |