Blanco
El fondo. Datos e interruptores van siempre sobre blanco.
↑↓ moverse↵ abrirEsc cerrar
Identidad
Blanco, grises y un solo azul. Helvetica Neue en dos pesos. Todo sale de una idea: lo que ya estaba, ahora a la vista.
La idea: apagado encendido
La idea
No tiene luz propia: deja ver lo que hay detrás. Por eso casi todo es blanco y gris, y el azul se guarda para lo que miras ahora.

Nuestro símbolo son dos interruptores. El de la izquierda está apagado: es lo que hoy pasa en los chats de tu equipo y no alcanzas a ver. El de la derecha está encendido: lo mismo, a la vista.
Las marcas y piezas que miramos antes de decidir están en Referencias.
Logo
Siempre desde el archivo: no se redibuja ni se estira. El símbolo va solo donde el nombre ya está al lado.
A su tamaño real. Por debajo de 16 px se escribe «Creators Latam».
Son espacios chicos y cuadrados, y el nombre ya está escrito al lado. Siempre el óptico, sobre Papel, al 60 % del alto del cuadro.
Desliza para ver el logo completo.
No hay versión apilada ni símbolo y texto fundidos: no hace falta. Siempre en un solo color, tinta o Papel (Apagado en los pies), y nunca en azul.
Con el símbolo chico, el aire entre el botón y el borde desaparece y el botón parece un mordisco. El óptico engrosa ese anillo; la cápsula no cambia.


