Filippo Piggici / Portfolio

Foundations

A compact set of foundations used across this portfolio, mapped directly to production tokens and Tailwind utilities.

01 / Colour

Semantic colour tokens map to Tailwind utilities and define the light and dark themes.

Light theme

Canvas--color-canvasbg-canvas
Surface--color-surfacebg-surface
Primary text--color-text-primarytext-text-primary
Muted text--color-text-mutedtext-text-muted

Shared token

Project accent--color-project-accentbg-project-accent

Dark theme

Canvas--color-canvasbg-canvas
Surface--color-surfacebg-surface
Primary text--color-text-primarytext-text-primary
Muted text--color-text-mutedtext-text-muted

Control hover

--color-control-hover

A lighter overlay in the light theme and a stronger one in the dark theme keeps the state equally visible.

LightDark

02 / Typography

Avenir Next · four weights · tighter letter spacing for display text

Outverse

104px type · 94px line · Medium

Streaming Calculator

61px type · 61px line · Medium

Catch Me

48px type · 48px line · Semi Bold

Selected project

24px type · 30px line · Semi Bold

Body — Product and frontend engineering for complex systems.

16px type · 24px line · Regular

Small — Supporting copy and contextual guidance.

14px type · 20px line · Regular

Navigation · Experience · System · Music

13px type · 16px line · Regular

Caption — 2021 to Now · Frontend & Product

12px type · 16px line · Regular

Now playing · Moyo

10px type · 14px line · Semi Bold · +0.10em

03 / Spacing & shape

4px spacing base · 0.5px rules · restrained corner radii

4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 56 · 64 · 72px

Use 4–24px within components and 32–72px between major sections.

SM 4px · MD 12px · LG 18px · XL 24px · Full

Use rounded corners for containers, media, popovers and circular controls. Keep content cards square.

04 / Applied component

One component, two themes and real browser interaction states.

Light theme

The component keeps the same semantic utilities while its token values change.

Dark theme

The component keeps the same semantic utilities while its token values change.

Same utilities

Hover or use the keyboard to inspect the actual states.

  • bg-surface
  • text-text-primary
  • hover:bg-control-hover
  • focus-visible:outline-project-accent
  • disabled:cursor-default
  • disabled:opacity-40