Documento de marca

La energía que impulsa cada transición.

Esta guía documenta el sistema visual completo de Impulsa: paleta oficial, tipografía, principios de motion design, glassmorphism, sombras premium y The Signature Pulse. Es la referencia para que todo material de marketing mantenga una identidad coherente, diferenciada y profesional.

PaletaTipografíaMotionSombrasGlassmorphismBordesComponentes

01 · Identidad cromática

Paleta oficial

#1A1A2E

Azul oscuro

oklch(0.2284 0.0384 282.93)

--ink

Tipografía principal, fondos oscuros, sombras estructurales

#E9445F

Coral

oklch(0.6315 0.2004 15.91)

--coral

Detalles y acentos secundarios, puntos de contraste

#F9F5F0

Marfil

oklch(0.9718 0.0079 73.74)

--ivory

Fondo principal, espacios amplios, texto sobre oscuro

#00B3AA

Turquesa

oklch(0.6911 0.12 188.44)

--teal

Acento principal, elementos interactivos, energía del pulso

#690571

Morado

oklch(0.3735 0.1707 324.53)

--grape

Profundidad visual, detalles gráficos, transiciones

Reglas de uso cromático

Marfil y azul oscuro dominan como superficies base.
Turquesa es el único acento interactivo principal.
Coral se reserva para detalles y puntos de contraste.
Morado aporta profundidad visual y transiciones.

02 · Escala editorial

Tipografía

Space Grotesk

Titulares y displays · 600 – 700 · font-display

Tu siguiente gran paso

Moderna, geométrica y expresiva. Letras compactas con excelente presencia en tamaños monumentales. Usar con letter-spacing negativo e interlineado compacto.

Inter

Cuerpo, navegación y UI · 400 – 500 · font-sans

Conoce Impulsa y conversemos sobre lo que quieres lograr.

Limpia y muy legible. Ideal para párrafos, menús, botones y descripciones. Peso 500–600 en botones para jerarquía.

Display

clamp(2.75rem, 7.6vw, 9rem)

Hero monumental

Section

clamp(2.25rem, 4.6vw, 6rem)

Títulos de sección

Body

1rem – 1.25rem

Párrafos y UI

03 · Experiencia cinematográfica

Motion design

El movimiento no decora: conecta. Cada animación tiene una razón visual y forma parte de un mismo lenguaje cinematográfico. La firma de Impulsa es The Signature Pulse.

The Signature Pulse

Línea de energía luminosa (turquesa → blanco → coral → morado) que recorre las curvas orgánicas sincronizada con el scroll mediante stroke-dashoffset. Nace en el hero, reaparece en las transiciones y converge en el cierre DEMO.

stroke-dashoffset scrubReversible al subirBell curve de opacidaddrop-shadow turquesa + morado

Scroll Scrubbing

Las capas decorativas responden continuamente a la posición del scroll, no solo al entrar en viewport. Movimiento bidireccional: elementos que suben, bajan, giran y se desplazan lateralmente a velocidades distintas.

transform + opacityrAF + passive listenersModos enter/exitSin scroll hijacking

Liquid Morph + Aurora

Transiciones orgánicas entre secciones con curvas Bézier fluidas, morph líquido ambiental y bandas de luz aurora que barren el divisor en direcciones opuestas. Tres estilos: líquido, abanico y arco.

SVG Bézier pathsAurora sweep 9s/13sCurvatura suave/pronunciadaPausa fuera de viewport

Scroll Reveal

Revelado cinematográfico: titulares con fade-in y desplazamiento vertical de 20px, descripciones con 100ms de retraso, botones al final de la secuencia. Duración 600–750ms. Ejecución una sola vez.

IntersectionObservercubic-bezier(0.22,1,0.36,1)Stagger por palabraVisible sin JS

Parallax Multicapa

Tres planos de profundidad: fondo lejano (10–20px), profundidad media en dirección contraria (20–40px) y elementos cercanos diagonales (15–30px). Movimiento orgánico continuo incluso sin scroll.

3 capas independientesDirecciones opuestasFloat ambiental 9–15sReducido en móvil

Microinteracciones

