Kelsey’s Design System · v0
This is a deep dive into how a design system actually gets built, following current best practices and documenting each decision as I make it. I’m starting from a minimal base so there’s something clear to build on and every token here is one I can explain. I’m learning as I go, and I’d like this to be useful to you too, whether you’re building your first system or you’re just curious how it all works.
The system’s philosophy: how the final designs should feel and what matters. design.md lives here.
The token layers that make up the visual pieces of the product. Tokens are structured in primitives → semantic → component.
OpenThe atoms that make up patterns in the product. Buttons, input fields, navigation links. This card is a component.
Coming soonCompositions of atoms and styles. This series of stacked cards is a pattern.
Coming soon