⚠ PREVIEW v3 — Hub de Design System · Para aprovação do owner antes de aplicar ao site
Clubes de Assinatura

Preview v3 — Identidade Visual Acessível

Hub de Design System

Paleta v3 acessível (Royal Blue OKLCH), componentes da Home v3 e checklist de gates. Este hub é para aprovação do owner — não publicar site-wide antes do veredito.

Páginas de preview

Paleta v3 — Royal Blue Acessível (OKLCH)

Projetada para suportar daltônicos com protanopia, deuteranopia e tritanopia. Todas as cores cumprem WCAG AA (mínimo 4.5:1); cores primárias atingem AAA (7:1+).

blue-50
Fundo monograma #eef6ff
blue-200
Borda monograma #b1d2f4
blue-500
Foco / interativos
5.21:1 ✓ AA #006dc9
blue-600
CTAs primários
7.59:1 ✓ AAA #0051ab
blue-700
Hover CTA #003d83
text
Texto principal #111827
muted
Texto secundário #4b5563
surface
Fundo de seção #f9fafb

Cores semânticas (dupla codificação WCAG 1.4.1)

Sucesso fundo #f0fdf4
Sucesso texto
7.20:1 ✓ AAA #0f5132
Alerta fundo #fff3cd
Alerta texto
5.80:1 ✓ AA #664d03
Erro fundo #f8d7da
Erro texto
7.50:1 ✓ AAA #842029

Tipografia

100% system fonts — sem download de web font, sem FOUT/FOIT, CLS zero por tipografia. Serif aplicado unicamente ao monograma neutro.

H1 — clamp(2rem, 5vw, 3rem) / weight 800 / tracking −0.03em

Encontre o clube certo para você

H2 — clamp(1.4rem, 3vw, 2rem) / weight 700

Navegue por categoria

Lead — 1.1rem / color: muted / max-width: 46ch

Reunimos os clubes de assinatura do Brasil em um catálogo editorial independente.

Monograma — Georgia/serif / weight 700 / uppercase / letter-spacing 0.08em

CA

Componentes

Botões (CTAs)

Ver catálogo Abrir site oficial Ver ficha Explorar categorias Ação pequena Secundária pequena

min-height: 44px em todos os botões. CTAs externos usam target="_blank" + rel="noopener noreferrer" + aria-label com "(abre em nova aba)". Proibido: "Comprar", "Assinar" — apenas "Abrir site oficial" ou "Conhecer clube".

Monograma Neutro (para clubes sem logo)

Card (16:9)

CC

Detalhe (1:1)

VC

Mini (sidebar)

AC

Fundo #eef6ff · Borda #b1d2f4 · Texto #0051ab (contraste 7.59:1 AAA) · Georgia/serif bold · uppercase · letter-spacing 0.08em
Algoritmo: divide nome em palavras, filtra stopwords (de, do, da, e, em...), extrai iniciais das 2 primeiras significativas.

Badges e Tags

DESTAQUE Gastronomia & Bebidas ✓ Verificado ▲ Em revisão

Badges de destaque têm rótulo textual (nunca apenas cor). Cores semânticas com dupla codificação: texto + ícone — WCAG 1.4.1.

Aspect-ratio (CLS zero)

Cards listagem: 16:9

16:9 reservado

Ficha clube: 1:1

1:1

Post de blog: 2:1

2:1

Aspecto fixo reserva espaço antes da imagem carregar → CLS = 0. object-fit: contain com padding 1.5rem (24px) de respiro para logos.

Gates inegociáveis

  • Lighthouse/CWV — meta 100/100/100/100
    System fonts (sem web font) elimina CLS por swap. Aspect-ratios estáticos eliminam CLS de imagem. LCP ≤1s: conteúdo hero é HTML puro, sem imagem above-the-fold bloqueante. INP: sem listener por card — delegação única no body.
  • Gating eligible + published
    Todos os links do catálogo respeitam eligibility_status === "eligible" AND publication_status === "published". 393 clubes no dataset; 369 publicados. Contagens do preview usam os 393 do dataset validado (DCA-40).
  • JSON-LD sem sinal transacional
    Schema: WebSite, Organization. Sem Product, Offer, AggregateRating para clubes. FAQ usa FAQPage + Question + Answer (válido para SEO não-transacional).
  • CTA target/rel corretos
    Todos os links externos: target="_blank" rel="noopener noreferrer" + aria-label com "(abre em nova aba)". Proibido: "Comprar", "Assinar". Permitido: "Abrir site oficial", "Conhecer clube".
  • robots.txt + sitemap intactos
    Preview pages têm meta robots noindex,nofollow — não entram no sitemap. O robots.txt existente não foi alterado.
  • Acessibilidade WCAG AA
    blue-600 (#0051ab) em fundo branco: 7.59:1 (AAA). blue-500 (#006dc9): 5.21:1 (AA). min-height 44px em todos os botões. skip-link, :focus-visible, ARIA labels, semântica HTML5. Nenhum estado comunicado apenas por cor (dupla codificação com ícone + texto).
  • Newsletter — integração de mailing (dívida operacional)
    O formulário de newsletter renderiza corretamente no preview mas não tem backend conectado. Requisito registrado como dívida operacional — destravar após aprovação do owner.