tmj-90/brand

Establecer o auditar la marca

Una fábrica que entrega UI sin una marca, entrega plantillas. Esta habilidad le da al producto una identidad visual y verbal específica — o audita y extiende la que ya tiene — y la documenta en un formato que los agentes de entrega pueden consumir: BRAND.md más tokens. Es responsable de la identidad (dirección, paleta, pares tipográficos, voz). La estructura de los tokens pertenece al skill design-system; la ejecución de superficie al skill frontend-design.

Profundidad	Referencia
Niveles de paleta, tokens oklch, contraste, pares tipográficos y escala fluida	references/color-and-typography.md
Espectros de voz, rasgos, jerarquía de mensajes, lista de verificación de coherencia	references/voice-and-messaging.md

Pasos

1. Detectar. Ejecuta search_lore para buscar ADRs de marca, posicionamiento, voz y diseño. En el repositorio, busca BRAND.md, DESIGN.md, archivos de tokens (*.tokens.json, tokens.css, theme.ts), un bloque :root de propiedades personalizadas, activos de logotipo y textos de marketing. Lee el README del producto y el ticket para conocer la audiencia y el propósito. Decide: ¿existe una marca?

2. La marca existe → auditar y extender en su propio idioma. No la reemplaces con tu gusto.

   • Evalúala contra las cualidades requeridas (paso 4) y la lista prohibida a continuación; nombra cada brecha con el archivo y el valor.
   • Mide cada par texto/fondo que la marca utiliza, en cada tema, contra el contraste WCAG (4.5:1 para cuerpo, 3:1 para texto grande y UI) — calcula la relación; la luminosidad oklch no es una relación de contraste. Un color de marca que falla como texto obtiene una variante más oscura segura para texto, no una exención.
   • Completa los vacíos en la dirección existente: pasos hover/active, un nivel de superficie faltante, una variante oscura, un acento seguro para texto, roles semánticos faltantes.

3. No hay marca → comprométete con una dirección y explica por qué encaja con este producto y audiencia: editorial/revista, suizo/internacional, neo-brutalismo, bento, glassmorphism con profundidad real, lujo claro u oscuro, retro-futurismo. "Mínimo limpio" no es una dirección; el modo oscuro se elige por los usuarios, no por costumbre. Luego define:

   • Paleta como tokens oklch con un trabajo declarado por color: superficies (al menos dos niveles), texto (primario, atenuado), acento, y los roles semánticos éxito / advertencia / peligro / información — cada uno con una variante segura para texto donde el color de relleno falla como texto.
   • Pareja tipográfica — familias display + texto con una razón (y mono si el producto muestra código o datos), una escala fluida clamp(), y un plan de carga: autoalojado, subconjunto, un peso crítico precargado, fallback métricamente emparejado.
   • Voz — audiencia, la promesa en una línea, 3–5 rasgos de voz cada uno con un par "decimos / no decimos", y cómo cambia la voz en errores y estados vacíos.

4. Comprobar las cualidades requeridas. La marca debe permitir que la UI entregada muestre al menos cuatro de las diez cualidades enumeradas en el skill frontend-design (jerarquía de escala, ritmo de espaciado, profundidad, carácter tipográfico, color semántico, estados diseñados, composición, atmósfera, movimiento clarificador, data-viz en el sistema). Nombra las cuatro o más en BRAND.md.

5. Escribir los artefactos. BRAND.md: dirección y justificación, tabla de paleta (token, valor, trabajo, resultado de contraste), pareja tipográfica y escala, voz, cualidades entregadas, preguntas abiertas. Cuando el trabajo sea visual, un archivo de tokens en el formato del repositorio (DTCG JSON o propiedades personalizadas CSS — consulta el skill design-system), por ejemplo:

   :root {
     --color-surface: oklch(98% 0.01 95);
     --color-text: oklch(22% 0.02 265);
     --color-accent: oklch(64% 0.19 28); /* solo relleno; el 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. Señalar, no inventar, estrategia desconocida. Si el posicionamiento o la audiencia están realmente indecisos y el ticket no lo resuelve, no fabriques uno. Como skill de entrega, mark_ticket_blocked con la pregunta específica; como semilla de lore, suggest_lore la marca con las preguntas abiertas nombradas.

7. Aterrizarlo. Como skill de entrega (estás en la rama de trabajo del ticket — verifícalo con git branch --show-current), haz commit, registra evidencia por cada criterio de aceptación con el skill record-evidence (el diff de BRAND.md, tabla de contraste, lista de cualidades), luego detente; el ejecutor lo envía para revisión. Como semilla de lore, suggest_lore la marca; permanece como sugerencia hasta que un humano la ratifique.

Prohibido (una auditoría debe detectar esto)

• Cuadrículas de tarjetas predeterminadas con espaciado uniforme y sin jerarquía.
• El encabezado centrado + blob degradado con una CTA genérica.
• Valores predeterminados de bibliotecas/Tailwind/shadcn sin modificar presentados como diseño terminado.
• Radio, espaciado y sombra idénticos en cada componente.
• Gris sobre blanco con un color de acento decorativo.
• Pilas de fuentes predeterminadas sin una razón declarada; más de dos familias sin una razón.
• Un color de acento usado para texto de tamaño de cuerpo cuando falla 4.5:1.
• Modo oscuro por reflejo elegido por costumbre en lugar de por idoneidad.

Hecho cuando

BRAND.md indica una dirección con su justificación; cada par de paleta tiene un resultado de contraste medido que pasa en cada tema; la pareja tipográfica, escala y plan de carga están definidos; la voz tiene rasgos con ejemplos; se nombran cuatro o más cualidades requeridas; las preguntas estratégicas abiertas están listadas en lugar de adivinadas; los tokens existen en el formato del repositorio.

Reglas

• Comprométete con una dirección y explica por qué; nunca "mínimo limpio".
• Tokens, no literales, para que los agentes de entrega los reutilicen.
• Extiende una marca existente en su propio idioma; nunca la sobrescribas con preferencias.
• Los tokens de movimiento son para transform/opacity; nunca integres animación vinculada al diseño en el sistema.
• La estrategia desconocida es una pregunta abierta nombrada, nunca una respuesta inventada.