BRAND.md — Crea Studio

Agencia de dirección creativa que crea experiencias auténticas desde la conexión
CREA STUDIO S.A.S. · NIT 901.762.033-1 · 2026


MÓDULO 1: IDENTIDAD VISUAL

1. Visual Identity

Filosofía visual: Crea Studio combina la calma de procesos bien pensados con la vitalidad del estado creativo. Una estética sofisticada pero cálido — donde la curiosidad por las formas y el color se traduce en belleza con propósito. No es minimalismo brutalista ni maximalismo excesivo; es el balance justo entre precisión y diversión. El resultado es memorable, auténtico, y profundamente humano.

Aesthetic treatment: Sofisticado con calidez. Patrón de puntos (dot pattern) que evoca constelaciones creativas. Gradientes sutiles que añaden profundidad sin saturación. Glassmorphism para cards y paneles. Animaciones fluidas que acompañan sin distraer. La sensación es de "laboratorio creativo" donde cada pixel tiene propósito.

Logo:

  • Versión principal: Texto "CREA STUDIO" o "CREA.CLUB" con tipografía Sora
  • Versiones secundarias: Ícono + texto, ícono solo
  • Zona de seguridad: 24px alrededor del logo
  • Uso en fondos claros: Estándar (si aplica)
  • Uso en fondos oscuros: Estándar (si aplica)
  • Tamaño mínimo: 120px de ancho
  • Prohibido: Modificar tipografía, cambiar colores, usar en fondos que comprometan legibilidad

Elementos gráficos:

  • Dot pattern (patrón de puntos): Radial gradient con 24px de espaciado
  • Gradient text: Linear gradient en headings principales
  • Glass panels: Background semi-transparente con blur + border sutil
  • Creative shapes: Formas orgánicas que evocan curiosidad y conexión

Mockups:

  • Hero sections del sitio web
  • Cards de servicios en portafolio
  • Proyectos de portafolio (Paguro, Triuum, Criteria)
  • Social media feed (Instagram, LinkedIn)
  • Membresías de diseño

Key Characteristics:

  • Sofisticado con calidez (no es minimalismo frio)
  • Patrón de puntos (dot pattern) como elemento distintivo
  • Tipografía Sora (display) + DM Sans (body)
  • Glassmorphism + gradient text + animaciones fluidas
  • Vitalidad creativa + estructura ordenada

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:

  • Composición asimétrica pero equilibrada (creatividad + estructura)
  • Espacio negativo generoso — no saturación
  • Punto focal: Elemento central (persona, forma, typo) con lighting natural y cálido
  • Layering: 3-4 niveles de profundidad (fondo + midground + elemento principal + overlay)

Estilo visual:

  • Mixto: Photography realista + UI elements + geometric shapes orgánicos
  • Sofisticado pero cálido — no tech dystopian, no minimalista brutalista
  • Referencias visuales: Diseño editorial premium, interfaces humanas, creatividad orgánica
  • Lighting: Natural, difuso, con toques de warmth

Colores dominantes en key visual:

  • Violeta/Índigo: Primary — acentos, buttons, highlights
  • Blanco/Plata: Secondary — surfaces, clarity elements
  • Gris cálido: Backgrounds — sofisticación sin frialdad
  • Naranja/Ambar suave: Accent warmth — toques humanos

Elementos que SIEMPRE incluyen:

  • Dot pattern sutil en fondo (no dominante)
  • Human connection element (persona, gesto, conexión)
  • Lighting natural y cálido
  • Balance entre vitalidad (shapes dinámicas) y estructura (grid, frames)

Elementos que NUNCA incluyen:

  • Neon excesivo
  • Sombras negras pesadas
  • Estilo cyberpunk dystopian
  • Minimalismo brutalista sin calidez
  • Colores saturados sin propósito

Moodboard de referencia (descripción):
Un estudio creativo donde la luz natural entra suavemente. Patrones de puntos en las paredes como constelaciones creativas. Personas conectadas trabajando en proyectos que importan. La sensación es curiosidad, vitalidad, y calma — como un espacio donde las ideas cobran vida sin perder estructura.

