Identidad de Marca Completa

Identidad de Marca

Una identidad de marca es un pequeño conjunto de decisiones que se sostienen en todas partes: una idea, una marca que la transmite, colores y tipografía que suenan como ella, y reglas que la mantienen coherente. El error común es la decoración sin una idea: una mancha de gradiente, una sans genérica, una paleta elegida por estado de ánimo y un logotipo que no funciona en tamaño de favicon o en un solo color. Esta habilidad produce las decisiones como archivos y las verifica en un renderizador real.

Aplica los principios jerarquizados de interface-guidelines (todos pueden usarlo > dice la verdad > significa lo que dice > la respuesta va primero > los errores son sobrevivibles > permanece en su lugar > lo posible es visible > convención > pulido) dondequiera que la identidad se encuentre con una interfaz. Si esa habilidad está instalada, su script de auditoría verifica la página de guías que esta habilidad genera.

Brief

Responde estas preguntas antes de dibujar algo. Si el usuario no está, indica las suposiciones en brand.json y continúa.

• ¿Qué es, para quién y contra quién? Categoría, audiencia, dos o tres competidores. La identidad debe ser distinguible de esos, no de marcas en general.
• La idea única. Una frase sobre qué es la marca que un símbolo pueda transmitir ("Un horno convierte arcilla blanda en algo permanente"). Tómala del tema mismo, su material, proceso, lugar o promesa, no de un estilo. Consulta references/strategy.md.
• Personalidad: tres rasgos, cada uno con lo que significa en la práctica y lo que descarta. "Cálido: tonos tierra y palabras sencillas, nunca cursi."
• Dónde debe funcionar: favicon e icono de aplicación, pantallas de teléfono, señalización, impresión, bordado, avatares de redes sociales, modo oscuro, correo electrónico. El contexto más difícil establece el límite de complejidad.
• Restricciones: valor de marca existente que mantener (un color que los clientes conocen, un nombre), presupuesto para fuentes con licencia, mercados culturales (los significados de colores y símbolos varían).
• Nivel de complejidad para la marca (sección 2 de references/logo.md): solo logotipo, marca geométrica simple o marca simbólica en capas. Elige según el contexto y la idea, no por ambición. Las marcas complejas necesitan una versión simplificada para tamaños pequeños.

Flujo de Trabajo

1. Direcciones, luego una decisión

Desarrolla tres direcciones que difieran en idea, no solo en color. Para cada una: la idea en una frase, el método de concepto del logotipo (references/logo.md sección 3), un esbozo de paleta (dos o tres semillas), una combinación tipográfica y una frase sobre cómo se siente. Escríbelas y muéstralas si el usuario está presente; si no, elige una y explica por qué. No mezcles direcciones; una mezcla generalmente pierde la idea que hacía funcionar a cada una.

2. Escribe brand.json

Es la fuente de verdad que todos los scripts leen. Forma mínima:

{
  "name": "Kiln", "tagline": "Cerámica artesanal, horneada en Leeds.", "url": "https://kiln.example",
  "idea": "Una frase que la marca transmite.",
  "personality": [{ "trait": "Cálido", "means": "Tonos tierra y palabras sencillas, nunca cursi." }],
  "voice": { "is": ["Sencillo", "Específico"], "isnt": ["Empalagoso", "Comercial"], "examples": [{ "say": "Horneado a 1.260 °C.", "not": "¡Hecho con amor!" }] },
  "colors": { "primary": "#d9480f", "accent": "#0b7285", "neutral": { "chroma": 0.01 } },
  "type": { "display": { "family": "Fraunces", "weights": [400, 700] }, "text": { "family": "Inter", "weights": [400, 600] }, "scale": { "base": 16, "ratio": 1.25 } },
  "logo": { "primary": "logo/lockup.svg", "mark": "logo/mark.svg", "story": "Por qué la marca se ve así.", "minSizePx": 16 }
}

3. Color

Elige dos o tres semillas con significado (references/color.md), luego:

node <skill-dir>/scripts/palette.mjs brand.json

Construye rampas perceptuales OKLCH, mantiene cada semilla exacta en su paso más cercano, tiñe los neutros hacia la marca, mantiene los colores de estado (éxito, advertencia, peligro, información) separados de la marca para que el peligro siempre se lea como peligro, mapea roles semánticos para claro y oscuro, y verifica cada par visible contra WCAG 2.2. Corrige fallos cambiando semillas o roles, no ignorándolos. Abre tokens/palette.html y mira las demos claro y oscuro.

4. Tipografía

Elige una fuente para títulos y una para texto (a menudo una familia es suficiente), con una razón vinculada a la idea y al contexto de lectura (references/typography.md). Verifica licencia, cobertura de idiomas, pesos, cifras tabulares si los números importan y cómo se renderiza de 14 a 16 px. Prefiere familias de código abierto (SIL OFL) a menos que el usuario tenga una licencia.