El símbolo queda dentro de las dos formas sin tocar el borde.
Color
≈ 80 % Blanco y Papel · ≈ 15 % Tinta y grises · ≤ 5 % Encendido, en un solo elemento
Reduce la pieza a la mitad: si ves azul en dos lugares, sobra uno. El pañuelo azul del personaje no cuenta: es ropa, no un estado.
El fondo. Datos e interruptores van siempre sobre blanco.
Tarjetas, bandas, pantalla del teléfono, avatar y favicon.
Texto, logo y lo ya hecho. De noche, el fondo.
Lo único que hay que mirar ahora. Uno por pieza.
El único separador, de 1 px. Nunca es texto.
Lo que espera y el contexto. Texto solo desde 24 px.
Eyebrows, pies, bajadas y todo texto secundario.
Fondo del único elemento encendido. Nunca decorativo.
Un tablero no se mira llave por llave: se mira la que acabas de subir. Si todo lo hecho fuera azul, el azul dejaría de decir algo.
Lo que espera. El botón, abajo.
#8A919C · el mismo en oscuro
Lo que ya quedó. El botón, arriba.
Tinta #1D1D1F · en oscuro, Papel
Lo que miras hoy. Uno por pieza.
#007AFF · en oscuro, #0A84FF
| Color | HEX | RGB | Variable |
|---|---|---|---|
| Blanco | |||
| Papel | |||
| Tinta | |||
| Encendido | |||
| Línea | |||
| Apagado | |||
| Pizarra | |||
| Encendido suave |
Hay un color más que no es de la marca: un rojo de error, , que vive solo en los errores de un formulario. No existe en piezas.
Un rol cambia de valor entre el claro y el oscuro. Así una pieza se ve bien en los dos sin rehacerla.
| Rol | Para qué | Claro | Oscuro | Variable |
|---|---|---|---|---|
| Fondo | La página o la pieza. | |||
| Superficie | Tarjetas, bandas y la pantalla del teléfono. | |||
| Elevado | Burbujas, chips y campos dentro de una tarjeta. | |||
| Texto | Titulares y cuerpo. | Aa | Aa | |
| Texto 2 | Eyebrows, pies y bajadas. | Aa | Aa | |
| Texto 3 | Solo desde 24 px (o 19 px Bold) y sobre blanco. | Aa | Aa | |
| Borde | La línea fina de 1 px, el único separador. | |||
| Acento | Relleno: el botón, el punto, la barra. | |||
| Acento en texto | Titulares desde 24 px o 19 px Bold. | Aa | Aa | |
| Acento suave | Fondo del único elemento encendido. |
La lista completa está en Sistema · colores y tokens.
Norma WCAG 2.x, nivel AA: 4,5 a 1 para texto normal y 3 a 1 para texto grande (desde 24 px, o 19 px en Bold). Los números se calculan aquí mismo con los colores de la marca.
| Texto | Sobre Blanco | Sobre Papel | Sobre Encendido suave |
|---|---|---|---|
| Tinta | Aa16,83Todo tamaño | Aa15,69Todo tamaño | Aa15,75Todo tamaño |
| Pizarra | Aa5,78Todo tamaño | Aa5,39Todo tamaño | Aa5,41Todo tamaño |
| Apagado | Aa3,18Solo desde 24 px | Aa2,96No es texto | Aa2,97No es texto |
| Encendido | Aa4,02Solo desde 24 px | Aa3,75Solo desde 24 px | Aa3,76Solo desde 24 px |
| Error | Aa5,38Todo tamaño | Aa5,02Todo tamaño | Aa5,04Todo tamaño |
| Línea | Aa1,24No es texto | Aa1,15No es texto | Aa1,16No es texto |
Blanco sobre azul: el texto del botón va en Bold y desde 19 px.
Tinta sobre el azul suave: la burbuja encendida se lee a cualquier tamaño.
Borde azul sobre el azul suave: pasa el 3 a 1 que piden los elementos gráficos.
Apagado junto a azul: se distinguen por tono, no por luz. Por eso nunca se tocan: llevan 2 px de aire.
No entran: el rosado y los degradados de la marca anterior, un segundo azul, rojo, verde o ámbar en piezas, y las sombras.
Letra
Bold 700 · quién y cuánto: titulares, cifras, eyebrows y botones.
Regular 400 · la conversación: cuerpo, bajadas, pies y burbujas.
Tus ventas, a la vista.
Tu piloto · Día 9
Vas en el día 9.
Quedan 5.
Esta semana salieron 25 seguimientos, todos aprobados por ti.
Once tamaños y ninguno entre medio. Cada «Aa» está a su tamaño real. Las letras grandes se espacian menos de lo que parece, y se miden al tamaño al que las ve la persona: un titular de 80 px en un post se ve en el celular como uno de 27 px.
| Papel | Web escritorio | Lámina 1280 × 720 | Post 1080 × 1350 | A4 (pt) |
|---|---|---|---|---|
| Pie, fuente | 12 R | 12 R | 30 R | 7 R |
| Eyebrow | 12 B | 15 B | 30 B | 7 B |
| Texto chico | 15 R | 12 R | 30 R | 9 R |
| Cuerpo | 17 R | 15 R | 42 R | 10 R |
| Bajada | 24 R | 19 R | 58 R | 12 R |
| Título de tarjeta | 24 B | 19 B | 42 B | 12 B |
| Título | 58 B | 42 B | 80 B | 20 B |
| Portada | 80 B | 58 B | 112 B | 36 B |
| Cifra protagonista | 58 B | 112 B | 160 B | 48 B |
| Botón | 19 B · alto 52 | 19 B · alto 48 | 42 B · alto 96 | — |
R es Regular y B es Bold. Las medidas de un post se ven a un tercio en el celular, por eso son tan grandes. En A4, cada tamaño toma el papel de un paso de la escala de pantalla.
Espacio duro entre la cifra y su unidad: «10 %», «US$ 45», «S/ 120», «9:00 a. m.».
Miles con espacio desde cinco cifras; con cuatro, junto («1500»). Nunca «12,500».
Las cifras ya son tabulares: las columnas de horas se alinean solas.
Flechas y checks, siempre como dibujo (SVG). La letra no los trae: si se escriben, el navegador los saca de otra fuente.
El Medium y el Light no existen en todas las letras que ven nuestros clientes (TeX Gyre Heros y Arial no los tienen): con un tercer peso, la misma pieza se vería distinta según el equipo. Nunca Inter, Light, cursiva ni condensada.
En la Mac ya viene Helvetica Neue; la de respaldo es para Windows, Android y la web.
Sistema gráfico
Día 9 de 14. Ejemplo
Anchos en px. Por debajo de 12 px el botón deja de verse y la cápsula parece una barra: ahí va el punto. Vale 1 : 3,076 de alto; esa proporción no se redondea.
Es la misma idea del Unigrid de Vignelli y de la retícula de Marber para Penguin: con una línea fija, una miniatura, una historia y una propuesta impresa se reconocen como familia aunque midan distinto.
Sin sombra y sin ícono grande arriba. Lo encendido se hace siempre igual: fondo azul suave, borde azul y texto en tinta.
WhatsApp, Instagram y Facebook, en Kommo.
Con su nombre a la vista.
Sale solo, en tu horario de atención.
Revisamos juntos lo que viste en 2 semanas.
Seguimiento automático · aprobado por ti
Ancho W, alto 2 W, radio 0,16 W y bisel 0,04 W. Ningún texto baja de 12 px en lámina y web, ni de 30 px en un post: si no entra, se muestran menos burbujas, no letra más chica.
Fotografía
«Pequeños oficios»: quien vende y su herramienta, el celular. Como Irving Penn en Small Trades y Martín Chambi.
Sin recetaCon la receta
Clínica Dental Norte
Tu recepción recibe chats todo el día.
Lucía · asesora de ventasClínica Dental Norte · 10:47 p. m.
Cada chat entra con un nombre.
Charla · Lima
Atender es la mitad del trabajo.

Imágenes hechas con IA: solo lugares y manos, con una sola zona limpia para el texto o la tarjeta.




