Peak Design System
DESIGN @ WealthBar
The Problem
With no design system and an outdated style guide no one was using (yes, really), we were creating inconsistent product and wasting time reinventing patterns.
The Solution
We created a standard that would not only be more consistent and quicker to implement, but delightful to use and built to last.
Typography
Our goal: build pages that looked typeset by a Designer, without a single additional line of code.
To accomplish this, we defined the margins of headers to give default type a strong vertical rhythm.
Colour
A colour system designed with numerical weighting tied to accessibility.
This system would help us later creating theming for white labels. The effort (read: pain) of white-labeling pages using Peak vs not using Peak were worlds apart.
Buttons
Button styles with clear hierarchy and purpose, without creating clutter. And of course, with a functional yet stylish focus state.
We wanted to have flexibility, while maintaining consistency. It was difficult to create just enough button styles, without creating too many. I designed two ways of classifying: by colour and by style, each with specific usage guidelines.
