0 Fork 0

Files

T

erikgh 60d3f22e6b 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).

2026-07-28 10:51:48 -06:00

12 KiB

Raw Blame History

Spec de diseño · creeer landing page

Fecha: 2026-07-20 Estado: Borrador (pendiente de revisión de la dueña para la decisión final del hero) Skill usado: brainstorming

Lectura obligatoria antes de implementar: docs/dueña-directrices.md (directrices verbatim de la dueña + posicionamiento estratégico). Toda decisión debe pasar por su filtro: "seguridad + cercanía" y "simple, directo, limpio".

1. Visión del proyecto

Landing page one-page para creeer, marca personal de una estratega de crecimiento. El objetivo es credibilidad y prestigio (no venta directa ni generación de leads por formulario). El contacto es por enlaces directos.

Promesa central: claridad estratégica para empresarios con tracción que llegaron a un punto de inflexión.

Tono maestro: seguridad + cercanía. Autoridad accesible, no distante.

2. Brief consolidado

Eje	Decisión
Tipo de sitio	Landing one-page (single page)
Objetivo #1	Credibilidad / prestigio
Audiencia	Empresarios con tracción en punto de inflexión
Idioma	Español
Stack	Next.js 14 (App Router) + TypeScript + Tailwind CSS + Framer Motion
Modo	`output: export` (HTML estático, sin backend)
Contacto	Enlaces directos (WhatsApp, email, LinkedIn) — sin formulario
Deploy	Vercel o Netlify

3. Sistema de diseño

Actualizado 28/jul/2026 — Basado en el Manual de Identidad Visual v1.0 (mayo 2026). Ver docs/branding.jpeg y docs/dueña-directrices.md.

3.1 Paleta

Tokens de color (Tailwind):

Token	Hex	Uso
`bg-white`	`#FFFFFF`	Fondo base y hero
`bg-azul-profundo`	`#0A1D5D`	Secciones oscuras (04 y 07)
`text-azul-profundo`	`#0A1D5D`	Texto principal
`text-white`	`#FFFFFF`	Texto sobre fondo oscuro
`text-dorado` / `bg-dorado`	`#C4942E`	Dorado Estratégico — acentos, títulos, símbolo ≡
`bg-azul-claro`	`#C8EEF5`	Fondos alternativos, secciones suaves
`bg-gris-claro`	`#F2F2F2`	Fondos neutros, separadores
`text-gris-medio`	`#AAAAAA`	Texto secundario / placeholders

NO usar amarillo eléctrico tipo Hormozi — rompe la cercanía.

3.2 Tipografía

Uso	Familia	Pesos	Estilo
Headlines, body, CTA, UI	Aptos	Light–Black	normal
Taglines, subtítulos compactos	Aptos Narrow	Light–Black	normal

Nota web: Aptos (Microsoft) no está en Google Fonts. Se autoaloja como .woff2 o se usa Inter como fallback métricamente similar (cargado desde Google Fonts como respaldo).

3.3 Escala tipográfica

Rol	Tamaño (móvil / desktop)	Peso
Hero headline	32px / 48px	Bold o Black
Sección título	28px / 36px	Bold
Cita ancla	24px / 32px	Bold italic
Subtítulo / body large	18px / 24px	Regular
Body	16px / 18px	Regular
Eyebrow / label	11px / 12px	Medium uppercase (tracking +3px)
Caption / métricas label	10px / 11px	Medium uppercase

3.4 Wordmark / Logotipo

cre≡er — siempre en minúsculas, Aptos (o Inter como fallback):

cre en Azul Profundo #0A1D5D (sobre claro) o blanco #FFFFFF (sobre oscuro)
≡ (símbolo de tres líneas, reemplaza la "e" central) en Dorado Estratégico #C4942E
er en el color del "cre"

Tagline debajo: CLARIDAD · DIRECCIÓN · CRECIMIENTO Eslogan: "Estrategia que transforma."

Tamaño: base 32–48px según contexto. Es la firma de marca, siempre en minúsculas.

3.5 Recursos visuales recurrentes

