Cada decisión de la marca sale de algo que ya vimos funcionar.

Qué tomamos Empieza con cuatro preguntas antes de diseñar y separa fundamentos, elementos gráficos y «marca en acción»: es el orden de nuestras páginas.

Qué tomamos La idea y los pilares van antes de cualquier logo o color; por eso abrimos con «apagado → encendido».

Qué tomamos Un portal que separa sistema, recursos para descargar y co-marca, con un azul reservado a un solo significado.

Qué tomamos Filosofía primero («Build Bonds») y capítulos propios para datos e infografías, no un anexo.

Qué tomamos Cada fundamento (tokens, color, espaciado, movimiento) en su propia tarjeta, y un tono que cambia según cómo se siente la persona.

Qué tomamos Tres principios de escritura y una tabla de cuánta calidez y humor lleva cada canal: la base de nuestra voz por canal.

Qué tomamos El manual se recorre en dos pestañas, «Inspiration» y «Direction»: primero se ve la idea y después las reglas.

Qué tomamos Un manual en una sola página, con nombre, uso y logo en pocas palabras: lo breve también transmite criterio.

Qué tomamos Un párrafo corto de lo permitido, un enlace a «Usage and misuse» y un botón para descargar el logo: cada bloque lleva su descarga.

Qué tomamos El área de respeto se mide con el propio símbolo y se dibuja con líneas punteadas: nuestro logo se mide en módulos del símbolo.

Qué tomamos Cómo mostrar una evolución: dos paneles iguales con las etiquetas «Antes» y «Ahora»; el color de siempre no se toca.

Qué tomamos No se cambian los colores del logo ni se usa «WhatsApp» como verbo: por eso su verde solo aparece dentro del teléfono.

Qué tomamos Un titular, una bajada, dos botones y la interfaz real, con mucho blanco arriba. Nuestros botones son más grandes: 52 px en celular.

Qué tomamos Precio enorme con la unidad chica y gris debajo; la tarjeta destacada se marca con un borde, no con sombra.

Qué tomamos Pasos numerados en tarjetas iguales y la frase de garantía pegada al botón: «No se requiere tarjeta de crédito».

Qué tomamos Checks en tinta, no en verde, y la aclaración de la prueba gratis justo debajo del botón.

Qué tomamos Párrafo en dos tonos: la primera frase en blanco y el resto en gris. Es nuestro titular en dos tiempos.

Qué tomamos Logos en celdas con línea fina, cada uno centrado: ordena logos de tamaños distintos sin una sombra.

Qué tomamos Titular en tres tonos y una grilla de 6 × 4 logos en gris bajo «confían en nosotros»; el precio, en una sola línea.

Qué tomamos Botón relleno y botón secundario con tinte azul; tarjetas grises sin sombra sobre página blanca.

Qué tomamos Lo oscuro como franja y no como tema, y cada cifra con su nota al pie numerada.

Qué tomamos El encabezado de sección a la izquierda y la acción en la misma línea, a la derecha.

Qué tomamos Cómo funciona en cuatro pasos: número en círculo, una línea corta de acento y dos líneas de texto.

Qué tomamos Un B2B latinoamericano con un solo azul en el botón y logos en celdas: se ve serio sin colores de más.

Qué tomamos El símbolo de la marca usado en grande como imagen central, y frases en dos tonos.

Qué tomamos Tarjetas blancas sobre gris muy claro: la imagen arriba, de borde a borde, y el texto debajo sobre blanco.

Qué tomamos El muro de logos en tarjetas blancas del mismo alto sobre gris claro, sí; el fondo espacial, no.

Qué tomamos Un SaaS peruano que ya usa blanco, un color y el producto real: nos diferencia no usar cursiva ni más de un color.

Qué tomamos Una columna de texto de unos 640 px, una cifra en negrita dentro de la frase y la captura en un marco de borde fino: texto primero, producto después.

