---
name: creators-latam-design-system
description: Usar cuando haya que diseñar o revisar cualquier pieza visual de Creators Latam o de Martín Velasco (landing o sección de landing, post, carrusel, historia, banner, miniatura de YouTube, anuncio, deck, documento A4, lámina de video, gráfico) con el sistema de marca 2026 (blanco, grises y un solo azul #007AFF, Helvetica Neue en dos pesos, interruptor vertical, personaje 3D). No usar el design system viejo (rosado y degradado).
---

# Creators Latam · design system 2026 (v1.0)

Diseñas piezas con el sistema de marca 2026. Este archivo resume lo que necesitas; el detalle vive en `guia/sistema-guia.md` (visual). **Si algo de aquí choca con la guía, manda la guía.**

## 0. Antes de empezar

1. Ubica el formato en `patrones/` y sigue su receta (post, historia, deck, lámina de video, documento, sección de landing, gráfico).
2. Abre `componentes/componentes.html` para ver cómo se ve cada componente; su CSS está en `componentes/componentes.css`.
3. Toma los valores de `tokens/tokens.css`. **Nunca escribas un hex**: usa los roles.
4. Si necesitas maquetar una pieza en HTML al tamaño real, parte de esos dos archivos y de la receta del formato.
5. No llames a APIs de imágenes ni de pago sin OK explícito de Martín.

## 1. Idea en una línea

**Apagado → encendido.** El botón del interruptor es un hueco sin luz propia: por eso casi todo es blanco y gris, y el azul aparece solo en lo que hay que mirar ahora. Prendemos la luz sobre las ventas que ya llegan por chat, y el interruptor se queda en la mano del dueño.

## 2. Tokens esenciales

| Nombre | Hex | Variable | Para qué |
|---|---|---|---|
| Blanco | `#FFFFFF` | `--blanco` · `--fondo` | Fondo. Datos e interruptores, siempre sobre Blanco |
| Papel | `#F6F7F8` | `--papel` · `--superficie` | Tarjetas, bandas, pantalla del teléfono |
| Línea | `#E5E7EB` | `--linea` · `--borde` | Único separador (1 px) y «sin dato» |
| Apagado | `#8A919C` | `--apagado` · `--texto-3` | Lo que espera; logo del pie; texto solo desde 24 px (19 B) sobre Blanco |
| Pizarra | `#5F6672` | `--pizarra` · `--texto-2` | Eyebrows, pies, texto secundario |
| Tinta | `#1D1D1F` | `--tinta` · `--texto` | Texto, logo, «hecho». De noche, el fondo |
| Encendido | `#007AFF` | `--encendido` · `--acento` | **Un** elemento por pieza |
| Encendido suave | `#F2F8FF` | `--encendido-suave` · `--acento-suave` | Fondo del elemento encendido |

- **Oscuro** (`data-theme="dark"`): fondo `#1D1D1F`, texto `#F6F7F8`, azul de relleno `#0A84FF` y de texto `#409CFF`. Solo con una hora de noche escrita («martes · 10:47 p. m.») o de escenario (`data-escenario`, fondo `#000`). La pantalla del teléfono sigue clara.
- **Tres estados** para cualquier dato: Apagado (espera), Hecho (tinta) y Ahora (azul, uno por pieza). Rojo, verde y ámbar no entran; el error `#D70015` es solo de formularios web.
- **Encendido = una sola receta**: fondo `--acento-suave`, borde `--acento` de 1,5 px (3 en el lienzo de 1080), texto en tinta. Vale para chip, tarjeta, burbuja del seguimiento y nodo.
- **Forma:** radios 8 (campo) · 12 (captura) · 16 (tarjeta) · 999 (píldora); 40 en el lienzo. Sin sombra. Espacio en múltiplos de 8 (4 y 12 como medios pasos).

## 3. Tipografía

- **Helvetica Neue, dos pesos: 400 y 700.** Web: `var(--fuente)` = «CL Sans» (Helvetica Neue local → TeX Gyre Heros → Arial). Nunca Inter, Roboto elegido, Light, Medium ni cursiva.
- **Escala única:** 12 · 15 · 17 · 19 · 24 · 30 · 42 · 58 · 80 · 112 · 160 px. A4: 7 · 9 · 10 · 12 · 14 · 20 · 28 · 36 · 48 pt.
- **Un papel por paso y por formato:**

| Papel | Lámina | Post e historia | Web escritorio | Web celular | A4 (pt) |
|---|---|---|---|---|---|
| Pie | 12 R | 30 R | 12 R | 12 R | 7 R |
| Eyebrow | 15 B | 30 B | 12 B | 12 B | 7 B |
| Cuerpo | 15 R | 42 R | 17 R | 17 R | 10 R |
| Bajada | 19 R | 58 R | 24 R | 19 R | 12 R |
| Título | 42 B | 80 B | 58 B | 30 B | 20 B |
| Portada / H1 | 58 B | 112 B | 80 B | 42 B | 36 B |
| Cifra | 112 B | 160 B | 58 B | 42 B | 48 B |
| Botón | 19 B, alto 48 | 42 B, alto 96 | 19 B, alto 52 | 19 B, alto 52 | — |

- **Tracking por tamaño visible** (redes ÷ 3, A4 × 1,7): ≤ 17 → 0 · 19 → −0,01 em · 24 → −0,015 · 30 → −0,02 · 42 → −0,028 · 58 → −0,035 · 80 → −0,04 · 112 → −0,045 · 160 → −0,05 · eyebrow +0,10 em. Están en `tokens.css` (`--trk-*`).
- **Interlineado:** cifra y titular de una línea 1,0 · titular de 58+ en varias líneas 1,03 (1,18 si una línea empieza con mayúscula con tilde) · título 42 → 1,08 · cuerpo de pieza 1,35 · texto corrido en pantalla 1,5.
- **Eyebrow:** minúsculas con tilde en el HTML y `text-transform:uppercase`; Bold, +0,10 em, Pizarra (`#AEAEB2` en oscuro); hasta 4 palabras más un número u hora.
- **Titular en dos tiempos:** dos oraciones con su punto, hasta 6 palabras cada una; lo que el dueño ya sabe (tinta) y lo que ahora ve (Apagado; azul solo si es el titular principal y la pieza no tiene otro elemento encendido). Punto final en todo titular que sea oración; sin punto en botones, eyebrows y etiquetas.
- **Números:** espacio duro entre cifra y unidad («10 %», «US$ 45», «9:00 a. m.»); miles con espacio desde cinco cifras. Flechas y checks, siempre en SVG.

## 4. Componentes (catálogo: `componentes/index.html`)

- **Logo:** siempre desde el archivo (`creators-logo*.svg`). **Una sola marca nuestra por pieza, abajo a la izquierda**, en tinta o Papel (Apagado en pies). Mínimo 16 px. Nunca azul, en caja, con sombra ni centrado arriba de una portada. Símbolo solo desde 72 px; por debajo, `simbolo-optico.svg`.
- **Interruptor:** vertical, 1 : 3,076, botón calado. Estados: apagado, hecho, ahora. Tres configuraciones: suelto, hilera (14 días del piloto en dos filas de 7; paginación) y par (= el logo). Siempre sobre Blanco. Nunca como viñeta, adorno, separador ni para personas.
- **Íconos:** Lucide 1.48, trazo 1,75, **solo los 28** de la lista (conceptos e interfaz); la palabra siempre al lado; nunca ojo, campana, lupa, foco, destello, cohete, diana.
- **Botón:** principal = píldora azul con texto blanco Bold (uno por pieza y es el elemento encendido); secundario = texto tinta + flecha; verbo + objeto sin punto: «Pedir piloto gratis». Nunca dibujado en anuncios de Meta o Google.
- **Chip** de 28 px; **chip del vendedor** «Asignado a **Ana**» (todo chat tiene nombre). **Tarjeta:** blanca con borde, Papel, encendida (una) o de tinta (la persona que aprueba). Sin ícono grande arriba.
- **Teléfono:** ancho W, alto 2 W, marco tinta, pantalla Papel siempre, sin isla. Hora 7:05 (10:47 de noche) o la de la escena. Burbujas blancas con borde; solo la del seguimiento automático, encendida. Uno por pieza.
- **Gráficos:** solo los tres estados; barras desde cero; personas en orden alfabético; título-conclusión con número y punto; sin tortas, 3D ni semáforos; sobre panel blanco; en A4 impreso, lo encendido va en tinta.
- **Foto:** «Pequeños oficios», B/N (negro 29, blanco 246, sin grano), nadie mira a cámara, chip con nombre y rol (nunca cifras). Una imagen por pieza.
- **Personaje (Martín en 3D):** 14 poses oficiales, una por pieza, apoyado en la línea inferior, mira o señala hacia el texto, sobre Blanco o Papel. Nunca en oscuro, nunca espejado, nunca junto al interruptor, la foto real de Martín o el teléfono. No va en precios ni propuestas.
- **Movimiento:** una vez y quieto; sin rebote ni bucles; el azul llega último. Curvas `entrada` (.05,.7,.1,1), `estado` (.4,0,0,1), `salida` (.3,0,.8,.15), `micro` (.2,0,0,1).

## 5. Composición

- **Línea del 30 %:** todo lo que abre algo cuelga el título de ese punto (lámina y 216; post y 408; historia y 576; miniatura y 216). Márgenes de 80 en lámina, post e historia.
- **Cuatro esquinas fijas:** arriba a la izquierda, el eyebrow; abajo a la izquierda, nuestra marca; arriba a la derecha, el anfitrión o el cliente; abajo a la derecha, fecha o paginación.
- **Nivel por pieza:** 0 silencio (precio, propuesta, contrato: sin azul ni interruptor) · 1 señal (punto, check, chip, una palabra en azul) · 2 estado (interruptor) · 3 momento (animación de encendido). Un solo nivel por encima del 1.
- Proporción de color: Blanco + Papel ≈ 80 %, tinta y grises ≈ 15 %, Encendido ≤ 5 % y en un solo elemento.

## 6. Reglas de voz

- **Español del Perú, con tildes, de «tú»** (nunca «vos» ni «usted»). Comillas «», horas en 12 h («7:05 p. m.»), «setiembre», «US$ 45», «S/ 120».
- Sobrios, nunca apagados: la emoción la pone el dato. Habla un colega que sabe de ventas y de Kommo, sentado al lado del dueño. Sin exclamaciones ni emojis.
- **Lista negra:** garantiz- · 100 % · nunca más · potencia · impulsa · transforma · revoluciona · optimiza · siguiente nivel · soluciones · 24/7 · leads y embudo (para dueños) · pipeline · dashboard · urgente · alerta · vigila/controla/monitorea · ranking · tranquilidad · cupos limitados · mismo número · «¡».
- Tics de IA que no salen: tríadas, «No es X, es Y», preguntas en cadena.
- **Todo dato inventado dice «Ejemplo».** Reparto fijo: Clínica Dental Norte (Miraflores, de 9:00 a. m. a 7:00 p. m.; Carmen, dueña; Ana, Diego y Lucía; Rosa, paciente) e Inmobiliaria Sol (Surco; Raúl; Marco; Jorge, comprador). Fechas de ejemplo: lunes 5 y martes 6 de octubre de 2026. Personas en orden alfabético.
- Anuncios: título de Google hasta 30 caracteres, descripción hasta 90.

## 7. Diez preguntas antes de entregar

1. **¿Qué está encendido aquí?** Contéstalo en una frase. Si son dos cosas, sobra una; si es nada, es nivel 0.
2. ¿Hay **un solo azul**, en un solo elemento, y es lo que el título nombra o el paso que puede dar el dueño?
3. ¿Todo chat tiene **nombre**, toda escena tiene **hora**, y el teléfono marca 7:05, 10:47 o la hora de la escena?
4. ¿Todo el texto está por encima del **mínimo de su formato** y del **contraste** de su tamaño (Apagado y azul solo desde 24 px o 19 B; Pizarra nunca sobre oscuro)?
5. ¿El título que abre cuelga de la **línea del 30 %** y nuestra marca aparece **una sola vez**, abajo a la izquierda?
6. ¿Los valores salen de **tokens** (roles, escala, radios), sin hex sueltos, sin rosado, sin degradado ni sombra?
7. ¿Las piezas oscuras tienen **hora de noche escrita** (o son de escenario), la pantalla del teléfono sigue clara y no hay personaje?
8. ¿Se entiende en **2 segundos, a las 7 p. m., en un Android**, sin el logo y sin nadie al lado?
9. ¿**Acusa a alguien** (al vendedor, al dueño, a la competencia) o usa algo de la lista negra o un tic de IA?
10. ¿Todo dato inventado dice **«Ejemplo»**, las tildes están bien y cada día de la semana coincide con su fecha?

## 8. Errores a evitar

- **Rosado, degradados, sombras** o el «segundo azul» (`#0066D6`): son de la marca vieja. El diseño anterior (rosado y degradado) no se usa.
- **Dos azules** en la misma pieza (botón + palabra en azul + barra). El botón ya es el elemento encendido: entonces el titular va en tinta y su segundo tiempo en Apagado.
- **Interruptor sobre Papel** (el hueco queda en 2,96:1), horizontal, en contorno o como adorno.
- **Texto Apagado o azul chico**: Apagado como texto solo desde 24 px sobre Blanco; los enlaces dentro de un párrafo van en tinta con subrayado.
- **Inter, Medium, cursiva**; tres pesos en la misma pieza.
- **Tarjetas con un ícono grande arriba** y emojis como íconos (la huella del diseño hecho por IA).
- **Ícono fuera de los 28**, o sin su palabra al lado; ojo, campana o lupa (se leen como vigilancia).
- **Personaje junto al interruptor, la foto de Martín o el teléfono**; espejado; en oscuro; en precios.
- **Logo en azul, en caja o centrado** arriba de una portada; dos marcas propias en la misma pieza.
- **Botón dibujado en un anuncio** de Meta o Google; botón falso en una imagen OG.
- **Oscuro sin hora de noche**, o dos piezas oscuras seguidas en la misma fila.
- **Tortas, donas, 3D, semáforos**; personas ordenadas por valor («ranking»).
- **Datos sin «Ejemplo»**, cifras redondas sin fuente, «Nombre Apellido», lorem ipsum.
- **Voseo** («querés», «vos»), «usted», exclamaciones, «¡», emojis.
- **Flechas o checks tipeados** (→ ✓): van en SVG; Helvetica Neue no los tiene.
- **Inventar** un color, un ícono, un tamaño o una pose. Si falta algo, propónlo (README, «Cómo proponer un cambio») y no lo uses mientras tanto.

## 9. Archivos de marca

El logo, el símbolo, el avatar y el favicon se usan siempre desde sus archivos (`creators-logo.svg`, `simbolo.svg`, y sus versiones negativas y ópticas); las fotos «Pequeños oficios» y las 14 poses del personaje van aparte. Si no tienes un archivo, pídelo: no lo redibujes.