O que é

É tudo que muda a aparência das letras: o tamanho, a grossura (peso), a cor, maiúscula/minúscula, alinhamento, espaço entre linhas e entre letras. Em vez de escrever CSS, você coloca classes curtas no elemento: t-g (texto grande), fw6 (peso 600), t-pri (cor da marca), t-upp (MAIÚSCULAS). Os títulos <h1> a <h6> já vêm prontos, sem classe nenhuma.

É só CSS, não precisa de JavaScript. A fonte do SW Core é a Geist (e a Geist Mono para código e números), já inclusa, sem Google Fonts. Ela é variável: um arquivo só tem todos os pesos, de 100 (bem fina) a 900 (bem grossa). O padrão de um site com SW Core: texto corrido em peso 200 na cor suave, <strong> em 500, títulos em 400 na cor forte — o "peso" do título vem do tamanho, não da grossura. Os títulos crescem sozinhos do celular ao computador.

Quando usar

• Título de seção: use a tag certa (<h2>) — o tamanho já vem. Precisa de outro tamanho sem mudar a tag? class="t-h3".
• Rótulo acima do título ("SERVIÇOS", "NOVIDADE"): t-pp t-upp ls-ww t-pri.
• Preço, número de destaque: t-xg fw7.
• Texto de apoio, legenda, data: t-p t-mut.
• Status em texto (pago, vencido, pendente): t-suc / t-err / t-ale.
• Depoimento de cliente: <blockquote class="sw-quote">.

Comece aqui

1. 1

   Coloque o SW Core no <head>. A fonte Geist já vem junto (não precisa de Google Fonts).

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Escreva o HTML normal. Títulos e parágrafos já saem no padrão, sem classe.

   Barbearia do Centro

   Corte, barba e sobrancelha com hora marcada.

   <h3>Barbearia do Centro</h3>
   <p>Corte, barba e sobrancelha com hora marcada.</p>

3. 3

   Quer mudar? Junte classes curtas. Aqui: rótulo pequeno em maiúsculas na cor da marca + preço grande e grosso.

   Promoção

   R$ 45,00

   <span class="t-pp t-upp ls-ww t-pri fw6">Promoção</span>
   <p class="t-xg fw7 t-txt">R$ 45,00</p>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<header class="t-ct">
  <span class="t-pp t-upp ls-ww t-pri fw6">Barbearia no Centro</span>
  <h1 class="t-h2 twr-b">Seu corte do jeito que você gosta</h1>
  <p class="t-g">Hora marcada, sem fila. Terça a sábado, das 9h às 20h.</p>
</header>

<span class="t-p t-rsk t-mut">R$ 149,90</span>
<p class="t-xg fw7 t-txt lh-1">R$ 99,90</p>
<span class="t-p t-suc fw5">Economize 33%</span>

<blockquote class="sw-quote lg">
  <p>Em uma semana o site novo já trouxe três orçamentos pelo WhatsApp.</p>
  <footer>Juliana Prado, Doces da Ju</footer>
</blockquote>

<div class="flx gap-gg">
  <div>
    <p class="t-xxg t-pri fw6">+500</p>
    <span class="t-pp t-upp ls-w">clientes atendidos</span>
  </div>
  <div>
    <p class="t-xxg t-pri fw6">12</p>
    <span class="t-pp t-upp ls-w">anos de estrada</span>
  </div>
</div>

<div class="flx j-sb alc gap-m bd-b bd-mut py-p">
  <span class="t-txt">Pedido #1042 · Maria</span>
  <span class="t-pp t-upp ls-w fw6 t-suc">Pago</span>
</div>
<div class="flx j-sb alc gap-m py-p">
  <span class="t-txt">Pedido #1043 · Paulo</span>
  <span class="t-pp t-upp ls-w fw6 t-ale">Aguardando</span>
</div>

Precisa de quê

• swcore.min.css — fontes, títulos e todas as classes desta página.

Cuidados — erros comuns

• Não escolha a tag pelo tamanho: use h1 uma vez por página (o título principal), depois h2, h3… Se o tamanho não servir, mude com t-h*, não trocando a tag.
• Texto do site parece "fino demais"? É o padrão (peso 200). Quer mais grosso no site todo? No seu CSS: body { font-weight: 300; }. Só num trecho: fw4.
• t-pri é cor de texto; para fundo é bg-pri (página Cores semânticas).
• Os tamanhos t-pp…t-xxg são fixos; só os títulos (h1–h6 e t-h1–t-h6) crescem com a tela. Para um número enorme no computador que caiba no celular, prefira t-h1.
• Tudo aqui usa a medida "rem" do SW Core (1rem = 10 px). Se o seu CSS mudar o font-size do <html>, todos os tamanhos mudam junto. Para aumentar tudo, use --sw-type-scale (página Tema e tokens).

O que ele não faz

• Só vem com Geist e Geist Mono. Outra fonte (Google Fonts ou arquivo seu) você carrega e aponta em --sw-f-san, --sw-f-hd ou --sw-f1…--sw-f6.
• As classes de tamanho não têm versão por tela (não existe t-g-m): o tamanho que muda com a tela é o dos títulos.