Qué tomamos El CRM real por etapas, con tarjetas de borde fino y montos: así debe verse nuestra pantalla de Kommo, plana y con soles.

Qué tomamos Pestañas «Mine / Unassigned / All» y un responsable por chat: es «todos los chats en un lugar, cada uno con su vendedor».

Qué tomamos Una conversación real dentro del teléfono, con las burbujas azules como único color fuerte.

Qué tomamos Dispositivos con interfaz real, en su tamaño relativo, y un titular de dos líneas cortas encima.

Qué tomamos El perfil de empresa tal como lo ve el cliente: foto en círculo, categoría, horario y cuatro acciones.

Qué tomamos Cada métrica con su definición y un aviso de qué cuenta y qué no: así rotulamos cada cifra del reporte.

Qué tomamos Cómo se escribe cursiva, negrita y listas dentro de WhatsApp: lo que podemos usar en los mensajes que aprueba el dueño.

Qué tomamos Tres párrafos, un retrato en blanco y negro y un enlace a la empresa: el molde de la página de Martín.

Qué tomamos Una lista con el año a la izquierda, el título y la cifra: así va la lista de charlas, año · lugar · tema.

Qué tomamos Presenta todos sus proyectos en una sola frase: así se presentan las empresas de Martín, sin logos que compitan.

Qué tomamos Titular de dos líneas con una palabra en color, biografía en tercera persona y dos botones: un fundador con varias empresas.

Qué tomamos Una sola familia tipográfica, su foto real en un círculo, un botón y ediciones numeradas: numerar las piezas de autor.

Qué tomamos Una página de charlas con bio corta, fotos en escenario y un solo botón; el filtro azul sobre el video, no.

Qué tomamos Retratos frontales con el mismo encuadre en blanco y negro: los organizadores los recortan en su propia grilla.

Qué tomamos Una foto en escenario con el público detrás como prueba de que habla en vivo; la ventana emergente que tapa el contenido, no.

Qué tomamos Grilla de expositores con el mismo recorte en blanco y negro, nombre en negrita y cargo en gris.

Qué tomamos Tres columnas (Building, Projects, Writing) con una línea por ítem: ordena los frentes de una persona.

Qué tomamos Cada mascota en varias vistas (frente, tres cuartos, perfil) sobre un panel gris: la hoja de modelo de nuestro personaje.

Qué tomamos Seis tarjetas de «sí» y «no», cada una con su imagen: nunca como logo, ni para vender, ni en temas serios. Así armamos cuándo sí y cuándo no.

Qué tomamos La proporción de color escrita: 80 % neutro, 5 % gris, 5 % verde y 10 % morado. El personaje ocupa una parte chica de la pieza.

Qué tomamos La construcción paso a paso desde formas básicas sobre cuadrícula: de ahí sale medir las proporciones del personaje.

Qué tomamos Un personaje 3D brillante convive con un sistema plano porque la paleta bajó de más de 100 colores a 15.

Qué tomamos Cada emoji existe en 3D, en color, plano y en alto contraste: una versión simplificada para tamaños chicos.

Qué tomamos El personaje como sistema de partes fijas y variables dentro de un círculo blanco: así se piden poses nuevas sin que cambie.

Qué tomamos Un personaje expresivo cabe en un sistema austero si todo lo demás obedece: blanco, tinta y un acento.

Qué tomamos Una sola palabra gigante con punto final sobre una retícula de líneas finas: portada de una palabra.

Qué tomamos Titulares en español, cortos y con punto («Conoce a la familia.»), tinta sobre blanco: el patrón funciona con tildes.

Qué tomamos Nombrar la versión exacta, Helvetica Neue, con sus tres pesos: Roman 400, Medium 500 y Bold 700.

Qué tomamos Letra neutra y un solo glifo distinto (la O como anillo): el mismo principio de nuestro wordmark con el símbolo.

Qué tomamos Grotesca negrita en minúsculas, datos chicos en columnas y filetes: composición para los afiches de charlas.

