Crema editorial
- Variable CSS
- --background-editorial
- OKLCH
- oklch(0.985 0.008 75)
- Hex
- #FAF8F5
- Uso
- Superficie de héroe y guía de marca; papel cálido de revista
Sistema de marca
Guía editorial Sara Gil
Dirección visual y de voz para la marca personal de Sara «Sarita» Gil: corredora, creadora de contenido, presentadora de «Corre como una Chica» y Community Manager. Un sistema magazine — serif en titulares, sans en cuerpo, superficies cálidas y CTAs cuadrados.
Tipografía
Serif para impacto, sans para claridad
Playfair Display lleva la voz editorial; Nunito sostiene lectura, UI y etiquetas en mayúsculas con tracking amplio.
Display — Playfair Display
Corre como una chica
- Variable
- --font-serif
- Pesos
- 400, 500, 600, 700
- Uso
- Titulares, citas destacadas y cifras
Body — Nunito
Me gusta correr, hablar y contar historias que conectan.
- Variable
- --font-sans
- Pesos
- 400, 500, 600, 700
- Uso
- Cuerpo de texto, UI y navegación
Label — Nunito
Community Manager · Podcast
- Tracking
- 0.2em – 0.28em
- Uso
- Etiquetas de sección, metadatos y pies
Display XL
Comunidades auténticas
Uso: Héroes de página y titulares de campaña
Display M
Corre como una chica
Uso: Títulos de sección y citas laterales
Body L
Contenido que conecta con la gente.
Uso: Párrafos de entrada e intros
Body M
Gestión de comunidades y storytelling deportivo.
Uso: Cuerpo por defecto y listas
Label
Community Manager
Uso: Eyebrows, badges y metadatos
Color
Paleta cálida con acento burdeos
Superficies crema editorial, tinta profunda para texto y CTAs, y burdeos como hilo conductor de marca — el tono del podcast y la energía deportiva.
Tinta
- Variable CSS
- --foreground
- OKLCH
- oklch(0.145 0 0)
- Hex
- #1A1A1A
- Uso
- Texto principal y relleno de CTAs cuadrados
Burdeos
- Variable CSS
- --primary
- OKLCH
- oklch(0.271 0.101 12.1)
- Hex
- #5C2438
- Uso
- Acento, enlaces, énfasis en cursiva y selección
Tinta suave
- Variable CSS
- --muted-foreground
- OKLCH
- oklch(0.556 0 0)
- Hex
- #6B6B6B
- Uso
- Texto de apoyo y pies de foto
Regla
- Variable CSS
- --border
- OKLCH
- oklch(0.922 0 0)
- Hex
- #E8E8E8
- Uso
- Separadores, líneas finas y bordes de tarjetas
Radio de borde
Esquinas con intención
El estilo editorial prioriza esquinas rectas en acciones principales; radios suaves solo donde el contraste ayuda a la jerarquía.
0
Editorial
rounded-none
Uso: Botones, CTAs principales y bloques editoriales — corte recto de revista
14px
Suave
rounded-lg
Uso: Tarjetas y paneles cuando el contraste con CTAs cuadrados ayuda a la jerarquía
9999px
Píldora
rounded-full
Uso: Chips de estado únicamente — evitar en acciones principales
Layout
Ritmo de revista
Columnas amplias, medida de lectura controlada y separadores horizontales que marcan secciones como en un reportaje.
- Ancho máximo de contenido
- 1280px (container)
- Medida editorial
- 52–64 caracteres (~max-w-[52ch])
- Ritmo de sección
- py-20 md:py-28 entre bloques principales
- Gutter de grid
- 1.5rem padding del container; gap-8–12
- Offset de héroe
- pt-28 md:pt-36 bajo la barra de herramientas
Tono y voz
Auténtica, enérgica, editorial
La voz de Sarita en redes y podcast: cercana y con humor, nunca corporativa. Cada bloque sigue estructura de titular + cuerpo + dato.
Auténtica
Habla como en Instagram y en el podcast: cercana, sin corporate speak.
Hacer: Usa primera persona, humor ligero y ejemplos reales.
Evitar: Evita jerga vacía («sinergias», «disruptivo») y tono institucional.
Energética
Transmite movimiento — correr, crear, conectar — sin gritar.
Hacer: Frases activas, verbos con intención, ritmo editorial.
Evitar: No abuses de mayúsculas ni signos de exclamación encadenados.
Editorial
Cada pieza tiene estructura: titular, cuerpo, regla, dato.
Hacer: Jerarquía clara con serif en titulares y sans en cuerpo.
Evitar: No mezcles demasiados estilos en un mismo bloque.
Patrones UI
Componentes en acción
Botones, reglas y citas laterales tal como aparecen en la homepage — la guía se demuestra a sí misma.
CTAs
Métricas editoriales
90+
Episodios
65%
Audiencia femenina en Instagram
110+
Newsletter
«Corre como una chica» — un espacio de referencia para mujeres corredoras.