Design System Playground
Live-edit component variants and styling tokens to see changes reflected in real-time across UI patterns.
Why this exists
I built this system because I was rebuilding the same five things on every project. Buttons that almost matched. Spacing that drifted by 2px between screens. Form fields with three different focus states depending on which file I copied from. The playground is where I keep the canonical versions. This document is how I keep track of what they are and how they should behave.
It is also a portfolio piece. I want anyone who lands here to see how I think about systems: tokens before components, behavior before decoration, accessibility before everything.
Principles
- Clarity over cleverness. If a component needs a tooltip to be understood, the component is wrong. I rewrite before I document.
- Tokens before components. Every color, space, radius, and shadow is a named token. Components reference tokens. Screens reference components. I never hard-code a value at the screen level.
- Predictability is a feature. A button should look and behave the same whether it lives in a marketing page, an onboarding flow, or an admin panel. Surprise is friction.
- Accessibility is the baseline, not the polish pass. WCAG 2.1 AA is the floor. Focus states, contrast ratios, keyboard paths, and screen reader behavior get specified at the same time as visual design, not after.
The playground includes a live theme editor, a drag-and-drop template builder, a component library and a developer handoff guide.
Design System Playground
Live-edit component variants and styling tokens to see changes reflected in real-time across UI patterns.
Why this exists
I built this system because I was rebuilding the same five things on every project. Buttons that almost matched. Spacing that drifted by 2px between screens. Form fields with three different focus states depending on which file I copied from. The playground is where I keep the canonical versions. This document is how I keep track of what they are and how they should behave.
It is also a portfolio piece. I want anyone who lands here to see how I think about systems: tokens before components, behavior before decoration, accessibility before everything.
Principles
- Clarity over cleverness. If a component needs a tooltip to be understood, the component is wrong. I rewrite before I document.
- Tokens before components. Every color, space, radius, and shadow is a named token. Components reference tokens. Screens reference components. I never hard-code a value at the screen level.
- Predictability is a feature. A button should look and behave the same whether it lives in a marketing page, an onboarding flow, or an admin panel. Surprise is friction.
- Accessibility is the baseline, not the polish pass. WCAG 2.1 AA is the floor. Focus states, contrast ratios, keyboard paths, and screen reader behavior get specified at the same time as visual design, not after.
The playground includes a live theme editor, a drag-and-drop template builder, a component library and a developer handoff guide.