Web
La web pide
una sola cosa.
Toda la página lleva a «Pedir piloto gratis». Recórrela y mira cómo se arma.
La idea
Cada sección, una duda del dueño.
Recórrela como la ve quien llega desde un anuncio. Toca una sección para ir a ella.
- La duda del dueño
- ¿Esto es para mí?
- Lo que se enciende, además del botón
- El segundo tiempo del titular.
Los datos de la clínica son Ejemplo
El inicio
El inicio dice el problema.
Titular, bajada, un botón, plazos exactos y una sola imagen. Pasa el cursor por una regla.
- 1El titular va en dos tiempos. Lo que ya pasa y dónde se pierde, en 9 palabras. Solo el segundo tiempo va en azul.
- 2La bajada ocupa dos líneas. Dice qué hacemos sin prometer de más.
- 3Un solo botón: «Pedir piloto gratis». No cambia de texto ni se repite en el menú: el pedido es uno.
- 4Los plazos van exactos, debajo del botón. «En menos de 1 hora», nunca «a la brevedad».
- 5Una sola imagen: el chat de Rosa y Ana. Manda el producto, por eso no sale el personaje. Ejemplo
Retícula y espacio
Doce columnas y una escala de 8.
El contenido mide 1200 px. Enciende la retícula y mira cómo caen el titular y el teléfono.
Ver los márgenes por ancho y las medidas de espacio
- Escritorio, desde 1024 px. Contenedor de 1200 centrado, 12 columnas de 78 px con 24 de medianil. A 1296 de ancho el margen es de 48; más ancho, sobra aire.
- Tableta, de 768 a 1023 px. Margen de 40 y 8 columnas.
- Celular, hasta 767 px. Margen de 24 y 4 columnas con 16 de medianil.
Todo el espacio sale de una escala de 8
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 80 · 96 · 128 · 160. Así nadie mide un margen a mano y todas las páginas respiran igual.
Valores en píxeles. Cada uno vive en , , y , y el celular los cambia solo.
Letra
Cada lugar, su papel de letra.
Dos pesos y una escala. Cambia a celular y mira cómo baja cada papel.
Ya te escriben.
Precio claro.
Juntamos los chats de tu equipo en Kommo, cada uno con su vendedor, y activamos un seguimiento que tú apruebas.
Cuenta como usuario cada persona que entra, tú también.
Ver los otros cinco papeles y las reglas de la letra
Todos tus chats, en un lugar.
Sin tarjeta · Tu equipo sigue con su número · Si no sigues, no pagas nada
Piloto gratis de 2 semanas
US$ 150
Ejemplo · Clínica Dental Norte
- 3Cada papel tiene su nombre en el código: , … A 767 px o menos el celular los cambia solo, y ninguna página escribe un tamaño a mano.
- 4En el inicio del celular la bajada pasa a cuerpo (17). Con 19 ocuparía cuatro líneas y empujaría el botón fuera de la primera pantalla.
- 1Solo dos pesos, 400 y 700: Bold dice quién y cuánto; Regular, la conversación. El logo ya estaba hecho así, «Creators» en Bold y «Latam» en Regular.
- 2La letra es «CL Sans»: Helvetica Neue en Mac e iPhone y, si no está, TeX Gyre Heros. Android no trae Helvetica y es la mayoría de los celulares del Perú; la de respaldo mide casi igual (de −1,2 % a +0,1 %) y corta las líneas en las mismas palabras.
Botones y campos
Un botón azul por pantalla.
El azul es lo encendido: por eso hay uno solo. Pasa el cursor y presiona Tab.
Píldora azul, texto blanco en Bold de 19, alto de 52. Uno por pantalla.
El azul baja al 92 % de brillo en 150 ms.
Anillo azul de 2 px, a 2 px del botón. Se ve con el teclado.
Texto Bold y una flecha, sin caja: no compite con el principal.
Píldora blanca con borde de 1 px en Apagado. Solo en formularios.
Fondo Línea y texto Apagado: se ve que no responde.
Ver los campos del formulario y el avance
Etiqueta arriba, borde de 1 px en Apagado, radio 8, alto 52. Este es de verdad: escribe.
Borde azul de 2 px, sin sombra.
El único rojo de la marca, solo en formularios, con una frase que dice qué corregir.
Fondo suave y borde azul de 1,5 px, como todo lo encendido. Alto de 44: lo mínimo para el dedo.
Paso 1 de 2. Los dos interruptores del logo marcan el avance: tinta hasta el paso de ahora y gris lo que falta. Sin azul, porque es navegación.
La casilla de los términos empieza vacía. Marcada de antemano no vale como consentimiento (Ley 29733).
Movimiento
Todo entra en 300 ms y no rebota.
Primero lo quieto, luego el contenido y al final lo encendido: el azul llega último.
Piloto gratis de 2 semanas
Ya te escriben clientes.
Las ventas se pierden después.
Apagado, y luego encendidoLa perilla sube y el relleno cambia a la vez.
El cursor llega, el azul baja a 92 % de brillo y vuelve.
3 × US$ 45 + US$ 150 = US$ 285 al mes + IGV Ejemplo
Licencia de Kommo · US$ 135Nuestro servicio · US$ 150
Ver las curvas y las cuatro reglas del movimiento
| Cuándo | Duración | Curva | Para qué |
|---|---|---|---|
| Entrada | 300 ms | (0,05 · 0,7 · 0,1 · 1) | Todo lo que entra: llega rápido y se asienta despacio. |
| Estado | 300 ms | (0,4 · 0 · 0 · 1) | Algo que ya está cambia: la perilla, una barra. |
| Micro | 150 ms | (0,2 · 0 · 0 · 1) | Color, clic, foco, un botón al pasar el cursor. |
| Salida | 150 ms | (0,3 · 0 · 0,8 · 0,15) | Todo lo que sale: arranca despacio y se va. |
| Dato | 800 ms | Barras y cifras: una vez, nunca más de 1 s. |
- 1Las entradas son un fundido y 8 px hacia arriba. El ojo sigue el movimiento sin esperar: a 400 ms ya se siente lento.
- 2Se mueve una vez y queda quieto. Sin loops, pulsos ni contadores que suben solos: el dueño vive entre notificaciones que parpadean y esta página no suma una.
- 3Sin rebote, nunca. Un rebote es de juguete; aquí se muestra lo que ya estaba.
- 4Con «reducir movimiento» todo pasa a fundidos de 150 a 200 ms, sin desplazamiento. El parallax y los zooms son lo que más molesta a quien se marea con el movimiento.
Celular
En celular, el logo y un solo botón.
Desliza la página dentro del teléfono o ábrela a pantalla completa.
- 1Sin menú: arriba, el logo y un solo botón. El pedido queda a mano en cualquier sección y nunca hay dos botones.
- 2Una columna de 390, márgenes de 24 y 80 entre secciones. Igual que en escritorio y en el mismo orden: el dueño lo revisa todo en el celular.
- 3El primer paso del formulario no pide teclado. Dos toques bastan para empezar; después, nombre y WhatsApp.
- 4Al enviar, la página dice cuándo te escribimos. «En menos de 1 hora, en horario de oficina»: nadie espera sin saber hasta cuándo.
- 5El teléfono del producto va sin marco. En el celular, el chat de Rosa y Ana ya está dentro de un teléfono: el tuyo.
Ver el formulario y los errores, pantalla por pantalla
Compartir
Al compartir, ya se ve la marca.
La vista previa, el favicon y el avatar son la web fuera de la web: chats, pestañas y perfiles.
La imagen que acompaña al enlace: 1200 × 630.
Así llega en un chat. Ejemplo
Ya te escriben clientes · Piloto gratis de 2 semanasEn la pestaña, a 16 px.
Ver las reglas de la imagen y del símbolo
- 1Una imagen por dominio: 1200 × 630 con 80 px de margen. Título en 80 B (58 si no entra), logo de 32 px abajo a la izquierda y el dominio abajo a la derecha.
- 2Sin botón dibujado. Es una imagen, no una pantalla: un botón falso se toca y no responde.
- 3Siempre en claro. Un precio, una propuesta o una vista previa se leen mejor sobre blanco, aunque el chat esté en modo oscuro.
Favicon y avatar son el símbolo de los dos interruptores en tinta sobre Papel: el nombre ya está al lado, así que el símbolo solo basta. Se recortan en círculo en los perfiles.
De dónde sale
Seis webs que ya funcionan.
Miradas en septiembre de 2026. Tomamos su calma y su claridad, no su identidad.
Qué tomamos: un titular, una bajada, dos botones y la interfaz real.
Qué tomamos: tarjetas grises sin sombra sobre página blanca y un botón secundario suave.
Qué tomamos: el párrafo en dos tonos, que es nuestro titular en dos tiempos.
Qué tomamos: los logos en celdas con línea fina, que ordenan marcas de tamaños distintos.
Qué tomamos: la frase de garantía pegada al botón y los pasos numerados.
Qué tomamos: el precio como fórmula en una línea.
Lo que no se hace
Ocho cosas que la web no hace.
Cada «no» se ve con el mismo rigor que el «sí» y lleva su motivo.
El titular
Ya te escriben clientes.
Las ventas se pierden después.
Solo el titular, en dos tiempos.
Ya te escriben
clientes.
Una pastilla sobre el titular: la usa cualquier web de software.
La imagen del inicio
El chat de Rosa y Ana: manda el producto.
Ya te escriben clientes.
El personaje en el inicio: ahí no se explica nada con él.
El pedido
Un botón y un solo texto en toda la página.
Dos botones con dos textos: el pedido es uno.
La cabecera del celular
Logo y un botón, a la vista.
Menú hamburguesa: esconde el botón detrás de un toque.
Ver cuatro «no» más: títulos, modo oscuro, urgencia y precio
Los títulos de sección
Qué encendemos en tus chats
Un título que contesta una duda.
Nuestras soluciones
Un título que no dice nada: nadie pregunta por «soluciones».
El modo oscuro
Ya te escriben clientes.
Siempre claraLa landing es clara aunque el teléfono sea oscuro.
Ya te escriben clientes.
Sigue el modo oscuro del teléfonoOscuro automático: donde el dueño decide, todo va en claro.
La urgencia
Las 2 primeras semanas no pagas nada.
La oferta dice cuál es su salida.
Urgencia inventada: un reloj que nadie ha verificado. Ejemplo
El precio
US$ 150 al mes + IGV
El precio verdadero, sin adornos y con su IGV.
US$ 300 US$ 0
Precio tachado: es el código del descuento falso. Ejemplo
Descargar
Todo el kit en un solo archivo.
Las dos landings, la vista previa, favicon, avatar, valores de marca y la letra.
Ver el kit archivo por archivo
Los valores de marca (tokens) son los colores, la letra, los espacios y el movimiento con nombre. El kit trae también la letra de respaldo con su licencia.
| Archivo | Qué es | |
|---|---|---|
| landing-escritorio-1440.html | La landing entera a 1440, navegable. 478 KB | HTML |
| landing-celular-390.html | La landing en una columna de 390, con el botón que sube. 189 KB | HTML |
| vista-previa-og-1200x630 | La imagen para compartir, en PNG y en HTML editable. | PNG HTML |
| favicon | El símbolo para la pestaña: SVG y PNG de 16, 32, 180 y 512. | SVG PNG 32 |
| avatar | El símbolo para perfiles: SVG y PNG de 400. | SVG PNG |
| tokens | Los valores de la marca con nombre (colores, letra, espacios, movimiento) en un solo archivo. | CSS JSON |
