tmj-90/marca

Estabelecer ou auditar a marca

Uma fábrica que entrega UI sem uma marca entrega templates. Esta skill dá ao produto uma identidade visual e verbal específica — ou audita e estende a que já possui — e a registra em um formato que agentes de entrega podem consumir: BRAND.md mais tokens. Ela é dona da identidade (direção, paleta, par tipográfico, voz). A estrutura dos tokens pertence à skill design-system; a execução superficial, à skill frontend-design.

Profundidade	Referência
Camadas de paleta, tokens oklch, contraste, par tipográfico e escala fluida	references/color-and-typography.md
Espectros de voz, traços, hierarquia de mensagens, checklist de consistência	references/voice-and-messaging.md

Passos

1. Detectar. Chame search_lore para marca, posicionamento, voz e ADRs de design. No repositório, procure por BRAND.md, DESIGN.md, arquivos de tokens (*.tokens.json, tokens.css, theme.ts), um bloco :root de propriedades customizadas, ativos de logotipo e textos de marketing. Leia o README do produto e o ticket para entender público e propósito. Decida: existe uma marca?

2. Marca existe → auditar e estender em seu idioma. Não a substitua pelo seu gosto.

   • Avalie-a em relação às qualidades exigidas (passo 4) e à lista proibida abaixo; nomeie cada lacuna com o arquivo e valor.
   • Meça cada par texto/fundo que a marca usa, em cada tema, quanto ao contraste WCAG (4,5:1 para corpo, 3:1 para texto grande e UI) — calcule a razão; a leveza oklch não é uma razão de contraste. Uma cor da marca que falha como texto ganha uma variante mais escura e segura para texto, não uma isenção.
   • Preencha lacunas na direção existente: estados hover/active, uma camada de superfície ausente, uma variante escura, um acento seguro para texto, papéis semânticos ausentes.

3. Sem marca → comprometer-se com uma direção e escrever por que ela se encaixa neste produto e público: editorial/revista, suíço/internacional, neo-brutalismo, bento, glassmorfismo com profundidade real, luxo claro ou escuro, retro-futurismo. "Minimalista limpo" não é uma direção; modo escuro é escolhido para os usuários, não por hábito. Em seguida, defina:

   • Paleta como tokens oklch com uma função declarada por cor: superfícies (pelo menos duas camadas), texto (primário, suave), acento e os papéis semânticos sucesso / aviso / perigo / informação — cada um com uma variante segura para texto onde a cor de preenchimento falha como texto.
   • Par tipográfico — famílias para exibição + texto com uma justificativa (e mono se o produto exibe código ou dados), uma escala fluida com clamp(), e um plano de carregamento: auto-hospedado, subconjunto, um peso crítico pré-carregado, fallback com correspondência métrica.
   • Voz — público, a promessa em uma linha, 3 a 5 traços de voz, cada um com um par "dizemos / não dizemos", e como a voz muda em erros e estados vazios.

4. Verificar as qualidades exigidas. A marca deve permitir que a UI entregue mostre pelo menos quatro das dez qualidades listadas na skill frontend-design (hierarquia de escala, ritmo de espaçamento, profundidade, caráter tipográfico, cor semântica, estados projetados, composição, atmosfera, movimento esclarecedor, data-viz no sistema). Nomeie as quatro ou mais em BRAND.md.

5. Escrever os artefatos. BRAND.md: direção e justificativa, tabela de paleta (token, valor, função, resultado de contraste), par tipográfico e escala, voz, qualidades entregues, perguntas em aberto. Quando o trabalho é visual, um arquivo de tokens no formato do repositório (DTCG JSON ou CSS custom properties — veja a skill design-system), por exemplo:

   :root {
     --color-surface: oklch(98% 0.01 95);
     --color-text: oklch(22% 0.02 265);
     --color-accent: oklch(64% 0.19 28); /* apenas preenchimento; texto usa --color-accent-text */
     --color-accent-text: oklch(50% 0.19 28);
     --text-display: clamp(2.5rem, 1rem + 6vw, 6rem);
     --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
     --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   }
   

6. Sinalizar, não inventar, estratégia desconhecida. Se o posicionamento ou público estiver genuinamente indeciso e o ticket não resolver, não invente um. Como skill de entrega, mark_ticket_blocked com a pergunta específica; como semente de lore, suggest_lore a marca com as perguntas em aberto nomeadas.

7. Finalizar. Como skill de entrega (você está no branch de worktree do ticket — verifique com git branch --show-current), faça commit, registre evidências por AC com a skill record-evidence (o diff de BRAND.md, tabela de contraste, lista de qualidades), então pare; o runner submete para revisão. Como semente de lore, suggest_lore a marca; ela permanece uma sugestão até que um humano a ratifique.

Proibido (uma auditoria deve capturar isso)

• Grades de cartão padrão com espaçamento uniforme e sem hierarquia.
• O hero centralizado com título + gradiente borrado e CTA genérico.
• Padrões não modificados de bibliotecas/Tailwind/shadcn apresentados como design final.
• Raio, espaçamento e sombra idênticos em todos os componentes.
• Cinza sobre branco com uma cor decorativa de acento.
• Pilhas de fontes padrão sem justificativa; mais de duas famílias sem motivo.
• Uma cor de acento usada para texto em tamanho de corpo quando falha em 4,5:1.
• Modo escuro reflexivo escolhido por hábito em vez de adequação.

Pronto quando

BRAND.md declara uma direção com sua justificativa; cada par de paleta tem um resultado medido de contraste que passa em todos os temas; o par tipográfico, a escala e o plano de carregamento estão definidos; a voz tem traços com exemplos; quatro ou mais qualidades exigidas são nomeadas; perguntas estratégicas em aberto são listadas em vez de adivinhadas; os tokens existem no formato do repositório.

Regras

• Comprometer-se com uma direção e declarar por que; nunca "minimalista limpo".
• Tokens, não literais, para que agentes de entrega os reutilizem.
• Estender uma marca existente em seu idioma; nunca sobrescrevê-la com preferência.
• Tokens de movimento são para transform/opacity; nunca incorporar animação vinculada ao layout no sistema.
• Estratégia desconhecida é uma pergunta em aberto nomeada, nunca uma resposta inventada.