Tokens
3. Camada 2 — Semânticos
Título completo no canon: Camada 2 — Semânticos (light + dark)
Grupos entregues (valores completos no JSON/CSS): surface (page, subtle, raised, sunken, overlay, brand, brand-deep, inverse) · text (primary, secondary, muted, disabled, brand, inverse, on-brand, link) · border (subtle, default, strong, focus, interactive — v1.12) · action (primary±hover/active, secondary, ghost, destructive) · feedback (success/warning/danger/info × bg/text/border/solid) · chart (cat-1…6, positive, negative, grid, axis).
Decisões dignas de registro:
action-primarylight = turquesa-600 (verde institucional). Dark = turquesa-300 com texto turquesa-900 (7.39:1) — padrão moderno de "fill claro + texto escuro" no dark, em vez de escurecer o botão.- **
text-primary= #0B3330 (v1.9 — SUPERSEDE decinza-900 #242E34). A v1.0 superseava o#2a3942ad-hoc do HTML v1; a v1.9 tinge a tinta na família da marca.
NORMALIZAÇÃO DO
focus-ring— v1.10 (2026-08-14)#O que muda: nada de valor. O
--seed-focus-ringdo tema claro deixa de consumir o primitivo--seed-brancoe passa a consumir o semântico--seed-surface-page, que é o que o bloco escuro já fazia.surface-pageclaro é#FFFFFF, então a cor renderizada é idêntica — o que muda é a EXPRESSÃO.Por que importa, e o achado veio de fora: os previews
componentesetokensjá usavamsurface-pagenos DOIS temas, e a guardaparidade-previews.pyos acusou de divergir do gêmeo. Ao apurar, eles estavam mais corretos que o canônico: um token semântico composto não deve depender de primitivo, e ter expressão diferente por tema para o mesmo papel é a porta por onde um tema envelhece sem o outro. Quem se ajustou foi o gêmeo.Efeito colateral bom: o
--seed-brancodeixa de ser exigido por qualquer preview que embuta ofocus-ring. A pendência de--seed-brancosem definição emformfieldfecha por consequência, sem precisar acrescentar token.COMPOSIÇÃO E CHROME — v1.11 (2026-08-14 · CP-P3, executa o SUP-6 em escopo mínimo)#
Contexto para leitor novo: o gate visual da Fase 2 da composição (2026-08-14, vereditos G1–G5 registrados no
seed-composicao.md§11) adotou o gradiente do rail (CP20, G2), aprovou a paleta de entidade (CP23, G3) e o marcador de "agora" (CP24, G4). A adoção do gradiente disparou o gatilho do SUP-6 (hover/pressed em cinza sólido falham sobre superfície gradiente), resolvido aqui em escopo mínimo: dois tokens de overlay, não a rampa alpha completa do C27 (custo declarado dela: valores a olho, reauditados a cada superfície — e o CP20 proíbe gradiente fora do chrome, então só existe UMA superfície gradiente no sistema).Os quatro grupos são INVARIANTES DE TEMA — nenhum se redeclara no bloco dark dos gêmeos, e cada um declara aqui o seu par light/dark (que é o mesmo valor) com o porquê:
Token Valor (light = dark) Por quê invariante Medido --seed-rail-backgroundlinear-gradient(180deg, #006C62 0%, #005048 100%)(turquesa-700 → turquesa-800)Por DECISÃO — SH15: chrome não segue o tema; CP20 exige semântico próprio, senão o tema escuro vira regra manual (o ClickUp escreveu 22 regras à mão) Branco sobre os dois extremos, não na média: 6,32 e 9,37 (≥4,5) --seed-chrome-overlay-hoverrgba(255, 255, 255, 0.12)Por CONSTRUÇÃO — compõe sobre superfície invariante (o rail) Rótulo branco sobre a COMPOSIÇÃO (overlay composto sobre cada extremo): 4,88 e 6,82 (≥4,5) --seed-chrome-overlay-activergba(255, 255, 255, 0.14)Idem. É o estado pressionado; o item ATIVO ( aria-current) segue sendo a pílula clara do SH15-bBranco sobre a composição: 4,68 e 6,50 (≥4,5) --seed-entity-1…6+--seed-entity-N-inkE1 #11B0A0+#242E34· E2#D49400+#242E34· E3#01B3E0+#242E34· E4#005048+#FFFFFF· E5#006783+#FFFFFF· E6#7B5500+#FFFFFFPor CONSTRUÇÃO — o par medido é interno ao chip (fundo × tinta) e não inverte com o tema; o CP23 define um hex por posição Admissão CP22 (≥4,5 com a tinta declarada): 5,11 · 5,30 · 5,63 · 9,37 · 6,43 · 6,68 --seed-marker-now#098475(turquesa-600)Por DECISÃO — CP24: terceiro membro nomeado da classe invariante de tema (SH15 · DG12 · CP24) ≥3,0 (non-text) contra as cinco superfícies canônicas: 4,60 · 4,23 · 4,05 · 3,72 · 3,31 Decisões de forma, com as alternativas descartadas: (a) Tinta POR POSIÇÃO (
entity-N-ink), não só o parink-dark/ink-lightcom mapa em prosa: consumidor que precisa saber um mapeamento de cor é exatamente a classe de defeito que produziu a E-CP-01 (artefato consumindo a escala errada). Custo: 6 tokens a mais; ganho: o consumo virabackground: var(--seed-entity-3); color: var(--seed-entity-3-ink)sem decisão local. (b) NÃO redeclarar os invariantes no bloco dark (nem no espelhoprefers-color-scheme): redeclarar valor idêntico é duplicação, e duplicação é o vetor de deriva que os gêmeos existem para matar — quem editar um bloco e esquecer o outro criaria divergência silenciosa. No JSON, os quatro grupos ficam semseed.modede propósito (a ausência declara a invariância; a guardaparidade-tokens.pyG2 pula a exigência de bloco dark exatamente nesse caso). (c) Overlays em vez da rampa alpha do C27: veredito do gate registrado no MANIFESTO v6.7 — a rampa completa segue adiada porque só o chrome admite gradiente. (d) Os alphas .12/.14 não foram inventados: são os dois valores que os artefatos aprovados já praticavam (o shell no hover; o preview da composição no ativo do gate), fixados depois da medição em composição — a quinta camada existe porque par isolado verde já escondeu 1,48.Fronteira (mesma do CP23/PN7): o DS declara o MECANISMO de identidade; qual entidade usa qual posição vem do PRODUTO, via
data-ident="1..6". Acima de 6 entidades repete-se a cor e distingue-se pelo glifo (nunca letra — decisão do MANIFESTO v6.4, mantida); nunca nasce uma sétima cor.
border-interactive— v1.12 (2026-08-14 · FECHA A PENDÊNCIA SH-P1/PN-P5)#Contexto para leitor novo: a SH-P1 nasceu no bloco 6A (2026-08-11), achada pelo
contraste-shell.py: nenhum token semântico de borda passava 3:1 contrasurface-raisedno tema claro —border-defaultmede 1,49 eborder-strong2,53 — e o campo de busca do shell consumia o primitivocinza-500por empréstimo declarado, violando a lei "componente consome semântico". O CP17 já havia fechado a metade "separação de peça" da pendência (separação virou tarefa do par sombra+anel); restava a metade menor: fronteira de componente interativo (SC 1.4.11, piso 3:1). A regra GI2 mandava fechá-la "quando a camada 2 fosse editada por outro motivo" — o motivo foi a CP-P3 (v1.11), e o Rafael decidiu fechar na mesma janela (2026-08-14: "vamos resolver logo").O token:
--seed-border-interactive=cinza-500#788F9D, nos dois temas, medido contra as seis superfícies onde borda de componente aparece: raised/page/subtle claro 3,38 / 3,38 / 3,11 · raised/page/subtle escuro 4,50 / 5,51 / 5,05 — todos ≥3,0. Não é invariante de tema: o slot dark fica declarado (o valor idêntico hoje é coincidência medida, não lei — o dark pode divergir no futuro sem mudar a expressão), diferente dos quatro grupos da v1.11, invariantes por decisão ou construção.Alternativa descartada, com o número:
cinza-600#617683também passa as seis (3,21–4,74) — mas mudaria a cor renderizada que o gate visual do shell já aprovou, sem nenhum motivo além da troca: a pendência pedia promoção de expressão (primitivo → semântico), não de valor. Mesma lógica da normalização dofocus-ringna v1.10.
row-selected-*— v1.13 (2026-08-15 · F7.2 · fecha uma lacuna que o sistema já vivia)#Contexto para leitor novo: ao produzir o gabarito A2 (
tela-lista.html), a linha selecionada foi pintada com o primitivoturquesa-100. Ocontraste-f72.pyreprovou: 1,57 no tema escuro. A causa é estrutural, não de escolha — um primitivo é fixo, e realce de seleção precisa virar por tema, senão reprova sempre em um dos dois lados.Ao procurar o semântico certo, o achado: a bancada
banco-dados.htmljá consumia--seed-row-selected-bg,-texte-borderdesde a Fase 3 — com definição LOCAL, dentro do próprio arquivo, ausente deste gêmeo. O nome existia no sistema sem dono no canônico. Não era drift de valor, era drift de PROPRIEDADE: enquanto o token não é do gêmeo, cada artefato que precisar dele reinventa o valor, e ninguém mede o par.Os tokens (adição pura — nenhum valor anterior muda; os hex são exatamente os que a bancada já usava, para que a promoção não altere um pixel do que o gate já aprovou):
Token Claro Escuro Papel --seed-row-selected-bg#E8FBF7(turquesa-50)#00352F(turquesa-900)fundo da linha selecionada --seed-row-selected-text#242E34(cinza-900)#E3EBF0(cinza-100)tinta sobre o realce --seed-row-selected-border#098475(turquesa-600)#66D1C2(turquesa-300)marcador de 3px na borda da linha Medido:
bg × text= 12,53 claro / 11,12 escuro (piso 4,5) ·border × bg= 3,42 / 4,64 (piso 3,0 — o marcador é elemento de interface, SC 1.4.11).Alternativa descartada: manter o realce como primitivo e escrever a exceção do tema à mão em cada artefato — que é literalmente o que o CP20 alerta e o que a
tela-lista.htmlfazia antes desta edição. Guarda:paridade-tokens.pyganhou quatro verificações, incluindo uma que exige que obgmude entre os temas — realce fixo é o defeito, não a ausência do token. A guarda foi provada real: rodada contra o CSS v1.12, reprova em 7.SUPERSEDE DA TINTA DE TEXTO — v1.9 (2026-08-13)#
O que muda: os três tokens de tinta de CONTEÚDO passam da família cinza para a família turquesa da marca, nos dois temas. Bordas, superfícies e a régua de ação NÃO mudam.
Token Antes (claro/escuro) Agora (claro/escuro) Croma Pior contraste text-primary#242E34/#E3EBF0#0B3330 / #DDECE8 0,063 → 0,157 11,49 → 11.37 text-secondary#4D606C/#ACBECA#2F5A54 / #A3C4BE 0,122 → 0,169 5,43 → 6.42 text-muted#788F9D/#90A6B3#40706A / #8FB5AD 0,145 → 0,188 2,80 (reprovava) → 4.65 POR QUÊ. O
estudo-viver-de-ia.md§2.1 mede a tinta de texto da plataforma em #0A1F3B — croma 0,192, declarada como "navy-tinta, não preto puro, MESMA FAMÍLIA do escuro estrutural". Como texto e borda ocupam a maior parte da área de qualquer tela, tinta neutra faz a tela inteira ler cinza mesmo com a âncora colorida — foi o achado do gate do Rafael em 2026-08-13. Os valores adotados ficam em 82% e 88% do croma da referência: mesma família, na mesma intensidade, sem exagero.O QUE FOI DESCARTADO, com o número que descartou. (a) Usar primitivos existentes da escala (
turquesa-900+turquesa-700): o secundário daria croma 0,424 — 2,2× o da referência. Deixaria de ser tinta discreta e viraria verde forte; serve a título, não a corpo de texto. (b) Esverdear BORDAS e SUPERFÍCIES, como a 1ª redação da proposta previa: a plataforma não faz isso — as bordas dela medem croma 0,027/0,031 e a página é branco puro; o próprio estudo diz que "a sensação de cinza claro vem só das bordas e sombras". E há razão nossa, medida: a âncora do painel é cromática, e o mecanismo P4 (ritmo neutro↔cromático) depende de a página ser neutra. Contrasurface-sunkenesverdeada a âncora cairia de 2,71 para 2,21, e a sériechart-cat-1cairia junto — perderíamos contraste de saturação exatamente no único elemento que precisa dele.SUPERSEDE FORMAL DA RESTRIÇÃO "NENHUM HEX NOVO". Os quatro valores de tinta não existem na escala de primitivos. Eles entram como valores SEMÂNTICOS — nunca como primitivos —, e os 8 hex canônicos da paleta 2018 seguem intocados, que é a lei do
marca-seed.md. Precedente exato: a escala categórica estendida fez este mesmo supersede na v1.6 destes gêmeos.ERRATA FECHADA NA MESMA EDIÇÃO (regra GI2): o
text-mutedREPROVAVA no canônico vigente.#788F9D(cinza-500) é declarado para "metadados, placeholders, captions" — texto pequeno, piso 4,5 — e media 3,38 contra page/raised, 3,11 contra subtle e 2,80 contra sunken: reprovava nas quatro superfícies do tema claro. O defeito é anterior a esta rodada e não foi introduzido por ela; foi encontrado na medição que precedeu esta edição.cinza-600 #617683também reprovaria (3,93). O valor adotado é o único candidato medido que fecha os dois requisitos ao mesmo tempo — família e piso nas quatro superfícies.A RÉGUA DE AÇÃO NÃO MUDA, E ISSO É O REGISTRO MAIS IMPORTANTE DESTA EDIÇÃO. Conferido nos gêmeos:
action-primaryjá era#098475(turquesa-600) no claro e#66D1C2(turquesa-300) no escuro. A camada de tokens nunca saiu do §3.5 domarca-seed.md— só o preview do painel havia desviado, com o azul, e o desvio foi retirado. Nenhuma linha de token de ação precisou mudar.
surface-brand-subtle=#E8FBF7no claro /#1A3833no escuro (NOVO em 2026-08-17). É a superfície de marca sutil: balão de mensagem própria, faixa de destaque leve — coisas que precisam de tinta de marca sem virarsurface-brand. Nasceu de um defeito, e o defeito era DESTA camada, não do artefato. Atela-chat.htmlpintava o balão da mensagem própria com a primitiva--seed-turquesa-50porque não existia semântico para isso — e primitiva não inverte com o tema, enquanto o texto (--seed-text-primary) inverte: no tema escuro o par media 1,14 contra o piso 3,00, ou seja, mensagem branca sobre branca (defeito BT-P6, achado pelavalidacao/guarda-gi2.mjsna primeira varredura da pasta inteira). O artefato alcançou a primitiva porque era a única coisa disponível — culpar o artefato aqui seria culpar o sintoma. Alternativas descartadas: (a) reusar--seed-row-selected-bgou--seed-action-secondary-bg, que já carregam#E8FBF7no claro — recusado porque o semântico estaria mentindo: balão de mensagem não é linha selecionada nem fundo de botão secundário; (b) usar--seed-surface-subtlecomo o balão alheio já usa — recusado porque apagaria a distinção de tinta entre mensagem própria e alheia, que é desenho aprovado. O valor escuro#1A3833não é valor novo: é o que esta camada já escolheu para superfície de marca que assenta na página (--seed-action-secondary-bgno escuro), então a coerência é com decisão existente. Medido contra--seed-text-primary: 12,79 no claro e 10,40 no escuro, piso de texto 4,50. E era o único consumo de--seed-turquesa-50no acervo inteiro — medido por comando em 29 artefatos.surface-brand-deep= turquesa-700/800. Supersede formalmente a "variante não-oficial tolerada #0d8f82" registrada nomarca-seed.mdv4 — a necessidade (fundo de capa profundo) agora tem resposta oficial dentro da rampa.feedback-successusa a família turquesa/verde institucional. Alternativa descartada: criar rampa verde-folha nova (adicionaria cor fora da marca para resolver ambiguidade que ícone+contexto já resolvem; na SEED, êxito É verde da marca).chart: sequência categórica de ordem fixa —cat-1 turquesa-400, cat-2 dourado-300, cat-3 azul-500, cat-4 turquesa-800, cat-5 cinza-400, cat-6 dourado-700SUPERSEDIDA na v1.5 pela categórica ESTENDIDA da §3c (2 matizes exclusivos de dado; sequência turquesa → dourado → magenta → azul → violeta → azul-800; o cinza sai da categórica e fica exclusivo de "sem dado"). Positivo/negativo = turquesa-500/vermelho-500 (inalterado). Regra de acompanhamento inalterada: diferenciar séries também por forma e espessura (acessibilidade).