Tokens

Já decidido

• Os tokens de cor existem e este site os consome: base.css (neutros, semânticos, assinaturas), um CSS por marca com sua escala e funções em claro e escuro, all.css com todas as marcas sob data-brand, e tokens.json no formato DTCG (ADR-0015).
• Os tokens de tipografia existem e este site os consome: type.css com as fontes, a escala, as entrelinhas, o tracking, a medida e as funções (--type-…), e os grupos font e typography de tokens.json (ADR-0020, proposta).
• Os tokens de forma existem e este site é construído só com eles: shape.css com espaçamento, raios, molduras, movimento, foco e elevação, e os grupos space, radius, layout, motion, focus e elevation de tokens.json (ADR-0021, proposta).

Especificação

1. O contrato são propriedades CSS personalizadas: um site vincula /tokens/base.css, /tokens/type.css, /tokens/shape.css e depois /tokens/<marca>.css, e estiliza só com as funções (--color-page, --color-text, --color-accent…; font: var(--type-body)…), nunca com passos crus da escala nem com tamanhos próprios.
2. Um componente que mostra outra marca é envolvido em data-brand="<marca>" com all.css: as funções se resolvem para essa marca dentro do elemento.
3. Claro e escuro: o CSS de cada marca traz ambos; todo site aparece claro e o escuro é ativado só a pedido, com data-theme="dark" no elemento raiz, que o seletor de tema define e o cookie akribis-theme lembra; nunca pela preferência do sistema (ADR-0037, proposta).
4. tokens.json (DTCG) é a mesma fonte para ferramentas que não leem CSS.
5. Forma (ADR-0021): um espaçamento é um múltiplo de 0,25 rem (4 px), --space-1 a --space-24 (0,25 a 6 rem): 1–2 dentro de um controle e entre um rótulo e seu valor; 3–4 dentro de um componente; 6–8 entre componentes; 12–20 entre seções. Nada no meio.
6. Raios: 0 em superfícies, cartões, tabelas e imagens (cantos justos leem-se precisos); 2 px em etiquetas e chips; 4 px em controles; 8 px em diálogos, menus e avisos; pílula em estados; redondo em avatares e pontos.
7. Molduras: contêiner 80 rem, conteúdo 64 rem, coluna de leitura 46 rem; margem lateral 1 rem, 2 rem a partir de md; 12 colunas com 1,5 rem de separação; pontos de quebra sm 36, md 48, lg 64, xl 80 rem, sempre do celular para cima (só min-width); alvos interativos de pelo menos 1,5 rem (24 px), controles de 2,75 rem (44 px) de altura; a barra primária de um site, 3,25 rem (52 px).
8. Movimento: 120 ms para uma mudança de estado (hover, foco), 200 ms para revelar (menus, tooltips, acordeões), 320 ms para mover (diálogos, painéis); curvas padrão cubic-bezier(0.2, 0, 0, 1) e saída cubic-bezier(0.4, 0, 1, 1). Com prefers-reduced-motion toda duração é 0.
9. Foco: um anel de 2 px no destaque, 2 px por fora do elemento, em todo elemento interativo; sobre um controle preenchido com destaque, o anel é on-accent e fica por dentro da borda.
10. Elevação: a estrutura é desenhada com filetes de 1 px em --color-line e com faixas; a única sombra é para sobreposições (menus, diálogos, avisos) e nunca para cartões; camadas raised 1, sticky 10, overlay 100, toast 1000.
11. Este site se estiliza só com estes tokens: o build falha diante de um espaçamento, raio, sombra, duração ou ponto de quebra próprio.

Para repensar

• Se alguma vez for preciso uma segunda elevação com sombra, ou sombras diferentes no modo escuro além da opacidade.
• Tailwind como camada opcional sobre as propriedades CSS.

Evidência para auditar

• brand/shape.yaml · brand/src/shape.ts · brand/test/shape.test.ts (the ladder, the files and the lint of this site's own CSS)
• Draft 0.2 brandbook artifact (2 Oct 2026), section 08 Shape & motion: 4 px base, radii 2/4/6/8, hairlines and bands, one shadow for overlays, 2 px focus, 120/200/320 ms
• This site's CSS before the tokens: 19 distinct gaps and paddings, four breakpoints (36, 40, 48, 56 rem), max-width queries
• WCAG 2.2: 1.4.11 non-text contrast, 2.4.13 focus appearance, 2.5.8 target size, 2.3.3 animation from interactions
• AKRIBIS-Group/design@main · brand/tokens/, packages/theme/
• Token files of akribis_info, akribis_one, akiot_es, akleia_info, solfarma_com

Entrega

• tokens.json
• base.css
• type.css
• shape.css e um arquivo CSS por marca.

Decisão

• ADR-0015 Build the ramps, neutrals, semantic colours and roles on one lightness grid Aceita
• ADR-0020 Set IBM Plex Sans and Plex Mono for every brand, self-hosted and subset by rule, on a documented scale Proposta
• ADR-0021 Build the shape tokens on one 4 px base: spacing, radii, layout, motion, focus and elevation Proposta
• ADR-0037 Render every site light by default and dark only on request Proposta