Saltar al contenido

Identidad

Una marca hecha de un interruptor.

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

arribaabajo 0 ms500 ms

La idea

El botón es un hueco.

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.

Sobre blanco, el botón se ve blanco.
Sobre la tinta, se ve tinta.
Sobre una foto lisa, se ve la foto.
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.
Color
El azul, solo en lo que miras ahora. Ver el color
Forma
Vertical: arriba es encendido. Ver el sistema gráfico
Movimiento
Una vez y quieto. Ver cómo se mueve

Las marcas y piezas que miramos antes de decidir están en Referencias.

Color

Casi todo blanco, un solo azul.

≈ 80 % Blanco y Papel≈ 15 % Tinta y grises≤ 5 %

≈ 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.

Blanco

El fondo. Datos e interruptores van siempre sobre blanco.

Papel

Tarjetas, bandas, pantalla del teléfono, avatar y favicon.

Tinta

Texto, logo y lo ya hecho. De noche, el fondo.

Encendido

Lo único que hay que mirar ahora. Uno por pieza.

Línea

El único separador, de 1 px. Nunca es texto.

Apagado

Lo que espera y el contexto. Texto solo desde 24 px.

Pizarra

Eyebrows, pies, bajadas y todo texto secundario.

Encendido suave

Fondo del único elemento encendido. Nunca decorativo.

Tres estados en todo el sistema

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.

Apagado

Lo que espera. El botón, abajo.

#8A919C · el mismo en oscuro

Hecho

Lo que ya quedó. El botón, arriba.

Tinta #1D1D1F · en oscuro, Papel

Ahora

Lo que miras hoy. Uno por pieza.

#007AFF · en oscuro, #0A84FF

Ver los valores de cada color y los roles del claro y el oscuro
ColorHEXRGBVariable
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.

Las piezas usan roles, no colores sueltos

Un rol cambia de valor entre el claro y el oscuro. Así una pieza se ve bien en los dos sin rehacerla.

RolPara quéClaroOscuroVariable
FondoLa página o la pieza.
SuperficieTarjetas, bandas y la pantalla del teléfono.
ElevadoBurbujas, chips y campos dentro de una tarjeta.
TextoTitulares y cuerpo.AaAa
Texto 2Eyebrows, pies y bajadas.AaAa
Texto 3Solo desde 24 px (o 19 px Bold) y sobre blanco.AaAa
BordeLa línea fina de 1 px, el único separador.
AcentoRelleno: el botón, el punto, la barra.
Acento en textoTitulares desde 24 px o 19 px Bold.AaAa
Acento suaveFondo del único elemento encendido.

La lista completa está en Sistema · colores y tokens.

Ver el contraste medido

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.

TextoSobre BlancoSobre PapelSobre Encendido suave
TintaAa16,83Todo tamañoAa15,69Todo tamañoAa15,75Todo tamaño
PizarraAa5,78Todo tamañoAa5,39Todo tamañoAa5,41Todo tamaño
ApagadoAa3,18Solo desde 24 pxAa2,96No es textoAa2,97No es texto
EncendidoAa4,02Solo desde 24 pxAa3,75Solo desde 24 pxAa3,76Solo desde 24 px
ErrorAa5,38Todo tamañoAa5,02Todo tamañoAa5,04Todo tamaño
LíneaAa1,24No es textoAa1,15No es textoAa1,16No es texto
Pedir piloto gratis
4,02 a 1

Blanco sobre azul: el texto del botón va en Bold y desde 19 px.

Seguimiento automático
15,75 a 1

Tinta sobre el azul suave: la burbuja encendida se lee a cualquier tamaño.

3,76 a 1

Borde azul sobre el azul suave: pasa el 3 a 1 que piden los elementos gráficos.

1,26 a 1

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

Dos pesos y ninguno en medio.

Aa

Bold 700 · quién y cuánto: titulares, cifras, eyebrows y botones.

Aa

Regular 400 · la conversación: cuerpo, bajadas, pies y burbujas.

Pruébala: escribe tu texto y míralo en cada tamaño

Peso
Tamaño (px)

Tus ventas, a la vista.

Tamaño
58 px
Espaciado entre letras
−0,035 em
Interlineado
1,03
Lo usa
Título y cifra de la web
Ver cómo se compone un titular: eyebrow, dos tiempos y cuerpo
1

Tu piloto · Día 9

2

Vas en el día 9.
Quedan 5.

3

Esta semana salieron 25 seguimientos, todos aprobados por ti.

  1. El eyebrow dice qué es y cuándo. En mayúsculas, Bold y en Pizarra: hasta cuatro palabras y un número o una hora. Nunca azul ni con emoji: el azul es de lo que se enciende.
  2. El titular va en dos tiempos. Primero lo que el dueño ya sabe, en tinta; después lo que ahora ve, en azul (o en Apagado si el azul ya está en otro elemento). Seis palabras como máximo cada uno, con su punto.
  3. El cuerpo va en Regular. Unas 70 letras por línea, con mayúscula solo al inicio.
