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

Smaller Screens

Use Case

Heading

Larger Screens

Smaller Screens

Use Case

Heading

Larger Screens

Smaller Screens

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

32px

26px

Section titles

H2

32px

26px

Section titles

H2

32px

26px

H2

32px

26px

Section titles

H3

24px

22px

Subsections, feature headers

H3

24px

22px

Subsections, feature headers

H3

24px

22px

H3

24px

22px

Subsections, feature headers

H4

20px

18px

Card titles, smaller headers

H4

20px

18px

Card titles, smaller headers

H4

20px

18px

H4

20px

18px

Card titles, smaller headers

H5

18px

16px

Supporting headings, labels

H5

18px

16px

Supporting headings, labels

H5

18px

16px

H5

18px

16px

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

14px

14px

Secondary text, captions

Small

14px

14px

Secondary text, captions

Small

14px

14px

Small

14px

14px

Secondary text, captions

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

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

Accent Color

accent

#005DFF

Links, CTAs, interactive elements

accent

#005DFF

Links, CTAs, interactive elements

accent

#005DFF

Links, CTAs, interactive elements

accent

#005DFF

Links, CTAs, interactive elements

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.

E.

Currently available for product design roles
and system-driven projects on complex digital products.
If this way of thinking resonates, lets discuss a product.

© 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.

Currently available for product design roles
and system-driven projects on complex digital products.
If this way of thinking resonates, lets discuss a product.

© 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.

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.


No reuse or redistribution without permission.

E.

Currently available for product design roles
and system-driven projects on complex digital products.
If this way of thinking resonates, lets discuss a product.

© 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.