feat: rebrand a Manual de Identidad Visual v1.0
Migra todo el sitio a la marca oficial aprobada por la dueña: - Logotipo cre≡er (el símbolo ≡ reemplaza la 'e' central, en dorado) - Paleta: Azul Profundo #0A1D5D + Dorado Estratégico #C4942E + Blanco + neutros - Tipografía: Aptos (Inter como fallback web), fin del sistema híbrido Georgia/Inter - Tagline 'CLARIDAD · DIRECCIÓN · CRECIMIENTO' + eslogan 'Estrategia que transforma.' Componentes, tokens de Tailwind, lib/content.ts, docs (dueña-directrices + spec) y tests actualizados. Typecheck, lint, 27/27 tests y build estática verdes. Basado en docs/branding.jpeg (Manual v1.0, mayo 2026).
This commit is contained in:
1 parent
8fdfc1be5c
commit
60d3f22e6b
22 files changed
+212
-181
No files matched your search
+78
-53
@@ -94,80 +94,104 @@ Empresarios que **ya lograron tracción**, pero llegaron al punto donde **trabaj
|
||||
|
||||
---
|
||||
|
||||
## Restricciones fijadas (decisiones ya tomadas)
|
||||
## Sistema de diseño oficial — Manual de Identidad Visual v1.0 (mayo 2026)
|
||||
|
||||
Estas son decisiones bloqueadas durante el brainstorming. **No reabrir sin consultar.**
|
||||
> **Fuente:** `docs/branding.jpeg` — Manual de Identidad Visual aprobado por la dueña (28/jul/2026). **Reemplaza** todas las decisiones previas de paleta, tipografía y logotipo del brainstorming y del pptx.
|
||||
|
||||
### Paleta
|
||||
- Blanco cálido `#FBFAF7` / Blanco puro `#FFFFFF` (fondos)
|
||||
- Navy `#0A1F44` (texto principal + CTAs)
|
||||
- Dorado tostado `#B8901f` (acentos sobre claro) / Dorado `#D4AF37` (acentos sobre oscuro)
|
||||
- **NO amarillo eléctrico tipo Hormozi** (rompe cercanía)
|
||||
### Filosofía de marca
|
||||
> *"Transformamos la complejidad en claridad estratégica para construir ecosistemas empresariales que crecen con dirección y propósito."*
|
||||
|
||||
### Sistema de diseño extraído del pptx (BASE)
|
||||
Proceso visual: **Complejidad** (múltiples variables) → **Enfoque** (priorizamos y alineamos lo esencial) → **Claridad** (una estrategia, una dirección, resultados extraordinarios).
|
||||
|
||||
El pptx `CREEER_Plantilla_Presentacion.pptx` es la **base visual oficial** de la marca. Estos datos se extrajeron parseando el archivo y deben respetarse:
|
||||
### Símbolo principal
|
||||
- **Tres líneas horizontales** (≡) que representan el proceso de transformar lo complejo en lo esencial
|
||||
- Las líneas van de muchas/desordenadas (complejidad) a pocas/alineadas (claridad)
|
||||
- Significado: "una estrategia clara, con dirección y propósito"
|
||||
|
||||
**Formato:** 16:9 widescreen (33.87 × 19.05 cm)
|
||||
### Logotipo
|
||||
- Wordmark: **`cre≡er`** — la "e" central se reemplaza por el **símbolo de tres líneas** (≡) en dorado
|
||||
- SIEMPRE en minúsculas
|
||||
- Tagline debajo: `CLARIDAD · DIRECCIÓN · CRECIMIENTO`
|
||||
- Eslogan: *"Estrategia que transforma."*
|
||||
|
||||
**Paleta usada en el pptx (100% confirmada):**
|
||||
- Dorado `#D4AF37` → **siempre BOLD, para títulos y énfasis** (Master Class, Agenda, sección, "Gracias", y la "e" del wordmark)
|
||||
- Navy `#0A1F44` → **body text** (peso regular)
|
||||
- Blanco implícito (fondos)
|
||||
**Versiones del logotipo:**
|
||||
| Versión | Descripción |
|
||||
|---------|-------------|
|
||||
| Principal | `cre≡er` + tagline "CLARIDAD · DIRECCIÓN · CRECIMIENTO" |
|
||||
| Secundaria | `cre≡er` sin tagline |
|
||||
| Ícono | Solo el símbolo ≡ (tres líneas) |
|
||||
| Negativa | Fondo navy, logotipo en blanco + dorado |
|
||||
| Negativo (ícono) | Símbolo ≡ en dorado sobre navy |
|
||||
| Escala de grises | Todo en grises |
|
||||
|
||||
**Tipografía del pptx:**
|
||||
- Fuente: **Calibri** (sans-serif) — majorFont y minorFont del tema
|
||||
- **Decisión RESUELTA (sistema híbrido):**
|
||||
- **Wordmark** `cre`**`e`**`er.` → **Georgia 700 italic** (minúscula, "e" central en peso 900 + dorado, punto final dorado). El usuario prefiere la elegancia del wordmark serif sobre la fidelidad estricta al pptx sans-serif. El wordmark es la firma de marca.
|
||||
- **Headlines** → **Inter 900** (Google Fonts) uppercase — punch Hormozi.
|
||||
- **Body / eyebrow / CTA** → Inter 400/600.
|
||||
- **Citas institucionales** → Georgia italic (anclan con el wordmark).
|
||||
- Principio: **serif = voz de marca**, **sans = voz funcional**.
|
||||
**Tamaño mínimo:** impreso 20 mm, digital 120 px.
|
||||
|
||||
**Escala tipográfica (extraída de los slides reales):**
|
||||
| Uso | Tamaño | Estilo | Color |
|
||||
|---|---|---|---|
|
||||
| Caption/tagline | 14pt | regular | navy |
|
||||
| Subtítulo | 24pt | regular | navy |
|
||||
| Body / lista | 28pt | regular | navy |
|
||||
| Cierre | 32pt | regular | dorado |
|
||||
| Título de sección | 36pt | **BOLD** | dorado |
|
||||
| Título grande / cita | 40pt | **BOLD** | navy o dorado |
|
||||
| Hero | 48pt | **BOLD** | dorado |
|
||||
### Paleta de colores
|
||||
|
||||
**Wordmark `cre`+`e`+`er` (confirmado a múltiples tamaños):**
|
||||
- "Cre" + "e" (BOLD + `#D4AF37`) + "er"
|
||||
- La **2ª "e"** (la del medio) va en dorado + negrita
|
||||
- Aparece en 14pt (slide 1) y 28pt (slide 2)
|
||||
**Colores principales:**
|
||||
| Nombre | Hex | Pantone | RGB | Uso |
|
||||
|--------|-----|---------|-----|-----|
|
||||
| **Azul Profundo** | `#0A1D5D` | 2965 C | 10, 29, 61 | Texto principal, fondos oscuros, CTAs |
|
||||
| **Dorado Estratégico** | `#C4942E` | 872 C | 196, 154, 46 | Acentos, títulos, símbolo ≡, énfasis |
|
||||
|
||||
**Logo PNG:** `image1.png` — 1200×400 px, aspect **3:1 horizontal**. En slide 1 ocupa 27.38 × 9.13 cm (es el **protagonista visual**, no un detalle pequeño).
|
||||
**Colores neutros:**
|
||||
| Nombre | Hex | RGB | Uso |
|
||||
|--------|-----|-----|-----|
|
||||
| Azul Claro | `#C8EEF5` | 222, 226, 245 | Fondos alternativos, secciones suaves |
|
||||
| Gris Claro | `#F2F2F2` | 242, 242, 242 | Fondos neutros, separadores |
|
||||
| Gris Medio | `#AAAAAA` | 166, 166, 166 | Texto secundario, placeholders |
|
||||
| Blanco | `#FFFFFF` | 255, 255, 255 | Fondo principal |
|
||||
|
||||
**Patrones de alineación:**
|
||||
- `center` (align=ctr) → hero / títulos de impacto
|
||||
- `right` (align=r) → momentos asimétricos (slide 2)
|
||||
- `left` (align=l) → contenido, citas, cierre
|
||||
**Regla:** NO amarillo eléctrico tipo Hormozi (rompe cercanía).
|
||||
|
||||
**Recursos visuales recurrentes:**
|
||||
- Separador de disciplinas: **" • "** (Comunicación • Digital • Experiencias)
|
||||
- Listas numeradas: **"1. " "2. " "3. "** (sin bullets)
|
||||
- Smart quotes **"" ""** para citas institucionales
|
||||
### Tipografía
|
||||
|
||||
| Tipo | Fuente | Pesos disponibles | Uso |
|
||||
|------|--------|--------------------|-----|
|
||||
| **Principal** | **Aptos** | Light, Book, Regular, Medium, Bold, Black | Headlines, body, CTA, UI general |
|
||||
| **Secundaria** | **Aptos Narrow** | Light, Book, Regular, Medium, Bold, Black | Taglines, subtítulos, texto compacto |
|
||||
|
||||
> ⚠️ **Nota para web:** Aptos es una fuente de Microsoft sin versión Google Fonts. Para la landing se debe: (a) autoalojar los archivos .woff2 con `@font-face`, o (b) usar un fallback con métricas similares (ej. **Inter** para body, que es visualmente cercana). Decisión a confirmar con la dueña.
|
||||
|
||||
### Iconografía
|
||||
- Estilo: **líneas simples, geométricas, consistentes en grosor**
|
||||
- Iconos definidos: Análisis, Enfoque, Estrategia, Crecimiento, Alineación, Resultados
|
||||
- Colores: Azul Profundo + Dorado Estratégico
|
||||
|
||||
### Recursos visuales
|
||||
- **Patrón de puntos** (grid de puntos dorados)
|
||||
- **Líneas y divisores** (horizontales, en dorado o navy)
|
||||
- **Recurso gráfico** (las tres líneas del símbolo en diversas orientaciones y escalas)
|
||||
|
||||
### Patrones de alineación
|
||||
- `center` → hero / títulos de impacto
|
||||
- `right` → momentos asimétricos
|
||||
- `left` → contenido, citas, cierre
|
||||
- Mucho aire/whitespace alrededor de los textos
|
||||
|
||||
**Anclas de copy del pptx (verbatim):**
|
||||
- Tagline: *"creeer en ti, en mi, en el proyecto"* (slide 1 y 2)
|
||||
- Cita institucional: *"El tiempo no se compra, se invierte"* (slide 6, 40pt bold navy)
|
||||
- Cierre: *"Gracias por tu tiempo"* + *"CREEER - Comunicación • Digital • Experiencias"* (slide 7)
|
||||
---
|
||||
|
||||
### Wordmark
|
||||
- SIEMPRE en minúsculas: `creeer`
|
||||
- La "e" central (2ª de las 3) en dorado + bold
|
||||
- Termina con punto dorado: `creeer.`
|
||||
## Restricciones fijadas (decisiones bloqueadas)
|
||||
|
||||
Estas decisiones **no se reabren sin consultar a la dueña.**
|
||||
|
||||
### Copy
|
||||
- Voz en **segunda persona ("tú")** — nunca "el empresario", siempre "tu negocio"
|
||||
- Sin jerga corporativa
|
||||
- "Simple, directo, limpio" aplica al copy también
|
||||
|
||||
### Frases-ancla aprobadas
|
||||
- *"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad."*
|
||||
- *"Cuando el esfuerzo ya no alcanza, la estrategia se vuelve indispensable."*
|
||||
- *"El tiempo no se compra, se invierte."* (institucional)
|
||||
- *"Devuélvele claridad al rumbo de tu empresa."* (promesa)
|
||||
- *"Estrategia que transforma."* (eslogan oficial)
|
||||
|
||||
### Taglines
|
||||
- **Eslogan oficial:** *"Estrategia que transforma."*
|
||||
- **Tagline de marca:** *"CLARIDAD · DIRECCIÓN · CRECIMIENTO"*
|
||||
- **Tagline emocional:** *"creeer en ti, creeer en mí, creeer en el proyecto."*
|
||||
|
||||
### Estructura
|
||||
- One-page (single page)
|
||||
- Sin backend, contacto por enlaces directos (WhatsApp, email, LinkedIn)
|
||||
@@ -175,6 +199,7 @@ El pptx `CREEER_Plantilla_Presentacion.pptx` es la **base visual oficial** de la
|
||||
|
||||
### Pendiente de decisión de la dueña
|
||||
- **Hero final:** HV-1 (bold sans sin cajas) vs HV-2 (palabras en caja) — ver `docs/hero-finalists.md`
|
||||
- **Tipografía web:** ¿Alojar Aptos como web font o usar Inter como fallback?
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in new issue
Block a user