135 Ideas
Hablemos →
135 Ideas Hablemos →

Marca

Design System

Guía visual de la identidad digital de 135ideas: tipografía, color, componentes y tokens de diseño.

Colores

Paleta principal sobre fondo oscuro. El verde ácido es el acento distintivo de la marca.

Verde 135 #c9e600 --acid · Acento principal
Verde claro #e8ff1f Gradientes y botones
Verde suave #a9c900 --acid-soft
Diagrama #e8ff2a --diagram-accent
Naranja #f39a00 --orange · Acento secundario
Fondo principal #030405 --bg-main
Fondo tarjeta #0d0f10 --bg-card
Fondo suave #151719 --bg-card-soft
Texto principal #f4f4f1 --text-main
Texto secundario #b7b7b1 --text-soft
Texto tenue #74746f --text-muted
Línea suave rgba(255,255,255,.08) --line-soft

Tipografía

Tres familias tipográficas: sans-serif para interfaz, serif para énfasis editorial y script para notas manuscritas.

Inter · UI y cuerpo

Ideas que inspiran. Ideas que transforman.

Pesos: 400, 500, 700, 800 · Uso: navegación, párrafos, botones, etiquetas

Cormorant Garamond · Editorial

Destrabamos ideas.
Diseñamos posibilidades.

Peso 600, itálica · Uso: titulares hero, citas, frases de marca en footer

Caveat · Manuscrita

Notas a mano, anotaciones y detalles lúdicos

Pesos: 400, 600 · Uso: acentos informales y elementos decorativos

Hero

135 Ideas

clamp(50px, 5.4vw, 88px) · -0.07em
Título página

Título de sección

clamp(38px, 5vw, 72px) · -0.05em
Eyebrow

Etiqueta superior

12px · uppercase · 0.12em
Cuerpo

Texto de apoyo con buena legibilidad sobre fondo oscuro. Line-height 1.65.

17px · Inter 400

Botones

CTA principal con gradiente verde y variante outline para acciones secundarias.

Acción principal → Acción secundaria →

Tarjetas y bloques

Superficies con gradiente sutil, borde tenue y sombra profunda.

Tarjeta estándar

Bloque de contenido con fondo degradado y borde rgba(255,255,255,.1).

Tarjeta servicio

Icono en verde ácido, título en negrita y texto secundario tenue.

Formularios

Campos sobre fondo oscuro con borde sutil y foco en verde.

Tokens de diseño

Variables CSS disponibles en :root del sitio.

--radius-lg22px
--radius-md16px
--shadow-soft0 24px 80px rgba(0,0,0,.55)
--page-gutter96px (desktop)

Correos transaccionales

Layout unificado para confirmaciones, lead magnets y notificaciones. Fondo claro, logo negro, acento verde 135 y pie legal con enlace de baja.

--email-bg-outer#f0f0ec
--email-bg-card#ffffff
--email-accent#c9e600
--email-text#1a1a18
Logo emailassets/img/logro_135bk.png