Tokens, tipografia, componentes e padrões usados em todo o site.
Regra do projeto: tokens e componentes devem nascer no CSS de base, ser expostos no Tailwind e, por último, documentados nesta página.
Tokens (CSS vars)
src/assets/css/style.css
Mapa Tailwind
tailwind.config.ts
CSS gerado (produção)
src/assets/css/output.css
Exemplos reais
views/pages/*.php
Checklist ao adicionar algo novo
Tokens em HSL no src/assets/css/style.css, expostos no Tailwind via tailwind.config.ts.
--background
Fundo padrão
--foreground
Texto principal
--card
Superfície de cards
--card-foreground
Texto sobre card
--popover
Superfície flutuante
--popover-foreground
Texto sobre popover
--primary
Marca / cabeçalhos
--primary-foreground
Texto sobre primary
--accent
CTAs, destaques (tomate)
--accent-foreground
Texto sobre accent
--secondary
Blocos suaves / resumos
--secondary-foreground
Texto sobre secondary
--muted
Fundos neutros
--muted-foreground
Texto secundário
--border
Bordas e divisores
--input
Bordas de input
--ring
Cor do foco (ring)
--highlight
Amarelo editorial
--success
Pontos fortes / OK
--destructive
Pontos fracos / erro
--destructive-foreground
Texto sobre destructive
--surface
Faixas / áreas elevadas
Foco (ring)
Inputs
Surface vs Card
bg-gradient-hero
Fundos de hero / banners
bg-gradient-accent
Botões e CTAs principais
bg-gradient-fade
Sobreposição em imagens
Uma única família para títulos e corpo, preservando o visual editorial do projeto.
text-6xl · font-black
Display 6XL
text-4xl · font-black
Heading H1
text-lg · font-semibold
Subtítulo / lead paragraph
text-xs · uppercase tracking-[0.18em]
Eyebrow / categoria
Prosa editorial
Regra: conteúdo longo (artigos/análises) usa .article-prose.
Links ganham accent e sublinhado no hover. Listas e headings têm espaçamento consistente.
Botões
Badges / micro-ui
Cards
Card padrão
Use bg-card, border-border e sombras soft.
Affiliate Float Bar
Padrão de CTA persistente em páginas de produto. JS alterna .is-visible.
Disponíveis via Tailwind: animate-fade-in e animate-fade-up.
Tokens suportam dark mode via classe .dark no <html> (ou no <body>).
Ex.: alternar para .dark muda background/foreground/card/border/ring.
Tipografia forte, contraste alto e conteúdo respirando.
Accent em ações, números de ranking e destaques editoriais.
Cards com `rounded-2xl`, sombra suave e hover sutil.
Escala tipográfica e espaçamentos pensados para 375px+.
