# L'aspetto di Quanto Basta

Questo è il documento delle decisioni prese, non della strada per arrivarci.
La strada, coi confronti e le alternative scartate, sta in
`design/campionari/`.

Da dove è partito tutto, cioè la diagnosi, misurata sul codice e non a occhio:
nella riga del dosatore la quantità e il nome dell'ingrediente avevano **lo
stesso corpo, 17 contro 17**. In una riga che è il motivo per cui l'app esiste,
niente pesava più di niente. La scala in `tema.ts` dichiarava quattro misure e a
schermo era quasi tutto 17.

## La regola che tiene insieme tutto

**I contrasti si calcolano, non si guardano.** Ogni colore che finisce sopra un
altro passa dalla formula WCAG 2.1 prima di entrare nel codice, e per le tinte
delle categorie il calcolo lo rifà un test ad ogni esecuzione. È la regola che
ha fatto scartare una terracotta che piaceva (3,8:1) e che ha stabilito, con un
numero invece che con un'opinione, quanto deve essere scuro il velo sotto il
titolo di una fotografia.

## I colori

Fondo crema `#FDF8F3`, superficie bianca, terracotta `#AE4F2C` come accento.
Nel buio: `#1C1917` di fondo, terracotta schiarita. Sta in `src/ui/tema.ts`,
con i contrasti annotati riga per riga.

**Le otto tinte delle categorie** (`src/ui/tinte.ts`) sono la cosa che ha dato
carattere all'app. Ogni categoria ha il suo colore, e lo decide il suo id: non
l'ordine, così riordinando i colori non ballano e una categoria esportata e
reimportata ritrova il suo. Sono calcolate in OKLCH a lightness costante — 0,42
le forti e 0,895 le tenui nel chiaro, 0,82 e 0,325 nello scuro — con la croma
più alta che stia dentro l'sRGB a quella lightness.

La croma varia col tono perché deve: un giallo scuro saturo non esiste sullo
schermo, e chiederlo vuol dire farselo tagliare dal dispositivo. La lightness
invece resta ferma, ed è quella che tiene insieme la famiglia.

Una prima versione stava più chiara ed era corretta ma **anemica**: a schermo le
pastiglie sembravano scolorite. I numeri dicono se un colore è leggibile, non se
funziona.

## I caratteri

Il carattere del dispositivo per tutto, **Caveat solo per il marchio**. Una
calligrafia su tutti i titoli stanca l'occhio e smette di distinguere il nome
dell'app dal resto: se è scritto a mano anche il titolo di una categoria, il
marchio non è più un marchio.

La scala in `TESTO` ha un gradino che prima non c'era, `voce` a 20/600: è il
soggetto di una riga, il nome di una categoria o il titolo di una ricetta. Sotto
di lui i dati scendono a 13. Il rapporto 1:1 di prima diventa 1,5:1.

`CIFRE` è `tabular-nums`, per i numeri incolonnati: con le cifre proporzionali un
1 è più stretto di un 8 e la colonna traballa.

## I segni

Le dodici icone dei comandi sono nostre, disegnate da `scripts/genera-segni.py`
e non prese da un catalogo. MaterialCommunityIcons e SF Symbols si riconoscono a
colpo d'occhio, ed è il problema: si riconoscono come le icone di qualcun altro.

Quello che le rende un insieme è la regola: griglia di 32, **tratto di 2,6** —
più spesso dei set di sistema, perché questa è un'app che si guarda da mezzo
metro con le mani sporche — terminazioni sempre arrotondate, e lo stesso raggio
d'angolo delle pastiglie.

Sono PNG monocrome colorate con `tintColor`, non vettori: `react-native-svg` è
una dipendenza nativa e non vale la pena aggiungerne una per dodici disegni. Un
test tiene insieme i nomi in `segni.ts`, i file in `assets/segni/` e i `require`
in `Segno.tsx`: un segno senza il suo file non dà errore di compilazione, dà
un'app che salta.

**Le trenta icone fra cui l'utente sceglie per le sue categorie restano quelle
del font.** Quelle sono contenuto suo; i segni sono l'app che parla.

## L'intestazione

È nostra, non quella di sistema (`src/ui/componenti/Barra.tsx`), e le schermate
si montano con `headerShown: false`.

