Design System

Every token, component, pattern this site runs on. All here.

Typography

H1 The quick brown fox
H2

The quick brown fox jumps

H3

The quick brown fox jumps over the lazy dog

H4

The quick brown fox jumps over the lazy dog

Body

The quick brown fox jumps over the lazy dog. Systems, products, and tooling are the work I'm most proud of.

Small Currently based in Milan, Italy

Weights

Regular · 400The quick brown fox jumps
Medium · 500The quick brown fox jumps
Semibold · 600The quick brown fox jumps
Bold · 700The quick brown fox jumps

Colors

Surface
Elevated
Accent
Accent Hover
Text Primary
Text Secondary
Border
Green

Focus Ring

One token for every focusable element: --focus-ring. Light mode swaps in the darker accent-hover so it stays visible on cream. Dark mode keeps the yellow accent. Tab into the buttons below to see it.

Link

Spacing

space-1
4px
space-2
8px
space-4
16px
space-8
32px
space-12
48px
space-16
64px

Radii

sm
md
lg
full

Buttons

Interaction States

Default, hover, focus, active. Three elements I obsess over. Tab through to see the focus rings.

Primary button
default
hover
focus
active
Nav link
defaultWork
hoverWork
focusWork
activeWork
Skill pill
defaultFigma
hoverFigma
focusFigma
activeFigma

Cards

Project Title

Design Systems
+40% team velocity

Another Project

Product Design
Shipped to 10M users

Badges & Labels

Design Award
Best Portfolio
Webflow
Figma

Shadows

Button Shadow
Card Hover

Borders

Accent border
Subtle border

Motion

Durations (scale with --motion-scale)

Fast0.25s
Normal0.35s
Slow0.6s

Easings (discrete — not scaled)

Defaultease
Out CubicUI
Out QuartHover
Out QuintReveal
In/OutPanel

Hover any box to preview. prefers-reduced-motion is respected.

Text Patterns

Display Display Text
Quote
Systems thinking, applied down to the last component.
Credential Product Design & Design Systems at Toggl · Milan
Context Currently based in Milan, Italy
Status
Currently: Building an agentic design system

Skills & Tags

Figma React TypeScript Design Tokens Storybook Accessibility

Accordion

Form Elements

Success state
Error state

Stats

40%
faster shipping
200+
components
10M
users reached

Dark Block (Testimonial)

“The best design systems person I’ve worked with.”

Former Manager, Toggl

Layouts

Horizontal Header

Section Title

Supporting text that frames the section below.

Two-Column Grid

Left Column

Sticky sidebar content. Headings, navigation, or context labels.

Right Column

Main content area. Cards, text, services, resume entries. The wider column, 8 of 12 grid units.

Micro Elements

Hamburger
Divider
Status Dot
Nav Underline