brandfy-design-tokens

Gerar design tokens

Protocolo operacional

• Plano e progresso: planejar esquema de harmonia, funções semânticas,

escalas, contraste, geração e testes.

• Fontes de verdade: ler a paleta aprovada,

circulo-cromatico.md e token-schema.md.

• Escopo e idempotência: gerar arquivos derivados sem alterar

.brandfy/palette.json.

• Validação: executar o gerador e conferir contraste WCAG para texto,

controles, foco e estados, além da relação angular de matiz entre primary e accent.

• Resumo final: registrar arquivos, esquema de harmonia usado,

combinações aprovadas e combinações recusadas.

Fluxo

1. Escolher, com base em

circulo-cromatico.md, um esquema de harmonia (monocromática, análoga, complementar, split-complementar, tríade ou tetrádica) e o matiz-base de primary.

1. Gerar families.primary e families.accent a partir do círculo

cromático, em vez de escolher os 11 tons de cada família manualmente:

   node <caminho-da-skill>/scripts/gerar-paleta-cromatica.mjs \
     --hue <matiz-base 0-360> \
     --scheme <esquema> \
     --output .brandfy/palette.json

1. Completar .brandfy/palette.json com families.neutral e os modos

light/dark.

1. Executar:

   node <caminho-da-skill>/scripts/generate-tokens.mjs \
     --input .brandfy/palette.json \
     --output brand

1. Gerar brand/global.css, brand/tokens.json,

brand/tailwind-theme.js, brand/accessibility.md e, quando palette.json declarar harmony, brand/color-harmony.md.

1. Manter escalas numéricas para cada família e tokens semânticos para fundo,

superfície, texto, texto secundário, borda, acento, foco, sucesso, aviso e erro.

1. Definir valores distintos para :root e .dark.
2. Documentar combinações permitidas. Não inferir legibilidade somente pela

aparência.

Importe o CSS produzido por $brandfy-tipografia-web em global.css e abra uma página nos modos light e dark. Uma fonte ausente deve acionar o fallback documentado sem mudar a hierarquia ou esconder um texto.

Raciocínio do especialista

Separar cor de origem, escala e função semântica. A relação entre primary e accent nasce do círculo cromático, não de tentativa isolada: um esquema declarado em harmony torna essa relação verificável e reprodutível. Escolher tokens pela relação entre elementos, não pelo valor isolado. Verificar contraste, diferenciação de estados, foco, daltonismo, impressão e coerência entre light e dark. Uma cor de marca pode permanecer no logo e ser inadequada para texto ou controle.