Identidad Visual

Brand Kit

El sistema de diseño que define la identidad de Xplouse. Cada componente, color y tipografía fue diseñado para comunicar precisión, sofisticación y tecnología de vanguardia.

01

Paleta de Color

Tonos profundos que comunican tecnología, con acentos cian y violeta que aportan energía y dirección visual.

Fondos

Void #050505
Primary BG #0A0A0A
Surface #111114

Acentos

Cognitive Cyan #00F0FF
Neural Violet #8A2BE2
Cyan Hover #5CE1E6

Texto

Primary #FFFFFF
Secondary #A1A1AA
Muted #71717A
linear-gradient(135deg, #00F0FF, #8A2BE2)
02

Tipografía

Tres familias tipográficas con roles definidos: encabezados, cuerpo y código.

Display / Titulares Montserrat
Aa
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Body / Cuerpo Montserrat
Aa
Light 300 Regular 400 Medium 500 SemiBold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Mono / Código JetBrains Mono
Aa
Regular 400 Medium 500 SemiBold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*

Escala Tipográfica

MassiveXplouseclamp(4rem, 10vw, 9rem)
HeroEl núcleo cognitivoclamp(2rem, 4vw, 3.2rem)
H1Las 3 Capas Agénticasclamp(1.8rem, 3.5vw, 3rem)
BodyInfraestructura cognitiva para la empresa autónoma.clamp(0.9rem, 1.1vw, 1.05rem)
Monoconst agent = new Orchestrator();0.875rem
04

Componentes UI

Elementos reutilizables del sistema de diseño con estados interactivos.

Botones

Primary Action → Secondary
.btn .btn-primary | .btn-secondary

Badges

El Paradigma Neural Violet
.badge

Cards

🧠
Front-Office Agentes conversacionales profundos
.bento-card .bento-card__inner

Input

✉️
.cta-form__input

Gradient Text

Transformamos organizaciones.
.gradient-text

Stats

12% Tasa de error
.problem__stat-card
05

Espaciado & Radios

Sistema de espaciado con escala consistente para mantener el ritmo visual.

--space-xs
0.25rem (4px)
--space-sm
0.5rem (8px)
--space-md
1rem (16px)
--space-lg
1.5rem (24px)
--space-xl
2rem (32px)
--space-2xl
3rem (48px)
--space-3xl
4rem (64px)
--space-4xl
6rem (96px)

Border Radius

--radius-sm 8px
--radius-md 14px
--radius-lg 20px
--radius-xl 28px
--radius-full 9999px