Il motivo: su iOS 26 i pulsanti della barra vengono avvolti in una capsula di
vetro, e la freccia disegnata apposta ci finiva dentro sembrando di nuovo un
comando di sistema. In più il pulsante indietro nativo si porta dietro il titolo
della schermata di partenza, che è lungo, si tronca da solo e su Android non
esiste. Costa cinque schermate da riscrivere e in cambio dà la stessa identica
cosa sui due sistemi.

Restano al navigatore la transizione fra le schermate e il gesto di trascinare
dal bordo, che sa fare meglio di noi.

## Le due viste

Ogni lista si guarda a righe o a griglia, e sceglie l'utente col comando in alto
a destra. **Le due preferenze sono separate** — categorie e ricette sono liste
diverse — e stanno nella tabella `impostazioni` (migrazione 2). Il comando mostra
l'icona dell'**altra** vista, non di quella in cui si è: un comando dice dove
porta.

## Le fotografie

**La tessera dell'elenco**: la foto occupa tutta la tessera e il testo ci sta
sopra, dove la sfumatura è arrivata al nero pieno. Una sola sfumatura, alta i
quattro quinti: corta si vede tutta, e la riga dove comincia taglia l'immagine in
due.

Un primo tentativo divideva la tessera in due, foto sopra e fascia nera sotto. Era
sbagliato per due motivi e si è visto solo guardandolo: la fascia tagliava la
fotografia a metà altezza, e la sfumatura sopra di lei non serviva a niente perché
lì non c'era testo. Due elementi per un lavoro solo.

**La copertina del dosatore**: foto a tutta larghezza col titolo sopra, che
scorrendo esce di scena e passa il titolo alla barra. Per un pezzo la foto qui non
c'era affatto, e la ragione era giusta: spingeva in basso i numeri per cui si apre
la schermata. La copertina lo risolve andandosene.

**Il numero che vale per qualunque testo sopra un'immagine**: il caso peggiore è
la foto bianca. Un velo nero di opacità `a` porta un pixel bianco a `1-a`, quindi
perché il bianco ci stia sopra a 4,5:1 serve `a >= 53,5%` (e 65,1% per il livello
severo). Sotto quella soglia non è questione di gusto, è fuori norma.

## Le decisioni di contenuto

- «Tutte le ricette» è una scheda piena, non una riga con una linea sotto:
  quella forma diceva «informazione» e non «posto dove andare», e nessuno la
  toccava.
- «Senza categoria» sta in fondo, dopo le categorie: è un residuo da sistemare,
  non un raggruppamento, e non deve stare davanti al lavoro che l'utente ha fatto.
- **Il procedimento si mostra solo se c'è.** I procedimenti veri sono appunti di
  due righe («burro liquido+uova+zucchero / 180^») e alcuni sono vuoti: su una
  ricetta che è solo dosi, un'intestazione sopra il nulla sembra un pezzo mancante.
- La colonna delle immagini nell'elenco a righe compare solo se una foto c'è
  davvero. Un primo disegno la teneva sempre, con la pastiglia della categoria al
  posto della foto: nel ricettario vero la maggior parte delle ricette una
  categoria non ce l'ha, e tornavano i buchi.

## Il test anti-riflesso

Se qualcuno indovina tema e tavolozza dalla sola categoria, quello è il primo
riflesso di chi progetta. Per la cucina il riflesso di primo grado è «crema,
terracotta, serif caldo»; il secondo è «foto grandi ed editoriale». Il colore
delle categorie è la via d'uscita da tutti e due, perché non è decorazione: è
un'informazione che prima non si vedeva.

## Cosa resta aperto

Due decisioni di prodotto, che aspettano Paolo:

- **Le porzioni frazionarie.** Riscalando per ingrediente le porzioni diventano
  `31,98`. Il conto è giusto, il numero è illeggibile. O si arrotonda mostrando
  «circa», o si mostrano i decimali solo quando dicono qualcosa.
- **L'export con le foto dentro.** Oggi l'archivio pesa poche centinaia di
  kilobyte e si manda per posta. Con le foto diventa una ventina di mega. O resta
  leggero e chi cambia telefono le perde, o diventa un archivio vero e cambia il
  modo di spostarlo.