Benvenuto alla mia Style Guide, un documento che è tanto un esercizio di stile quanto una testimonianza della profondità delle mie decisioni di design, anche per qualcosa di apparentemente semplice come un portfolio personale

Benvenuto alla mia Guida di Stile, un documento che è tanto un esercizio di stile quanto un testamento alla profondità delle mie decisioni di design, anche per qualcosa di semplice come un portfolio personale.

Questa guida non è solo una raccolta di regole; è una finestra sul mio processo di pensiero e sul mio impegno a creare un'esperienza visiva coerente, accessibile e memorabile. Riflette la mia filosofia che ogni decisione di design, per quanto piccola, merita attenzione e un po' di stile.

Quindi, goditi il viaggio.

Questa guida non è semplicemente una raccolta di regole; è una finestra sul mio processo di pensiero e il mio impegno a creare un'esperienza visiva coerente, accessibile e memorabile. Riflette la mia filosofia che le decisioni di design, per quanto piccole, meritano attenzione e un po' di stile.

Quindi, goditi il viaggio.

La typography è la spina dorsale di qualsiasi design system, e il mio sito non fa eccezione. Ho costruito una type scale che bilancia chiarezza, gerarchia visiva e personalità. Non si tratta solo di estetica, ma di garantire che ogni parola comunichi con il giusto tono—che sia un heading che cattura l'attenzione o una caption discreta ai margini.

Intestazioni

I miei heading sono progettati per stabilire una chiara gerarchia e catturare l'attenzione senza essere invadenti. Scalano fluidamente tra device, garantendo readability ed eleganza su tutto, da uno schermo mobile compatto a un monitor widescreen.

Intestazione

Schermi più grandi (L) S

Schermi più piccoli (S)

Caso d'uso

Intestazione

Schermi più grandi (L) S

Schermi più piccoli (S)

Caso d'uso

Intestazione

Schermi più grandi (L) S

Schermi più piccoli (S)

Caso d'uso

H1

40x

32px

Titoli delle pagine, sezioni hero

H1

40x

32px

Titoli delle pagine, sezioni hero

H1

40x

32px

H1

40x

32px

Titoli delle pagine, sezioni hero

H2

36px

28px

Titoli delle sezioni

H2

36px

28px

Titoli delle sezioni

H2

36px

28px

H2

36px

28px

Titoli delle sezioni

H3

32px

26px

Sottosezioni, intestazioni delle funzionalità

H3

32px

26px

Sottosezioni, intestazioni delle funzionalità

H3

32px

26px

H3

32px

26px

Sottosezioni, intestazioni delle funzionalità

H4

28px

24px

Titoli delle schede, intestazioni più piccole

H4

28px

24px

Titoli delle schede, intestazioni più piccole

H4

28px

24px

H4

28px

24px

Titoli delle schede, intestazioni più piccole

H5

24px

22px

Supporto per intestazioni e etichette

H5

24px

22px

Supporto per intestazioni e etichette

H5

24px

22px

H5

24px

22px

Supporto per intestazioni e etichette

Body Text

Il body text è progettato per garantire readability e comfort nella lettura prolungata. Le dimensioni sono ottimizzate per diversi breakpoint, mantenendo una line-height ideale per la leggibilità.

Intestazione

Schermi più grandi (L) S

Schermi più piccoli (S)

Caso d'uso

Intestazione

Schermi più grandi (L) S

Schermi più piccoli (S)

Caso d'uso

Intestazione

Schermi più grandi (L) S

Schermi più piccoli (S)

Caso d'uso

Corpo

20px

20px

Testo del paragrafo, lungo

Corpo

20px

20px

Testo del paragrafo, lungo

Corpo

20px

20px

Corpo

20px

20px

Testo del paragrafo, lungo

Piccolo

16px

16px

Testo secondario, didascalie

Piccolo

16px

16px

Testo secondario, didascalie

Piccolo

16px

16px

Piccolo

16px

16px

Testo secondario, didascalie

Color Palette

I colori sono emotivi, anche quando pretendiamo che siano logici. Per questo portfolio ho scelto una palette che trasmette professionalità, modernità e accessibilità. Niente esperimenti, solo scelte pulite e senza tempo.

Primary Color

ink-900

#05122C

Body text, headings

ink-900

#05122C

Body text, headings

ink-900

#05122C

Body text, headings

ink-900

#05122C

Body text, headings

ink-800

#2D374D

Secondary text, section titles

ink-800

#2D374D

Secondary text, section titles

ink-800

#2D374D

Secondary text, section titles

ink-800

#2D374D

Secondary text, section titles

ink-500

#555E6E

Icons, disabled text, captions

ink-500

#555E6E

Icons, disabled text, captions

ink-500

#555E6E

Icons, disabled text, captions

ink-500

#555E6E

Icons, disabled text, captions

ink-300

#A4A9B1

Divider, borders, placeholder

ink-300

#A4A9B1

Divider, borders, placeholder

ink-300

#A4A9B1

Divider, borders, placeholder

ink-300

#A4A9B1

Divider, borders, placeholder

ink-50

#F5F5F5

Page background

ink-50

#F5F5F5

Page background

ink-50

#F5F5F5

Page background

ink-50

#F5F5F5

Page background

Neutro

accent

#05122C

Links, CTAs, interactive elements

accent

#05122C

Links, CTAs, interactive elements

accent

#05122C

Links, CTAs, interactive elements

accent

#05122C

Links, CTAs, interactive elements

Spacing

