Design System
Referência self-contained dos tokens e componentes usados no site — grid editorial v3: container --wrap 1440px / 64px de gutter, 12 colunas, banda dark → paper → dark → footer em cada página, sem linha entre seções. Copiado de src/styles/ — mudou um token ou componente lá, atualize aqui também. Página noindex, sem scanlines, sem grid decorativo, sem glow, cantos retos.
Contexto escuro (dark) — hero e banda de fechamento
Contexto paper — banda de corpo em toda página, não um acento isolado
Lead de 20px, no máximo 640px de largura — usado em .sec-lead e .lead.
Corpo padrão do site, 17px / 1.6 de altura de linha.
§01 · RÓTULO DE SEÇÃO · META
Lead opcional de 20px, no máximo 640px — explica a seção antes do corpo.
Esta banda inteira é .band--paper — a mesma combinação usada no corpo de toda página, entre o hero dark e o fechamento dark. Ela inverte as variáveis de contexto (--bg, --text, --orange/--magenta/--cyan) para as variantes "ink" — o mesmo .sec, .card e .fig funcionam sem CSS duplicado. Sem linha entre seções: .sec + .sec { padding-top: 0 } — a separação vem da mudança de banda e do espaçamento, nunca de um border-top.
split--6-6
Composições de duas colunas no grid de 12: .split (7/5 por padrão) mais os modificadores --5-7, --6-6, --4-8, --8-4 e --sticky.
coluna 2
Cada lado do split pode conter qualquer composição — cards, strip, term, form.
Surface com borda, título serif — .card--featured usa a cor do tom na borda.
Mesma forma, .card--featured-magenta — segunda cor de destaque por página.
Texto curto de apoio para a coluna, régua no topo em vez de borda lateral.
Texto curto de apoio para a coluna, régua no topo em vez de borda lateral.
Texto curto de apoio para a coluna, régua no topo em vez de borda lateral.
Um traço próprio por produto (src/components/ProductIcon.tsx), grid de 24px, um só peso — nunca o antigo selo monograma quadrado.
Uma linha de apoio curta antes dos botões de ação.