Ejemplos de prompts para IA:

  • "Create a hero image for a creative agency: warm lighting, dot pattern background, human connection moment, sofisticated but warm aesthetic, violet and indigo accents with subtle orange warmth, natural depth of field"
  • "Generate a social media visual: minimalist composition with dot pattern texture, creative shapes suggesting curiosity and connection, soft lighting, balanced layout, professional yet approachable feel"

Restricciones técnicas para IA:

  • Ratio recomendado: 16:9 (hero), 4:3 (social), 1:1 (cards)
  • Estilo preferido: Photography + UI elements (no photorealistic only)
  • Evitar: tech clichés, overused startup visuals, cold minimalism

3. Color Palette & Roles

Primary

Color Hex Uso
Primary (Violeta/Índigo) #7c3aed Primary: CTAs, buttons, links, highlights, branding
Secondary (Blanco/Plata) #f8fafc Secondary surfaces, clarity elements

Surface & Background

Color Hex Uso
Background Primary #0f0a1e Fondo principal del sitio
Background Secondary #1e1830 Cards, modales, glass panels
Background Light #f8fafc Secciones claras alternas
Surface Elevated #312e42 Hover states, active cards

Text

Color Hex Uso
Text Primary #e5e7eb Títulos, texto principal
Text Secondary #9ca3af Descripciones, metadata
Text Disabled #6b7280 Elementos inactivos
Text Inverse #1e1830 Texto sobre fondos claros

Semantic & Accent

Color Hex Uso
Success #10b981 Confirmaciones, estados positivos
Warning #f59e0b Alertas, atención
Error #ef4444 Errores, estados críticos
Info/Link #8866ff Links, información (violeta claro)
Accent (Warmth) #fbbf24 Acentos cromáticos warmth (sparingly used)

