Tokens

Gerado de estilo/00-tokens.css por ds/gera.py. Editar esta pagina a mao nao serve: o proximo gera.py sobrescreve.

← voltar
Estes tokens sao a mesma copia que o prototipo usa. O prototipo carrega estilo/00-tokens.css por link, nao tem copia propria. Trocar um valor aqui muda o produto em todos os lugares que o usam, sem procurar e substituir.
Duas camadas, no mesmo arquivo. Primitivo é nomeado pelo valor--acao, --t2 — e quem cria componente escolhe um. Papel é nomeado pela função--sup, --borda, --forte-neutro — e é o que a Regra 3 do AGENTS.md exige usar dentro de componente: pedir um papel, nunca escolher um primitivo direto. Quando o valor abaixo é só var(--outro-nome) (marcado alias), é sinal de papel apontando pro primitivo que o sustenta.

Superficie · 19

--decor#B0B0BAescuro: #35353Fcopiar
--papel#FFFFFFescuro: #101014copiar
--shellrgba(255,255,255,.94)escuro: rgba(16,16,20,.94)copiar
--mundo#F2F2F6escuro: #0A0A0DO FUNDO DA JANELA — a "prancheta" atrás de tudo. Existir como token é correção de defeito, não adição (25/ago/2026): o valor vivia como `background:#F2F2F6` literal na regra do body, logo abaixo,...copiar
--linhargba(20,20,34,.10)escuro: rgba(255,255,255,.11)copiar
--linha-2rgba(20,20,34,.055)escuro: rgba(255,255,255,.06)copiar
--linha-3rgba(20,20,34,.20)escuro: rgba(255,255,255,.22)copiar
--veu-modalrgba(20,20,34,.32)escurece o que fica atrás de uma camada modal centrada (o véu da busca Ctrl/Cmd+K). Não muda por tema de propósito, igual --sombreia: o papel dele é escurecer, não servir de hairline visível...copiar
--sup#FFFFFFescuro: #101014copiar
--sup-tintavar(--tinta) aliascopiar
--sup-2rgba(20,20,34,.05)escuro: rgba(255,255,255,.055)superfície basecopiar
--sup-2-tintavar(--t2) aliascopiar
--sup-3rgba(20,20,34,.08)escuro: rgba(255,255,255,.09)superfície suavecopiar
--flutuargba(255,255,255,.98)escuro: #16161Chover de itemcopiar
--flutua-tintavar(--ink) aliascopiar
--caladavar(--t3) aliaspopover/menucopiar
--bordavar(--linha) aliastexto secundáriocopiar
--borda-fortevar(--linha-3) aliasborda de contornocopiar
--sombreia#000escuro: #fffo agente de ESCURECIMENTO: o que se mistura a um preenchimento cheio pra produzir o hover dele. Preto puro de propósito, e não --tinta: --tinta é papel de texto e tem viés azul (#16161C), então...copiar

Texto · 10

--tinta#16161Cescuro: #F5F5F8grafite — o dado mora aqui. t2 8,9:1 · t3 4,8:1 — passam AA para texto pequeno, mas só contra --papel (branco); nenhum dos dois foi medido contra composição translúcida real. O tom mais claro...copiar
--ink#2A2A34escuro: #E6E6ECcopiar
--ink-2#4A4A57escuro: #C2C2CEcopiar
--t2#494954escuro: #9C9CAAcopiar
--t3#71717Descuro: #8A8A98copiar
--t4#666670escuro: #8A8A98copiar
--off#54545Fescuro: #8A8A98copiar
--off-t#F1F1F3escuro: rgba(255,255,255,.06)copiar
--forte-neutrovar(--tinta) aliascopiar
--cheio-tinta#fffescuro: #0A0A0Dtinta sobre preenchimento CHEIO de qualquer tom semântico: badge sólido de ok, atenção, risco, calado. São dois papéis e não um: --marca-tinta é o par da marca e muda se a marca mudar; este...copiar

Marca e acao · 7

--acao#3D2177escuro: oklch(.75 .15 295)ROXO OFICIAL DE MARCA (Indigo Velvet #3D2177, do manual em brandfetch). Antes era #6106D2, amostrado de print do GeoImóvel. O manual manda, e o tom oficial ainda é MAIS sóbrio: 12,5:1 no branco...copiar
--acao-2#2C1758escuro: oklch(.82 .13 295)copiar
--acao-fracorgba(61,33,119,.06)escuro: color-mix(in srgb,var(--acao) 14%,transparent)copiar
--acao-bordargba(61,33,119,.28)escuro: color-mix(in srgb,var(--acao) 38%,transparent)copiar
--marca-ouro#FCB830dourado de marca: só a marca usa. Âmbar nesta interface já significa "atenção", então dourado em qualquer outro lugar colidiria de sentido.copiar
--marcavar(--acao) aliascopiar
--marca-tinta#fffescuro: #14101Fcopiar

