ap®

DEVELOPMENT ONLY / V.01

Style Kit.

Un linguaggio essenziale, con dettagli che si fanno notare. Questa pagina raccoglie le regole visive e i componenti del portfolio.

01

Palette

Orange-red per azioni, accenti e percorso principale. Sfondo e superfici cambiano con il tema; il colore primario resta lo stesso.

Primary
Background
Surface
Text
Secondary
Border
I rami della timeline usano viola, ciano e ambra come accenti secondari. Evitare di usarli per le azioni principali.
02

Typography

SPACE GROTESK / DISPLAY

Less, but better.

SPACE GROTESK / HEADING

Idee che prendono forma.

DM SANS / BODY

Testi chiari, frasi brevi e spazio per respirare. Il contenuto viene prima degli effetti: la tipografia deve restare leggibile anche senza animazioni.

MONOSPACE / META

SELECTED WORK / 01 — 06

Corpo 16–18 px; titoli fluidi. Maiuscole e tracking per metadati brevi, non per paragrafi. Non comprimere le lettere del testo corrente.

03

Buttons & links

Projects ↗

Una sola azione primaria per gruppo. Hover leggero, focus visibile con Tab e stato disabilitato riconoscibile. I link navigano; i pulsanti eseguono azioni.

WEB APPLICATIONIN PROGRESSPLACEHOLDER
04

Cards & cursor contrast

Passa il cursore sulle tre superfici: cambia colore quando l’accento orange-red non ha abbastanza contrasto.

PRIMARY SURFACE

Make it
stand out.

Orange-red / #FF4D24

DARK SURFACE

Room to
breathe.

Charcoal / #101110

LIGHT SURFACE

Keep it
clear.

Off-white / #F2F2ED

Card con bordo sottile, angoli da 9 px e padding da 24–28 px. Altezze diverse per la masonry; contenuti e allineamenti restano coerenti. Spaziatura su multipli di 4 px.

05

Motion

Navigate

Blob orange-red in espansione e rientro. Circa 620 + 650 ms.

Theme

La nuova palette si rivela dentro un blob organico. Durata: 1 secondo.

Cursor

Il cerchio rimane preciso; glitch e scia sono decorativi. Regola l’effetto nel Cursor Lab.

Rispetta sempre la preferenza di movimento ridotto. Niente cursore custom su touch. Il pannello Cursor Lab e questa pagina sono strumenti temporanei da rimuovere in produzione.

LET’S TALK

Hai un’idea?

Raccontami cosa hai in mente.

angelopavan.dev@gmail.com ↗

Clicca sull’indirizzo per aprire il tuo programma di posta.