Sistema Visual Carrello

Dos capas, un solo violeta

Carrello tiene dos paletas emparentadas. Las apps internas crecieron una por una y cada una eligió su propio look — hoy conviven cuatro violetas distintos, tres pares tipográficos y un naranja que sobrevive del branding anterior. Esta guía ordena todo eso en dos capas, no en una.

Paleta de marca

Once pasos de lavanda muy claro a azul-púrpura casi negro. Los extremos claros son fondo, el medio es superficie, y los dos oscuros son titular y texto.

Los dos tokens en negrita (Marca y CTA) son los únicos que llevan peso de marca — el resto es fondo, superficie o texto.

Jerarquía de marca

Marca y CTA son casi el mismo tono a ojo. La diferencia es funcional: el CTA se reserva para lo clickeable o lo que empuja a comprar. Si todo es CTA, nada lo es.

El degradado oficial

Tres paradas, en ese orden. Es el fondo por defecto de cualquier pieza de marca — no inventar degradados nuevos ni meter el CTA adentro del degradado.

Los dos acentos que rompen el violeta

Se usan poco y fuerte. Si el amarillo está en todas partes, deja de significar oferta.

Verificar antes de publicar

Regla práctica: el amarillo y el fucsia son superficie, nunca tinta. El violeta claro es fondo, nunca texto. Si dudás: texto oscuro sobre color, no color sobre claro.

Violeta de aplicación

La versión desaturada que ya corre en producción en la Torre de Control. Es el único acento de identidad dentro de una app: navegación activa, botones primarios, focos, valores destacados. Coincide con el isotipo — el logo de Carrello es un degradado de ciruela a violeta en exactamente este rango.

Neutrales

No son grises puros: todos tienen una pizca de violeta. Es lo que hace que la interfaz se lea como un conjunto y no como un dashboard genérico. Un #F5F5F5 cualquiera rompe ese efecto.

Colores semánticos

Cada uno viene con su fondo teñido para badges y filas. Se usan por lo que significan, nunca para dar variedad visual. El violeta no está en esta lista: es identidad, no estado.

Tipografía

Las tres son gratuitas en Google Fonts. Descargalas e instalalas antes de abrir cualquier archivo de la marca.

Quién usa cuál

Poppins titula lo que ve un cliente: landings, campañas, catálogo, placas. Plus Jakarta Sans hace todo lo demás: la interfaz entera de las apps internas, y el texto corrido también de las piezas de marca — es la que aguanta 12,5px sin cansar. JetBrains Mono va para todo lo que sea dato, no una palabra: montos, horarios, fechas, PINs, IDs, porcentajes, columnas numéricas y valores de KPI.

Escala de marca (piezas de campaña)

Escala interna (Torre de Control)

La Torre tiene hoy catorce tamaños distintos, varios separados por medio píxel. Esta escala de siete se queda con los que realmente cargan un rol y descarta el ruido.

Los títulos llevan letter-spacing:-.02em; las etiquetas en mayúsculas llevan +.1em. Sin esos dos ajustes la tipografía se ve floja en pantalla.

Forma

Las sombras nunca son negras: son violeta a baja opacidad, del mismo tono del acento. Es la otra mitad de lo que le da cohesión al sistema.

Iconos: Tabler Icons 2.47 vía iconfont, a 16px dentro de la navegación. Es la librería que ya carga la Torre — no mezclar con Lucide ni Font Awesome en la misma app.

Seis reglas que resuelven el 90%

Si una pieza cumple estas seis, no hace falta revisarla línea por línea.

El bloque para copiar

Esto es lo que va al principio del <style> de cada app o pieza web. Reemplaza el :root que tenga hoy. Van las dos capas juntas: una pieza de marca usa los --br-* y una app interna usa el resto — declararlas juntas no cuesta nada y evita tener dos archivos que se desincronizan. A diferencia del original interno, este bloque ya viene sin el alias roto de --orange — acá --orange vale naranja de verdad (#EA580C), igual que --acc-orange en la Torre.

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

/* — Sistema Visual Carrello — */
:root{
  /* — Capa 1 · Marca (público, campañas, landings) — */
  --br-100:#F0DEFF; /* fondo base       240 222 255 */
  --br-200:#E8D3FF; /* lavanda claro    232 211 255 */
  --br-300:#D3BCF9; /* lavanda medio    211 188 249 */
  --br-400:#CBABF6; /* violeta suave    203 171 246 */
  --br-500:#B491E8; /* violeta medio    180 145 232 */
  --br-600:#A88CDE; /* fondo intenso    168 140 222 */
  --br-700:#683AD1; /* MARCA / campaña  104  58 209 */
  --br-800:#5930CD; /* CTA               89  48 205 */
  --br-900:#4C28BE; /* púrpura oscuro    76  40 190 */
  --br-icon:#40268C; /* iconos y textos   64  38 140 */
  --br-title:#271646; /* titulares         39  22  70 */
  --br-ink:#2B1E4F; /* texto oscuro      43  30  79 */
  --br-promo:#FFCA25; /* amarillo promo   255 202  37 */
  --br-pink:#F467A6; /* fucsia contraste 244 103 166 */
  --br-white:#FFFFFF;
  --br-grad:linear-gradient(135deg,#F0DEFF 0%,#CBABF6 50%,#A88CDE 100%);

  /* — Capa 2 · Aplicación (herramientas internas) — */
  --purple:#5B3E8A;  --purple2:#7C5AAE;  --purple-bg:#F4F0FA;

  /* Neutrales (sesgo violeta) */
  --bg:#FAFAFC;    --card:#FFFFFF;
  --bdr:#E7E5F0;   --bdr2:#D8D4E8;
  --tx:#211C33;    --tx2:#5B5570;    --tx3:#9B96AC;

  /* Semánticos */
  --green:#16A34A;   --green-bg:#F0FDF4;
  --amber:#D97706;   --amber-bg:#FFFBEB;
  --red:#DC2626;     --red-bg:#FEF2F2;
  --blue:#2563EB;    --blue-bg:#EFF6FF;
  --teal:#0D9488;    --teal-bg:#F0FDFA;
  --pink:#DB2777;    --pink-bg:#FDF2F8;
  --indigo:#4F46E5;  --indigo-bg:#EEF2FF;
  --cyan:#0891B2;    --cyan-bg:#ECFEFF;
  --orange:#EA580C;  --orange-bg:#FFF7ED;
  --gray:#6B7280;    --gray-bg:#F3F4F6;

  /* Forma */
  --r:10px;   --r2:14px;
  --sh-1:0 1px 2px rgba(91,62,138,.06);
  --sh-2:0 10px 24px rgba(91,62,138,.09);
  --sh-3:0 4px 12px rgba(91,62,138,.25);
  --sh-modal:0 24px 60px rgba(91,62,138,.18);

  /* Tipografía */
  --display:'Poppins','Plus Jakarta Sans',system-ui,sans-serif;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SF Mono',Consolas,monospace;
}

body{
  font-family:var(--sans);
  font-size:13.5px;
  background:var(--bg);
  color:var(--tx);
}
.num,td.num,.kpi-v{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
}

Referencia rápida

Pensada para imprimir o dejar abierta al lado mientras se produce. Dudas sobre una pieza antes de producirla: preguntar es más barato que rehacer.