Ver los tamaños, las cifras y los caracteres

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.

  1. 12Tus ventas, a la vista.0Pies, fuentes y eyebrows de la web
  2. 15Tus ventas, a la vista.0Texto chico y eyebrow de lámina
  3. 17Tus ventas, a la vista.0Cuerpo de la web
  4. 19Tus ventas, a la vista.−0,01 emBotón y bajada de lámina
  5. 24Tus ventas, a la vista.−0,015 emBajada de la web y título de tarjeta
  6. 30Tus ventas, a la vista.−0,02 emTítulo en el celular
  7. 42Tus ventas, a la vista.−0,028 emTítulo de lámina y portada en el celular
  8. 58Tus ventas−0,035 emTítulo y cifra de la web
  9. 80Tus ventas−0,04 emTitular de portada en la web
  10. 112Tus−0,045 emPortada de un post
  11. 160Aa−0,05 emCifra protagonista en redes

Escala por formato

PapelWeb escritorioLámina 1280 × 720Post 1080 × 1350A4 (pt)
Pie, fuente12 R12 R30 R7 R
Eyebrow12 B15 B30 B7 B
Texto chico15 R12 R30 R9 R
Cuerpo17 R15 R42 R10 R
Bajada24 R19 R58 R12 R
Título de tarjeta24 B19 B42 B12 B
Título58 B42 B80 B20 B
Portada80 B58 B112 B36 B
Cifra protagonista58 B112 B160 B48 B
Botón19 B · alto 5219 B · alto 4842 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.

Cifras y caracteres

10 %

Espacio duro entre la cifra y su unidad: «10 %», «US$ 45», «S/ 120», «9:00 a. m.».

12 500

Miles con espacio desde cinco cifras; con cuatro, junto («1500»). Nunca «12,500».

7:05

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

Tres formas y una receta.

Pedir piloto gratisDía 9
Cápsula: lo que se toca o se rotula. Botones, chips y el propio interruptor.
Conectamos tus canales.WhatsApp, Instagram y Facebook, en Kommo.
Rectángulo: lo que contiene. Tarjetas y paneles con radio 16 y sin sombra.
Hoy, día 9
Círculo: lo que marca un estado. El punto azul y el check.

El interruptor tiene tres configuraciones y ninguna más Toca «Repetir»: el botón llega primero y el color después.

  • Todos tus chats, en un lugar
  • Cada chat con su vendedor
  • Seguimiento automático
Suelto dice un estado, siempre con su rótulo: el color nunca es la única señal. Nunca califica a una persona.

Día 9 de 14. Ejemplo

Hilera dice un avance: lo hecho en tinta, hoy en azul y lo que falta en Apagado.
Par es la marca: solo como logo. El botón sube; el logo no cambia de color.

Cuatro esquinas y una línea, siempre en el mismo lugar

El esquema · seis preguntas
Post de producto · Ejemplo
Post de cifra · Ejemplo
Historia · Ejemplo
Ver los tamaños del interruptor y qué va en cada esquina

Tamaños del interruptor

56 Post e historia
40 Charla
24 Lámina y web
16 Hilera en la web
12 El mínimo
Menos Va el punto azul

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.

Qué va en cada esquina

  1. Arriba a la izquierda: el eyebrow. Dice qué es la pieza.
  2. Arriba a la derecha: el anfitrión. Su logo, el del cliente o «Ejemplo». Nunca nuestro logo.
  3. En la línea del 30 %: el titular. Toda pieza que abre algo cuelga su título de esa línea, con la bajada debajo. La web no la usa.
  4. Un tercio o la mitad: una sola imagen. Foto en blanco y negro, teléfono, cifra o personaje.
  5. Abajo a la izquierda: nuestro logo, una sola vez. Dos marcas propias en la misma pieza compiten entre sí.
  6. Abajo a la derecha: cuándo o dónde. Mes y año en portadas, «03 / 14» en láminas, la hilera de páginas en carruseles.

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.

Ver las cuatro tarjetas y el teléfono

Cuatro tarjetas, cada una con su trabajo

Sin sombra y sin ícono grande arriba. Lo encendido se hace siempre igual: fondo azul suave, borde azul y texto en tinta.

Día 1Conectamos tus canales.

WhatsApp, Instagram y Facebook, en Kommo.

Papel · sin borde. La tarjeta de siempre.
Día 2Cada chat queda con su vendedor.

Con su nombre a la vista.

Blanca · con borde de 1 px. Sobre Papel o sobre una foto.
Días 3 a 7Seguimiento automático.

