BRAND.md — Plantilla Base Universal para Marca Agent-Ready

Basado en el estándar de 9 secciones de DESIGN.md + módulos de conceptualización de marca de CREA STUDIO
Creado por CREA STUDIO S.A.S. · 2026

Instrucciones de Uso

1. Copia esta plantilla
2. Reemplaza [MARCA] con el nombre de tu marca
3. Llena cada sección con las decisiones específicas
4. Sé específico con valores reales (hex, px, ms) — nada de "más o menos"
5. Las secciones custom (13+) varían según tipo de marca
6. Este archivo lo leen agentes AI para tener contexto COMPLETO de marca

BRAND.md de [MARCA]

MÓDULO 1: IDENTIDAD VISUAL

1. Visual Identity

Filosofía visual: [1-2 párrafos describiendo la personalidad visual de la marca. ¿Qué emoción transmite? ¿Qué principio guía cada decisión visual? ¿Qué la hace única?]

Aesthetic treatment: [Describe el "mood" visual — ¿minimalista? ¿Vibrante? ¿Corporativo? ¿Juguetón? ¿Tecnológico? ¿Orgánico?]

Logo:

• Versión principal: [Descripción, versión]
• Versiones secundarias: [Variaciones si aplica]
• Zona de seguridad: [X]px alrededor del logo
• Uso en fondos claros: [Regla]
• Uso en fondos oscuros: [Regla]
• Tamaño mínimo: [X]px de ancho
• Prohibido: [Qué NO hacer con el logo]

Elementos gráficos:

• [Descripción de patrones, iconos, ilustraciones, textures]
• [Reglas de uso]

Mockups:

• [Listado de mockups donde se aplica la marca]

Key Characteristics:

• [Característica visual 1]
• [Característica visual 2]
• [Característica visual 3]
• [Característica visual 4]
• [Característica visual 5]

2. Key Visual para Generación IA

Propósito: Esta sección define cómo los agentes de IA generan piezas visuales coherentes con la marca (hero images, ilustraciones, gráficas, etc.).

Composición del Key Visual:

• [Describe la composición base: centrado, asimétrico, layering, minimalista, maximalista]
• [Describe el uso de espacio: negativo, denso, equilibrado, dinámico]
• [Describe el punto focal: dónde mira el ojo primero]

Estilo visual:

• [Fotográfico / Ilustrativo / 3D / Mixto]
• [Descripción detallada del estilo: realista, abstracto, geométrico, orgánico, tech, editorial]
• [Referencias visuales: ¿Qué artistas, movimientos o marcas se parecen?]

Colores dominantes en key visual:

• [Color 1]: #[HEX] — [rol en la composición: fondo, acento, elemento principal]
• [Color 2]: #[HEX] — [rol en la composición]
• [Color 3]: #[HEX] — [rol en la composición]
• [Color 4]: #[HEX] — [rol en la composición]

Elementos que SIEMPRE incluyen:

• [Elemento 1: tipo de forma, texture, patrón]
• [Elemento 2: lighting, depth treatment]
• [Elemento 3: overlay, gradient, effect]

Elementos que NUNCA incluyen:

• [Anti-elemento 1]
• [Anti-elemento 2]
• [Anti-elemento 3]

Moodboard de referencia (descripción):

• [Descripción en 1 párrafo del mood general — qué sensación evoca el key visual]

Ejemplos de prompts para IA:

• "Create a [contexto: hero section / product card / social post] with [descripción del key visual]: [composición], [colores], [estilo], [elementos]"
• "Generate a [tipo de pieza visual] with [descripción específica basada en esta marca]: [estilo], [composición], [palette]"

Restricciones técnicas para IA:

• [Ratio recomendado: 16:9 / 4:3 / 1:1 / 9:16]
• [Estilo preferido: photorealistic / illustration / 3D render]
• [Evitar: clichés, stock photography feel, saturated colors, etc.]

3. Color Palette & Roles

Primary

Surface & Background

Text

Semantic & Accent

Gradient System (si aplica)

• Gradient Primary: linear-gradient([dirección], [color1], [color2]) — [Uso]
• Gradient Accent: linear-gradient([dirección], [color1], [color2]) — [Uso]

4. Typography Rules

Font Family

Display: [Nombre fuente] — [Fallbacks]

• Uso: [Headlines grandes, hero sections]

Heading: [Nombre fuente] — [Fallbacks]

• Uso: [Títulos de sección]

Body: [Nombre fuente] — [Fallbacks]

• Uso: [Texto general]

Monospace: [Nombre fuente] — [Fallbacks]

• Uso: [Código, datos]

Type Scale

Principles

[1 párrafo describiendo la filosofía tipográfica. ¿Cómo se siente? ¿Qué comunica? ¿Jerarquía visual?]

5. Component Stylings

Buttons

Primary:

• Background: [COLOR]
• Text: [COLOR], [X]px/[Weight]
• Border radius: [X]px
• Padding: [X]px [X]px
• Hover: [Descripción del cambio]
• Active: [Descripción del cambio]
• Focus: [Ring style]
• Transition: [X]ms [easing]

