Style Guide
Tokens, tipografia e componentes vinculados ao front-end. Tudo aqui reflete o estado real do código.
Cores
Paleta de cores do sistema. Cada swatch usa a variável CSS correspondente.
--color-blue #0065fc --color-blue-dark #003f9e --color-black #1a1a1a --color-text #2e2e2e --color-muted #737373 --color-border #e5e5e5 --color-surface #f5f5f5 --color-white #ffffff Tipografia
Duas famílias: DM Sans (body) e Poppins (headings/titles).
Font Families
Headings (Poppins Bold)
h1 — 2.5rem (40px) Calendário Sneakers
h2 — 2rem (32px) Próximos Lançamentos
h3 — 1.5rem (24px) Últimas Notícias
h4 — 1.25rem (20px) Cupons de Desconto
Body (DM Sans)
Regular 16px Encontre cupons exclusivos diretamente nos sites oficiais das marcas.
Medium 16px Encontre cupons exclusivos diretamente nos sites oficiais das marcas.
SemiBold 16px Encontre cupons exclusivos diretamente nos sites oficiais das marcas.
Bold 16px Encontre cupons exclusivos diretamente nos sites oficiais das marcas.
Tamanhos Especiais
Nav Menu — Poppins SemiBold 24px, ls -0.05em Calendário Sneakers
Card Title — DM Sans SemiBold 16px Nova coleção PUMA x POKÉMON chega ao Brasil
CTA Label — DM Sans Bold 11px uppercase Ver Agora
Discount — DM Sans Bold 40px 30% OFF
Promo Banner — Poppins 12px uppercase, ls 0.04em USE SDMLINKS PARA 10% NA CENTAURO
Border Radius
Tokens de arredondamento usados nos componentes.
--radius-xs 4px --radius-sm 4.8px --radius-md 8px --radius-lg 15px 50px Pill / Nav Layout & Spacing
Container e gutters do grid principal.
--container-page 1440px Largura máxima do conteúdo --gutter-desktop 55px Padding lateral desktop --gutter-mobile 20px Padding lateral mobile Botões
Variantes de botões usados no site.
Ícones
Ícones inline SVG usados nos componentes.
Componentes
Preview dos componentes do site em estado estático.
Toggle Switch
DM Sans 12px SemiBold, capsule border 1px, thumb bg blue, radius 50px Promo Banner (marquee)
bg blue-dark, Poppins 12px, white, uppercase, ls 0.04em, marquee 30s Coupon Card
border 1px, radius-md, padding 24px · Variante azul: bg blue, text white Breadcrumb
Poppins 14px, dot blue, último item sem link Section Header
● Próximos Lançamentos
VER TODOSDM Sans Bold, dot blue, link DM Sans 12px Bold uppercase Grid de Cards
Grids responsivos usados nas páginas de listagem.
Notícias 3 colunas · min 280px · gap 24px Calendário 4 colunas · min 250px · gap 24px Cupons 2 colunas · gap 16px · 4 cols em telas largas