Elogia Fashion
El sistema nacido en esta web. Todo lo que necesitas para producir una pieza —landing, presentación, post, dossier— sin pedir permiso ni esperar revisión.
Cuatro principios
Si dudas ante una decisión que no está escrita aquí, resuélvela con estos cuatro criterios.
Editorial, no corporativo
La página se lee como una revista de moda: titular grande, mucho aire, foto protagonista. Nada de cajas apiladas ni iconos decorativos.
El malva es tinta, no muro
El acento aparece en detalles: una regla de 3px, un signo de cita, un botón. Nunca como fondo de sección completa.
Dato antes que adjetivo
Space Mono para cifras y etiquetas, Space Grotesk para la narrativa. Si una frase se puede sustituir por un número, se sustituye.
Menos superficie, más jerarquía
Sin kickers, sin líneas divisorias entre bloques, sin subrayados de énfasis. El tamaño y el peso del titular ordenan la página.
Color
Cuatro tintas. Ni una más. El bone es el lienzo por defecto, el antracita es la voz grave y el malva es la única concesión cromática de la boutique Fashion.
Reglas de uso
- SÍMalva sobre bone para CTAs, con texto bone dentro del botón.
- SÍAntracita a sangre para bloques de tensión (retos, footer).
- SÍHairline #232323 a 1px como único separador dentro de un bloque.
- NOSecciones enteras con fondo malva: satura y rompe la lectura editorial.
- NORojo Elogia #E80013 en piezas Fashion: se retiró del sistema, aquí la tinta es malva.
- NOGrises intermedios inventados: usa opacidad sobre antracita.
Opacidades canónicas sobre antracita
100%
Titulares y texto principal
72%
Párrafos de apoyo
55%
Etiquetas mono y metadatos
18%
Hairlines y bordes
Tipografía
Dos familias. Space Grotesk sostiene toda la narrativa; Space Mono marca el dato. Nunca se mezclan dos familias dentro del mismo titular.
DISPLAY + TEXTO
Space Grotesk
Pesos 400 / 500 / 600 / 700. Tracking −0.02em en titulares, 0 en cuerpo. Sin mayúsculas forzadas.
DATO Y ETIQUETA
Space Mono
Siempre bold, siempre mayúsculas, tracking 0.06em. Cifras, etiquetas de sección, metadatos. Nunca párrafos.
Escala
Layout, radios y espacio
Una sola rejilla, dos radios, ritmo vertical amplio. La página respira más de lo que un dashboard permitiría.
ANCHO MÁXIMO
1600px centrado
PADDING LATERAL
48px escritorio · 24px móvil
RITMO VERTICAL
128px por sección · 72px en móvil
RADIO SUPERFICIE
4px — tarjetas, imágenes, inputs
RADIO BLOQUE
32px — secciones con fondo propio (20px móvil)
RADIO PILL
999px — botones y chips, sin excepción
HAIRLINE
1px sólido #232323 o rgba(35,35,35,0.18)
COLUMNAS
1 / 2 / 3 / 4 según densidad. Nunca 5 o más
Componentes
Estos son los únicos elementos interactivos del sistema. Si necesitas uno nuevo, compónlo con estas piezas antes de inventar otro.
Botones
.cta-primary
Acción principal. Un solo primario por vista.
.cta-fashion
Acción secundaria de descarga o recurso.
.cta-nav
Navegación entre páginas del sitio.
.cta-ghost
Enlace editorial dentro de un bloque de texto.
Chips y etiquetas
Estado activo en antracita, nunca en malva: el malva se reserva para la acción, no para la selección.
Bloque con regla de acento
Para negocios que digitalizan sin canibalizar margen
Crecimiento rentable
Para marcas que quieren crecer fuera sin estructura local
Go to market
Para direcciones que necesitan recuperar rentabilidad
Inteligencia digital
Cita de cliente
Mis comerciales tienen miedo de que el ecommerce les robe clientes.
Dato destacado
25+
Años en digital
4
Oficinas
+120
Marcas acompañadas
Imagen y logotipos
La foto trabaja como portada de revista: sujeto a la derecha, fondo limpio a la izquierda para que el texto respire.
- SÍFotografía editorial de moda, luz natural, encuadre amplio.
- SÍSujeto desplazado al tercio derecho cuando la imagen convive con un bloque de texto.
- SÍCasos de éxito en blanco y negro por defecto; el color entra en hover.
- SÍLogotipos de cliente en monocromo antracita, sin recuadro, sin fondo, sin sombra.
- NOCollages, degradados sobre foto ni superposición de texto ilegible.
- NOStock genérico de oficina, apretones de manos o gráficas 3D.
- NOIconos de librerías externas (Lucide, Font Awesome) en piezas de marca.
Movimiento
El movimiento subraya la lectura, nunca la interrumpe.
HOVER BOTÓN
Slide antracita de abajo arriba · 0.35s cubic-bezier(.7,0,.2,1)
HOVER ENLACE
Color y borde a malva · 0.2s ease
IMAGEN
Escala 1.03 y desaturación a color · 0.7s ease
SCROLL
Sticky + fundido en el bloque de retos; footer con overlap
MARQUEE
55–85s lineales, infinito, con máscara lateral
PROHIBIDO
Rebotes, parallax agresivo, entradas por rotación
Tono de voz
Operadores, no agencia. El cliente es el sujeto de la frase; nosotros somos el verbo.
Cómo escribimos
- SÍFrases cortas, verbo en primera persona del plural: conectamos, ordenamos.
- SÍCifra concreta antes que adjetivo: “+38% de margen”, no “resultados excelentes”.
- SÍVocabulario de negocio: margen, adquisición, canibalización, atribución.
- SÍCitas literales de cliente entre comillas tipográficas.
Lo que no decimos
- NO“Soluciones 360”, “partner estratégico de confianza”, “sinergias”.
- NOEstructuras de IA: “no solo… sino que”, “en el mundo actual”.
- NOSignos de exclamación, emojis y guiones largos decorativos.
- NOPromesas sin dato detrás.
Checklist antes de publicar
Si las nueve casillas están marcadas, la pieza es Elogia Fashion.
- 01Fondo bone o antracita; ningún otro color de fondo.
- 02Malva solo en acentos y en un único CTA principal por vista.
- 03Space Grotesk en narrativa, Space Mono bold en mayúsculas para datos.
- 04Ningún titular mezcla dos tipografías ni dos colores.
- 05Botones y chips en pill 999px; superficies en 4px; bloques con fondo en 32px.
- 06Sin kickers, sin líneas divisorias entre bloques, sin subrayados de énfasis.
- 07Logotipos de cliente sin recuadro ni fondo.
- 08Cada afirmación fuerte lleva una cifra o un caso detrás.
- 09El texto pasa el filtro anti-IA: sin muletillas ni promesas vacías.
¿Un caso que el sistema no resuelve?
No lo rellenes con una convención genérica. Escríbelo, lo decidimos y se documenta aquí el mismo día.