Qué tomamos Composición asimétrica, mucho blanco y un solo elemento fuerte pegado a un borde.

Qué tomamos Título pegado a un borde, fotos en blanco y negro y un solo acento: el esquema de portada para las charlas.

Qué tomamos El azul solo en el ícono y en la única acción: el azul va en lo que se toca.

Qué tomamos Subtítulo en dos tonos y un solo botón azul en píldora: una palabra del titular en color, nunca dos.

Qué tomamos Un solo azul alcanza para papel, web y teléfono, siempre sobre blanco o gris cálido.

Qué tomamos «Blue at the core»: se documenta el azul con su porqué, dónde va y su accesibilidad.

Qué tomamos El único azul de la pantalla es «+ New Record»: el azul marca la acción que importa.

Qué tomamos Todo lo interactivo es el mismo azul y el resto es gris: un azul coherente para los enlaces.

Qué tomamos El azul en el botón y en una tarjeta de interfaz, nada más: así se dosifica.

Qué tomamos Tintes del mismo azul solo para ilustración, nunca para texto, y formas que repiten el símbolo.

Qué tomamos Conserva el azul original y le da nombre propio a cada tono: nuestros colores también tienen nombre.

Qué tomamos El azul #007AFF sobre blanco da 4.01 a 1: sirve para botones y texto grande, no para texto chico.

Qué tomamos El oscuro como escenario: una sola cosa iluminada, el resto apagado, y un botón azul de texto blanco grande.

Qué tomamos Botón en píldora blanca sobre oscuro y un escalón de negro a gris oscuro para separar secciones sin líneas.

Qué tomamos El acento aparece solo en el logo, en una página casi sin color: nuestra regla del azul, llevada al oscuro.

Qué tomamos Escalas con roles fijos (fondo, borde, texto) y el logo según el fondo de destino, no según el tema del navegador.

Qué tomamos Su sitio comercial se queda claro aunque el visitante use modo oscuro: el oscuro no es lo normal, es una decisión.

Qué tomamos Un interruptor elige entre dos estados opuestos y no debe depender solo del color: el apagado y el encendido de nuestro símbolo.

Qué tomamos La cápsula y la burbuja salen del logo y se vuelven íconos y esquinas redondeadas: el logo presta su forma.

Qué tomamos La geometría del logo dibujada como gráfico, con nodos y líneas de construcción.

Qué tomamos Bloques de texto alineados a izquierda y derecha, como en un chat: portadas de carrusel y ganchos de anuncio.

Qué tomamos Una parte del logo se vuelve el centro y el texto se cuelga de ella en etiquetas chicas.

Qué tomamos Un interruptor «After» que compara versiones: nuestro «Antes · Con Creators» como control real.

Qué tomamos Documentación con barra lateral, filetes de 1 px y ejemplos en tarjetas planas con borde fino y sin sombra.

Qué tomamos La unidad mínima cambia según la distancia de lectura (8 px en web): escalar el símbolo por distancia.

Qué tomamos Un solo rasgo geométrico del logo (los ángulos del canguro) repetido en tipografía, uniforme y app.

Qué tomamos La retícula dibujada sobre una pieza real: la imagen ocupa 1/3, 1/2 o 2/3 y hay un solo filete de acento.

Qué tomamos Los íconos dentro de piezas reales (menú, botón, buscador), no sueltos en una grilla.

Qué tomamos Retícula de 32 px con relleno de 2 px y pares sí/no: una burbuja alineada al píxel contra otra borrosa.

Qué tomamos La familia de burbujas con modificador (check, respuesta, aviso) y un personalizador de trazo y tamaño.

Qué tomamos El trazo no se engruesa cuando el ícono crece, y los modificadores llevan aire alrededor.

Qué tomamos Íconos de línea negros sobre blanco con un punto azul de «nuevo»: un set sobrio se reconoce por su trazo parejo.

Qué evitamos Un set con personalidad propia (clips, sintetizador): se nota la mano de otra marca.