Se la typography è la spina dorsale, lo spacing è l'aria che permette al design di respirare. Il mio spacing system si basa su una base unit di 4px, scalando in multipli di 4 per garantire flessibilità e ritmo visivo consistente.

Token name

Size

Property

Token name

Size

Property

Token name

Size

Property

Token name

Size

Property

spacing-0

0px

No spacing

spacing-0

0px

No spacing

spacing-0

0px

No spacing

spacing-0

0px

No spacing

spacing-1

4px

Extra-tight

spacing-1

4px

Extra-tight

spacing-1

4px

Extra-tight

spacing-1

4px

Extra-tight

spacing-2

8px

Base

spacing-2

8px

Base

spacing-2

8px

Base

spacing-2

8px

Base

spacing4

16px

Piccolo

spacing4

16px

Piccolo

spacing4

16px

Piccolo

spacing4

16px

Piccolo

spacing-5

24px

Medio

spacing-5

24px

Medio

spacing-5

24px

Medio

spacing-5

24px

Medio

spacing-6

32px

Large

spacing-6

32px

Large

spacing-6

32px

Large

spacing-6

32px

Large

spacing-7

40px

Extra-large

spacing-7

40px

Extra-large

spacing-7

40px

Extra-large

spacing-7

40px

Extra-large

spacing-8

64px

Huge

spacing-8

64px

Huge

spacing-8

64px

Huge

spacing-8

64px

Huge

spacing-9

80px

Extra

spacing-9

80px

Extra

spacing-9

80px

Extra

spacing-9

80px

Extra

spacing-10

124px

Maximum

spacing-10

124px

Maximum

spacing-10

124px

Maximum

spacing-10

124px

Maximum

Questo sistema garantisce consistency tra i layout e assicura che nessun elemento si senta schiacciato o trascurato. Perché anche i button meritano il loro spazio personale.

Grid System

Un grid system fornisce struttura ai layout, garantendo che ogni elemento si allinei perfettamente, anche quando nessuno lo nota (e onestamente, non è forse questo il punto?)

Grid Properties

Property

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Property

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Property

Small (S)

Medium (M)

Columns

4

8

12

12

Columns

4

8

12

12

Columns

4

8

Gutters

16px

16px

16px

16px

Gutters

16px

16px

16px

16px

Gutters

16px

16px

Margins

40px

80px

80px

80px

Margins

40px

80px

80px

80px

Margins

40px

80px

Max Width

100%

100%

1200px

1440px

Max Width

100%

100%

1200px

1440px

Max Width

100%

100%

di Spaziatura Responsiva

Token name

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Token name

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Token name

Small (S)

Medium (M)

spacing-small

8px

12px

16px

24px

spacing-small

8px

12px

16px

24px

spacing-small

8px

12px

spacing-base

16px

24px

32px

40px

spacing-base

16px

24px

32px

40px

spacing-base

16px

24px

spacing-large

24px

32px

40px

64px

spacing-large

24px

32px

40px

64px

spacing-large

24px

32px

Grid System

Un sistema a griglia fornisce struttura ai miei layout, garantendo che ogni elemento si allinei perfettamente, anche se nessuno lo nota (e, onestamente, non è forse questo il punto?).

Proprietà della Griglia

Property

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Property

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Colonne

4

8

12

12

Colonne

4

8

12

12

Gutters

16px

16px

16px

16px

Gutters

16px

16px

16px

16px

Margini

40px

80px

80px

80px

Margini

40px

80px

80px

80px

Max Width

100%

100%

1200px

1440px

Max Width

100%

100%

1200px

1440px

Scala di Spaziatura Responsiva

Token name

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Token name

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

spacing-small

8px

12px

16px

24px

spacing-small

8px

12px

16px

24px

spacing-base

16px

24px

32px

40px

spacing-base

16px

24px

32px

40px

spacing-large

24px

32px

40px

64px

spacing-large

24px

32px

40px

64px

Questa Style Guide riflette il mio approccio al design, non solo come disciplina, ma come arte. È un esercizio di equilibrio tra creatività e precisione, tra struttura ed espressione. È anche un reminder che anche i progetti più semplici, come un portfolio personale, meritano attenzione e cura.

Questa Guida di Stile è un riflesso di come approccio il design, non solo come un compito, ma come un'arte. È un esercizio di equilibrio: tra creatività e precisione, tra struttura ed espressione. È anche un promemoria che anche le cose più semplici, come un portfolio personale, meritano attenzione e cura.

Grazie per aver esplorato questa guida. Spero ti sia piaciuta tanto quanto mi è piaciuto crearla.

E.

Disponibile per progetti di design system su prodotti digitali complessi.
Se questo approccio ti interessa, confrontiamoci.

© Edoardo Sportelli - 2026. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection. No reuse or redistribution without permission.

Disponibile per progetti di design system su prodotti digitali complessi.
Se questo approccio ti interessa, confrontiamoci.

© Edoardo Sportelli - 2026. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection. No reuse or redistribution without permission.

Grazie per aver dato un'occhiata!

Se desideri esplorare di più, puoi tornare alla pagina del portfolio. Non vedo l'ora di sentirti.

© Edoardo Sportelli - 2024
Vivere in Italia, a Fiastra, immerso nei Monti Sibillini. Come la Toscana, ma meglio.

Politica sulla privacy e protezione dei dati.


Divieto di riutilizzo o ridistribuzione senza permesso.

E.

Disponibile per progetti di design system su prodotti digitali complessi.
Se questo approccio ti interessa, confrontiamoci.

© Edoardo Sportelli - 2026. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection. No reuse or redistribution without permission.