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.
Horizontal · Light 
Horizontal · Dark 
Isotipo · Emerald 
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)
Red 600
#c0362c
var(--red-600)
Red 400
#f87171
var(--red-400)
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. Mientras Inter carga se usa 'Inter Fallback' (Arial con las métricas de Inter), para que el texto no salte al entrar la fuente.
H1 · Inter ExtraBold 800 · 56px / mobile 32px
El método para que tu web genere clientes
H2 · Inter Bold 700 · 48px
Un ecosistema digital completo
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.
Mono · JetBrains Mono · 14px
var(--emerald-500) → #10b981
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
| Token | Valor |
|---|---|
| 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.
Card de ejemplo
Wrapper estándar con padding, radius y shadow tokenizados. Hover lift -3px.
Componentes del rediseño 2026
Nuevos componentes, construidos solo con los tokens de arriba. Alimentan el home, /servicios y /casos.
Franja de prueba
$18M En pauta gestionada en 5 países
−75% Costo por conversión en salud
20+ Sitios y landings en 2026
Lun. Reporte listo cada lunes
Filtros
Filtrar por industria
Tarjeta de servicio
Ecosistema web que capta clientes
Sitios rápidos, medibles y hechos para captar clientes, con mantención si la necesitas.
Campañas de Google y Meta Ads, medidas de verdad
Gestiono tu pauta en Google y Meta sin comisión sobre el gasto, con cada peso medido y reportado.
Medición lista y un reporte cada lunes
Dejo tu analítica funcionando de punta a punta y te llega un reporte entendible cada semana.
Tarjeta de caso
−75% Costo por conversión en Google Ads, con la misma inversión (~$151K)
Bajé el costo por conversión de Google Ads un 75 %, con la misma inversión.
$17,96M En pauta gestionada en 5 países (CL, MX, CO, PE, AR)
$18M en pauta gestionada en 5 países, con la búsqueda como motor y el SEO saneado.
3 canales de lead medidos: formulario, WhatsApp y teléfono
La agencia anterior gastó $569.540 con 0 conversiones medidas; hoy cada lead se mide por canal.
Galería de sitios
Formulario de leads
Usos prohibidos del logo
- ❌ Cambiar el color de las llaves. Siempre Emerald
#10b981. - ❌ Invertir pesos: llaves siempre 200, SMX siempre 800.
- ❌ Estirar, comprimir, inclinar o rotar.
- ❌ Sombras, bordes, brillos o gradientes sobre el logo.
- ❌ Reemplazar Inter por otra tipografía.