Design Systems
Personal Design System
A token-driven component library — buttons, forms, cards, tabs, and modals — that I reuse across my own personal projects instead of rebuilding UI from scratch every time.
Overview
This system started in Figma as a way to keep my personal projects consistent. I build a lot on my own — side projects, experiments, one-off ideas — and without a shared set of tokens and components, every new project ends up with its own slightly different button, its own spacing, its own color choices.
So instead of designing each project from scratch, I built a set of reusable tokens and components first, then assemble screens out of them. The goal is a system that feels cohesive without feeling rigid: a small color palette, a predictable spacing scale, and components that hold up whether I'm building a dashboard, a landing page, or a quick prototype.
Foundations
Every color, radius, and spacing value in this page is pulled directly from the Figma variables defined in the design system — not hand-picked to look nice in code.
Color
neutral/50
#FAFAFA
neutral/100
#F4F4F5
neutral/200
#E4E4E7
neutral/300
#D4D4D8
neutral/400
#A1A1AA
neutral/500
#71717A
neutral/600
#52525B
neutral/700
#3F3F46
neutral/800
#27272A
neutral/900
#18181B
neutral/950
#0F0F10
Action colors
action/primary
#18181B
action/secondary
#F4F4F5
action/destructive
#B82323
action/info
#1F4399
action/success
#1F6E42
action/warning
#E26A1C
action/disabled
#E4E4E7
Radius
Spacing
Components
A few of the core components, live. Click around — these aren't static screenshots.
Form Field
We'll never share your email
Select
Preview
This card updates live based on the theme you pick below.
Theme
Controls the app's appearance.
Tabs
Pill
Underline
An annual pass granting entry to over 2,000 federal recreation sites, valid for you and three guests.
Tooltip
Icon Buttons
Reflection
Building the system before the screens changed how fast the rest of the project moved — new screens became an exercise in composition, not invention.
The harder part was resisting one-off exceptions. Every time a screen seemed to need a slightly different button or spacing value, that was a sign the system was missing something, not that the screen was special.