Guía de estilos SuperLeads

1 · Los seis principios

Todo lo demás en esta guía es consecuencia de estos seis. Si algo no está documentado, resuélvelo con ellos.

2 · Logo

Dos versiones oficiales en SVG (383×68). Usar siempre estas, en toda página, diseño e imagen.

• Tamaños: nav 180px · sidebar de app alto 32px · footer 140px · OG alto ~48px
• Siempre enlaza a https://superleads.mx (o al inicio si es app interna)
• El logo va solo: sin caja blanca detrás ni contenedor decorativo. Si el fondo es oscuro, usa la versión blanca — no metas el azul en un recuadro
• Ícono de "acceder": …/68bdf4dd6d0aaa7737d9cfdd.png
• La versión texto y el PNG viejo ya no se usan en diseños nuevos

3 · Color

Tres primarios resuelven el 80% de cualquier pantalla. Los secundarios sostienen y matizan; los de estado están reservados y nunca se reciclan.

Colores primarios

Colores secundarios

Neutros y texto

Textos sobre fondo oscuro

Colores de estado

Reservados. Nunca decorativos ni como "serie 4" de una gráfica. Siempre acompañados de texto o ícono — el color solo nunca comunica.

Tokens — copia esto al inicio de tu CSS

:root{
  /* — Primarios — */
  --green:#56EF9F; --navy:#002582; --navy-deep:#001240;

  /* — Secundarios — */
  --green-d:#2BC878; --navy-mid:#001a5e;
  --blue:#0039C8; --blue-mid:#2A89FB;
  --blue-soft:#F4F7FF; --blue-softer:#EEF2FF;

  /* — Neutros — */
  --ink:#1a1a1a; --border:#e0e8f8;
  --muted:#5b6478; --dim:#98a1b0;

  /* — Estado — */
  --ok:#0ca30c; --warn:#eb6834;
  --bad:#d03b3b; --destructive:#d92d43;

  /* — Gráficas (paleta validada, separada de la marca) — */
  --chart-1:#2a78d6; --chart-2:#eb6834; --chart-3:#1baf7a;

  /* — Movimiento — */
  --ease:cubic-bezier(.16,1,.3,1);

  /* — Sombras — */
  --shadow-sm:0 1px 2px rgba(0,37,130,.04);
  --shadow-card:0 10px 32px rgba(0,37,130,.08);
  --shadow-btn:0 10px 28px rgba(0,37,130,.22);
  --shadow-cta:0 10px 28px rgba(86,239,159,.28);
  --shadow-pill:0 10px 32px rgba(0,37,130,.08);
}

Reglas de uso — las que no se negocian

4 · Tipografía

Familia única: Plus Jakarta Sans. No hay segunda fuente.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap" rel="stylesheet">

Reglas

• Énfasis en H1: <em> italic — verde sobre oscuro, azul sobre claro
• Números en columna o que cambian en vivo: font-variant-numeric: tabular-nums. Sin esto los dígitos bailan al actualizarse
• Nunca centres párrafos de más de dos líneas. Títulos sí, texto corrido no
• Ancho de lectura: 65–75 caracteres (max-width: 46rem en documentos)

5 · Espaciado y radios

Escala de múltiplos de 4, sin excepción: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56 · 72

6 · Sombras y bordes

Grandes, suaves y teñidas de navy — nunca negras ni duras. Una sombra negra sobre nuestro azul se ve sucia.

/* Nivel 0 — al ras */
border:.5px solid var(--border);
/* Nivel 1 — apoyado */
box-shadow:0 1px 2px rgba(0,37,130,.04);
/* Nivel 2 — levantado */
box-shadow:0 10px 32px rgba(0,37,130,.08);
/* Nivel 3 — encima de todo */
box-shadow:0 8px 40px rgba(0,0,0,.12);
/* Intención — CTA verde en hover */
box-shadow:0 10px 28px rgba(86,239,159,.28);
/* Intención — navy en hover */
box-shadow:0 10px 28px rgba(0,37,130,.22);

Bordes

• Estructurales: siempre .5px solid. En Tailwind: border-[0.5px]
• Sobre claro: #e0e8f8 · Sobre oscuro: rgba(255,255,255,.07), hover rgba(86,239,159,.25)
• Punteado solo para zonas de "agregar" y estados vacíos

