Facet
Facet is a compact design system built to give personal projects a consistent, editorial foundation. It codifies tokens, a type scale, and a set of accessible React components so that starting a new project is a matter of composition, not reinvention.
- Role
- Designer & engineer
- Year
- 2024
- Status
- Live
- Category
- Design
- Tools & technologies
- ReactTypeScriptTailwindFigmaStorybook
The problem
Every new project restarted the same foundational decisions — colour, spacing, type — slightly differently, and the drift showed. I wanted one considered foundation I could trust.
Context
An ongoing personal system, refined across several projects rather than built in one sprint.
Key decisions
Tokens as the single source of truth
Colour, type, spacing, and motion live as tokens shared between Figma and code, so design and implementation cannot drift apart.
Accessibility built in, not bolted on
Focus states, contrast, and keyboard behaviour are part of each component's definition, not a later audit.
Gallery
Outcomes
- Three subsequent projects started from Facet instead of a blank file.
- The token layer made a full visual retheme a one-file change.
Lessons learned
- A design system is only as good as the constraints it makes comfortable to follow.
- Documenting the 'why' behind a token matters more than the token's value.
Related work