Botones con glow turquesa + elevación de 2px en hover. Cursor magnético con halo que crece sobre elementos interactivos. Enlaces con subrayado animado. Transiciones de 250ms.

MagneticWrap 0.25–0.3Cursor halo 34→56pxPíldora indicadorafocus-visible accesible

The Signature Pulse

La energía que recorre cada curva

Una línea de luz turquesa, blanca, coral y morada que viaja por los bordes orgánicos en sincronía con el scroll. Nace en el hero, reaparece en las transiciones y converge en el cierre DEMO.

04 · Profundidad 3D

Sombras premium

Sombras multicapa con colores de marca para profundidad natural. Nunca sombras negras intensas: la luz viene del turquesa, la profundidad del morado y el contraste del coral.

Soft Shadow

Elevación discreta, difusa y neutra. Estructura sin bordes duros.

impulsa-shadow-soft

Color Shadow · Turquesa

Brillo luminoso de marca. Reflejos turquesa para objetos destacados.

impulsa-shadow-teal

Color Shadow · Morado

Profundidad de marca. Sombras moradas para sensación 3D.

impulsa-shadow-grape

Color Shadow · Coral

Detalle de acento. Puntos de contraste sutiles.

impulsa-shadow-coral

Floating Shadow

Suspensión 3D. Sombra elíptica que se difunde al elevarse.

impulsa-float-shadow

Ambient Light

Iluminación direccional para superficies oscuras (cierre DEMO).

impulsa-ambient-light

05 · Cristal translúcido

Glassmorphism

La cápsula de navegación usa backdrop-blur con saturación aumentada, borde biselado y sombra ambiental tenue. Se vuelve más sólida al hacer scroll.

gran paso

El efecto vidrio se aplica solo a palabras clave de alto impacto. Cristal translúcido con shimmer lento (9s), gradientes de marca y drop-shadow turquesa. Legibilidad preservada.

background-clip: textshimmer 9s

06 · Transiciones orgánicas

Bordes y divisores

Los límites entre secciones no son rectángulos rígidos: son curvas Bézier fluidas con morph líquido y luz aurora. Tres estilos intercambiables, seleccionables desde el menú de la landing.

Líquido

Ondas fluidas con morph y doble cinta de marca. Transiciones suaves y orgánicas.

Abanico

Capas arquitectónicas con pliegues estructurados que emanan de un punto focal.

Arco

Curvas simples, limpias y minimalistas. Transiciones puras y elegantes.

Todos (predeterminado)

Los tres estilos superpuestos a la vez con opacidad reducida para máxima riqueza visual.

Curvatura ajustable: el menú permite alternar entre Suave (curvas planas, 0.55×) y Pronunciada (profundidad contundente, 1×). El path base siempre cierra en el borde inferior, sin huecos entre secciones.

07 · Sistema de componentes

Componentes clave

Botón Primario

Sólido turquesa, texto oscuro, glow + 2px elevación en hover.

Iniciar sesión

Botón Secundario

Contorno, menor peso visual, glow turquesa delicado en hover.

Glass Capsule Navbar

Cápsula translúcida con backdrop-blur, borde biselado y sombra ambiental.

Agendar DEMO

Píldora DEMO

Brillo dinámico que recorre la píldora en hover (1.1s).

aquí.

Glass Text

Efecto vidrio en palabras clave: cristal translúcido con shimmer lento.

ActivoHover me

Enlace de menú

Subrayado turquesa animado, indicador de sección activa.

08 · Reglas de oro

Principios inquebrantables

Predominio del marfil y azul oscuro como superficies base.

Turquesa es el acento interactivo principal en toda la experiencia.

Coral y morado se reservan para detalles controlados, nunca saturan.

Tipografía monumental con escalado fluido (clamp) y letter-spacing negativo.

Espacios negativos amplios e intencionales — la página respira.

Evitar sombras negras pesadas, tarjetas innecesarias y degradados excesivos.

Todo movimiento respeta prefers-reduced-motion y funciona sin JavaScript.

Las animaciones se sincronizan con el scroll, nunca lo bloquean.

El contenido esencial permanece visible aunque fallen los efectos avanzados.

Priorizar transform y opacity sobre propiedades que causan reflow.