Sale solo, en tu horario de atención.

Encendida · la receta. Una por pieza.
Día 14Tú decides si sigue.

Revisamos juntos lo que viste en 2 semanas.

Tinta · solo la persona que aprueba.

El teléfono va recto, genérico y con la hora de la escena

Barra de estado
La hora de la escena. Si no tiene, 7:05 p. m.: la hora del reporte, como las 9:41 de Apple.
Burbujas
Todas blancas. Solo el seguimiento va encendido, porque es lo único que agrega el sistema.
Pantalla
Papel, siempre, también en la pieza oscura: ahí se mira.
Genérico
Sin isla, muesca ni botones. Apple prohíbe copiar sus detalles.
Cabecera
El nombre del cliente y «Ejemplo» durante toda la escena. Todo chat lleva nombre.
Nunca
Inclinado, con sombra o con el verde de WhatsApp. Tampoco en precios ni propuestas.

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

Blanco y negro, sin filtro.

«Pequeños oficios»: quien vende y su herramienta, el celular. Como Irving Penn en Small Trades y Martín Chambi.

Manos con un celular sobre el mostrador de una tienda de ropa, con la receta de la marca La misma foto, sin receta Sin recetaCon la receta

Seis reglas, cada una con su motivo

  1. Nadie mira a cámara, salvo un retrato o quien da un testimonio. Son personas que trabajan, no modelos.
  2. El chip dice nombre y rol, nunca cifras: «Lucía · asesora de ventas». Las cifras de una persona real no se publican.
  3. Una imagen por pieza, en un tercio o la mitad del lienzo. El texto va en la otra parte, nunca sobre caras ni pantallas.
  4. La interfaz va en una tarjeta plana, con borde fino y sin sombra, sobre la zona limpia. El azul va en la tarjeta, nunca en la foto.
  5. La IA solo hace lugares y manos, nunca personas. Una cara inventada no es una persona que vende.
  6. Autorización escrita siempre. Las pantallas de Kommo se muestran con la cuenta de demostración y datos inventados.

Así se ve en una pieza

Ejemplo

Clínica Dental Norte

Tu recepción recibe chats todo el día.

Manos con un celular sobre el mostrador de una recepciónLucía · asesora de ventas
Foto a la mitad. Texto arriba, foto y chip abajo.
Ejemplo

Clínica Dental Norte · 10:47 p. m.

Cada chat entra con un nombre.

Recepción vacía de una clínica, con la pared lisa
RosaHola, ¿hay cita mañana?Asignado a Lucía
Interfaz sobre lo limpio. El azul queda en la tarjeta.
Ejemplo

Charla · Lima

Atender es la mitad del trabajo.

Auditorio de una charla, visto desde el fondo de la sala
La sala. Nadie mira a cámara; el título va fuera.
Ver los ambientes sin personas y el archivo de charlas

Ambientes sin personas

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

Manos con un celular en una tienda de ropa
Tienda de ropa
Manos con un celular en una recepción
Recepción, con el celular
Caseta de venta inmobiliaria con una maqueta
Caseta de venta
Recepción de una clínica
Recepción, con la pared lisa

Archivo de charlas

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.

Auditorio lleno visto desde el fondo
Auditorio lleno
Ponente con un micrófono frente a una pantalla, recortado para dejar fuera la diapositiva
El ponente, sin la pantalla
Ponente en el atril, con el escenario a media luz
El atril, a media luz
Público sentado en el auditorio
El público
Ver la receta de edición y el ajuste en Lightroom

Una sola receta para todas las fotos.

  • 29el negro es la tinta, no el negro puro (0)
  • 246el blanco es el Papel, no el blanco puro (255)
  • Scurva suave de 20, sin forzar el contraste
  • 0grano: al recomprimir se vuelve ruido

Nunca queda más oscura que el texto. La foto deja el color para lo que se enciende: la interfaz.

Perfil
Adobe Monochrome, sin grano ni viñeta
Mezcla B/N
Rojo +10, naranja +15, amarillo +5, azul −10. La piel sale más clara; los jeans y los cielos, más oscuros.
Negro y blanco
Salida de negros al 11 % y de blancos al 96 %: quedan en 29 y 246
Curva
En S, con puntos 25 → 30 % y 75 → 78 %
Retoque
Quitar cables y logos ajenos. No alisar la piel.
Exportar
Web a 2400 px · redes a 1080 o 1440 px

Gráficos

El título dice la conclusión.

Solo los tres estados del interruptor: Apagado para el contexto, tinta para lo hecho y azul para lo que dice el título.

1

Reporte de hoy · miércoles 14 de octubre

2

7 chats quedaron sin responder al cierre.

3

Chats de Clínica Dental Norte, contados al cierre (7:00 p. m.).