Fotos reales del escenario y de la sala. El blanco de la pantalla LED queda en el tono del Papel, y si la diapositiva de atrás muestra otra marca, se recorta. El ZIP trae dos más del archivo, para recortar: en ellas la gente mira a cámara, así que no van en una pieza.




Una sola receta para todas las fotos.
Nunca queda más oscura que el texto. La foto deja el color para lo que se enciende: la interfaz.
Gráficos
Solo los tres estados del interruptor: Apagado para el contexto, tinta para lo hecho y azul para lo que dice el título.
Reporte de hoy · miércoles 14 de octubre
Chats de Clínica Dental Norte, contados al cierre (7:00 p. m.).
Ejemplo · Kommo, chats sin responder.
Son los primeros que tu equipo atiende mañana a las 9:00 a. m.
Piloto · días 1 a 14 · Ejemplo
Chats sin responder al cierre (7:00 p. m.), cada día del piloto de Clínica Dental Norte.
Ejemplo · Kommo, chats sin responder.
Por etapa · en el orden del proceso
Chats de Inmobiliaria Sol, en noviembre, según su etapa de venta.
Ejemplo · Kommo, etapas de venta.
Piloto · días 1 a 14 · Ejemplo
Una espera es un tiempo que corre día a día: va en línea.
Ejemplo · Kommo, espera del chat más antiguo.
Un domingo en Surco · 3:46 p. m.
15 h 50 min
Lo que tardó en responder uno de los proyectos. El otro tardó 10 min.
Experimento propio de Martín, clase DAPN.
| Medida | Lámina | Post e historia | A4 | Web |
|---|---|---|---|---|
| Barra: grosor / aire | 24 / 16 | 56 / 32 | 3,5 / 1,5 mm | 20 / 12 |
| Línea de datos · punto | 2 px · Ø 12 | 4 px · Ø 24 | 1,25 pt · Ø 2,5 mm | 2 px · Ø 10 |
| Línea base (el cero) | 1 px tinta | 2 px tinta | 0,5 pt | 1 px |
| Retícula, solo si no hay valores | 1 px Línea, hasta 4 | 2 px Línea, hasta 4 | 0,25 pt | 1 px |
| Máximo | 8 barras, 3 series | 6 barras (5 en historia), 2 series | 10 filas | 6 barras |
Sin leyenda hasta tres series; el número de la barra azul va en tinta. En A4 impreso, lo encendido va en tinta: el azul se pierde en una impresora en blanco y negro. En oscuro, como máximo 5 barras y 2 series.
Modo oscuro
Significa «fuera de horario» (el local cerró y los clientes siguen escribiendo) o «escenario» (charla en pantalla LED).
Este botón cambia solo la pieza de abajo, no la página. Los mismos roles, con otro valor.
Martes · 10:47 p. m.
Cerraste a las 7.
Tus clientes siguen escribiendo.
Esperan en orden, cada uno con su vendedor.
| Medio | Oscuro solo cuando | Tope |
|---|---|---|
| Feed de Instagram | Pieza «fuera de horario» o charla | 1 de cada 5; nunca dos en una fila |
| Historias | Cuenta regresiva o charla en vivo | 1 de cada 3 en días de evento |
| Anuncios de Meta | Una variante «fuera de horario» | 1 por prueba |
| Charlas | Pantalla LED o sala a media luz | Un deck es claro u oscuro; no mezcla |
| Video | Un capítulo «de noche» | 2 cambios de tema por video |
| Landing | Una banda «fuera de horario» | 1 banda por página |
| Precios, propuestas, informes, contratos, correos, impresos | Nunca | 0 % |
Doce posts del perfil de ejemplo: dos oscuros, separados por cinco claros.
Charla para dueños · Lima
Atender es la mitad del trabajo.
La otra mitad es ver que se atienda.

Charla para dueños · Lima
Atender es la mitad del trabajo.
La otra mitad es ver que se atienda.

Martes · 7:00 p. m.
Cerraste a las 7.
Miércoles · 9:00 a. m.
Tus clientes siguen escribiendo.Hoy abres con todo a la vista.
Toda pieza oscura lleva una hora de noche escrita o es de escenario. La foto en blanco y negro con fondo claro va en una tarjeta de con borde . Los gráficos completos van siempre en claro.
Lo que no se hace
Con su proporción: se usa siempre desde el archivo.
Estirado: cambia la proporción y las letras se deforman.
En un solo color: tinta o Papel, y Apagado en los pies.
En azul: el logo es la firma, no un estado. El azul se queda para lo que miras ahora.
Dentro de una píldora o de una caja.
Rotado o inclinado.
El nombre sin el símbolo.
Con contorno, sombra o brillo.