7 · Movimiento — el sentir del clic

Esta sección separa una interfaz que se siente cara de una que se siente lenta. Todo se mide desde que el dedo toca.

La única curva

--ease:cubic-bezier(.16,1,.3,1);

Sale rápido y frena suave. Todo usa esta curva. Si algo usa linear o ease-in-out, está fuera del sistema.

Los tiempos

La regla de los 400 ms

Lo que tarda una acción define cómo se comunica:

Retrasos de guardado (debounce)

8 · Botones

Pásales el cursor: todos son los reales del sistema.

Primario — verde (CTA principal)

El de la acción más importante de la pantalla. Solo uno por vista.

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--green);color:var(--navy);
  padding:14px 26px;border-radius:8px;border:none;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

Secundario — navy

La acción importante pero no principal, sobre fondo claro.

.btn-navy{
  background:var(--navy);color:#fff;
  padding:12px 22px;border-radius:8px;border:none;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s;
}
.btn-navy:hover{background:var(--navy-mid);transform:translateY(-2px);box-shadow:var(--shadow-btn)}
.btn-navy:active{transform:translateY(0);box-shadow:none}

Terciario, fantasma y destructivo

/* Terciario — acciones de apoyo en fila */
.btn-outline{background:#fff;color:var(--navy);border:.5px solid var(--border);
  padding:10px 18px;border-radius:8px;font-size:13px;font-weight:700}
.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Fantasma — navegación, cancelar */
.btn-ghost{background:transparent;color:var(--muted);padding:10px 18px;font-size:13px;font-weight:600}
.btn-ghost:hover{background:rgba(0,37,130,.05);color:var(--navy)}

/* Destructivo — discreto hasta que se necesita */
.btn-danger{background:transparent;color:var(--muted);padding:8px;border-radius:8px}
.btn-danger:hover{background:#fef2f2;color:var(--destructive)}

Tamaños e íconos

• Íconos de 14–16px, stroke-width:2, fill:none
• Color: navy sobre verde · blanco sobre navy · hereda en outline y ghost
• gap:8px respecto al texto. Ícono a la izquierda, salvo flechas de avance

9 · Formularios

Achica la ventana y mira la rejilla: se compacta sola de dos columnas a una, sin media queries.

La rejilla que se compacta sola

.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
/* Campo que necesita todo el ancho */
.form-grid .full{grid-column:1/-1}

auto-fit + minmax es la clave: si caben dos columnas de 280px las pone, si no colapsa a una. Nunca uses repeat(2, 1fr) fijo — se desborda en móvil. Para grupos de tres: minmax(200px, 1fr).

Formulario vivo

Anatomía de un campo

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--navy)}
.field input,.field textarea,.field select{
  width:100%;padding:10px 14px;
  border:.5px solid var(--border);border-radius:8px;background:#fff;
  font-family:inherit;font-size:14px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder{color:var(--dim)}
.field input:hover{border-color:#c9d6f0}
.field input:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,57,200,.10);
}
.hint{font-size:11px;line-height:1.45;color:var(--muted)}
.err-msg{font-size:12px;font-weight:500;color:var(--destructive)}
.field input[aria-invalid="true"]{border-color:var(--destructive)}

/* Número protagonista */
.field input.grande{height:56px;font-size:24px;font-weight:600;
  color:var(--navy);font-variant-numeric:tabular-nums}

El hint es obligatorio en cualquier campo donde quepa duda de qué contar o en qué unidad. Resuelve la pregunta antes de que se haga: qué incluir, qué no, o a qué cálculo alimenta el dato.

La regla de los tres estados

Validación y autoguardado

• Valida al salir del campo (blur), no en cada tecla — marcar en rojo un correo a medio teclear es hostil
• Solo lo verdaderamente obligatorio bloquea. Un campo que frena el avance rompe la conversación en una sesión en vivo
• Si el envío falla, lleva al usuario al error. Un botón que no hace nada porque hay un error en otra pantalla es un botón roto
• Se guarda solo, y se dice: debounce 2.5s, flush al salir, indicador Guardando… → Guardado 14:32
• El botón de avanzar se llama "Guardar y Continuar", no "Continuar" — nombra lo que hace y da tranquilidad

