Palette
Typography
Summary
L'apertura: mentre la pagina carica, al centro cicla il disegno di un portatile e intorno compaiono a mano i tag che compongono una pagina — <p>, <button>, border-radius: 50% — scritti in blu fresco che asciuga verso l'inchiostro. Niente barra e niente percentuale: il caricamento non si misura, si guarda. Quando è pronto, il foglio si dissolve e consegna l'hero già in movimento. Perché conta: è l'unico momento in cui hai l'attenzione totale di chi arriva e nessun contenuto da mostrare. O lo usi per dire cos'è il prodotto, o lo sprechi in uno spinner.
Style
Carta crema a pallini, inchiostro scuro, un blu e un corallo; serif variabile per il display, grafia a mano per le annotazioni, monospace per le etichette.
Carta #f6efe3 con griglia a pallini, inchiostro #1a1a2e, blu #2b45ff e corallo #ff5a36 come soli accenti, giallo #ffd23f e menta #4fd1a5 per i tocchi. Fraunces variabile (opsz 144, peso 300) per il display, Gochi Hand per le scritte a mano, DM Mono per le etichette in maiuscoletto. I disegni sono video bianchi opachi in mix-blend-mode multiply: nessuna sezione può avere uno z-index o il bianco torna a coprire.
Layout & structure
Una sola sezione, presa dalla pagina a cui appartiene.
La sezione
L'apertura: mentre la pagina carica, al centro cicla il disegno di un portatile e intorno compaiono a mano i tag che compongono una pagina — <p>, <button>, border-radius: 50% — scritti in blu fresco che asciuga verso l'inchiostro. Niente barra e niente percentuale: il caricamento non si misura, si guarda. Quando è pronto, il foglio si dissolve e consegna l'hero già in movimento.
Notes
Perché conta: è l'unico momento in cui hai l'attenzione totale di chi arriva e nessun contenuto da mostrare. O lo usi per dire cos'è il prodotto, o lo sprechi in uno spinner.
Meta
- Author
- Silvio Luchetti
- Published
- yesterday
- Remixes
- 0
- Views
- 0