Cores semânticas CSS

O que é

Em vez de escolher "verde #22c55e", você escolhe o significado: suc (deu certo), err (erro), ale (atenção), inf (informação), pri (cor da marca), sec (secundária), acc (acento neutro). Depois diz onde a cor vai: bg- no fundo, t- no texto, bd- na borda. Assim bg-err é "fundo vermelho de erro" e t-suc é "texto verde de sucesso". Se um dia a marca mudar de cor, tudo que usa pri muda junto.

É só CSS. Cada classe lê uma variável do Tema (--sw-pri, --sw-suc…). O fundo cheio (bg-pri) já coloca o texto em branco ou quase-preto, o que for mais legível. O texto (t-pri) usa uma versão da cor que escurece no tema claro para continuar legível. Fundo, card e borda neutros (bg-base, bg-sur, bd-mut) trocam de valor sozinhos quando o tema troca. Precisa de um tom fixo e específico (azul 7, verde 11)? Isso é a Paleta estendida.

Quando usar

• Aviso na tela ("Pagamento aprovado", "Campo obrigatório"): fundo suave + texto da cor — bg-suc-soft t-suc.
• Faixa ou selo de destaque ("Promoção", "Novo"): fundo cheio — bg-pri, bg-err.
• Card, painel, caixa: bg-sur (superfície) com bd (borda neutra).
• Destacar um card escolhido (plano mais vendido): borda da marca — bd-2 bd-pri.
• Botão, banner ou selo com brilho: cor + camada de degradê — bg-pri grad.

Comece aqui

1. 1

   Coloque o SW Core no <head>. Todas as classes desta página estão no arquivo principal.

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

2. 2

   Escolha o lugar (bg- fundo, t- texto, bd- borda) + o significado (pri, suc, err…).

   Pago Vencido Plano escolhido

   <span class="bg-suc">Pago</span>
   <span class="t-err">Vencido</span>
   <span class="bd-2 bd-pri">Plano escolhido</span>

3. 3

   Quer mais discreto? -soft dá um fundo clarinho da cor; junte com o texto da mesma cor.

   Pedido confirmado

   <span class="bg-suc-soft t-suc">Pedido confirmado</span>

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.

<div class="bg-suc-soft t-suc bd-l bd-suc p-m r-p">
  <i class="swi-check-circle"></i> Mensagem enviada! Respondemos em até 1 hora.
</div>
<div class="bg-err-soft t-err bd-l bd-err p-m r-p">
  <i class="swi-error-circle"></i> Informe um e-mail válido.
</div>

<div class="l l-2 gap-m">
  <div class="bg-sur bd p-g r-m">
    <span class="t-mut">Básico</span>
    <p class="t-xg t-txt">R$ 49</p>
  </div>
  <div class="bg-sur bd-2 bd-pri p-g r-m">
    <span class="bg-pri p-pp px-p r-p t-pp t-upp">Mais vendido</span>
    <p class="t-mut mt-p">Profissional</p>
    <p class="t-xg t-txt">R$ 99</p>
  </div>
</div>

<span class="bg-suc-soft t-suc px-p py-pp r-p t-pp fw6">Pago</span>
<span class="bg-ale-soft t-ale px-p py-pp r-p t-pp fw6">Aguardando</span>
<span class="bg-err-soft t-err px-p py-pp r-p t-pp fw6">Cancelado</span>
<span class="bg-inf-soft t-inf px-p py-pp r-p t-pp fw6">Enviado</span>

<div class="bg-pri grad-diag p-g r-m flx j-sb alc gap-m f-wr">
  <strong>Primeira consulta com 20% de desconto</strong>
  <a href="/agendar" sw-btn="lit">Quero agendar</a>
</div>

<span class="selo-frete">Frete grátis</span>

<style>
  .selo-frete {
    color: var(--sw-suc-txt);             /* texto legível no claro e no escuro */
    border: 1px solid var(--sw-suc);
    border-radius: var(--sw-r-p);
    padding: var(--sw-s-pp) var(--sw-s-p);
  }
</style>

Precisa de quê

• swcore.min.css — todas as classes desta página.
• swcore.compl.min.css — só se usar os ícones swi-* das receitas.

Cuidados — erros comuns

• bd-pri sozinho não mostra borda nenhuma: ele só dá a cor. Junte com bd, bd-1…bd-5.
• Para texto colorido use t-, não bg-: bg-suc pinta o fundo inteiro.
• As classes de fundo mandam na cor do texto (vem com !important). Para outra cor de letra por cima, ponha o texto num elemento filho com t-.
• Não use cor de aviso como enfeite: se tudo for vermelho, o erro de verdade não chama atenção. suc/err/ale/inf são para estado; enfeite é pri/sec.
• grad sozinho não tem cor: ele é uma camada. Precisa de um fundo embaixo (bg-pri grad).

O que ele não faz

• Só existem essas 7 cores com significado. Tom específico e fixo (azul 3, verde 12) é a Paleta estendida.
• A versão -soft não existe para acc.