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.
Spacing
space-14px
space-28px
space-416px
space-832px
space-1248px
space-1664px
Radii
sm
md
lg
full
Buttons
Interaction States
Default, hover, focus, active. Three elements I obsess over. Tab through to see the focus rings.
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)
Fast
Normal
Slow
Easings (discrete — not scaled)
Default
Out Cubic
Out Quart
Out Quint
In/Out
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
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
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