# 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 icone dei comandi (indietro, cerca, il più, la matita...) vengono dal set
**Lucide**, al tratto 1,5 su 24, scelte da Paolo il 29/09/2026 sul campionario
`docs/design/campionari/icone.html`. Prima erano disegnate da noi, con un tratto
di 2,6 su 32 e un disegno che occupava due terzi della sua casella: sembravano
piccole e pesanti. Lucide, alla stessa misura, arriva quasi al bordo.

Le genera `scripts/genera-segni.mts` (Lucide e il convertitore stanno fra le
devDependencies, con la versione fissata): PNG bianche colorate con
`tintColor`, così non serve `react-native-svg`. Lo stesso script fa le icone
del menù in basso di Android. Su iPhone il menù resta coi simboli di Apple,
perché la lente di Cerca nella stessa capsula è di sistema. 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 icone delle categorie** sono dello stesso set, allo stesso tratto (Paolo,
29/09): 59 da scegliere, in otto gruppi senza titolo, separati dallo spazio.
Un'icona dice **che piatto è** la categoria, non di cosa è fatto: si ordina un
piatto di pesce o un tagliere di formaggi (gruppo dei secondi), mentre uova,
latte e funghi sono ingredienti. Dove Lucide non ha la figura (formaggio,
funghi, riso, pane, tè, griglia, peperoncino, Natale) si prende da Tabler, che
ha la stessa griglia e lo stesso tratto; la pasta è un piatto di spaghetti
disegnato da noi (`scripts/icone-nostre/`). Antipasti, molluschi e pollo sono
usciti dalla griglia ma restano chiavi valide per chi li ha già scelti. Il
catalogo è in `src/domain/icone.ts`.

## I menù

Il «+», i tre puntini di una sezione e il banner della foto aprono un menù che
nasce dal comando stesso (`MenuNativo.tsx`, con @expo/ui). Sull'iPhone è il
menù di SwiftUI, quello di Note, con l'animazione di vetro di iOS 26 e i
simboli di Apple accanto alle voci; su Android la tendina di Material, coi
nostri segni. Paolo l'ha chiesto il 30/09 al posto del foglio che saliva dal
basso. Una voce che va spiegata ha una seconda riga più piccola, come
«Suggerisci risultati» in Note.

## 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.

## Scrivere una ricetta

La schermata Modifica è stata rifatta il 28/09/2026 perché i primi tester la
trovavano confusa. Il confronto e le alternative scartate stanno in
`design/campionari/modifica.html`; qui le decisioni.

**La diagnosi**: quasi tutto aveva la stessa faccia. I campi dicevano cosa
erano solo col segnaposto, che sparisce appena si scrive (nel risotto restava
un «4» da solo); i bottoni erano testo terracotta senza forma, e spenti
diventavano grigi come le etichette.

**Una forma per ogni ruolo**, la stessa ovunque (`Campo.tsx`, `Bottoni.tsx`):

- l'etichetta sta sempre sopra il campo, piccola e tenue, anche a campo pieno;
- il campo è una casella col bordo intero in `campo` (3:1, la soglia WCAG per
  il contorno di un comando; `bordo` sta a 1,3:1 e non si vedeva);
- nel campo vuoto c'è un esempio («Es. 200»), non il nome del campo;
- bottone principale pieno di accento, uno per schermata; secondario su
  `accentoTenue` col segno; comando leggero solo scritta e segno, mai senza
  segno; distruttivo rosso, da solo, in fondo;
- **spento è la stessa forma, grigia**: la forma dice «bottone», il grigio
  «adesso no».

**La pagina** segue la ricetta del Dosatore: foto (il banner, grande come la
copertina, che si tocca per scegliere), nome, porzioni e categoria, poi
ingredienti e procedimento. Gli ingredienti si leggono come nel Dosatore e si
scrivono in un foglio (tre campi grandi con l'etichetta), che resta aperto per
scrivere il prossimo. L'incolla sta in un suo foglio, con l'anteprima di
quello che ne uscirà. Le sezioni hanno il titolo col menù (aggiungi qui,
rinomina, rimuovi) e c'è un solo «Aggiungi».

**Si dice «Rimuovi»**, non «Togli». «Elimina» resta per la ricetta intera.

## 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.