Todo es hilo.
Cómo se ve, suena y se comporta SabineWeb. Una marca peruana que teje negocios en la web: hilos que sostienen, nudos que marcan lo importante.
El hilo y el nudo
Una web es un tejido: nada funciona suelto. Diseño, velocidad, texto y contacto se sostienen unos a otros. De ahí sale toda la marca.
Los antiguos peruanos guardaban información en cuerdas con nudos. Nosotros hacemos lo mismo con el negocio de nuestros clientes: lo ordenamos, lo anudamos y lo hacemos fácil de leer.
Regla de oro: el hilo es el camino, el nudo es el momento que importa (una función, un paso, un precio). Si algo no es importante, no lleva nudo.
Marca y nombre
El símbolo es una barra de la que cuelgan tres hilos con nudos de distinta altura. El nombre va en minúsculas, pegado, con web en verde: sabineweb.
Sí
Dejar un espacio libre igual a la altura de un nudo alrededor. Tamaño mínimo del símbolo: 24 px.
No
Girar, estirar, añadir sombras, cambiar los colores de los nudos o escribir el nombre con mayúsculas.
Paleta
La misma de siempre, con reglas claras de uso.
Fondos oscuros, titulares, el “hilo” de la marca.
Acciones, nudos y botones. Sobre claro, el texto verde usa Verde tinta.
El hilo destacado. Poco y con intención.
Texto verde sobre fondos claros (contraste AA).
Secciones claras de apoyo.
Fondo base de la web.
Texto sobre oscuro, botones secundarios.
Texto secundario, etiquetas, hilos inactivos.
Sí
Texto pizarra sobre lavanda, menta o blanco. Texto niebla clara sobre pizarra. Verde para botones con texto pizarra.
No
Texto verde (#22C55E) sobre fondo claro, blanco puro sobre verde, ni dos nudos ámbar en el mismo bloque.
Tres voces
Páginas rápidas, claras y hechas a mano para que te encuentren, confíen en ti y te escriban. Interlineado 1.6, líneas de 60 a 70 caracteres.
Títulos con interletrado cerrado (−0.025 em). Nunca más de tres tamaños distintos en una misma sección. La mono sirve para lo “técnico”: precios, fechas, categorías.
Cómo hablamos
Directos, cálidos y concretos. Hablamos de tú, en español peruano neutro. Prometemos plazos reales y nombramos los precios sin rodeos.
Evita las palabras vacías (innovador, disruptivo, sinergia) y los signos de exclamación en cadena. Un nudo por idea.
Reglas de diseño
Botones
Píldora completa. Verde con texto pizarra como acción principal; borde fino para secundarios. Cada uno lleva un nudo que se desliza al pasar el cursor.
Hilos y nudos
Las listas largas, procesos y pasos se organizan colgando de un hilo. Los hilos verticales y finos (3 px) nunca se mezclan con bordes gruesos.
Esquinas
Píldoras para acciones, 22 px para tarjetas, 8 px para campos. Los nudos son círculos perfectos.
Movimiento
Curva suave de salida (ease-out), 0.4–0.9 s. Los hilos se mecen y reaccionan al puntero. Se desactiva con “reducir movimiento”.
Densidad
Mucho espacio vertical entre secciones; el texto grande respira. Alternamos pizarra y claro para marcar el ritmo.
Evitar
Degradados morados, tarjetas idénticas en fila, iconos genéricos en círculos, sombras difusas y fotos de stock de gente sonriendo.