Semantico · 12

--okoklch(0.627 0.194 149.214)green-600 · componente. ATENÇÃO, medido em 25/ago/2026 e a afirmação anterior estava otimista: este tom dá 3,22:1 sobre --papel (branco) e 2,88:1 sobre --mundo (o fundo da janela). Ou seja, ele...copiar
--ok-txoklch(0.448 0.119 151.328)escuro: oklch(.792 .209 151.711)green-800 · texto, 7,13:1 no brancocopiar
--atoklch(0.646 0.222 41.116)orange-600 · componente, 3:1copiar
--at-txoklch(0.553 0.195 38.402)escuro: oklch(.75 .183 55.934)orange-700 · texto, 5,22:1 no brancocopiar
--nooklch(0.577 0.245 27.325)red-600 (destructive) · componentecopiar
--no-txoklch(0.505 0.213 27.518)escuro: oklch(.704 .191 22.216)red-700 · texto, 6,42:1 no brancocopiar
--infooklch(0.546 0.245 262.881)blue-600 · componente, 5,25:1copiar
--info-txoklch(0.488 0.243 264.376)escuro: oklch(.707 .165 254.624)blue-700 · texto, 6,83:1 no brancocopiar
--ok-t#E7F5EBescuro: color-mix(in srgb,var(--ok) 16%,var(--mundo))Tingimentos de fundo (--ok-t etc.) NÃO foram recalculados nesta migração — ficam com o valor antigo, derivado do tom escuro anterior. Recalcular exige o oklch-50 real do registry pra cada matiz,...copiar
--at-t#FBF3DAescuro: color-mix(in srgb,var(--at) 16%,var(--mundo))copiar
--no-t#FCEAE8escuro: color-mix(in srgb,var(--no) 16%,var(--mundo))copiar
--info-t#E5EEFBescuro: color-mix(in srgb,var(--info) 16%,var(--mundo))copiar

Dado · 5

--c1#5B63A8categórica das camadas: um conjunto harmônico, não cinco cores soltascopiar
--c2#B08430copiar
--c3#AB5252copiar
--c4#3F8069copiar
--c5#6E7480copiar

Espacamento · 12

--rail162pxcopiar
--gut16pxcopiar
--space-14pxcopiar
--space-28pxcopiar
--space-312pxcopiar
--space-416pxcopiar
--space-624pxcopiar
--space-832pxcopiar
--space-1248pxcopiar
--space-1664pxcopiar
--l120pxfecha com Esc e com clique fora — Radix Dialog já faz os dois por padrão, sem código extra, contanto que ninguém sobrescreva onEscapeKeyDown/onPointerDownOutside sem motivo (Regra 5).copiar
--gcol22px minmax(0,1fr) 96px 296px 28pxcopiar

Icone · 5

--icon-xs8pxshadcn md — considerado e rejeitado, ver acimacopiar
--icon-sm12pxponto, indicador mínimocopiar
--icon-md14pxdentro de badge/tag — já é o que `.bdg{--is:12px}` usacopiar
--icon-lg16pxcheckbox, radiocopiar
--icon-xl20pxbotão, item de menu — padrão de uso mais comumcopiar

Sombra · 4

--sh-10 0 0 1px rgba(20,20,34,.055), 0 1px 2px -1px rgba(18,18,32,.06), 0 2px 4px rgba(18,18,32,.04)escuro: 0 0 0 1px rgba(255,255,255,.06)profundidade: uma estratégia só, sombra em camadas. CONFERIDO contra mercado (usuário, `tokens-icone-sombra-motion-mercado.md`, 01/set/2026): a régua sugerida copia o shadcn puro, sombra em preto...copiar
--sh-20 0 0 1px rgba(20,20,34,.055), 0 1px 2px rgba(18,18,32,.05), 0 8px 20px -6px rgba(18,18,32,.10), 0 24px 56px -16px rgba(18,18,32,.16)escuro: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px -8px rgba(0,0,0,.6)copiar
--sh-30 0 0 1px rgba(20,20,34,.06), 0 2px 4px rgba(18,18,32,.05), 0 14px 32px -8px rgba(18,18,32,.13), 0 40px 80px -20px rgba(18,18,32,.20)escuro: 0 0 0 1px rgba(255,255,255,.10), 0 16px 48px -12px rgba(0,0,0,.75)copiar
--sh-acao0 2px 8px color-mix(in srgb, var(--acao) 24%, transparent)escuro: 0 2px 10px color-mix(in srgb,var(--acao) 30%,transparent)realce da AÇÃO PRIMÁRIA: a única sombra colorida do sistema, e só o botão de peso marca a usa. As --sh-1/2/3 acima são profundidade neutra; esta é ênfase, então é papel diferente e não um quarto...copiar