10 · Menús y navegación

Nav público

El de arriba de esta página es el real: sticky, navy translúcido con blur, logo a la izquierda, links al centro, CTA verde a la derecha.

.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 56px;
  background:rgba(0,18,64,.97);
  border-bottom:.5px solid rgba(86,239,159,.1);
  backdrop-filter:blur(16px);
}
.nav a{font-size:13px;font-weight:500;color:rgba(255,255,255,.4);transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}

Mobile: hamburguesa a la derecha, links en panel desplegable a pantalla completa.

Sidebar de aplicación

Ancho 288px, fondo navy-deep. Orden obligatorio: logo + badge · CTA principal arriba · navegación con descripción · pie con copyright.

Rayos X

＋ Nuevo Rayos X

▦Historial
15 diagnósticos · 9 finalizados ◪Inteligencia de Datos
El resumen de toda la cartera

© 2026 SuperLeads · México y LATAM

Topbar flotante (píldora)

Identidad (principal + secundario más chico debajo), separador .5px y máximo dos indicadores. Nunca cifras sensibles aquí si la pantalla se comparte en videollamada.

Pestañas

Acordeones

Para revelar profundidad sin abrumar. Se anidan hasta tres niveles y todos arrancan cerrados. Cada cabecera muestra su progreso — el contador es lo que convierte una lista cerrada en una invitación a abrirla.

Volver

Toda pantalla profunda tiene salida visible: link fantasma con flecha izquierda, arriba a la izquierda, 13px, --muted → hover --navy. Ninguna pantalla es un callejón sin salida.

11 · Footer

El de esta página es el real — baja hasta abajo. Misma estructura que el nav pero en navy-deep.

footer{
  background:var(--navy-deep);
  border-top:.5px solid #0a3070;
  padding:28px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
footer a{font-size:12px;color:rgba(255,255,255,.22);transition:color .2s}
footer a:hover{color:rgba(255,255,255,.65)}
footer .copy{font-size:11px;color:rgba(255,255,255,.22)}

• Estructura: Logo blanco (140px) | Links | Copyright
• Copyright: © 2026 SuperLeads · México y LATAM
• Mobile: se apila en columna, centrado, gap:16px, padding 28px 18px
• En apps internas el pie va dentro del sidebar (solo copyright, 10px)

12 · Tarjetas

Pásales el cursor: suben 3px con sombra teñida de navy.

.card{
  background:#fff;border:.5px solid var(--border);border-radius:12px;
  padding:20px;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);
  border-color:rgba(0,57,200,.25)}

/* Sobre oscuro */
.card-dark{background:rgba(255,255,255,.04);border:.5px solid rgba(255,255,255,.07)}
.card-dark:hover{border-color:rgba(86,239,159,.25)}

