Home · hero a 1440 px

Parliamo del progetto
Portfolio 2026 — Ed. 01Rivalta sul Mincio — Italia45°14′N · 10°41′E

Alberto Pecchini

Discipline

123456ABCDAP-26-004PIANTA PIANO TERRA · PROGETTOSCALA 1:100TAV. 02PORTICOCAMERA 112.58 m²BAGNO8.02 m²CUCINA11.28 m²LAVANDERIA7.37 m²DISIMPEGNO9.43 m²CAMERA 211.93 m²STUDIO8.67 m²SOGGIORNO · PRANZO28.48 m²AA′4.002.603.602.4012.603.401.603.408.40N012345 m
Fig. 01 — Pianta piano terra · scala 1:100

Progetto spazi, strumenti e identità digitali.

Diplomato geometra, in provincia di Mantova. Rilevo e disegno edifici, sviluppo siti web, costruisco marchi: con lo stesso metodo e la stessa tolleranza.

Guarda i progettiParliamo del progetto
Disponibile per nuovi incarichi Scorri Attivo dal 2023

Colore

01ColoreCarta · Inchiostro · Minio10 token + ruoli semantici

Carta, inchiostro, minio.

Due neutri caldi, da tavolo da disegno, e un solo colore. Il minio segna ciò che si muove o è attivo — riempimento al passaggio, avanzamento, selezione — e non decora.

Carta#F3F1EC

--c-paper

Fondo di pagina.

Carta 2#EAE7E0

--c-paper-2

Riquadri, tavole, sezioni «tint».

Carta 3#DEDAD1

--c-paper-3

Terzo piano, fondo delle tavole «tint».

Grafite#5A5B55

--c-graphite

Testo secondario ed etichette.

Inchiostro#10110F

--c-ink

Testo, bottoni pieni, sezioni scure.

Inchiostro 2#1B1C19

--c-ink-2

Riquadri su fondo scuro.

Inchiostro 3#2B2C28

--c-ink-3

Terzo piano scuro.

Minio#E5481F

--c-minio

Accento: riempimenti, avanzamento, selezione.

Minio profondo#B5360F

--c-minio-deep

Accento come testo e anello di fuoco su carta.

Minio acceso#FF6A3D

--c-minio-bright

Accento su fondo inchiostro.

Ruoli semanticiIl tema scuro si applica a sezioni intere, mai a singoli elementi
Tema carta · predefinitodata-theme="paper"
--bgCarta
--bg-2Carta 2
--fgInchiostro
--mutedGrafite
--line / --line-strongInchiostro al 16% / 42%
--accentMinio
--accent-textMinio profondo
Inchiostro su minio Contrasto 4,8:1
Tema inchiostro · sezionidata-theme="ink"
--bgInchiostro
--bg-2Inchiostro 2
--fgCarta
--muted#A5A59C
--line / --line-strongCarta al 17% / 45%
--accentMinio acceso
--accent-textMinio acceso
Inchiostro su minio Contrasto 6,6:1

Sopra il minio si scrive sempre in inchiostro: il bianco non raggiunge il livello AA. L’unico altro colore è il verde #2F9E5B del punto «disponibile per nuovi incarichi».

#2F9E5B · solo stato

Tipografia

02TipografiaArchivo · Instrument Serif · IBM Plex MonoOspitati in locale, nessuna richiesta a terzi

Un grottesco che si stringe, un corsivo per l’accento.

Archivo è variabile su peso e larghezza: i titoli stanno a 560 e al 94%, il nome in copertina all’86%. Il corsivo graziato entra una parola per titolo. Il mono misura: etichette, bottoni, dati.

Archivo Variablewght 100–900 · wdth 62–125%

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 àèéìòù

Titoli, testo, navigazione. Una sola famiglia per quasi tutto, modulata con peso e larghezza.

Instrument SerifCorsivo 400

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Solo accento: una parola per titolo, ingrandita a 1,07em perché accanto al grottesco non sembri più piccola.

IBM Plex Mono400 · 500

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 · — / 45°14′N

Etichette, bottoni, coordinate, cartigli: maiuscolo, spaziatura 0,07–0,08em.

Asse della larghezza · wdthArchivo 540–600

Metodo

78% · numeri e statistiche

Metodo

86% · nome in copertina, invito

Metodo

94% · titoli h1–h3

Metodo

100% · h4, testo corrente

