Welcome to my Style Guide, a document that’s as much an exercise in style as it is a testament to the depth of my design decisions, even for something as simple as a personal portfolio.

This guide is not merely a collection of rules; it’s a window into my thought process and my commitment to crafting a consistent, accessible, and memorable visual experience. It reflects my philosophy that design decisions, no matter how small, deserve attention—and a little bit of flair.

So, enjoy the journey.

Typography is the backbone of any design system, and my website is no exception. Here, I’ve created a type scale that balances clarity, hierarchy, and personality. It’s not just about looking good—it’s about ensuring that every word speaks with the right tone, whether it’s a headline shouting for attention or a caption whispering in the margins.

Headings

My headings are designed to establish hierarchy and grab attention without being obnoxious. They scale fluidly across devices, ensuring readability and elegance on everything from a compact phone screen to a widescreen monitor.

Heading

Larger Screens (L) S

Smaller Screens (S)

Use Case

Heading

Larger Screens (L) S

Smaller Screens (S)

Use Case

Heading

Larger Screens (L) S

Smaller Screens (S)

Use Case

H1

40x

32px

Page titles, hero sections

H1

40x

32px

Page titles, hero sections

H1

40x

32px

H1

40x

32px

Page titles, hero sections

H2

36px

28px

Section titles

H2

36px

28px

Section titles

H2

36px

28px

H2

36px

28px

Section titles

H3

32px

26px

Subsections, feature headers

H3

32px

26px

Subsections, feature headers

H3

32px

26px

H3

32px

26px

Subsections, feature headers

H4

28px

24px

Card titles, smaller headers

H4

28px

24px

Card titles, smaller headers

H4

28px

24px

H4

28px

24px

Card titles, smaller headers

H5

24px

22px

Supporting headings, labels

H5

24px

22px

Supporting headings, labels

H5

24px

22px

H5

24px

22px

Supporting headings, labels

Body

My headings are designed to establish hierarchy and grab attention without being obnoxious. They scale fluidly across devices, ensuring readability and elegance on everything from a compact phone screen to a widescreen monitor.

Heading

Larger Screens (L) S

Smaller Screens (S)

Use Case

Heading

Larger Screens (L) S

Smaller Screens (S)

Use Case

Heading

Larger Screens (L) S

Smaller Screens (S)

Use Case

Body

20px

20px

Paragraph text, long-form

Body

20px

20px

Paragraph text, long-form

Body

20px

20px

Body

20px

20px

Paragraph text, long-form

Small

16px

16px

Secondary text, captions

Small

16px

16px

Secondary text, captions

Small

16px

16px

Small

16px

16px

Secondary text, captions

Line Height and Spacing

To maintain readability, I’ve paired each font size with an appropriate line height and spacing:

Style

Line Height

Letter Spacing

Use Case

Style

Line Height

Letter Spacing

Use Case

Style

Line Height

Letter Spacing

Use Case

H1

1.2

-0.02em

Big, bold page titles

H1

1.2

-0.02em

Big, bold page titles

H1

1.2

-0.02em

H1

1.2

-0.02em

Big, bold page titles

H2

1.2

-0.01em

Section titles

H2

1.2

-0.01em

Section titles

H2

1.2

-0.01em

H2

1.2

-0.01em

Section titles

H3

1.2

normal

Subsections

H3

1.2

normal

Subsections

H3

1.2

normal

H3

1.2

normal

Subsections

H4/H5

1.5

normal

Smaller headings, card titles

H4/H5

1.5

normal

Smaller headings, card titles

H4/H5

1.5

normal

H4/H5

1.5

normal

Smaller headings, card titles

Body

1.6

normal

Paragraph text, articles

Body

1.6

normal

Paragraph text, articles

Body

1.6

normal

Body

1.6

normal

Paragraph text, articles

Small

1.5

normal

Captions, secondary text

Small

1.5

normal

Captions, secondary text

Small

1.5

normal

Small

1.5

normal

Captions, secondary text

Typography Summary

H1

60px

Edoardo

H2

48px

Edoardo

Edoardo

Edoardo

H3

40px

Edoardo

H4

34px

Edoardo

H5

28px

Edoardo

H6

24px

Edoardo

Body

20px

