Construa ritmo, cor e tipografia com tokens utilitários

Uma interface começa a parecer sistema quando as distâncias e a tipografia repetem uma lógica. Nesta aula, a seção de preço da clínica deixa de usar 13px, 19px e 27px escolhidos no olho. Ela passa a trabalhar com uma régua curta e pares de cor medidos.

p-4 e gap-4 usam a mesma base, mas cumprem funções diferentes. Padding cria respiro dentro da caixa; gap separa filhos de um container flex ou grid. Pense numa caixa de envio: padding é o material entre produto e parede; gap é o corredor entre caixas numa prateleira. A comparação não explica margin auto nem posicionamento, portanto volte aos nomes técnicos depois dela.

Comece pelo container:

<article class="flex flex-col gap-4 rounded-xl bg-white p-6 shadow-lg">
  <h2 class="text-2xl font-bold text-slate-900">Plano Essencial</h2>
  <p class="max-w-prose leading-7 text-slate-600">Agenda e lembretes.</p>
</article>

Uma classe de tamanho como text-2xl carrega tamanho e line-height padrão. Ao somar leading-7 ao parágrafo, você substitui a altura de linha com intenção. Não aplique leading-none a texto que pode quebrar: o componente precisa suportar zoom e uma descrição maior.

Cor é uma relação. text-cyan-600 não é automaticamente legível sobre branco só porque parece escuro. Famílias diferentes têm luminosidades diferentes no mesmo passo. Para texto normal, procure razão de pelo menos 4,5:1; para componentes, teste também foco, disabled e modo escuro.

No laboratório, o CSS já representa um pequeno resultado compilado. Alterar gap-2 para gap-6 isola o ritmo do grupo. Alterar p-4 para p-8 isola o respiro da superfície. Tente prever o efeito antes de cada troca. A previsão obriga você a ler o nome, não apenas reagir à tela.

Valor arbitrário como p-[13px] é válido para integrar uma medida legada. Ele não deve virar uma régua paralela. Se o mesmo 13px reaparece em três lugares, promova a decisão a token com nome e explique por que o sistema precisa dela.

Use largura máxima para manter leitura confortável. max-w-prose limita a linha em caracteres, enquanto w-full permite ocupar o espaço até esse teto. Num título, text-balance pode distribuir palavras entre linhas; num parágrafo longo, prefira fluxo natural ou text-pretty.

O erro mais comum desta etapa é compensar todo problema com spacing. Um texto que estoura dentro de Flexbox pode precisar de min-w-0, não menos padding. Um botão desalinhado pode estar no eixo errado, não com margin errada. Antes de trocar número, identifique a propriedade CSS que deveria mudar.

Você conclui quando o cartão possui hierarquia visível sem depender apenas de cor: título maior e mais forte, descrição legível e ação reconhecível. Liste as utilities por responsabilidade — espaço interno, intervalo, tipografia e cor. Essa lista será a base para transformar valores repetidos em tema próprio na última metade do curso.