Qué tomamos Membrete con el logo arriba y todos los datos en cuatro columnitas al pie; las hojas siguientes llevan solo el logo.

Qué tomamos Se reconoce por la posición fija del logo, no por adornos: tarjetas de 85 × 55 mm y hojas A4.

Qué tomamos La tarjeta más cercana a la nuestra: bloques de texto en columnas, una sola tinta y cero decoración.

Qué tomamos Datos en las esquinas y mucho blanco al centro; el reverso en color a sangre no: con un solo azul sería gritar.

Qué tomamos En papelería lo sobrio se sostiene con retícula y tamaño chico, no con gráficos.

Qué tomamos Una plantilla por pieza, versión digital descargable y la regla «no se toca el diseño, solo el contenido».

Qué tomamos Un contrato en dos partes: una portada con los términos que cambian y condiciones generales fijas.

Qué tomamos Monto grande arriba, pares etiqueta/valor, filetes y total al pie: la plantilla de nuestras cotizaciones.

Qué tomamos Un documento largo bien resuelto: etiqueta en píldora con fecha, columna de unos 650 px y pie de foto chico.

Qué tomamos El manual como objeto: portada blanca con el logo en un solo color y el título chico arriba a la izquierda.

Qué tomamos La tarjeta blanca con el nombre arriba y los datos en tres columnas chicas abajo.

Qué tomamos Gente trabajando de verdad, con el equipo en la mano y luz disponible; el titular va debajo, en español.

Qué tomamos Una tienda de barrio vista desde adentro, con luz de día: el tono de nuestras pymes (bodega, clínica, ferretería).

Qué tomamos El producto en su contexto real, con luz de ventana y mucho aire: el teléfono con Kommo sobre el mostrador del cliente.

Qué tomamos Todos los retratos con el mismo encuadre, fondo y luz: lo que se ve de marca es la consistencia.

Qué tomamos Un principio en una frase, ejemplos y una lista de «no»: la estructura de una guía de imagen.

Qué tomamos Retratos cuadrados en blanco y negro, a la misma distancia y con luz lateral: una serie de personas serias.

Qué tomamos Retratos en su entorno, con luz de ventana: el dueño en su propio local.

Qué tomamos La persona con su herramienta de trabajo, sin escenografía: el concepto de los oficios.

Qué tomamos Una dueña frente a su laptop con luz de ventana: el primer plano de su propio local.

Qué tomamos El logo del cliente arriba a la izquierda de la tarjeta de caso; el tinte de color sobre la foto, no.

Qué tomamos Casos de clientes sin fotos: logos en gris y una captura del producto; cuando no hay una buena foto, va la interfaz.

Qué tomamos Una foto de fondo con burbujas de chat encima: la conversación sobre la escena real. Los destellos y las hojas, no.

Qué tomamos Las nueve partes de un gráfico con llamadas numeradas: la lámina de anatomía, en tinta.

Qué tomamos Pares «no ideal / mejor»: etiquetas pegadas a cada línea en lugar de una leyenda aparte.

Qué tomamos Un catálogo ordenado por pregunta de negocio: la pregunta decide la forma del gráfico.

Qué tomamos Un marco fijo para cada gráfico y un solo nodo destacado en el diagrama.

Qué tomamos Un solo color cuando alcanza, gris en lo menos importante y cinco colores como máximo.

Qué tomamos La voz es siempre la misma y el tono cambia según cómo se siente quien lee.

Qué tomamos La transparencia dicha como en la calle: «sin letra pequeña, costos ocultos, ni asteriscos».

Qué tomamos «Cuentas claras» y «sabes exactamente cuánto vas a pagar»: una promesa de precio concreta.

Qué tomamos Microcopy que dice el siguiente paso exacto, con número y tiempo: «3 preguntas», «ahora».

Qué tomamos Cifras que se pueden comprobar en lugar de adjetivos: «150 países y territorios. 40 divisas.»