/* Rejilla uniforme */
.cards{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

13 · Eyebrows, badges y stats

Eyebrow

.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.eyebrow span{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.3px;color:var(--blue)}
/* Sobre oscuro */
.eyebrow-dark::before{background:var(--green)}
.eyebrow-dark span{color:var(--green)}

Badges y pills

Stats

El stat héroe (la cifra que sostiene la conversación) va solo, sobre navy-deep, a 48–60px, con su contexto humano debajo en una fila de stats chicos. Una cifra grande sin contexto es un número; con contexto es un argumento.

14 · Grids y layout

Anchos máximos: app 1400px · página de contenido 1100px · documento de lectura 46rem.

15 · Visualización de datos

La paleta de marca NO se usa en gráficas: el verde y el navy no pasan las pruebas de contraste ni de daltonismo en marcas pequeñas.

Reglas

• Un solo tono claro→oscuro para magnitudes. Dos tonos + gris para polaridad. Nunca arcoíris
• El color sigue a la entidad, no a su posición: si un filtro cambia el número de series, las que quedan no cambian de color
• Texto en tinta, nunca del color de la serie. La marca de color va al lado
• Leyenda siempre con 2+ series, y etiqueta directa en las importantes
• Marcas finas: líneas 2px, puntos ≥8px, separación de 2px entre segmentos apilados
• Contraste en marcas oscuras: sobre relleno oscuro el texto va blanco, sin excepción
• Nunca dos ejes Y. Dos magnitudes distintas → dos gráficas
• Sin dato, no hay gráfica. No dibujes un cero: oculta el panel

Números en la interfaz

• Moneda con dos decimales y símbolo ($134,000.00), porcentajes con 1–2 decimales
• Sin dato: — (guion largo), nunca 0, N/A ni vacío
• Fechas en America/Mexico_City, formato medium (14 ago 2026)

16 · Fondos y elementos decorativos

Círculos difusos muy tenues, muy grandes, siempre detrás. Y una deriva tan lenta que a simple vista está quieta.

.fondo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.globo-1{position:absolute;top:-30%;right:-15%;width:520px;height:520px;
  border-radius:50%;background:rgba(42,137,251,.05);filter:blur(100px)}
.globo-2{position:absolute;bottom:-30%;left:-10%;width:480px;height:480px;
  border-radius:50%;background:rgba(86,239,159,.05);filter:blur(110px)}

/* Deriva — el fondo respira sin que nadie lo note */
@keyframes deriva{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-48px,36px,0) scale(1.08)}
}
.globo-1{animation:deriva  90s ease-in-out infinite}
.globo-2{animation:deriva 130s ease-in-out infinite reverse}

/* Círculo de acento en secciones oscuras */
section::before{content:"";position:absolute;right:-100px;top:-100px;
  width:480px;height:480px;border-radius:50%;
  background:rgba(86,239,159,.03);pointer-events:none}

Separador de barra de stats (sobre oscuro): rejilla con gap:1px y fondo #0a3070 — el de la cabecera de esta página.

17 · Estados de la interfaz

Toda pantalla que carga datos necesita cuatro diseños, no uno.

18 · Modos especiales

Modo presentación

• Oculta la navegación y deja solo el contenido, para compartir pantalla
• El botón que lo activa debe ser visible desde cualquier pantalla: si se puede encender en un lado y no apagar en otro, es una trampa
• El estado persiste y se restaura antes del primer pintado, para que no haya parpadeo

Modo privado (métricas ocultas)

• filter: blur(7px); user-select: none; — no se lee ni se copia
• Los nombres se ven, las cifras no. Un ojo al lado revela u oculta
• Arranca oculto por defecto: es más seguro descubrir a propósito que tapar a las prisas

19 · Impresión y PDF

@media print{
  *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  @page{size:letter;margin:16mm}

  html,body{background:#fff !important}
  .no-print,nav,.sidebar,.topbar,button{display:none !important}

  /* Las tarjetas se aplanan: en papel solo gastan tinta */
  .card{border:0 !important;box-shadow:none !important;
    background:transparent !important;padding:0 !important}

  body{font-size:11pt;line-height:1.5}
  h1,h2,h3{break-after:avoid}
  figure,.par-dato{break-inside:avoid}
  /* Las secciones SÍ pueden partirse: evitarlo deja huecos al pie */
}

• Jerarquía por color, nunca por opacidad: la mayoría de las impresoras no resuelven un azul al 30%
• El documento se ve igual en pantalla que en papel — así nadie imprime sorpresas

20 · Accesibilidad

• Contraste mínimo: 4.5:1 en texto normal, 3:1 en texto grande y marcas de gráfica
• Foco siempre visible: outline: 2px solid var(--blue); outline-offset: 2px. Nunca outline:none sin reemplazo — dale Tab a los botones de arriba
• Área táctil mínima 44×44px. Un botón de 32px necesita padding invisible alrededor
• Nada depende solo del color: los estados llevan ícono o texto además del color
• Todo ícono solo lleva title y aria-label
• Controles ocultos por hover deben verse en táctil (opacity-100 en móvil, hover solo desde md:). Un botón invisible que sí recibe toques es un accidente esperando

21 · Checklist antes de entregar

Márcalo. Si algo queda sin palomear, no está listo.

22 · Anti-patrones

Lo que delata un diseño fuera del sistema. Si tu pantalla tiene algo de la columna izquierda, corrígelo.