Separador de disciplinas: " • " (Comunicación • Digital • Experiencias)
Listas numeradas: "1." "2." "3." (sin bullets)
Smart quotes "" "" para citas institucionales
Flecha "→" en CTAs
Mucho aire/whitespace
Patrón de puntos (grid de puntos dorados) — recurso del branding
Líneas y divisores en dorado o azul profundo
Iconografía: líneas simples, geométricas, consistentes en grosor

3.6 Espaciado y ritmo

Container max-width: 1152px (max-w-5xl / 7xl en Tailwind)
Padding horizontal: 24px (móvil) / 48px (desktop)
Espaciado vertical entre secciones: 96px desktop / 64px móvil
Border-radius: 0 (cuadrado, editorial) o 4px sutil en cards

3.7 Layout de secciones

Secciones claras: fondo blanco #FFFFFF. Alternar con #F2F2F2 (gris claro) o #C8EEF5 (azul claro) para ritmo visual.
Secciones oscuras (04, 07): fondo Azul Profundo #0A1D5D con texto blanco y acentos Dorado #C4942E
Esto da ritmo visual al scroll y enmarca las partes estratégicas (mecanismo + cierre)

4. Hero (finalistas pendientes de decisión de la dueña)

Dos finalistas guardados en docs/hero-finalists.md. La dueña elige uno. Ambos comparten:

Logotipo cre≡er (Aptos / Inter)
Eyebrow: — tu estratega de crecimiento —
Headline copy: "Tu negocio no necesita más esfuerzo. Necesita más claridad."
CTA: Define tu siguiente movimiento → (Azul Profundo, white text, chunky)
Fondo blanco #FFFFFF
Sin escasez (sin cupos/cohorte)

4.1 HV-1 · Hormozi ligero

Headline en Aptos Black uppercase
"más esfuerzo" en dorado, "más claridad" subrayado en dorado
- punch / conversión, − cercanía

4.2 V-a · Editorial minimal

Headline en Aptos Bold
Sin subhead, sin métricas. Solo wordmark → eyebrow → headline → CTA
- cercanía / limpieza, − punch

Implementación: el componente <Hero> recibe una prop variant="hormozi" | "editorial". La diferencia es 1 className en el headline. La dueña puede decidir en QA.

5. Flujo de secciones (one-page, 7 secciones)

01 · Hero

La promesa. HV-1 o V-a. CTA primario.

02 · Frase ancla

Cita a gran escala, Georgia italic centrada:

"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad."

Motivo recurrente de marca. Fondo claro.

03 · Para quién (filtro)

Cualifica al lector. Headline: "¿Llegaste a tu punto de inflexión?" + 3 chips/tags:

✓ tienes tracción
✓ más esfuerzo no rinde
✓ necesitas claridad

Lenguaje: "Esto es para ti si..." Fondo claro.

04 · Cómo trabajo (mecanismo) — SECCIÓN OSCURA

El mecanismo único (lo inimitable). Tres pasos en secuencia: Inmersión → Desafiar supuestos → Estrategia ejecutable

Fondo navy #0A1F44, texto marfil, números dorado #D4AF37. Sin iconos — los números 01/02/03 (Georgia italic, grandes) hacen todo el peso visual.

05 · Las disciplinas

Grid de 3 columnas:

Comunicación
Digital
Experiencias

Framed como herramientas, no como la promesa. Borde superior dorado en cada card. Fondo claro.

06 · Sobre la estratega

La mente detrás de creeer. Retrato (foto de la dueña) + bio corta en primera persona. Credibilidad humana. Refuerza "cercanía".

Pendiente: ¿la dueña tiene foto profesional disponible? Si no, se usa placeholder con gradiente navy/dorado y se deja la sección lista para meter la foto después.

07 · Cierre + contacto — SECCIÓN OSCURA

Frase de cierre (Georgia italic sobre navy):

"Devuélvele claridad al rumbo de tu empresa."

CTA final: Define tu siguiente movimiento → (botón dorado). Debajo, enlaces directos:

Fondo navy, acentos dorado.

Recurrencia del CTA

Define tu siguiente movimiento → aparece en 01 y 07. Ancla el principio y el final.

6. Messaging y copy

6.1 Principio rector

Aplicar el skill transformation-positioning: vender el hoyo, no el taladro. La claridad es el producto; estrategia, marketing, comunicación son los medios.

6.2 Frases-ancla aprobadas (de la dueña)

