BFH LabsVictoria, BC, Canada

Hatch

Building Cloud 9, the design system Hatch grew up on

The Hatch Rest home screen

As Director of Design Systems at Hatch for almost three years, I led the implementation of Cloud 9, Hatch’s design system. This was my first attempt at creating a design system from scratch, and it involved integrating it into an application that had been on the market for over seven years. Starting with a legacy application required a thorough audit of the existing styles in production. The team and I delved into the iOS and Android codebases, discovering over 100 colors and numerous unused type styles.

Our first major success was implementing a new color scale of navy blues. Transitioning from hundreds of colors to our new scale involved designing a detailed transition guide for both native platforms, ensuring a smooth and safe shift. This achievement laid the foundation for a unified design language at Hatch. We then applied the same process to standardize type, buttons, form elements, and other common components across all platforms.

The establishment of Cloud 9 was an important milestone, setting Hatch on a path of design consistency and clarity. Today, Cloud 9 continues to grow and evolve with Hatch, and I take immense pride in the work we did.

Hatch: The Cloud 9 colour system: the navy scale, neutrals and accents
Hatch: Button Types next to the Edit Cue screen built from them
Hatch: Typography: typeface, header and content styles
Hatch: The Rest card and the same card with its edit menu open
Hatch: The component library: notifications, alerts, selection, cards, sliders, action sheets and button states
Hatch: Hatch Rest lamps and Restores side by side at true scale, each glowing in its light colour
Hatch: The Rise and Rest home screens and the device drawer
Hatch: The Rise screen labelled with its Cloud 9 components: section header, cue, toggle, card, mini player and tab bar