Qué tomamos Un titular en frases cortas que describen el caos: «Customers ask on chat. Call for details. Can you keep up?»

Qué evitamos El degradado como protagonista: compite con el producto y con el mensaje.

Qué evitamos Degradados, destellos y un personaje dentro del titular: nuestra página tiene que verse distinta a la del proveedor.

Qué evitamos El fondo de color, la lista de checks verdes y los verbos inflados: «desbloquea», «impulsar».

Qué evitamos Tres colores compitiendo y la inteligencia artificial como adorno del titular.

Qué evitamos Los pop-ups, los degradados y dos colores de marca en la misma pieza.

Qué evitamos Apilar cuatro tarjetas de interfaz sobre una foto: una aclara, cuatro son ruido.

Qué evitamos Los dispositivos inclinados y dos colores fuertes en la misma página.

Qué evitamos Las mayúsculas sostenidas, los verbos genéricos («transforma») y las líneas decorativas sobre la foto.

Qué evitamos Los modelos posando con el producto y el voseo: escribimos en español de Perú.

Qué evitamos Los superlativos («número 1»), el resaltador verde y la jerga («crecimiento de conversación»).

Qué evitamos Apoyar la marca en una foto de paisaje: nosotros mostramos el producto.

Qué evitamos Las barras de seis colores y el ranking que muestra solo a los mejores: nuestro reporte usa un color y no acusa.

Qué evitamos Las cifras sin fuente en recuadros amarillos y el trato de usted; el rendimiento por vendedor aparece solo como «Próximamente».

Qué tomamos Cómo se ve un anuncio de búsqueda en Perú: logo en círculo, URL, título y dos líneas, con una imagen cuadrada de interfaz sobre color plano.

Qué tomamos Kommo dice primero qué es («CRM de chat con IA») y después qué promete: el titular nombra el producto.

Qué tomamos Superlativos como «CRM Más Barato N.º 1» y «IA de Pipedrive»: lo que no escribimos sin una fuente.

Qué tomamos La competencia que más se parece: «Centraliza tus conversaciones» con una captura del producto.

Qué tomamos Títulos que nombran la acción («Work in One Place») y una descripción de una línea.

Qué tomamos Personas trabajando en lugares reales, en blanco y negro: la foto cuenta el caso antes que el texto.

Qué tomamos Una tienda de barrio vista desde adentro, con luz de día: el tono de la pyme que queremos mostrar.

Qué tomamos Titular en dos tonos («Simplicity» en tinta y «at work.» en color): una frase con un solo toque de color.

Qué tomamos Se documenta en pares, curva más duración: 400 ms al entrar y 200 ms al salir. Nuestra entrada y salida son sus curvas.

Qué tomamos Dos registros, productivo y expresivo, y seis duraciones de 70 a 700 ms: nosotros separamos interfaz y video.

Qué tomamos Cada ejemplo con su leyenda «nombre, duración»: de ahí viene el hábito de poner siempre el tiempo.

Qué tomamos «Breve y preciso», y nunca como la única forma de comunicar algo.

Qué tomamos La curva dibujada sobre la retícula, con sus manijas y los cuatro números debajo: así mostramos cada curva.

Qué tomamos Texto corto (hasta 10 palabras) más expresivo, texto largo mínimo; variantes: crecer, deslizar, palabra por palabra.

Qué tomamos El cierre tiene sección propia (end cards): no es un detalle.

Qué evitamos Los brillos, los reflejos, las sombras y la cámara 3D: lo contrario de nuestro corte seco.

Qué tomamos La curva (0.05, 0.7, 0.1, 1): llega rápido y se asienta sin rebotar.

Qué tomamos Las filas «back», «elastic» y «bounce» son las que no usamos: cero rebote.

Qué tomamos Video en React: una composición parametrizada en la que cada video cambia solo los datos.

Qué tomamos Animaciones y video desde HTML con el mismo resultado en cada render; lee nuestros tokens directo.