From 09dedad6aecebb31a52d2f7495993144ad1ccbc0 Mon Sep 17 00:00:00 2001 From: erikgh Date: Tue, 28 Jul 2026 11:56:05 -0600 Subject: [PATCH] =?UTF-8?q?feat:=20tipograf=C3=ADa=20Open=20Sans=20(reempl?= =?UTF-8?q?aza=20Inter)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Aptos descartada para web: su EULA (Microsoft) prohíbe distribuirla o servirla públicamente. Open Sans (OFL) es la open-source más cercana — comparte diseñador con Aptos (Steve Matteson). Cargada vía next/font/google, autoalojada en el build estático (cero requests externos en runtime). - app/layout.tsx: Inter → Open_Sans (pesos 400/600/700/800 + itálicas) - tailwind.config.ts: sans → var(--font-open-sans); token 'narrow' eliminado - app/globals.css: body font-family - docs (AGENTS, dueña-directrices, spec): Open Sans documentado, decisión registrada (28/jul/2026) Typecheck, lint, 27/27 tests y build verdes. --- AGENTS.md | 2 +- app/globals.css | 2 +- app/layout.tsx | 6 +++--- docs/dueña-directrices.md | 10 ++++------ .../specs/2026-07-20-creeer-landing-design.md | 13 ++++++------- tailwind.config.ts | 6 +++--- 6 files changed, 18 insertions(+), 21 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index d003ef2..fe3db67 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -15,7 +15,7 @@ One-page landing para **creeer**, marca personal de una estratega de crecimiento - **Tono maestro:** "seguridad + cercanía" + "simple, directo, limpio". - **Logotipo:** `cre≡er` — **SIEMPRE minúsculas**, la "e" central reemplazada por el **símbolo ≡** (tres líneas) en dorado. **Nunca** `CREEER`, `Creeer`, ni mayúsculas. - **Paleta:** Azul Profundo `#0A1D5D` + Dorado Estratégico `#C4942E` + Blanco `#FFFFFF` + neutros (Azul Claro `#C8EEF5`, Gris `#F2F2F2`, Gris Medio `#AAAAAA`). **Sin amarillo eléctrico** tipo Hormozi. -- **Tipografía:** **Aptos** (principal) + **Aptos Narrow** (secundaria). En web: autoalojar .woff2 o usar Inter como fallback métricamente similar. +- **Tipografía:** **Open Sans** (vía `next/font/google`). Es lo más cercano a Aptos en open-source (mismo diseñador: Steve Matteson). **Aptos descartada** en web: la EULA de Microsoft prohíbe servirla públicamente. Decisión de la dueña, 28/jul/2026. - **Tagline de marca:** "CLARIDAD · DIRECCIÓN · CRECIMIENTO". Eslogan: "Estrategia que transforma." - **Voz:** segunda persona ("tú"/"tu negocio"), sin jerga corporativa. - **Sin escasez en el hero:** no mostrar cupos, cohorte ni "Generación Fundadora" arriba (decisión de la dueña). diff --git a/app/globals.css b/app/globals.css index 5a4b78f..5aeba58 100644 --- a/app/globals.css +++ b/app/globals.css @@ -7,7 +7,7 @@ body { background-color: #FFFFFF; color: #0A1D5D; - font-family: 'Aptos', var(--font-inter), system-ui, sans-serif; + font-family: var(--font-open-sans), system-ui, sans-serif; -webkit-font-smoothing: antialiased; } ::selection { background: #C4942E; color: #FFFFFF; } diff --git a/app/layout.tsx b/app/layout.tsx index eb4945d..b386bbd 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,8 +1,8 @@ import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; +import { Open_Sans } from 'next/font/google'; import './globals.css'; -const inter = Inter({ subsets: ['latin'], weight: ['400', '600', '700', '900'], variable: '--font-inter', display: 'swap' }); +const openSans = Open_Sans({ subsets: ['latin'], weight: ['400', '600', '700', '800'], style: ['normal', 'italic'], variable: '--font-open-sans', display: 'swap' }); export const metadata: Metadata = { title: 'creeer · tu estratega de crecimiento', @@ -21,7 +21,7 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + {children} ); diff --git a/docs/dueña-directrices.md b/docs/dueña-directrices.md index 62ce88b..109fb15 100644 --- a/docs/dueña-directrices.md +++ b/docs/dueña-directrices.md @@ -146,12 +146,10 @@ Proceso visual: **Complejidad** (múltiples variables) → **Enfoque** (prioriza ### 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 | +**Manual de marca (impreso/presentación):** Aptos (principal) + Aptos Narrow (secundaria). +**Implementación web (landing):** **Open Sans** — vía `next/font/google`, pesos 400/600/700/800 + itálicas. -> ⚠️ **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. +> ⚠️ **Por qué no Aptos en web:** Aptos es proprietaria de Microsoft; su EULA prohíbe distribuirla o servirla en un sitio público ("No Distribution Rights" + "publish for others to copy"). La dueña, informada del riesgo, inicialmente autorizó usarla; pero al faltar los pesos regular/semibold en la conversión a `.woff2`, decidió pasar a la alternativa open-source más cercana. **Open Sans** comparte diseñador con Aptos (Steve Matteson) y es OFL (libre para web). Decisión: 28/jul/2026. ### Iconografía - Estilo: **líneas simples, geométricas, consistentes en grosor** @@ -199,7 +197,7 @@ Estas decisiones **no se reabren sin consultar a la dueña.** ### 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? +- ~~**Tipografía web:** Aptos vs Inter~~ → **RESUELTO (28/jul/2026): Open Sans**. Ver sección "Tipografía" arriba. --- diff --git a/docs/superpowers/specs/2026-07-20-creeer-landing-design.md b/docs/superpowers/specs/2026-07-20-creeer-landing-design.md index 8f64665..bea1dff 100644 --- a/docs/superpowers/specs/2026-07-20-creeer-landing-design.md +++ b/docs/superpowers/specs/2026-07-20-creeer-landing-design.md @@ -58,10 +58,9 @@ Tokens de color (Tailwind): | Uso | Familia | Pesos | Estilo | |---|---|---|---| -| Headlines, body, CTA, UI | **Aptos** | Light–Black | normal | -| Taglines, subtítulos compactos | **Aptos Narrow** | Light–Black | normal | +| Headlines, body, CTA, UI | **Open Sans** | 400, 600, 700, 800 + itálicas | 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). +> **Nota web:** Aptos (manual de marca) es proprietaria de Microsoft y su EULA prohíbe servirla en web. La landing usa **Open Sans** (OFL, `next/font/google`) — lo más cercano a Aptos en open-source (mismo diseñador: Steve Matteson). Decisión 28/jul/2026. ### 3.3 Escala tipográfica @@ -77,7 +76,7 @@ Tokens de color (Tailwind): ### 3.4 Wordmark / Logotipo -**`cre≡er`** — siempre en minúsculas, Aptos (o Inter como fallback): +**`cre≡er`** — siempre en minúsculas, Open Sans: - `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" @@ -117,7 +116,7 @@ Tokens de color (Tailwind): Dos finalistas guardados en `docs/hero-finalists.md`. La dueña elige uno. Ambos comparten: -- Logotipo `cre≡er` (Aptos / Inter) +- Logotipo `cre≡er` (Open Sans) - 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) @@ -125,12 +124,12 @@ Dos finalistas guardados en `docs/hero-finalists.md`. La dueña elige uno. Ambos - Sin escasez (sin cupos/cohorte) ### 4.1 HV-1 · Hormozi ligero -- Headline en **Aptos Black uppercase** +- Headline en **Open Sans ExtraBold (800) 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** +- Headline en **Open Sans Bold** - Sin subhead, sin métricas. Solo wordmark → eyebrow → headline → CTA - + cercanía / limpieza, − punch diff --git a/tailwind.config.ts b/tailwind.config.ts index 751976c..36bb3d0 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -20,9 +20,9 @@ const config: Config = { 'bg-dark': '#0A1D5D', // secciones oscuras }, fontFamily: { - // Aptos (principal) — autoalojar .woff2; Inter como fallback web - sans: ['Aptos', 'var(--font-inter)', 'system-ui', 'sans-serif'], - narrow: ['Aptos Narrow', 'var(--font-inter)', 'system-ui', 'sans-serif'], + // Open Sans (OFL) vía next/font/google — lo más cercano a Aptos en open-source + // (mismo diseñador: Steve Matteson). Cero autoalojamiento, cero problemas de licencia. + sans: ['var(--font-open-sans)', 'system-ui', 'sans-serif'], }, maxWidth: { content: '1152px',