Saltar al contenido principal

Por qué nuestra paleta es azul vibrante (y no rojo terracota)

Producto y plataforma

Llegado agosto tocaba dejar de teorizar y empezar a poner colores. El sistema de diseño es de esas cosas que parecen menores hasta que las tocas: si te equivocas, lo arrastras durante años. Así que nos sentamos con un par de diseñadores y dedicamos casi tres semanas a algo que en el plan original era "una tarde".

La pregunta que más nos hicieron amigos del sector fue: ¿por qué un azul vibrante en lugar del rojo terracota o el verde oliva que se ve siempre en hostelería? Va por partes.

El cliché cromático de la hostelería

Si miras herramientas para restaurantes, fotografías de cartas de bodegón, plantillas de menús de bodas... predominan los mismos cuatro colores: rojo terracota, marrón chocolate, verde oliva y crema. Son colores que evocan comida, taberna, calidez. Bien.

El problema es que somos software, no comida. Y los hosteleros pasan ocho horas al día delante de pantallas con esos tonos cálidos saturados. Resultado: cansancio visual y la sensación de que la herramienta intenta disimular que es una herramienta.

Quisimos darle la vuelta: que nuestra interfaz se sienta más cercana a una app de productividad cuidada que a un menú impreso.

La paleta

Decisiones concretas que tomamos:

  • Azul primario en oklch. Vibrante, con buen contraste sobre blanco y sobre fondo oscuro. Trabajamos en el espacio de color oklch porque permite cambiar luminosidad sin que el tono "salte".
  • Neutros tirando a fríos. Grises ligeramente azulados, no marrones. Da sensación de orden.
  • Acentos cálidos solo para alertas. Naranja para avisos, rojo para errores, verde para confirmaciones. Y nada más. Si todo es importante, nada lo es.

La tipografía

Elegimos Geist Variable. Tres motivos:

  • Es una variable font, así que pesa menos en producción que cargar cuatro pesos sueltos.
  • Tiene un tono geométrico moderno sin caer en lo aséptico de Helvetica o lo "techy" de Inter.
  • Sus números tabulares hacen que las tablas de reservas y precios queden alineadas sin esfuerzo.

Densidad y espacios

Aquí discutimos mucho. La tentación, en una herramienta de gestión, es meter mucha información por pantalla. La regla que terminamos adoptando: mejor dos pantallas claras que una abarrotada. Los componentes tienen padding generoso por defecto, y solo se compactan en vistas de servicio en directo, donde sí hace falta ver muchas reservas a la vez.

Lo que dejamos para más tarde

El modo oscuro entró en la lista de "todavía no", aunque sabíamos que lo querríamos. Se quedó como una capa de variables CSS preparada para activarse cuando tuviéramos el resto del producto estable. Spoiler: terminó saliendo, pero no sin rascarnos un par de bugs feos.

ESENCA