Gradient System

  • Gradient Primary: linear-gradient(135deg, #7c3aed, #8866ff, #a78bfa) — Textos de headline, CTA buttons hover
  • Gradient Accent: linear-gradient(135deg, #fbbf24, #f59e0b) — Warm accents (sparingly used)

4. Typography Rules

Font Family

Display: Sora — Fallbacks: system-ui, -apple-system, BlinkMacSystemFont, sans-serif

  • Uso: Headlines grandes, hero sections, branding
  • Weights: 300, 400, 500, 600, 700, 800

Heading: Sora — Fallbacks: system-ui, -apple-system, BlinkMacSystemFont, sans-serif

  • Uso: Títulos de sección, card titles, navigation
  • Weights: 400, 500, 600, 700

Body: DM Sans — Fallbacks: system-ui, -apple-system, BlinkMacSystemFont, sans-serif

  • Uso: Texto general, descripciones, labels
  • Weights: 300, 400, 500, 600, 700

Monospace: JetBrains Mono — Fallbacks: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco

  • Uso: Código, datos, terminales, snippets técnicos

Type Scale

Role Size Weight Line Height Letter Spacing Uso
Display 48px 800 1.10 -0.02em Hero headlines
H1 40px 700 1.20 -0.01em Títulos principales
H2 32px 600 1.25 Subtítulos
H3 24px 600 1.40 Títulos de card
Body Large 20px 400 1.70 Introducciones
Body 16px 400 1.60 Texto general
Body Small 14px 400 1.50 Descripciones
Caption 12px 500 1.40 0.02em Metadata, timestamps
Button 14px 500 1.40 0.02em Texto de botones
Overline 10px 600 1.30 0.15em Etiquetas, categorías, uppercase

Principles

La tipografía de Crea Studio busca el equilibrio entre sofisticación y calidez. Sora, con su geometría moderna y suaves curvas, comunica profesionalismo sin distanciamiento. DM Sans, con su contraste alto y tracking cómodo, asegura legibilidad y accesibilidad. El tracking ligeramente negativo en headlines (Sora 700/800) crea elegancia, mientras el tracking positivo en overline (0.15em) añade un toque metódico. No es minimalismo frio — es sofisticación humana, legible, y memorable.


5. Component Stylings

Buttons

Primary (Violeta):

  • Background: #7c3aed
  • Text: #ffffff, 14px/500 DM Sans
  • Border radius: 8px
  • Padding: 12px 24px
  • Hover: Background shifts to #8866ff, slight lift
  • Active: Scale 0.98, background #6d28d9
  • Focus: 2px box-shadow ring rgba(124, 58, 237, 0.5)
  • Transition: 200ms ease-out

Secondary (Glass):

  • Background: rgba(30, 24, 48, 0.6) con backdrop-blur(12px)
  • Text: #e5e7eb, 14px/500 DM Sans
  • Border: 1px solid rgba(136, 102, 255, 0.1)
  • Border radius: 8px
  • Padding: 12px 24px
  • Hover: Border shifts to rgba(136, 102, 255, 0.2), background rgba(30, 24, 48, 0.8)
  • Focus: 2px box-shadow ring rgba(124, 58, 237, 0.5)

Ghost (Text):

  • Background: transparent
  • Text: #8866ff, 14px/500 DM Sans
  • Border: none
  • Hover: Text shifts to #a78bfa, underline 1px #7c3aed
  • Focus: Outline 1px solid rgba(124, 58, 237, 0.3)

Disabled:

  • Background: rgba(97, 92, 104, 0.5)
  • Text: #6b7280, 14px/400 DM Sans
  • Border: none
  • Cursor: not-allowed

Cards & Containers

  • Background: rgba(30, 24, 48, 0.85) con backdrop-blur(20px) — glass panel
  • Border: 1px solid rgba(136, 102, 255, 0.1)
  • Border radius: 16px
  • Padding: 32px (desktop) / 24px (mobile)
  • Hover: Slight lift (translateY -2px), border shifts to rgba(136, 102, 255, 0.15), shadow sutil
  • Gap interno: 16px entre elementos

Inputs & Forms

  • Background: #312e42
  • Border: 1px solid rgba(136, 102, 255, 0.1) en reposo
  • Border radius: 12px
  • Font: DM Sans 16px/400
  • Placeholder color: #6b7280
  • Focus: Border shifts to #7c3aed, box-shadow 0 0 0 3px rgba(124, 58, 237, 0.2)
  • Error: Border #ef4444, texto error #fca5a5
  • Height: 48px
  • Padding: 12px 16px
  • Background: rgba(15, 10, 30, 0.95) con backdrop-blur(10px), sticky
  • Height: 64px
  • Layout: Logo (left), Links (center), CTA (right)
  • Links: DM Sans 14px/500, #9ca3af, hover #e5e7eb
  • Mobile: Hamburger menu, full-screen overlay con glass background
  • Logo size: 32px altura, Sora 700

Tags & Badges

  • Background: rgba(124, 58, 237, 0.1)
  • Text: 12px/600 Sora, #a78bfa, tracking 0.15em uppercase
  • Border radius: 9999px (pill)
  • Padding: 6px 14px
  • Overlay: rgba(15, 10, 30, 0.8) con backdrop-blur(8px)
  • Container background: rgba(30, 24, 48, 0.95) con backdrop-blur(20px)
  • Border: 1px solid rgba(136, 102, 255, 0.15)
  • Border radius: 20px
  • Shadow: 0 20px 80px rgba(0, 0, 0, 0.4)
  • Max width: 540px
  • Padding: 40px

Image Treatment

  • Border radius: 12px
  • Aspect ratios: 16:9 (hero), 4:3 (cards), 1:1 (social), 9:16 (stories)
  • Placeholder: Dot pattern #1e1830 con spinner violeta
  • Hover: Slight scale 1.02, overlay gradient rgba(124, 58, 237, 0.1)
  • Lazy loading: Native loading="lazy", skeleton loader

6. Layout Principles

Spacing System

Base unit: 8px

Token Value Uso
space-1 8px Tight gaps, inline spacing
space-2 16px Base spacing, button gaps
space-3 24px Card padding, section titles
space-4 32px Standard section padding
space-5 48px Large section breaks
space-6 64px Hero padding, major sections

Grid & Container

  • Max width: 1280px (centered con márgenes en desktop grande)
  • Columns: 12
  • Grid gap: 32px
  • Horizontal padding: 32px desktop / 24px tablet / 16px mobile
  • Breakpoints: Definidos en sección 13

Whitespace Philosophy

Espacio generoso pero con propósito. No es minimalismo vacío — es sofisticación donde el espacio negativo permite que la creatividad respire. Section padding de 64-96px en desktop crea ritmo visual. El dot pattern en fondo evoca constelaciones creativas: puntos de ideas en un universo de calma. El resultado es sofisticado sin distanciamiento, profesional sin frialdad.

Border Radius Scale

Value Contexto
8px Buttons, inputs, tags
12px Images, cards con contenido
16px Cards glass panels
20px Modales, featured containers
9999px Pills, badges, overline tags
50% Avatares circulares

7. Depth & Elevation

Level Treatment Uso
Flat Sin shadow Background principal
Glass Backdrop-blur + border violeta sutil Cards, modales, panels
Hover Lift 2px + shadow violeta sutil Interactive states
Elevated 0 20px 80px rgba(0,0,0,0.4) Modales, popovers
Focus 0 0 0 3px rgba(124,58,237,0.2) Focus ring accesible

Shadows

  • Glass panel rest: 0 0 0 1px rgba(136, 102, 255, 0.1) + backdrop-blur(20px)
  • Card hover: 0 12px 40px rgba(136, 102, 255, 0.15) + slight lift
  • Modal: 0 20px 80px rgba(0, 0, 0, 0.4)
  • Input focus: 0 0 0 3px rgba(124, 58, 237, 0.2) + border #7c3aed

Elevation Philosophy

Sombras no son negras — son violetas sutiles. Glassmorphism reemplaza elevación tradicional: blur + border sutil = profundidad. El resultado es sofisticado, no pesado. La profundidad proviene del layering (fondo → midground → foreground) y del blur, no de drop shadows agresivos. Warmth viene de lighting natural, no de colores cálidos excesivos.


MÓDULO 2: CONCEPTO DE MARCA

8. Brand Universe

Manifiesto:
Somos la pasión y la vitalidad que se experimenta cuando vives desde un permanente estado creativo. Tenemos la capacidad para transformarnos en nuevos estados si lo consideramos necesario, porque evolucionar es lo que nos permite mantenernos innovadores. También somos la calma que viene de los procesos bien pensados y llevados a cabo desde la estructura, porque creemos que hay una magia muy especial en darle rienda suelta a la creatividad manteniéndonos objetivos y estableciendo metas claras. Entonces somos algo así como moléculas de energía creativa: el balance entre la precisión y la diversión que trae cada nuevo proyecto, cada idea.

Todo lo que pensamos es posible, solo necesitamos darle espacio para que se materialice. Crea Studio nace de la infinita curiosidad por las formas, la expresión del color, y los materiales que interactúan con nosotros en el día a día, de crear cosas bellas que a la vez lleven un mensaje y despierten sensaciones en quienes entran en contacto con ellas. Y esta curiosidad no se limita únicamente al aspecto físico de las cosas — también nos lleva a la creación de experiencias diferentes y auténticas que puedan provocar recuerdos memorables en las personas.

¿Por qué? Porque las personas son el alma de los proyectos, y si logramos conectar con ellas, haremos que estos proyectos sean inmortales.

Misión:
Crear experiencias auténticas que queden en la memoria de las personas, desde la conexión y la calma de procesos bien pensados.

Visión:
Ser el referente de creatividad y diseño que equilibra pasión humana con estructura profesional. Para 2028, que Crea Studio sea reconocido por crear experiencias memorables y auténticas.

Valores de marca:

Valor Significado Comportamiento observable
Creatividad La creatividad es nuestro norte Experimentamos constantemente, no nos conformamos con lo status quo
Innovación La innovación es nuestra meta Evolucionamos, nos transformamos, buscamos nuevas formas
Autenticidad Somos fieles a nosotros mismos Nos mostramos como somos, sin pretensiones, honestos
Escucha Escucha activa y empatía como proceso Escuchamos al cliente, entendemos sus necesidades profundas
Adaptabilidad Nos adaptamos a las situaciones Sacamos lo mejor de cada situación, evolucionamos

Propósito:
Hacer que lo que pensamos sea posible, creando experiencias memorables y auténticas que conectan con las personas.

Razón de ser:
El mundo necesita más conexión humana en la creatividad. Existen estudios que priorizan el resultado sobre el proceso, agencias que se pierden en jerga, creatividad sin propósito. Crea Studio existe en el punto medio perfecto: pasión creativa + calma estructurada, vitalidad humana + precisión profesional.

Universo:
Vivimos en un universo donde la curiosidad es el motor principal. Las formas, el color, y los materiales nos inspiran. Referimos a creatividad con calidez, diseño con propósito, innovación con estructura. Inspiración en estudios creativos premium, diseño editorial sofisticado, pero siempre con un toque humano. Odiamos el frialdad corporativa, la creatividad sin proceso, la innovación vacía de propósito.

Arquetipo de marca:
El Creador. Construye experiencias, mundos, sistemas. Con pasión y estructura.

Personalidad (5 palabras clave):
1. Creativo
2. Sofisticado
3. Auténtico
4. Empático
5. Vital


MÓDULO 3: COMUNICACIÓN

9. Communication Style

Voz y Tono (Voice & Tone):

Voz (Voice) — QUIÉN SOMOS, nunca cambia:
Somos la pasión y la vitalidad del estado creativo, con la calma de procesos bien pensados. Hablamos desde la conexión, no desde la necesidad. Somos auténticos, nos mostramos como somos — sin pretensiones, sin frialdad corporativa. La creatividad es nuestro norte, la innovación nuestra meta.

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

Contexto Tono Ejemplo
Bienvenida Cercano, creativo, profesional "Hola, somos Crea Studio. Creemos que lo que pensas es posible."
Error Empático, calmado, directo "Entendido. Vamos a solucionarlo. Aquí está el camino."
Éxito Celebratorio, auténtico, centrado en el cliente "Tu idea cobró vida. Creamos algo memorable."
Urgencia Calmado, enérgico, action-oriented "Tiempo apretado. Tenemos el proceso. Empecemos."
Educativo Explicativo, simple, humano "Así es como creamos experiencias memorables."

Estilo de escritura:

  • Mixto: Profesional pero cercano
  • Segunda persona ("tú") para el cliente — "Creamos desde tu visión"
  • Usamos mayúsculas para énfasis NO — preferimos formato (bold, italic) sobre MAYÚS
  • Emojis: SÍ pero moderadamente — ✺ para conexión humana, ✽ para creatividad

Palabras que SIEMPRE usamos:

  • Conexión
  • Creatividad
  • Auténtico
  • Memorable
  • Proceso
  • Pasión
  • Calma
  • Curiosidad
  • Posible
  • Experiencia

Palabras que NUNCA usamos:

  • Disruptivo (cliché)
  • Game-changer (cliché)
  • Revolucionar (sin contexto real)
  • Unicornio (cliché)
  • Startup (si aplica)

Pronombres:

  • Nos referimos a la audiencia como: tú (singular)
  • Nos referimos a la marca como: Crea Studio / nosotros (cuando el equipo)
  • Usamos "yo" (persona individual) NO — siempre "nosotros" o "Crea Studio"

Pilares de contenido:

Pilar Descripción Ejemplos de temas
Proceso Creativo Mostrar detrás de cámaras, la pasión y la calma Behind the scenes, proceso de creación, equipo en acción
Resultados Tangibles Casos de éxito con impacto real Proyectos terminados, experiencias memorables, transformaciones
Pensamiento Creativo Reflexiones sobre creatividad y diseño Tips, filosofía, curiosidad por las formas
Ecosistema Proyectos de Crea Studio y colaboración Paguro, Triuum, Criteria, colaboración con clientes

Storytelling:
Estructura: Conexión → Creación → Experiencia. Siempre con emoción y propósito. No vendemos servicios — creamos experiencias memorables. El cliente es el protagonista, nosotros somos los facilitadores. Cada historia tiene conexión emocional: (1) La necesidad humana, (2) El proceso creativo con calma, (3) La experiencia memorable que se crea.

Story arcs:

  • Arc 1: Cliente con idea poco clara → Aplicamos acompañamiento creativo 360° → Creamos experiencia auténtica y memorable
  • Arc 2: Marca con identidad genérica → Conceptualizamos desde la curiosidad → Resultado único que conecta con personas

10. Do's and Don'ts

✅ Comunicación

  • SIEMPRE habla desde la conexión, no desde la necesidad
  • Muestra pasión creativa + calma estructurada
  • Usa palabras reales: conexión, experiencia, memorable, auténtico
  • Escribe en segunda persona ("tu visión", "creemos experiencias")
  • Demuestra proceso creativo (no solo resultado)
  • Habla de las personas como el alma de los proyectos

✅ Diseño Visual

  • Usa sofisticación con calidez (no minimalismo frio)
  • Aplica violeta (7c3aed) para CTAs y accents
  • Incluye dot pattern en fondos (no dominante)
  • Usa glass panels para cards y modales
  • Mantiene spacing generoso (32-64px en desktop)
  • Lighting natural y cálido en imágenes

❌ Comunicación

  • NUNCA hables en primera persona del singular ("yo hice", "mi equipo") — siempre "nosotros" o "Crea Studio"
  • No uses clichés de startup: "disruptivo", "game-changer", "unicorn"
  • No presentes la creatividad como magia sin proceso
  • No uses jerga sin explicación
  • No hables solo de resultados sin mencionar la conexión

❌ Diseño Visual

  • No uses minimalismo frio sin calidez
  • No uses colores fuera de la paleta (rojo saturado, verde standard)
  • No uses tipografías que no sean Sora o DM Sans
  • No omita el dot pattern en fondos — es parte de la identidad
  • No uses shadows negras pesadas — glassmorphism sutil
  • No uses neon excesivo o tech dystopian

MÓDULO 4: NEGOCIO Y ESTRATEGIA

11. Business Model

Productos / Servicios:

1. Creatividad & Estrategia
| Producto/Servicio | Descripción | Diferenciador |
|:-----------------|:------------|:--------------|
| Naming | Creación de nombres memorables con significado | Creatividad + estructura en el proceso |
| Conceptualización de Marca | Desarrollo completo de identidad de marca | Desde la conexión, no la necesidad |
| Auditoría de Marca | Análisis de identidad actual y oportunidades | Honestidad y claridad en el diagnóstico |
| Consultoría Creativa | Dirección creativa y pensamiento estratégico | Acompañamiento personalizado |
| Diseño Estratégico | Diseño con propósito y uso en mente | Co-creación con clientes |
| Diseño de Experiencias | Diseño de puntos de contacto completos | Pensar cada punto de contacto |

2. Diseño
| Producto/Servicio | Descripción | Diferenciador |
|:-----------------|:------------|:--------------|
| Diseño Gráfico | Branding, identidad visual, materiales | Equilibrio estética + uso |
| Diseño Interactivo | Diseño digital con foco en experiencia | UX + diseño en armonía |
| Membresías de Diseño | Servicios recurrentes de diseño | Accesibilidad + calidad constante |

3. Ecosistemas Digitales
| Producto/Servicio | Descripción | Diferenciador |
|:-----------------|:------------|:--------------|
| Sitios Web y Tiendas en Línea | Desarrollo de plataformas digitales | Excepcionales en cada punto de contacto |
| Bases de Datos | Sistemas de datos estructurados | Organización y accesibilidad |
| Web Apps | Aplicaciones web funcionales | Usabilidad + diseño en armonía |
| Omnicanalidad | Integración de múltiples canales | Coherencia en todos los touchpoints |
| Automatizaciones | Procesos automatizados inteligentes | Eficiencia manteniendo calidad |
| Asistentes AI y Agentes IA | Automatización inteligente con IA | Innovación aplicada a procesos |

4. Contenidos & Difusión
| Producto/Servicio | Descripción | Diferenciador |
|:-----------------|:------------|:--------------|
| Acompañamiento 360 en Contenidos y Difusión | Estrategia integral de contenidos | Pensado en objetivos del cliente |
| Cursos y Podcast | Educación y pensamiento creativo | Compartir curiosidad y proceso |

Audiencia target:

Segmento Demográficos Psicográficos Problemas que resolvemos
Emprendedores 25-40, emprendedores creativos, buscan identidad de marca Buscan autenticidad, procesos claros, resultados memorables Identidad genérica, falta de proceso creativo, desconexión con audiencia
Marcas Establecidas 30-55, negocios establecidos, buscan innovación Buscan diferenciación, evolución, renovación Identidad estancada, desconexión con nuevos consumidores
Startups 25-35, startups tecnológicas, buscan diseño Buscan diseño profesional con propósito Diseño sin estrategia, identidad poco memorables

Canales de distribución:

Canal Uso principal Frecuencia
Web (crea.studio) Portafolio, servicios, contacto Constantemente actualizado
Instagram Portafolio visual, proceso creativo, detrás de cámaras 4-5 posts/semana, stories diarios
LinkedIn Thought leadership, casos de éxito B2B 2-3 posts/semana
WhatsApp Atención comercial y agendamiento de reuniones Respuesta < 2 horas en hora laboral

Diferenciadores vs competencia:

Competidor Qué hacemos mejor que ellos Qué ellos hacen mejor que nosotros
Agencias tradicionales Autenticidad humana + proceso creativo Historia consolidada, grandes portafolios
Freelancers Estructura + proceso + consistencia Precio bajo, flexibilidad total
Agencias de IA (internacionales) Enfoque humano con tecnología cuando aplica Presencia global, cases internacionales

Stack técnico:

  • Diseño: Figma, Adobe Creative Suite, Sketch
  • Desarrollo Web: Next.js, React, Node.js, Tailwind CSS
  • Hosting: Vercel, Netlify, 20i Reseller
  • Automatización (si aplica): Zapier, Make (Integromat), Make.com
  • IA (opcional): Asistentes IA y Agentes IA para automatización de procesos

Metodología:
1. Acompañamientos creativos 360° ✺ — Desde la concepción hasta el resultado
2. Desarrollo por proyectos y entregables específicos ✽ — Claridad en entregables, procesos transparentes


12. Content Strategy

Pilares de contenido (con enfoque de estrategia):

Pilar Objetivo Formatos que usamos Frecuencia
Proceso Creativo Mostrar pasión + calma del proceso Behind scenes, BTS, team in action 2-3 posts/semana
Resultados Tangibles Demostrar experiencias memorables Case studies, proyectos terminados, transformaciones 1 post/semana
Pensamiento Creativo Compartir curiosidad y filosofía Tips, reflexiones, filosofía creativa 1-2 posts/semana
Ecosistema Mostrar alcance y colaboración Paguro, Triuum, Criteria, colaboraciones 1 post/2 semanas

Temas permitidos:

  • Proceso creativo con calma y pasión
  • Diseño con propósito y estructura
  • Experiencias memorables y auténticas
  • Curiosidad por formas, color, materiales
  • Pensamiento creativo e innovación
  • Casos de éxito reales
  • Colaboración y ecosistema

Temas prohibidos:

  • Noticias triviales del día (política, farándula, etc.)
  • Contenido sin valor agregado (memes sin contexto, re-shares vacíos)
  • Clichés de startup sin fondo real
  • Promesas de "revolución" sin explicación
  • Jingo sin contenido técnico o creativo

Formatos que usamos:

Formato Descripción Ejemplo de uso
Blog post Artículos de 800-1500 palabras con pensamiento creativo "Cómo creamos experiencias memorables desde la conexión"
Reel 9:16 video 15-30s, BTS del proceso Behind the scenes del proyecto
Carrusel 4-7 slides educativos o de proceso Proceso creativo paso a paso
LinkedIn article Thought leadership, 600-1000 palabras Reflexiones sobre creatividad y diseño
Case study Antes/después, proceso, resultado Paguro: de concepto a realidad

Calendario de contenido:

  • Lunes: Proceso creativo (BTS, team in action)
  • Miércoles: Resultado tangible (case study, proyecto)
  • Viernes: Pensamiento creativo (reflexión, filosofía)

MÓDULO 5: TÉCNICO Y RESPONSIVE

13. Responsive Behavior

Breakpoints

Name Width Key Changes
Mobile <640px Single column, hamburger nav, display 32px, padding 16px
Tablet 640-1024px 2-column grids, nav still collapsed, padding 24px
Desktop 1024-1280px Full layout, nav horizontal, 3-column grids, padding 32px
Large >1280px Max-width 1280px centered, generous margins

Touch Targets

  • Minimum: 48x48px (WCAG AA)
  • Mobile nav: 56x56px
  • Buttons: 48px height mínimo

Collapsing Strategy

  • Navigation: Full links → hamburger menu below 1024px
  • Grids: 3-col → 2-col at 1024px → 1-col at 640px
  • Typography: Display 48px → 32px → 24px
  • Spacing: 64px → 48px → 32px → 16px
  • Cards: Single column stack on mobile

14. Agent Prompt Guide

Quick Color Reference

Primary CTA: Primary Violeta (#7c3aed)
Background: Background Primary (#0f0a1e)
Surface: Background Secondary (#1e1830)
Heading: Text Primary (#e5e7eb)
Body text: Text Primary (#e5e7eb)
Border: 1px rgba(136, 102, 255, 0.1)
Error: #ef4444
Link: Info/Link (#8866ff)

Quick Brand Voice Reference

Voice: Pasión creativa + calma estructurada. Hablamos desde la conexión.
Tono default: Cercano, creativo, profesional
Nos referimos a la audiencia como: 
Pronombres de marca: nosotros / Crea Studio (nunca "yo")
Emojis:  pero moderadamente ( conexión,  creatividad)
Palabras clave: Conexión, experiencia, memorable, auténtico, proceso, pasión, calma

Example Component Prompts

  • "Create a hero section for Crea Studio: sofisticated background with dot pattern, glass panels with subtle violet border, headline in Sora Bold with gradient, warm lighting, CTA button 7c3aed radius 8px"
  • "Design a service card: glass panel background with backdrop-blur, border 1px rgba(136,102,255,0.1), radius 16px, title in Sora 600, description in DM Sans 400"
  • "Write a social media caption using Crea Studio's voice: speak from connection not necessity, show passion + calm structure, use tú (singular), demonstrate creative process"
  • "Generate a key visual: sofisticated composition with dot pattern texture, human connection element, natural warm lighting, violet and indigo accents with subtle orange warmth, professional yet approachable"

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 (Sora display + DM Sans body)
4. Revisa spacing contra sección 6 (8px base unit, 32-64px section padding)
5. Confirma que el copy respeta sección 9 (voz: pasión + calma, conexión)
6. Valida que el contenido está en los pilares de sección 9 (proceso creativo, resultados, pensamiento)
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. Ecosistema Crea Studio

Proyectos del Portafolio:

Proyecto Descripción Tipo
Paguro Branding / Web Identidad visual + sitio web
Triuum Branding / Naming Identidad de marca + creación de nombre
Criteria Branding / Naming Identidad de marca + creación de nombre

Proyectos del Ecosistema Interno:

Proyecto Descripción Estado
Clumps Embajadores digitales transmedia En desarrollo
Nutz Mantequillas naturales artesanales Proyecto personal (Effy)

16. Metadatos Técnicos

Versión BRAND.md: v2.0
Última actualización: 22 de abril de 2026
Responsable: Daniel Palacios Guzmán (Co-fundador, Director Creativo)
Aprobado por: Stephany Galvis Bonilla (Co-fundadora, Directora Operativa)
Estado: Draft — Pendiente revisión y aprobación final


17. Herramientas Específicas (Integrado de CREATIVE_DNA_TEMPLATE.md)

Voz ElevenLabs ID: [PENDIENTE] — Si se usa para voz sintética
Modelo de Imagen preferido: [PENDIENTE] — Si se usa generación de imágenes


BRAND.md v2.0 — Basado en análisis del sitio web crea.studio + integración de CREATIVE_DNA_TEMPLATE.md · CREA STUDIO S.A.S. · NIT 901.762.033-1 · 2026

Left-click: follow link, Right-click: select node, Scroll: zoom
x