40+
components
2
themes
0
drift
Web App2026·9 weeks·completed
ERP Organization Management System
Lead Full-Stack Developer / UI-UX Designer — Empower Sierra Leone Foundation (ESLF)
A complete design system and component library for a B2B SaaS, shipped from Figma tokens to production React.
The Challenge
Keeping design and code in lockstep across 40+ components and two themes without drift.
The Solution
A single token source piped into Figma and CSS variables, with Storybook visual tests on every PR.
Key Highlights
40+ production components with full documentation
Zero design-code drift via automated token sync
Two-theme system (light + dark) from single source
Storybook visual regression testing on every PR
Code Highlights
Token bridge
const theme = tokens.map(t => `--${t.name}: ${t.value};`);Generating CSS variables straight from the token source.
Visual test
test("Button renders", () => snapshot(<Button/>));Snapshot tests catch unintended UI changes before production.
Tech Stack
FigmaDesign TokensStorybookReact