Me

Small

16px

Edoardo

Color Palette

Colors are emotional, even if we pretend they’re logical. For this portfolio, I’ve opted for a palette that feels professional, modern, and approachable. No wild experiments here—just clean, timeless choices.

Primary Color

The blue serves as a confident, grounding tone—a color that says, "Trust me, I’ve got this."

Blue-100

#0061FF

Blue-100

#0061FF

Blue-100

#0061FF

Blue-100

#0061FF

Blue-75

#335699

Blue-75

#335699

Blue-75

#335699

Blue-75

#335699

Blue-50

#668ACC

Blue-50

#668ACC

Blue-50

#668ACC

Blue-50

#668ACC

Blue-25

#99BBF0

Blue-25

#99BBF0

Blue-25

#99BBF0

Blue-25

#99BBF0

Blue-10

#D5E5FF

Blue-10

#D5E5FF

Blue-10

#D5E5FF

Blue-10

#D5E5FF

Neutral

grey-100

#05122C

grey-100

#05122C

grey-100

#05122C

grey-100

#05122C

grey-80

#2D374D

grey-80

#2D374D

grey-80

#2D374D

grey-80

#2D374D

grey-60

#555E6E

grey-60

#555E6E

grey-60

#555E6E

grey-60

#555E6E

grey-40

#7C8390

grey-40

#7C8390

grey-40

#7C8390

grey-40

#7C8390

grey-20

#A4A9B1

grey-20

#A4A9B1

grey-20

#A4A9B1

grey-20

#A4A9B1

grey-10

#CCCED2

grey-10

#CCCED2

grey-10

#CCCED2

grey-10

#CCCED2

grey-5

#F5F5F5

grey-5

#F5F5F5

grey-5

#F5F5F5

grey-5

#F5F5F5

Spacing

If typography is the backbone, then spacing is the air that allows design to breathe. For my portfolio, I’ve based my spacing system on a 4px base unit, scaling up in multiples of 4 for flexibility and rhythm.

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

Small

spacing4

16px

Small

spacing4

16px

Small

spacing4

16px

Small

spacing-5

24px

Medium

spacing-5

24px

Medium

spacing-5

24px

Medium

spacing-5

24px

Medium

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

This system ensures consistency across layouts and makes sure no element feels crammed or neglected. Because even buttons deserve their personal space.

Grid System

A grid system provides structure to my layouts, ensuring every element aligns perfectly—even if no one notices (and honestly, isn’t that the point?).

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%

Responsive Spacing Scale

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

A grid system provides structure to my layouts, ensuring every element aligns perfectly—even if no one notices (and honestly, isn’t that the point?).

Grid Properties

Property

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Property

Small (S)

Medium (M)

Large (L)

Extra Large (XL)

Columns

4

8

12

12

Columns

4

8

12

12

Gutters

16px

16px

16px

16px

Gutters

16px

16px

16px

16px

Margins

40px

80px

80px

80px

Margins

40px

80px

80px

80px

Max Width

100%

100%

1200px

1440px

Max Width

100%

100%

1200px

1440px

Responsive Spacing Scale

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

This Style Guide is a reflection of how I approach design, not just as a task, but as a craft. It’s an exercise in balance: between creativity and precision, between structure and expression. It’s also a reminder that even the simplest things, like a personal portfolio, deserve thoughtfulness and care.

Thank you for exploring this guide. I hope you enjoy it as much as I enjoyed creating it.

Thank you for taking a look!

If you'd like to explore more, you can head back to the portfolio page. I look forward to hearing from you.

© Edoardo Sportelli - 2024. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection.

Take the first step and explore what we can achieve together. hello@edoardosportelli.design

© Edoardo Sportelli - 2024. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection.

Thank you for taking a look!

If you'd like to explore more, you can head back to the portfolio page. I look forward to hearing from you.

© Edoardo Sportelli - 2024
Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better.

Policy Privacy and Data Protection.

Thank you for taking a look!

If you'd like to explore more, you can head back to the portfolio page. I look forward to hearing from you.

© Edoardo Sportelli - 2024. Living in Italy, in Fiastra, nestled in the Sibillini Mountains. Like Tuscany, but better. Policy Privacy and Data Protection.