4
Nuevos64
Respondidos57
Sin responder7
5

Ejemplo · Kommo, chats sin responder.

6

Son los primeros que tu equipo atiende mañana a las 9:00 a. m.

  1. Eyebrow. Qué es y de cuándo, en mayúsculas y en Pizarra.
  2. Título-conclusión. Con verbo, número y punto: «Ana atendió 26 de 64 chats.»
  3. Bajada. Dice qué, de quién, cuándo y en qué unidad.
  4. Datos. Etiqueta pegada a cada barra, que parte de cero. Solo una va en azul: la que nombra el título.
  5. Fuente. Con su fecha, o «Ejemplo ·», abajo a la izquierda.
  6. Lectura. Opcional: un filete en tinta y una frase de qué hacer.

Cuatro preguntas, cuatro formas Primero la pregunta del dueño, después la forma. Siempre sobre un panel blanco. Desliza para ver las cuatro.

Ver cómo se dibuja un proceso: tres formas y un cable
  • Nodo: rectángulo blanco con borde de 1 px y radio 16.
  • Quien aprueba: relleno tinta.
  • Lo que explica la pieza: la receta encendida, uno por diagrama.
  • Lo opcional: borde punteado. La línea punteada significa «todavía no pasó», nunca un dato real.
  • Cable: gris, de 1,5 px, que nace en un círculo hueco y termina en una punta abierta.
Ver las medidas de barras, líneas y puntos por formato
MedidaLáminaPost e historiaA4Web
Barra: grosor / aire24 / 1656 / 323,5 / 1,5 mm20 / 12
Línea de datos · punto2 px · Ø 124 px · Ø 241,25 pt · Ø 2,5 mm2 px · Ø 10
Línea base (el cero)1 px tinta2 px tinta0,5 pt1 px
Retícula, solo si no hay valores1 px Línea, hasta 42 px Línea, hasta 40,25 pt1 px
Máximo8 barras, 3 series6 barras (5 en historia), 2 series10 filas6 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

El oscuro es una hora.

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.

  • Fondo. De noche, la tinta es el papel: el blanco se invierte.
  • Texto. Papel sobre la tinta, con un poco más de espacio entre letras: la letra clara sobre oscuro engorda.
  • El azul se aclara. de relleno y en texto, porque el azul de día no rinde sobre la tinta.
  • Logo en Papel, y en el pie, Apagado: el mismo gris en los dos temas.
  • La pantalla del teléfono sigue clara. El local cerró; el cliente, no. Es lo más luminoso de la pieza y ahí se mira.
  • Sin personaje. Sobre la tinta, su saco azul marino y su pelo se funden con el fondo.
Ver cuánto oscuro se usa y un deck claro y uno oscuro

Uno de cada cinco, y nunca dos en una fila

MedioOscuro solo cuandoTope
Feed de InstagramPieza «fuera de horario» o charla1 de cada 5; nunca dos en una fila
HistoriasCuenta regresiva o charla en vivo1 de cada 3 en días de evento
Anuncios de MetaUna variante «fuera de horario»1 por prueba
CharlasPantalla LED o sala a media luzUn deck es claro u oscuro; no mezcla
VideoUn capítulo «de noche»2 cambios de tema por video
LandingUna banda «fuera de horario»1 banda por página
Precios, propuestas, informes, contratos, correos, impresosNunca0 %

Doce posts del perfil de ejemplo: dos oscuros, separados por cinco claros.

Un deck es claro u oscuro, y no mezcla

Claro, con proyector y sala iluminada.
Oscuro, solo con pantalla LED o sala a media luz.

En video, claro a oscuro se funde; oscuro a claro se corta

Martes · 7:00 p. m.

Cerraste a las 7.

Claro a oscuro: fundido lineal. El texto salta de tinta a Papel en el fotograma 6, a mitad del cambio, para que nunca haya gris sobre gris.

Miércoles · 9:00 a. m.

Tus clientes siguen escribiendo.Hoy abres con todo a la vista.

Oscuro a claro: corte seco, en un cambio de frase. Un fundido hacia el blanco se siente como un fogonazo en un teléfono de noche.

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

Lo que no se hace, a la vista.

Descargas

Todo para llevar.

Logo y símboloTinta, Papel, símbolo y óptico, en SVG y PNG

ZIP (222 KB)

ColoresCon sus roles, para claro y oscuro

CSSJSON

Letra de respaldoTeX Gyre Heros, Regular y Bold, con licencia

ZIP (125 KB)

InterruptoresApagado, hecho y ahora, y la hilera de 14 días

ZIP (3 KB)

FotosDiez fotos en blanco y negro

ZIP (1,4 MB)

Piezas de ejemploPost de producto, de cifra e historia

ZIP (258 KB)