P1 · La linea che diventa struttura 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 #F4F2EC · 70% della superficie
  • Testo · inchiostro #111312 · 16.66:1 su carta
  • Primario #111312 · bottoni e le due sezioni scure (18%)
  • Su primario #0EF617 · etichetta su inchiostro (12.63:1), campitura al massimo 2%
  • Secondario #D9D6CE · filetti e superfici, mai testo (7%)
  • Accento #0A7A12 · link e verde su carta (4.93:1, 2%)
  • Testo secondario #5E5F61 · 5.71:1 su carta
  • Su inchiostro: testo #F4F2EC
  • Su inchiostro: secondario rgba(244,242,236,.72)
  • Su inchiostro: filetti rgba(244,242,236,.16)
Display · clamp(3rem, 1.5rem + 7vw, 9rem) · 800 Catena
Display · tracking -0.04em · 800 Catena
Display · interlinea .92 · 800 Catena
Titoli · clamp(1.75rem, 1.2rem + 2.2vw, 3rem) · 700 Ogni passo regge il successivo
Titoli · tracking -0.02em · 700 Ogni passo regge il successivo
Titoli · interlinea 1.05 · 700 Ogni passo regge il successivo
Corpo · 1.125rem · 400 · enfasi 500 Un testo campione da leggere senza fatica.
Corpo · interlinea 1.55 · 400 · enfasi 500 Un testo campione da leggere senza fatica.
Etichette · .875rem · 500 01 — Metodo
Etichette · tracking .06em · 500 01 — Metodo
Etichette · interlinea 1.3 · 500 01 — Metodo

Wordmark · nella barra, 1.125rem

Marketing Hackers

Firma di chiusura su carta · misurata sulla larghezza del box

Marketing Hackers

Firma su inchiostro · con il quadrato verde

Marketing Hackers

Seleziona questo testo: la selezione è verde pieno con testo inchiostro. esempio

02

Navigazione

Proposta di direzione, non il sito

esempio · scorri: dopo 120px verso il basso la barra sale, risalendo torna

Barra da 64px, carta al 92% con sfocatura e filetto da 1px. Sotto 768px un bottone da 48px apre il foglio scuro.

esempio · fondo inchiostro: la barra passa a inchiostro al 92%

esempio · di nuovo carta

03

Bottoni e link

Proposta di direzione, non il sito
Riposo

Su inchiostro · esempio

Hover

Stato fissato · esempio

Leggi le note

Dal vivo: passa col puntatore · esempio

Leggi le note
Focus

Fuoco su carta · esempio

Fuoco su inchiostro · esempio

Disabilitato

Non disponibile · esempio

04

Card e righe

Proposta di direzione, non il sito
Riga di elenco
  1. 01

    Ascolto

    Un incontro per capire obiettivi e vincoli. esempio

  2. 02

    Diagnosi

    Cosa funziona oggi e cosa si perde per strada.

  3. 03

    Piano

    Le priorità messe in fila, con un calendario.

Riga di tabella

Scala dei piani · prezzi e nomi di esempio

  1. 01 · esempio

    Avvio

    € 490 /mese

    Un passo alla volta.

    Scegli
  2. 02 · esempio

    Crescita

    € 900 /mese

    Due canali seguiti.

    Scegli
  3. 03 · esempio

    Continuità

    € 1.400 /mese

    La catena completa.

    Scegli
  4. 04 · esempio

    Squadra

    € 2.200 /mese

    Un gruppo dedicato.

    Scegli
Campo di modulo
05

Una composizione di sezione

Proposta di direzione, non il sito

01 — Metodo · esempio

Ogni passo regge il successivo

Passi superati 04 / 04

  1. 01

    Ascolto

    Un incontro per capire obiettivi e vincoli.

  2. 02

    Diagnosi

    Cosa funziona oggi e cosa si perde per strada.

  3. 03

    Piano

    Le priorità messe in fila, con un calendario.

  4. 04

    Costruzione

    Pagine, contenuti e misure, un pezzo alla volta.

Richieste di contatto, gennaio–giugno 2026 contro gennaio–giugno 2025. Fonte: Google Analytics 4 del sito. esempio, non un cliente

06

Movimento

Proposta di direzione, non il sito

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

La catena · scorri: la linea si disegna e accende un anello per voce

Voci superate 06 / 06

  1. 01

    Ascolto

    Un incontro per capire obiettivi e vincoli.

  2. 02

    Diagnosi

    Cosa funziona oggi e cosa si perde per strada.

  3. 03

    Piano

    Le priorità messe in fila, con un calendario.

  4. 04

    Costruzione

    Pagine, contenuti e misure, un pezzo alla volta.

  5. 05

    Misura

    Ogni mese i numeri, con periodo e fonte.

  6. 06

    Revisione

    Si tiene ciò che regge, si cambia il resto.

Pagine pubblicate, marzo–settembre 2026. Fonte: registro interno del sito. esempio, non un cliente

Laboratorio · esempio

07

Linguaggio

Proposta di direzione, non il sito
  1. Carta calda con grana leggera, inchiostro come unico scuro, verde solo in piccole campiture piene.
  2. Filetti da 1px e angoli vivi: niente raggi, niente ombre, niente sfumature oltre il velo sulle foto.
  3. Una sola linea nella colonna di sinistra lega anelli, passi e piani: la stessa forma per ogni elenco ordinato.

Schermata appesa come un lavoro · filetto 1px, niente ombra

Schermata di un sito appesa come campione

Icone · 20px, tratto 1.5px, estremi squadrati

  • Vai
  • Menu
  • Apri
  • Fatto
  • Anello

Su carta la grana è sempre stesa sopra la pagina, al 4%.

Fotografia a tutta larghezza, campione
Foto a tutta larghezza su inchiostro · esempio Il velo sale dal basso