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), backgroundrgba(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 3pxrgba(124, 58, 237, 0.2) - Error: Border
#ef4444, texto error#fca5a5 - Height: 48px
- Padding: 12px 16px
Navigation
- 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
Modal & Overlay
- 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
#1e1830con 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 |
| Portafolio visual, proceso creativo, detrás de cámaras | 4-5 posts/semana, stories diarios | |
| Thought leadership, casos de éxito B2B | 2-3 posts/semana | |
| 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: tú
Pronombres de marca: nosotros / Crea Studio (nunca "yo")
Emojis: SÍ 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