Foco · 2

--anelcolor-mix(in srgb,var(--t2) 65%,transparent)FOCO É CINZA NEUTRO, NUNCA A MARCA — decidido em PADRAO-VISUAL-DATALAND.md §2: "o roxo chama muita atenção pro campo enquanto digita, um cinza escuro é mais discreto e foca no conteúdo". Não é...copiar
--focus-ring-width3pxCONFERIDO contra mercado (usuário, `tokens-mercado-avancado-dataland.md`, 01/set/2026, rodada 6): a LARGURA de 3px converge de verdade — shadcn, Landbank (aqui) e os dois componentes medidos ao...copiar

Motion · 1

--easecubic-bezier(.23,1,.32,1)copiar

Raio · 6

--r6pxEXCEÇÃO REGISTRADA À REGRA 10 (usuário, Alessandro, 01/set/2026) — não é reversão da pesquisa de mercado, é a exceção por escrito que a própria Regra 10 exige quando alguém escolhe fugir do padrão...copiar
--r-gvar(--r) aliascopiar
--r-mcalc(var(--r) * .67)copiar
--r-scalc(var(--r) * .67)copiar
--r-xscalc(var(--r) * .5)copiar
--r-cheio999pxcopiar

Tipografia · 19

Aa
--fs-exibicao40pxdisplay · numero-hero do resultado, raríssimocopiar
Aa
--fs-titulo-132pxh1 · titulo de telacopiar
Aa
--fs-titulo-224pxh2 · titulo de secaocopiar
Aa
--fs-titulo-319pxh3 · titulo de bloco/cartaocopiar
Aa
--fs-destaque15pxcorpo enfatizado, texto de introcopiar
Aa
--fs-corpo14pxcorpo padrao — o que body{} ja usavacopiar
Aa
--fs-pequeno13pxlegenda, nota, texto secundariocopiar
Aa
--fs-mono12.5pxnumero tabular, codigo, dado monoespacadocopiar
Aa
--fs-rotulo12pxrotulo em caixa alta, gutter, texto minimo. CORRIGIDO (31/ago/2026): era 11px, subiu pra 12px. As quatro referencias que o paragrafo acima cita foram medidas ponto a ponto (Stripe, Linear, Carbon,...copiar
Aa
--fw-normal400Dois pesos no sistema. 500 e reservado pra tecla (kbd), nunca pra texto corrido: um terceiro peso no meio de 400 e 600 fica ambiguo de longe.copiar
Aa
--fw-forte600copiar
Aa
--fw-tecla500copiar
--fonte'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serifcopiar
--fonte-mono'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospaceCódigo, nome de token, dado tabular. Uma fonte carregada e não a do sistema porque a do sistema muda por máquina, e aí a mesma tabela de token tem largura diferente pra cada pessoa do time.copiar
--tr-display-.03em32-40px · título de tela e displaycopiar
--tr-titulo-.015em19-24px · título de seção e de blococopiar
--tr-corpo0emcorpo: zero. Inter já é desenhada pra ser lida assim. `0em` e não `0`: em CSS os dois são idênticos, mas o exportador de DESIGN.md publica isto como Dimension, e o validador do formato reprova...copiar
--tr-rotulo.06emrótulo em CAIXA ALTA pequeno — precisa de ar, não de apertocopiar
--tr-gutter.12emrótulo de gutter, o menor de todos: mais ar aindacopiar

Outros · 8

--dourado#846014copiar
--disabled-opacity.5MIGRADO pra shadcn (usuário, 01/set/2026): era `.45` literal, repetido em cinco arquivos (`.btn`/`.tgl`/`.opt`/`.inp-lei`/`.ordena button`), nunca um token — violação da Regra 3 anterior a esta...copiar
--card-padding24pxcopiar
--card-radius14pxcopiar
--card-gap-grade24pxxl do shadcn — considerado e rejeitado, ver acimacopiar
--card-compacto-padding16px16px em grade mais densa (>4 cards visíveis)copiar
--card-compacto-radius8px12px se precisar de mais densidade aindacopiar
--dialog-cmdk-radius12pxNOVO, sem uso ainda — navegação solta, destaque, cabeçalhocopiar