Sobre una foto con zonas claras y oscuras: la mitad se pierde.
Dos marcas propias en la misma pieza: compiten entre sí.
El símbolo agrandado como fondo.
Con el símbolo separado del nombre: el espacio no se cambia.
Lo hecho en tinta y hoy en azul: se ve en qué día vamos.
Trece azules: ya no se ve cuál es el de hoy.
Tu piloto · Día 9
Vas en el día 9.
Quedan 5.
Un solo elemento encendido: el botón. El segundo tiempo va en Apagado.
Tu piloto · Día 9
Vas en el día 9.
Quedan 5.
Tres cosas prendidas a la vez: no se sabe cuál mirar.
Las ventas se pierden después del primer mensaje.
Azul en texto de 15 px: da 4,02 a 1 y no pasa. Solo desde 24 px.
Apagado y azul tocándose: se distinguen por tono, no por luz. Llevan 2 px de aire.
Un segundo azul: hay uno solo y un solo tinte.
Semáforos: un vendedor en rojo es un vendedor acusado, y el rojo con el verde se confunden.
Sin responder al cierre
Gris claro en texto chico: Apagado solo desde 24 px y sobre blanco.
Datos sobre Papel: el gráfico va en un panel blanco.
Tus ventas, a la vista.
Mayúscula solo al inicio, con su punto.
Tus ventas, a la vista
Mayúsculas sostenidas y sin punto: se lee como un grito.
Tu piloto · Día 9
El eyebrow va en mayúsculas, Bold, con aire y en Pizarra.
Tu piloto - día 9
Azul y en minúscula: gasta el único azul y se lee como un enlace.
Tus ventas, a la vista.
Cursiva, Light o condensada: la marca tiene dos pesos, Regular y Bold.
Botón con exclamación y Mayúsculas Iniciales: sin gritar, «Pedir piloto gratis».
Ya te escriben clientes. Las ventas se pierden después del primer mensaje, cuando nadie las mira.
Un párrafo entero en Bold: el Bold es para quién y cuánto.
Ver cómo funciona →
La flecha escrita como letra: la fuente no la trae. Va dibujada, en SVG.
Esperan en orden, cada uno con su vendedor.
Texto chico en gris claro: Apagado no se lee bajo 24 px.
Tus ventas, a la vista, en un solo lugar, con su vendedor
Titular de muchas palabras: dos tiempos de seis palabras como máximo.
Vertical, lleno y con su rótulo: arriba es encendido.
Horizontal: es el control de una app, no la llave de un tablero.
Dice un estado del sistema.
Nunca para calificar a una persona: «Ana · apagada» no existe.
En contorno: va siempre lleno, y el contorno lo acerca al de Nintendo.
Inclinado o en perspectiva.
Como viñeta de una lista.
A medio camino: solo hay dos posiciones, arriba o abajo.
Sin rótulo: el color nunca puede ser la única señal.
Junto a una línea de tiempo: una explica qué pasa cada día; la otra, en qué día vamos. Una sola por pieza.
Barras desde cero, con la etiqueta pegada.
Tortas y donas: no se comparan los ángulos y obligan a leer una leyenda.
Personas en orden alfabético
Las personas van en orden alfabético: el reporte es una lista, no un podio.
Ranking del día
Ordenar personas por valor: una lista se vuelve un podio y acusa a quien queda último.
Rojo, ámbar y verde: los datos usan Apagado, tinta y azul, y nada más.
Barras que no parten de cero: 41 y 44 parecen muy distintas.
Varias barras en azul: el azul es solo la que nombra el título.

En blanco y negro, con la tinta y el Papel de la marca.

Sepia, color o filtros: la foto muestra lo que hay y deja el color a la interfaz.
Clínica Dental Norte
Tu recepción recibe chats todo el día.

El texto en una parte y la foto en la otra.

Tu recepción recibe chats todo el día.
El texto encima de la imagen: tapa las manos y el celular, que es lo que se mira.

El azul en la foto: el azul va en la tarjeta, nunca en la imagen.

Foto más oscura que el texto: el negro de la marca es la tinta, no el negro puro.
Lucía · 26 chatsCifras de una persona real en el chip: solo nombre y rol.
Martes · 10:47 p. m.
Cerraste a las 7.
Tus clientes siguen escribiendo.
De noche, con la hora de noche escrita.
Piloto gratis
Ordena tus ventas.
Con estilo.
Oscuro para «verse premium»: sin hora de noche, no significa nada.
La pantalla del teléfono sigue clara.
La pantalla negra con burbujas grises: la pieza oscura pierde lo más luminoso.
Dos oscuros en la misma fila del perfil: como máximo uno de cada cinco.
Propuesta para Clínica Dental Norte · Ejemplo
Precio con IGVUn precio o una propuesta en oscuro: nunca, ni contratos, ni informes, ni correos.
El logo en azul sobre oscuro: el logo es Papel, y en el pie, Apagado.
Descargas