Gate 1 · P2 · Il buio che si accende Proposta di direzione, non il sito: testi campione, niente copy definitivo.
01

Identità

Proposta di direzione, non il sito

Misure reali; in una finestra stretta le più grandi si riducono per restare intere.

  • Sfondo (carta, 55%) #F4F2EC
  • Testo #111312 · 16.66:1
  • Primario (palchi d’inchiostro, bottoni, 40%) #111312
  • Su primario (etichetta e campitura su inchiostro, max 2%) #0EF617 · 12.63:1
  • Secondario (solo filetti, 3%) #D9D6CE
  • Accento (link su carta) #0A7A12 · 4.93:1
  • Testo secondario su carta #5E5F61
  • Parola spenta su inchiostro rgba(244,242,236,.18)
  • Secondario su inchiostro rgba(244,242,236,.72)
display · Mona Sans 800, stretch 115% (spec 125%), -0.05em, lh .82 · clamp(3.5rem, 1rem + 10vw, 12rem) · 800 Accendi
titoli · Mona Sans 700, stretch 110%, -0.03em, lh 1 · clamp(2rem, 1.25rem + 3vw, 4rem) · 700 Titolo esempio
corpo · Atkinson Hyperlegible Next 400, lh 1.5 · 1.25rem · 400 Un paragrafo di esempio da leggere sulla carta.
etichette · Atkinson Hyperlegible Next 500, .08em, maiuscolo · .875rem · 500 ETICHETTA ESEMPIO

Scorri: nei primi 100svh il nome scende dall’apertura nello slot della barra.

Paesaggio al tramonto, immagine di esempio
Apertura · esempio
Marketing Hackers
02

Navigazione

Proposta di direzione, non il sito
Barra 72px trasparente · il colore segue [data-ground] in 200ms · voci di esempio

Menu esempio

03

Bottoni e link

Proposta di direzione, non il sito
Riposo
Parla con Maia Vedi i lavori Link su carta
Parla con Maia Link su inchiostro
Hover
Parla con Maia Vedi i lavori
Parla con Maia Link su inchiostro
L’etichetta sale, la copia arriva dal basso · 480ms
Focus
Parla con Maia Link su carta
Parla con Maia Link su inchiostro
Contorno 2px, distanza 4px
Disabilitato
Stato non previsto dalla specifica · lettura minima
04

Card e righe

Proposta di direzione, non il sito
Card

Scorri: il binario dei lavori corre in orizzontale mentre il palco resta fermo.

Schermata di un sito di ospitalità, usata come esempio
Lavoro esempio 01Ospitalità · esempio
Schermata di un sito di viaggi, usata come esempio
Lavoro esempio 02Viaggi · esempio
Schermata di un sito industriale, usata come esempio
Lavoro esempio 03Industria · esempio
Schermata di un magazine, usata come esempio
Lavoro esempio 04Editoria · esempio
Riga di elenco
Strategia 01 · esempio

Testo di esempio: una riga si apre alla volta, le altre si chiudono.

Siti 02 · esempio

Testo di esempio sotto la seconda riga.

Contenuti 03 · esempio

Testo di esempio sotto la terza riga.

05

Una composizione di sezione

Proposta di direzione, non il sito
Sezione esempio

Una frase per schermata.

Paragrafo di esempio sulla carta: colonna di otto dodicesimi, corpo al massimo 52 caratteri per riga.

Vai al movimento
Paesaggio sul lago, immagine di esempio
Palco · esempio

Il buio si apre.

Parla con Maia
Lettura · esempio

Dopo il palco torna la carta: si legge con calma, poi il prossimo palco.

06

Movimento

Proposta di direzione, non il sito

Scorri o passa col puntatore: i modelli si muovono davvero.

Scorri: la frase si accende parola per parola; barra verde e contatore seguono la stessa parola.

Frase esempio

Ogni parola si accende quando arrivi tu a leggerla.

9 / 9

Marchi di esempio, nessun cliente reale · 40s, pausa al passaggio

Chiamata finale · esempio Parla con Maia
07

Linguaggio

Proposta di direzione, non il sito
  1. Foto a tutta larghezza sotto il testo display: scale(1.12) che scende a scale(1) lungo il palco, velo rgba(17,19,18,.55).
  2. Sull’inchiostro una grana SVG feTurbulence a .06 in mix-blend-mode: screen; filetti rari, 1px rgba(244,242,236,.16) su inchiostro e 1px #D9D6CE su carta.
  3. Nessuna icona oltre una freccia da 20px; il verde #0EF617 compare solo come campitura che si muove o etichetta su inchiostro.