// Design system v1.0

Manual de Marca

La fuente única de verdad del sistema visual de SMX. Paleta Emerald, tipografía Inter, tokens y reglas de uso para cada landing.

Logo

Tres elementos indivisibles: llaves { } en Inter ExtraLight (200) Emerald, SMX en Inter ExtraBold (800), descriptor CONSULTORES.

Logo SMX horizontal light Horizontal · Light
Logo SMX horizontal dark Horizontal · Dark
Isotipo SMX emerald Isotipo · Emerald
Isotipo SMX white Isotipo · White

Color · Primarios

Emerald es el color de marca. Usado en CTA, llaves del logo, acentos y hover states.

 
Emerald 700
#047857
var(--emerald-700)
 
Emerald 600
#059669
var(--emerald-600)
 
Emerald 500
#10b981
var(--emerald-500)
 
Emerald 400
#34d399
var(--emerald-400)
 
Emerald 100
#d1fae5
var(--emerald-100)

Color · Neutros

Escala de grises para texto, fondos, bordes y superficies.

 
Black
#111111
var(--black)
 
Charcoal
#1a1a1a
var(--charcoal)
 
Gray 700
#404040
var(--gray-700)
 
Gray 500
#737373
var(--gray-500)
 
Gray 200
#e5e7eb
var(--gray-200)
 
Gray 100
#f4f4f5
var(--gray-100)
 
Gray 50
#fafafa
var(--gray-50)
 
White
#ffffff
var(--white)

Tipografía

Inter para todo el sistema. JetBrains Mono para código, tokens y etiquetas técnicas.

H1 · Inter ExtraBold 800 · 56px / mobile 32px
El método para que tu web genere clientes
clamp(32px, 5vw, 56px) · tracking -1.5px
H2 · Inter Bold 700 · 48px
Un ecosistema digital completo
clamp(22px, 3.5vw, 34px) · tracking -.5px
Body · Inter Regular 400 · 16px
Mensajes claros, códigos de seguimiento instalados, campañas bien configuradas y métricas que te dicen exactamente dónde está el dinero.
16px · line-height 1.55
Mono · JetBrains Mono · 14px
var(--emerald-500) → #10b981
JetBrains Mono · 14px

Spacing · Escala 4pt

Todos los espaciados se derivan de la escala de 4pt. Nunca usar valores arbitrarios.

4pxvar(--s-1)
8pxvar(--s-2)
12pxvar(--s-3)
16pxvar(--s-4)
24pxvar(--s-5)
32pxvar(--s-6)
48pxvar(--s-7)
64pxvar(--s-8)
96pxvar(--s-9)

Border radius

TokenValor
var(--r-xs)4px
var(--r-sm)8px
var(--r-md)12px
var(--r-lg)16px
var(--r-xl)20px
var(--r-2xl)24px
var(--r-full)9999px

Componentes

Vista rápida de los componentes core: botones, badges, cards.

Botón Primary Botón Ghost Label Pill

Card de ejemplo

Wrapper estándar con padding, radius y shadow tokenizados. Hover lift -3px.

Usos prohibidos del logo