Referência interna
Sistema visual — 3 Lírios
Tokens e componentes do protótipo. Página de apoio (não linkada na navegação de usuário). Base: 11-HOME-TOKENS · 14-REFINO-HOME-DESKTOP.
Cores da marca — escalas 50–950
green
leaf
slate
Superfícies e ação
--surface-pageFundo de página (nunca #fff)--surface-raisedCard / superfície elevada--surface-sunkenSuperfície recuada--green-950Seção escura full-bleed--actionVerde de ação — green-700 · branco 8,9:1 (AAA)--errorErro de formulário — 7,4:1 sobre off-whiteTipografia — DM Sans (família única)
Display · 80px / 700
H1 de página · clamp 30–46 / 700 · lh 1.1 · tracking −0.022em
H1 de página (área interna) · clamp 24–34 / 700
H2 de seção · clamp 34–48 / 700
type-h3 · 21 / 700 — nome de card e de obra, título de passo
type-h4 · 16 / 700 — itens menores (tópicos do corretor, módulos, cards orbitais)
Corpo · 16 / 400 · --ink-70 (AAA)
Kicker · 12 uppercase · tracking .16em
Label / badge · 12 uppercase · tracking .10em (2º e único outro valor de tracking uppercase)
Cadência vertical da home (decisão de direção)
A home usa conscientemente a cadência “1 superfície clara + hero escuro + 1 seção leaf” — a alternância entre --surface-page, --surface-raised e --surface-sunken é sutil por escolha (Gate 1, doc 32, aceito por Caio em 2026-08-31). Não é pendência de contraste: os degraus fortes de separação ficam por conta do hero e da seção --section--leaf. Investir em degraus de off-white perceptíveis entre todas as seções fica registrado como opção para a v1.
Botões e CTAs
Hover = só cor (sem deslocamento). Foco visível AAA. O CTA da hero usa o efeito especular (WebGL).
Campos de formulário
Texto de apoio.
Mensagem de erro.
Badges de situação da obra
Cor + ícone (2ª pista) sempre. Texto 12/700 = “grande” para contraste.
Raio, sombra, motion
- Raio — campo 12px · md 16px · lg 24px · pill 999px
- Sombra — ambiente sutil em repouso; card de empreendimento no hover:
scale(1.03)+ sombra verde offset X=4 - Motion —
--ease-out· reveal-on-scroll com failsafes ·prefers-reduced-motionrespeitado - Margem lateral — 64px exatos em todas as seções · grid 8px/4px