Secondary:

• [Mismos campos adaptados]

Ghost/Text:

• [Mismos campos adaptados]

Disabled:

• [Mismos campos adaptados]

Cards & Containers

• Background: [COLOR]
• Border radius: [X]px
• Shadow: [Definición completa]
• Border: [Si aplica]
• Padding: [X]px
• Hover: [Efecto]
• Gap interno: [X]px

Inputs & Forms

• Background: [COLOR]
• Border: [X]px solid [COLOR]
• Border radius: [X]px
• Font: [X]px/[Weight]
• Placeholder color: [COLOR]
• Focus: [Border change + ring]
• Error: [Border color + mensaje]
• Height: [X]px
• Padding: [X]px [X]px

Navigation

• Background: [COLOR], [sticky/fixed/static]
• Height: [X]px
• Layout: [Descripción de estructura]
• Links: [X]px/[Weight], [COLOR], hover [COLOR]
• Mobile: [Comportamiento responsive]
• Logo size: [X]x[X]px

Tags & Badges

• Background: [COLOR]
• Text: [X]px/[Weight], [COLOR]
• Border radius: [X]px (pill)
• Padding: [X]px [X]px

Modal & Overlay

• Overlay: rgba([R],[G],[B],[A])
• Container background: [COLOR]
• Border radius: [X]px
• Shadow: [Definición]
• Max width: [X]px
• Padding: [X]px

Image Treatment

• Border radius: [X]px
• Aspect ratios: [16:9 / 4:3 / 1:1]
• Placeholder: [Color o skeleton]
• Hover: [Efecto si aplica]
• Lazy loading: [Estrategia]

6. Layout Principles

Spacing System

Base unit: [X]px

Grid & Container

• Max width: [X]px
• Columns: [X]
• Grid gap: [X]px
• Horizontal padding: [X]px desktop / [X]px tablet / [X]px mobile
• Breakpoints: [Definidos en sección 13]

Whitespace Philosophy

[1 párrafo describiendo la estrategia de espacio. ¿Generoso? ¿Compacto? ¿Qué comunica?]

Border Radius Scale

7. Depth & Elevation

Shadows (si aplica)

• Card rest: 0 [X]px [X]px rgba([R],[G],[B],[A])
• Card hover: 0 [X]px [X]px rgba([R],[G],[B],[A])
• Dropdown: 0 [X]px [X]px rgba([R],[G],[B],[A])
• Modal: 0 [X]px [X]px rgba([R],[G],[B],[A])

Elevation Philosophy

[1 párrafo. ¿Usas sombras? ¿Es flat? ¿Cómo comunicas profundidad?]

MÓDULO 2: CONCEPTO DE MARCA

8. Brand Universe

Manifiesto:
[1 párrafo. La declaración de la marca — por qué existe, qué cree, cómo impacta el mundo. Escrito con la propia voz de la marca, no en tercera persona.]

Misión:
[Qué hacemos y para quién. El propósito cotidiano.]

Visión:
[Dónde queremos estar en [X] años. El impacto aspiracional.]

Valores de marca:

Propósito:
[1 frase. El "por qué" profundo más allá del negocio.]

Razón de ser:
[Por qué este proyecto/marca ES necesario ahora en el mundo.]

Universo:
[Describe el universo donde vive la marca — referencias culturales, estéticas, mundos donde se mueve. ¿Qué le inspiraría? ¿Qué odia?]

Arquetipo de marca:
[Según Carl Jung: El Creador, El Rebelde, El Sabio, El Héroe, El Amante, El Explorador, El Gobernante, El Inocente, El Bufón, El Cuidador, El Hombre Corriente, El Mago]

Personalidad (3-5 palabras clave):
1. [Adjetivo 1]
2. [Adjetivo 2]
3. [Adjetivo 3]
4. [Adjetivo 4]
5. [Adjetivo 5]

MÓDULO 3: COMUNICACIÓN

9. Communication Style

Voz y Tono (Voice & Tone):

Voz (Voice) — QUIÉN SOMOS, nunca cambia:
[La personalidad de la marca expresada en palabras. Es permanente. ¿Cómo nos describiría alguien en una frase?]

Tono (Tone) — CÓMO HABLAMOS, varía según contexto:

Estilo de escritura:

• [Formal / Informal / Mixto]
• [En primera persona ("yo") / segunda persona ("tú") / tercera persona ("la marca")]
• [Usamos mayúsculas para énfasis SÍ / NO]
• [Usamos emojis SÍ / NO — cuáles y cuándo]

Qué SIEMPRE hace:

• [Hábito 1 de comunicación]
• [Hábito 2 de comunicación]
• [Hábito 3 de comunicación]
• [Hábito 4 de comunicación]

Qué NUNCA hace:

• [Anti-hábito 1]
• [Anti-hábito 2]
• [Anti-hábito 3]
• [Anti-hábito 4]

Pronombres:

• Nos referimos a la audiencia como: [tú / ustedes / clientes / usuarios / comunidad]
• Nos referimos a la marca como: [nosotros / la marca / [NOMBRE]]
• Usamos "yo" (persona individual) SÍ / NO — [Cuándo y quién lo usa]

