kodi go
linee guida

il sistema visivo dell'app che stampa 9 foto dal telefono come polaroid, con offerte che cambiano ogni ora in ogni città. colori, caratteri, componenti, illustrazioni e regole per costruirla tutta con la stessa voce.

versione 1.0settembre 2026una sola interfaccia, adattiva

01 · fondamentaprincipi

tre idee che guidano ogni schermata. quando una scelta non è chiara, torna qui.

stampare è un gesto

dalla foto al pack di 9 polaroid in pochi tocchi. ogni schermata ha un solo compito e un solo bottone principale.

un gioco che cambia ogni ora

il contatore è il cuore dell'app: offerte diverse per città e per ora, gratis quando le paga uno sponsor locale, e una faccina che reagisce a quanti ordini restano.

colori pieni, parole leggere

campiture piatte e sature, illustrazioni semplici, testi tutti minuscoli e diretti, dando del tu.

02 · colorecolori

il giallo è la superficie, il viola è la voce, il blu è l'azione. gli altri colori vivono nelle illustrazioni e negli stati. clicca un codice per copiarlo.

primari

illustrazione e stati

neutri e accessi social

contrasto delle coppie usate

rapporti calcolati sui colori reali (wcag 2.1: 4,5:1 per il testo normale, 3:1 per testo grande o grassetto da 18,5px).

coppiadoverapportoesito

03 · caratteritipografia

un solo carattere, quicksand, arrotondato come le onde e le forme delle illustrazioni. pesi 500, 600 e 700. i numeri del contatore usano cifre tabellari per non “ballare” quando cambiano.

04 · formaforme e spazi

l'onda separa sempre la zona gialla da quella bianca: è il segno di riconoscimento di kodi go, sotto l'header e sopra la zona degli accessi.

onda: modulo 28 × 12 px ripetuto in orizzontale, colore giallo kodi su bianco. mai ruotata, mai colorata diversamente.

raggi

pill · bottoni, chip
16 · card indirizzo
22 · pannelli dal basso
0 · polaroid, “carica foto”

spaziature

margine laterale delle schermate: 22–28 px. linee e bordi: sempre 2 px.

05 · interfacciacomponenti

gli elementi ricorrenti dell'app, identici a quelli del prototipo.

bottoni

scegli le fotoprimario · blu con testo viola (5,8:1), uno per schermata
ho già un accountsecondario · contorno giallo
aggiungi fotoalternativa · contorno rosa
salva indirizzosu fondi colorati · contorno viola
torna al contatorechiusura di un flusso · rosa pieno
avantipiccolo · 36 px, nelle barre in basso

stati del bottone primario

continuanormale
continuahover
continuafocus
continuain corso
continuadisabilitato

campi e accessi

come ti chiamano
normale
giulia@esempio.it
focus
••••
almeno 8 caratteri
barra di avanzamento della registrazione
fg
continua con

navigazione e contenuti

kodi go
header con onda e profilo
schede · attiva con linea rosa
città dell'offerta
Luigi Scaglione
via Toledo 88
80134, Napoli, NA, Italia
card indirizzo
polaroid 7,5 × 10 con rimozione
4/9foto scelte nel pack
indirizzo salvatoconferma breve, 2 secondi

libreria nel codice

i componenti React dell'app (cartella src/components), con gli stessi nomi usati qui.

Buttonprimario, secondario, rosa, contorno, pieno-rosa, link · md / sm · caricamento
TextField · PasswordFieldetichetta sempre visibile, suggerimento, errore; fondo giallo, rosa o bianco
AppScreen · ColorScreenschermata bianca con header e onda, o modulo a tutto colore con avanzamento
Chip · SponsorTagcittà dell'offerta, sponsor locale
Face · CounterNumber · Meter · Countdownil contatore e i suoi 5 umori
PhotoGrid · Polaroid · CropEditorscelta foto numerata, pack, ritaglio 3:4 con controllo dei dpi
AddressCard · PriceRows · CreditCard · OrderStepsriepilogo, pagamento, stato dell'ordine
Sheet · Switch · ListRow · Toast · EmptyStatepannelli dal basso, impostazioni, conferme brevi, stati vuoti

06 · meccanicail contatore

ogni città ha la sua offerta, che cambia allo scoccare di ogni ora: gratis (100 ordini) oppure a prezzo speciale (20–80 ordini). il numero scende mentre gli altri ordinano e la faccina cambia umore in base alla percentuale rimasta.

regole

quando arriva a 0“ordina subito” si disattiva, il numero diventa grigio e compare il conto alla rovescia per la prossima offerta.
senza accessosi può guardare il contatore da ospiti; per ordinare si passa da “let's make it official” e dalla registrazione.
posizionela città arriva dal gps (dopo il consenso) e si può cambiare dal chip in alto. ogni città ha prezzi e contatori propri.
offerta gratisse il prezzo è 0 il riepilogo mostra “ordina gratis” e salta il pagamento.

07 · immaginiillustrazioni

forme piatte, massimo 3–4 colori della palette, niente contorni (eccetto le polaroid), leggere rotazioni che danno movimento. ogni passaggio della registrazione ha la sua illustrazione. “copia svg” copia il codice vettoriale pronto da incollare in sketch, figma o nel codice.

08 · segniicone

griglia 24 px, tratto 1,8–2,4 px con estremità arrotondate, colore viola. le icone piene (segnaposto, @, #) si usano come indicatori, le altre come comandi.

09 · percorsiflussi

l'ordine delle schermate. l'app si apre sul contatore; l'account si crea solo al riepilogo dell'ordine, oppure dal profilo.

10 · parolevoce e testi

sìtutto minuscolo“ordina subito”, “ho già un account”. maiuscole solo per nomi propri e città.
sìprima persona nelle domande“i miei amici mi chiamano”, “sono nato il”, “io parlo”: l'utente completa la frase.
sìerrori che aiutano“almeno 8 caratteri”, “controlla l'indirizzo email”: cosa non va e come sistemarlo.
norefusi e nomi diversisempre “kodi go”, mai “kodigo” o “Kodi”. attenzione a “ti piace”, “password”, “disponibili”.
notesto bianco piccolo sul gialloil bianco sul giallo va bene solo per il marchio e i numeri grandi; il testo corrente è viola.
notesto bianco sul bluil bianco sul blu azione arriva a 2,56:1: le etichette dei bottoni blu sono sempre viola (5,8:1).
nopiù bottoni principaliun solo bottone blu per schermata; le alternative sono a contorno o link.

11 · sviluppotoken

variabili css pronte per l'app. gli stessi nomi valgono per i design token in sketch o figma.

src/theme/tokens.css