"Las empresas no dejan de crecer por falta de talento; dejan de crecer por falta de claridad." (sección 02)
"Cuando el esfuerzo ya no alcanza, la estrategia se vuelve indispensable." (uso opcional)
"El tiempo no se compra, se invierte." (sección 06 o footer)
"Devuélvele claridad al rumbo de tu empresa." (sección 07)

6.3 Voz

Segunda persona ("tú" / "tu negocio") — nunca "el empresario"
Directa, sin jerga corporativa
"Simple, directo, limpio" aplica al copy también

7. Restricciones técnicas

Sin backend — contacto por enlaces directos (WhatsApp https://wa.me/..., email mailto:, LinkedIn)
Estático — output: export en next.config.js
Sin escasez en el hero — decisión de la dueña (no mostrar cupos/cohorte/Generación Fundadora en el hero)
Wordmark siempre minúsculas — creeer jamás CREEER ni Creeer

8. SEO, accesibilidad y rendimiento

8.1 SEO

Title tag: creeer · tu estratega de crecimiento
Meta description: la frase de posicionamiento (150–160 chars)
Open Graph image + Twitter card
Lang es en <html>
Estructura semántica: <main>, <section>, <h1> único en hero, <h2> por sección
JSON-LD Person o ProfessionalService para la estratega

8.2 Accesibilidad (WCAG 2.2 AA)

Contraste navy #0A1F44 sobre blanco: 14.6:1 ✅
Contraste dorado tostado #B8901f sobre blanco: 4.0:1 — usar solo para texto grande o decorativo, no body
Contraste marfil #F5EBD0 sobre navy: 13.1:1 ✅
alt en el retrato de la dueña (sección 06)
aria-label en iconos de contacto (WhatsApp, email, LinkedIn)
Focus visible en todos los links y botones
prefers-reduced-motion: desactivar animaciones Framer Motion

8.3 Rendimiento (Core Web Vitals)

Fuentes: Inter desde Google Fonts con display: swap + preload. Georgia es system font.
LCP: el headline del hero (texto, no imagen) — rápido
Animaciones Framer Motion: usar LazyMotion + domAnimation para reducir bundle
Imagen del retrato: <Image> de Next con priority solo si está above the fold (sección 06 está below the fold, sin priority)
Sin JavaScript crítico para el contenido (el hero es texto, se ve sin JS)

9. Animación (Framer Motion)

Entrada escalonada del hero al montar:

Wordmark (fade + slight Y)
Eyebrow (fade, delay 0.1s)
Headline (fade + Y, delay 0.2s)
CTA (fade + Y, delay 0.3s)

Duración: 0.4–0.6s cada uno. Easing: [0.22, 1, 0.36, 1] (easeOutExpo).

En scroll (secciones 02–07): whileInView con viewport={{ once: true }} — fade + Y de 20px, duración 0.5s.

Accesibilidad: todo envuelto en check de useReducedMotion() — si el usuario prefiere reducir movimiento, las animaciones se desactivan y el contenido aparece estático.

10. Pendientes / decisiones abiertas

Pendiente	Quién decide	Impacto
Hero final: HV-1 vs V-a	Dueña	1 className en `<Hero>`
Foto de la dueña para sección 06	Dueña	Si no hay, placeholder gradiente
Casos/testimonios (sección nueva entre 05 y 06)	Dueña	Solo si tiene casos documentados
Datos de contacto reales (WhatsApp, email, LinkedIn)	Dueña	Links del footer/07
Dominio	Dueña	Deploy
Copy definitivo de cada sección	Redacción posterior	Contenido

11. Entregables de diseño

docs/dueña-directrices.md — directrices verbatim + posicionamiento
docs/hero-finalists.md — HV-1 y V-a con specs completas
docs/superpowers/specs/2026-07-20-creeer-landing-design.md — este spec
Mockups en .superpowers/brainstorm/2447-1784580629/content/ (sesión visual companion)

12. Próximos pasos

Dueña revisa este spec + hero-finalists.md y elige HV-1 o V-a
Una vez aprobado, invocar el skill writing-plans para crear el plan de implementación detallado (sprint por sprint, tareas técnicas, orden de build)
El plan se ejecutará con Next.js scaffold + Tailwind + Framer Motion, un componente por sección

12 KiB Raw Blame History Unescape Escape