Pilares de contenido:

Storytelling:
[Describe cómo la marca cuenta historias. ¿Qué estructura usa? ¿Qué elementos incluir siempre? ¿Qué narrativa evoca?]

Story arcs (si aplica):

• [Arc narrativo 1 — conflicto y resolución]
• [Arc narrativo 2 — conflicto y resolución]

10. Do's and Don'ts

✅ Comunicación

• [Regla 1 de voz/tono]
• [Regla 2 de voz/tono]
• [Regla 3 de voz/tono]
• [Regla 4 de voz/tono]
• [Regla 5 de voz/tono]

✅ Diseño Visual

• [Regla 1 de diseño]
• [Regla 2 de diseño]
• [Regla 3 de diseño]
• [Regla 4 de diseño]
• [Regla 5 de diseño]

❌ Comunicación

• [Anti-regla 1 de voz/tono]
• [Anti-regla 2 de voz/tono]
• [Anti-regla 3 de voz/tono]
• [Anti-regla 4 de voz/tono]

❌ Diseño Visual

• [Anti-regla 1 de diseño]
• [Anti-regla 2 de diseño]
• [Anti-regla 3 de diseño]
• [Anti-regla 4 de diseño]

MÓDULO 4: NEGOCIO Y ESTRATEGIA

11. Business Model

Productos / Servicios:

Audiencia target:

Canales de distribución:

Diferenciadores vs competencia:

Stack técnico (si es marca de tech):

• [Tecnología 1]
• [Tecnología 2]
• [Tecnología 3]

12. Content Strategy

Pilares de contenido (duplicado de sección 9, con enfoque de estrategia):

Temas permitidos:

• [Tema 1]
• [Tema 2]
• [Tema 3]

Temas prohibidos:

• [Tema 1]
• [Tema 2]

Formatos que usamos:

Calendario de contenido (si aplica):

• [Día 1]: [Tipo de contenido]
• [Día 2]: [Tipo de contenido]
• [Día 3]: [Tipo de contenido]

MÓDULO 5: TÉCNICO Y RESPONSIVE

13. Responsive Behavior

Breakpoints

Touch Targets

• Minimum: [X]x[X]px (WCAG)
• Mobile nav: [X]x[X]px
• Buttons: [X]x[X]px

Collapsing Strategy

• Navigation: [Comportamiento mobile]
• Grids: [X]-col → [X]-col → [X]-col
• Typography: Display [X]px → [X]px → [X]px
• Spacing: [X]px → [X]px → [X]px
• Images: [Comportamiento responsive]

14. Agent Prompt Guide

Quick Color Reference

Primary CTA: [COLOR] (`#HEX`)
Background: [COLOR] (`#HEX`)
Surface: [COLOR] (`#HEX`)
Heading: [COLOR] (`#HEX`)
Body text: [COLOR] (`#HEX`)
Border: [COLOR] (`#HEX`)
Error: [COLOR] (`#HEX`)
Link: [COLOR] (`#HEX`)

Quick Brand Voice Reference

Voice: [descripción en 1 frase]
Tono default: [Adjetivo]
Nos referimos a la audiencia como: [tú/ustedes]
Pronombres de marca: [nosotros/la marca/[NOMBRE]]
Emojis: [SÍ/NO — cuáles]

Example Component Prompts

• "Crea un hero section usando el color primary (#HEX), la fuente [Display] a [X]px/[Weight], con [elementos específicos de esta marca]"
• "Diseña un grid de cards [X]-columnas con [detalles específicos de esta marca]"
• "Escribe un copy usando la voz de [MARCA]: [descripción de tono para este contexto]"

Iteration Guide

Al refinar pantallas o contenido generado con este sistema:
1. Enfócate en UN componente a la vez
2. Referencia colores por nombre y hex de sección 3
3. Verifica tipografía contra sección 4
4. Revisa spacing contra sección 6
5. Confirma que el copy respeta sección 9 (voz y tono)
6. Valida que el contenido está en los pilares de sección 9
7. Verifica que no viola ningún Do's and Don'ts de sección 10

MÓDULO 6: CUSTOM (VARIABLE SEGÚN MARCA)

15. [Sección Custom 1]

[Título de sección custom según la marca. Ejemplos:]

Para Clumps: Narrative Universe

• [Personajes]
• [Historia del mundo]
• [Canon de la narrativa]

Para Nutz: Product Categories

Para Crea Studio: Services Offered

• [Servicio 1]: [Descripción + stack]
• [Servicio 2]: [Descripción + stack]
• [Servicio 3]: [Descripción + stack]

16. [Sección Custom 2]

[Título de sección custom según la marca]

17. [Sección Custom 3]

[Título de sección custom según la marca]

METADATOS

Versión: v1.0
Última actualización: [FECHA]
Responsable: [NOMBRE]
Aprobado por: [NOMBRE]

BRAND.md v1.0 — Basado en el estándar de 9 secciones de DESIGN.md + Módulos de conceptualización de marca de CREA STUDIO · CREA STUDIO S.A.S. · 2026