Saltar al contingut principal

Per què la nostra paleta és blau vibrant (i no vermell terracota)

Producte i plataforma

Arribat l'agost tocava deixar de teoritzar i començar a posar colors. El sistema de disseny és d'aquelles coses que semblen menors fins que les toques: si t'equivoques, l'arrossegues durant anys. Per això ens vam asseure amb un parell de dissenyadors i hi vam dedicar gairebé tres setmanes a una cosa que al pla original era "una tarda".

La pregunta que més ens van fer els amics del sector va ser: per què un blau vibrant en lloc del vermell terracota o el verd oliva que es veu sempre a hostaleria? Anem a pams.

El clixé cromàtic de l'hostaleria

Si mires eines per a restaurants, fotografies de cartes de bodegó, plantilles de menús de bodes... predominen els mateixos quatre colors: vermell terracota, marró xocolata, verd oliva i crema. Són colors que evoquen menjar, taverna, calidesa. D'acord.

El problema és que som programari, no menjar. I els hostalers es passen vuit hores al dia davant de pantalles amb aquests tons càlids saturats. Resultat: cansament visual i la sensació que l'eina intenta dissimular que és una eina.

Volíem capgirar-ho: que la nostra interfície s'assembli més a una app de productivitat acurada que a un menú imprès.

La paleta

Decisions concretes que vam prendre:

  • Blau primari en oklch. Vibrant, amb bon contrast sobre blanc i sobre fons fosc. Treballem en l'espai de color oklch perquè permet canviar la lluminositat sense que el to "salti".
  • Neutres tirant a freds. Grisos lleugerament blavosos, no marrons. Dona sensació d'ordre.
  • Accents càlids només per a alertes. Taronja per a avisos, vermell per a errors, verd per a confirmacions. I prou. Si tot és important, no ho és res.

La tipografia

Vam triar Geist Variable. Tres motius:

  • És una variable font, així que pesa menys en producció que carregar quatre pesos solts.
  • Té un to geomètric modern sense caure en l'asèptic d'Helvetica o el "techy" d'Inter.
  • Els seus números tabulars fan que les taules de reserves i preus quedin alineades sense esforç.

Densitat i espais

Aquí vam discutir molt. La temptació, en una eina de gestió, és ficar molta informació per pantalla. La regla que vam acabar adoptant: val més dues pantalles clares que una atapeïda. Els components tenen un padding generós per defecte, i només es compacten en vistes de servei en directe, on sí que cal veure moltes reserves alhora.

El que vam deixar per a més tard

El mode fosc va entrar a la llista de "encara no", tot i que sabíem que el voldríem. Es va quedar com una capa de variables CSS preparada per activar-se quan tinguéssim la resta del producte estable. Spoiler: va acabar sortint, però no sense rascar-nos un parell de bugs lletjos.

ESENCA