Forma UI
An open-source design system built for scale and accessibility
Overview
Forma UI is an open-source design system I've been building as a reference implementation for teams who want a thoughtful, accessible, and highly customisable foundation. It ships with a fully synced Figma library and a React component package.
The Challenge
Most open-source design systems either lack design quality or engineering rigour — rarely both. I wanted to create something that designers and engineers would both be proud to use, with zero compromise between the two.
Process
Audit & Research
Analysed 12 popular design systems to identify the most common gaps in documentation, accessibility, and design-to-code fidelity.
Token Architecture
Designed a 3-tier token system (primitive → semantic → component) that supports theming, dark mode, and full brand customisation with a single token swap.
Component Library
Built 45+ components with full keyboard navigation, ARIA compliance, and responsive behaviour. Each component ships with usage guidelines and props documentation.
Documentation & Launch
Wrote comprehensive Storybook documentation with interactive examples, copy-paste code snippets, and do/don't guidance for every component.
Solution
Forma follows a token-first architecture, uses Radix UI primitives for WCAG accessibility compliance, and ships with a Figma library that stays in perfect sync with the codebase through an automated token pipeline.
Results & Outcomes
1,200+ GitHub stars in the first 6 months
Adopted by 80+ projects worldwide
100% accessibility score on all components
Featured in CSS-Tricks and Smashing Magazine