5. Logotipo

Dibuja la marca como SVG a mano: planifica la geometría en una cuadrícula, escribe trazados con intención y haz que los recortes sean agujeros reales (fill-rule="evenodd" o trazados combinados), nunca formas blancas pintadas encima. Convierte el logotipo en contornos para que no dependa de fuentes instaladas:

node <skill-dir>/scripts/logo.mjs outline --text "Kiln" --google "Fraunces:700" --tracking -0.01 --out logo/wordmark.svg
node <skill-dir>/scripts/logo.mjs check logo/*.svg
node <skill-dir>/scripts/logo.mjs sheet logo/lockup.svg --mark logo/mark.svg --colors tokens/tokens.json --out logo/sheet.png

Mira la hoja. A 16 y 24 px la marca debe seguir leyéndose como ella misma; en negro de un solo color, invertida y sobre una imagen ocupada, cada parte debe sobrevivir. Si el detalle desaparece, simplifica o dibuja una marca separada para tamaño pequeño. Itera: la mayoría de las buenas marcas requieren varias rondas de reducción. Construye el lockup (marca más logotipo) con alineación óptica, no matemática, y define espacio claro y tamaño mínimo. Detalles y artesanía SVG: references/logo.md.

6. Recursos y sistema

node <skill-dir>/scripts/assets.mjs brand.json    # favicons, ICO, Apple touch, iconos PWA y maskable, tarjeta Open Graph, manifiesto, etiquetas head
node <skill-dir>/scripts/book.mjs brand.json      # página de guías de marca + type.css

Luego agrega lo que el brief necesite además de esto: avatares de redes sociales, cabecera de correo electrónico, un patrón o textura extraído de la marca, un estilo de icono, dirección de ilustración o fotografía (references/system.md). Cada recurso usa los tokens, no valores hex copiados.

7. Verifica y entrega

• Ejecuta la auditoría de interface-guidelines en la página de guías si está disponible: node <interface-guidelines>/scripts/audit.mjs brand-book.
• Lee tú mismo la hoja del logotipo, la página de paleta, la tarjeta Open Graph y los iconos. Corrige lo que se vea mal.
• Prueba la identidad en contexto: coloca el logotipo y los tokens en una pantalla real del producto (un encabezado y un botón como mínimo), en modo claro y oscuro.
• Entrega: la idea, qué es cada archivo, qué verificaste, qué no (búsqueda de marca registrada, revisión cultural en mercados objetivo, pruebas de impresión) y cualquier excepción de contraste aceptada con sus razones.

Trampas

• Sin idea, solo estilo. Elegir "moderno, limpio, audaz" no es una idea. Si no puedes decir qué significa la marca en una frase, todavía no significa nada.
• Marcas genéricas: un rayo, un swoosh, una chispa, un hexágono, un orbe de gradiente, una inicial en un círculo sin nada más. Úsalos solo si la idea lo exige y algo de ellos es apropiable.
• Recortes pintados. Las formas blancas sobre una marca de color se convierten en bloques sólidos en un solo color, sobre fotos y al invertirse. logo.mjs check las señala.
• Detalle que muere pequeño. Trazos finos y detalles internos desaparecen a 16 px. La hoja lo muestra; proporciona una marca de tamaño pequeño.
• <text> en un SVG de logotipo. Se renderiza con una fuente de respaldo donde falte la fuente. Conviértelo en contornos.
• Color de marca como peligro, o peligro como marca. Una marca roja aún necesita un color de peligro distinto y reconocible, y su texto de error debe pasar el contraste.
• Significado del color como hecho. "Azul significa confianza" es una asociación débil y ligada a la cultura, no una ley (references/color.md sección 1). Elige por distintividad en la categoría y por la idea.
• Copiar. No recrees ni imites de cerca la marca, nombre o imagen comercial de una marca existente. Ten en cuenta que una búsqueda real de marca registrada es responsabilidad del usuario antes del lanzamiento.
• Imitar una organización real para un usuario que no es esa organización no es branding; recházalo.

Referencias

Archivo	Leer cuando
references/strategy.md	Encontrar la idea, personalidad, nombrar el estilo, escribir direcciones
references/logo.md	Cualquier trabajo de logotipo: tipos, niveles de complejidad, métodos de concepto, construcción, artesanía SVG, lockups, pruebas
references/color.md	Elegir semillas, evidencia de significado del color, OKLCH, roles, modo oscuro, accesibilidad
references/typography.md	Elegir y combinar fuentes, licencias, escala, números, carga web
references/system.md	Iconos, patrones, imágenes, movimiento, voz, recursos, tokens, guías