Hibana UI Kit

When I joined SparkPost in 2019, the UX team already had a robust component library in React (check out Matchbox on Github). However, the group was just beginning a full-app redesign, taking a component-first approach.

This was fortunate timing - not only could I make key contributions to the visual redesign and component optimization, but our team was in a great position to lay the foundation for a design system. From my experience as a founding member of the Bloomberg BNA design system project, I knew the tremendous benefits of having the design team equipped with a comprehensive and flexible UI kit. I quickly got to work planning and laying the groundwork for a token-driven library in Sketch.

Having led the effort on establishing our UI kit, building the components, and organizing the library, this initiative remains one of my largest contributions and responsibilities to my team.

I built this library to provide direct access to the core most elements of the system - icons, typography, spacing, and color - while also offering more complex components featuring rich customization through overrides, automatic layouts, and other advanced features of Sketch.

In collaboration with our front end engineering team, this UI Kit (and the system as a whole) has been designed and built to promote best practices concerning accessibility.