Framekit UI

The brief

A fintech client came to Montu Agency needing a component library to replace the inconsistent, undocumented collection of one-off React components their product team had accumulated over three years. The requirements: accessible, documented, consistent with their Figma design system, and maintainable by engineers who hadn't built it. I took it as a solo contract alongside my agency work.

What I built

40+ components across four categories: form elements, data display, navigation, and feedback. Every component was built to WCAG 2.1 AA accessibility standards — keyboard navigation, screen reader labels, focus management, colour contrast ratios. Not as an afterthought, but as the first constraint.

The Storybook documentation was written as the product, not the afterthought. Every component has three things: a usage example with the happy path, a set of edge case stories covering error states, loading states, and empty states, and a props table generated from TypeScript types. An engineer who's never seen the library can get productive in under an hour.

The Figma token pipeline was the part that took the most time. The client's design team worked in Figma with a variables system — spacing, colour, typography, radius. I built a Token Studio integration that exported those variables to JSON, which the library consumed as CSS custom properties at build time. When the design team updated a colour token in Figma, the library reflected it on the next build without an engineer touching a file.

A decision I'd revisit

I built the form components with a custom validation layer rather than integrating a library like React Hook Form or Zod. At the time it felt like keeping dependencies lean. In practice, the client's engineers ended up wrapping the components in React Hook Form anyway, which created a double-validation layer that occasionally conflicted. I'd have built the integration in from the start.

Outcome

The library shipped in Q4 2022 and is still in production. The client's product team has extended it with around a dozen additional components built on the same foundation. The Figma token pipeline is still running. I know this because the client emailed eighteen months after the contract ended to ask about a small change — which is the best kind of reference a piece of contracted work can have.