WAD · interno
Design System
DOC básico do tema — cores do logo (#ED1C24 · #F9B233 · #F58220) + neutros × 9 tons (principal 500), tipografia e componentes.
Cores
Marca do logo oficial (SVG): vermelho #ED1C24, amarelo #F9B233, laranja #F58220, branco #FFFFFF.
O tom 500 é o canónico. Branco puro: --wx-0 #FFFFFF.
#ED1C24#F9B233#F58220#FFFFFFBrand
Amber
Orange
Ink
Neutral
Mist
Action
Aliases semânticos
--wx-brand→ brand-500#ED1C24(logo)--wx-amber→ amber-500#F9B233(logo)--wx-orange→ orange-500#F58220(logo)--wx-bg→ mist-500 (dark: ink-900-ish)--wx-surface→ wx-0--wx-ink→ ink-500 (dark: invertido)--wx-muted→ #4A4A4A / dark #C4C4C4 (AA)--wx-action→ action-500
Tipografia
Display: Plusnet Creighton Pro Bold (h1–h6, títulos de catálogo). UI/corpo: Manrope 400 / 500 / 600 / 700.
Impermeabilizantes WAD
Catálogo de produtos
Linha industrial
Categorias
Subtópico técnico
Label de secção
Manta asfáltica poliéster 3mm — exemplo de card
Texto de corpo para descrições de produto, páginas institucionais e lead. Line-height 1.5. Use para parágrafos longos e copy de suporte.
SKU · categoria · rodapé · figcaption
400 Regular 500 Medium 600 Semibold 700 Bold
Espaço & forma
--wx-radius 12px
--wx-gap 1.25rem
CTA height 2.35rem
--wx-header-h
--wx-sidebar 280px
--wx-max 1200px
Botões
Card: Detalhes (flex 1) + WA quadrado action-500. PDP: .wx-btn--wa / ghost.
Card de produto
Forms & busca
Toolbar catálogo
Título de secção: Destaques
Slots (wireframe)
Placeholders ainda usados em mocks — a eliminar aos poucos.