Scala fluida · clamp()Valori a 1440 px · minimo → massimo
--fs-display115 px · 44 → 128Tre discipline
--fs-h184 px · 38 → 88Lavori scelti
--fs-h258 px · 30 → 60Parliamo del tuo prossimo progetto.
--fs-h332 px · 22 → 32Tre aree, un interlocutore
--fs-h422 px · 18 → 22Mobile progettato a parte, non ridotto
--fs-lead24 px · 18 → 24Rilevo un edificio al millimetro, scrivo l’interfaccia che lo racconta, disegno il marchio di chi lo abita.
--fs-body17 px · interlinea 1,6Struttura prima dell’estetica, contenuti veri prima dei layout, prestazioni misurate. Scrivo il codice a mano: niente temi, niente page builder.
--fs-small15 pxRaccontami il progetto in due righe. Rispondo entro un giorno lavorativo.
--fs-label11 px · monoAggiornati al settembre 2026

Forma e movimento

03Forma e movimentoBase 4 px · raggi minimi · ingressi lentiMobile-first · 480 / 768 / 1024 / 1280 / 1600

Un linguaggio ortogonale, preso dal tavolo da disegno.

Griglia a 12 colonne, margini che crescono con lo schermo, raggi da 2 px. Fili, righelli e crocini di registro fanno parte del sistema, non della decorazione.

Spazi--sp-1 … --sp-10
--sp-14
--sp-28
--sp-312
--sp-416
--sp-524
--sp-632
--sp-748
--sp-864
--sp-996
--sp-10128
--gutter5016 → 56 · margine laterale
--col-gap2712 → 32 · tra colonne
--section15672 → 176 · tra sezioni
--max1680larghezza del contenitore
--header-h7664 sotto i 768 px

Griglia · 12 colonne

Raggi--r-0 … --r-full

--r-0 · 0 · riquadri

--r-1 · 2 · bottoni, tag

--r-2 · 6

--r-3 · 12

--r-device · 36 · telefoni

--r-full · chip

Elementi grafici ricorrenti.rule · .rule--ticks · .mark · .dot--live

Filo

1 px, si stende da sinistra all’ingresso.

Righello

Tacche ogni 8 px, più lunghe ogni 40.

Crocini di registro

Agli angoli di immagini e tavole, al 70%.

Disponibile

Punto attivo

Pulsa ogni 2,4 s. Unico uso del verde.

MovimentoRispetta prefers-reduced-motion · senza JS tutto è visibile

--ease-out

0.16, 1, 0.3, 1

Ingressi, bottoni, fili.

--ease-in-out

0.65, 0, 0.35, 1

Tavole che scorrono, monogramma.

--ease-soft

0.33, 1, 0.68, 1

Movimenti morbidi.

Durate e ingressi

0,2 s0,45 s0,8 s1,2 s

Rivelazioni: up, fade, scale, clip, line, draw e parola per parola.

Componenti

04ComponentiRiposo · passaggio · attivoBersagli ≥ 44 px

Pochi pezzi, sempre gli stessi.

Bottoni in mono maiuscolo che al passaggio si riempiono di minio da sinistra; link sottolineati che si ritirano; chip a pillola per i filtri, tag squadrati per le etichette.

Bottoni.btn · --ghost · --sm · --lg
Guarda i progetti

Pieno · riposo

Guarda i progetti

Pieno · passaggio: il minio entra da sinistra, la freccia avanza di 5 px

Parliamo del progetto

Contorno · riposo

Parliamo del progetto

Contorno · passaggio: si riempie d’inchiostro

Parliamo del progetto

Piccolo · 44 px · intestazione

Link.link · link nel testo
Tutti i progetti (9) Tutti i progetti (9) riposo → passaggio: il filo si ritira verso destra

Nel testo corrente il link è sottolineato con un filo leggero: scrivimi dalla pagina contatti, al passaggio diventa minio profondo.

Chip e tagFiltri a pillola · etichette squadrate
attivo · riposo · passaggio
  • Siti web
  • UI/UX
  • Sviluppo frontend
  • Responsive
  • +3
Campi.field · modulo contatti
Riposo
Fuoco
02Progetti selezionati01 / 03

Lavori scelti

Tutti (9)

Testata di sezione: indice in minio, contatore a destra

Indice dei progetti03 di 9

Passaggio: la riga puntata rientra di 16 px, le altre scendono al 35%

NumeriAggiornati al settembre 2026

9+

Progetti

tra tecnico, web e grafica

12

Clienti

privati, aziende, enti

4

Siti online

progettati e sviluppati

3

Anni di attività

dal primo ufficio tecnico

Disponibile per nuovi incarichiFooter · palette propria su fondo #0D0D0C

Parliamo del tuo prossimo progetto.

Raccontami il progetto in due righe. Rispondo entro un giorno lavorativo.

Inizia una conversazione

Stile

Il sistema visivo del sito in cinque tavole: la home a 1440 px, colore, tipografia, forma e movimento, componenti.

1–5 tavole · F tutte · 0 scala 1:1 · + − zoom
trascina o rotella per spostarti · Ctrl + rotella per ingrandire

100%