Saberr Design System

Saberr design system

UI Design


This one was a product team effort with myself owning the design and Figma components.


2018 - present

Working in an early stage startup is fast-paced. Rapidly experimenting with ideas and shipping product updates quickly. After a few years of no consistent branding, or guidelines, Saberr designs were inconsistent and builds were inefficient.

Our goal was to create a simple, flexible system that would help us work faster and create a more consistent experience.

Taking stock

An interface audit allowed us to see the different variations we had of each element, helping us make components that would be fit for purpose.

Variations of buttons and form elements
Variations of buttons and form elements


We started off by outlining a set of guiding principles that would help us make our decision making process simpler.

Our products should work for everyone regardless of their ability, situation, or choice of device.

Aim to add as little load or complexity to our users lives, that includes ourselves.

We have no idea what we might need to build in a years time. Our system is made up of a small set of well conceived building blocks rather than a large set of comprehensive ones.

It should be obvious to people how objects behave before interacting with them. We do the same for ourselves with good supporting documentation and constraints built in to our design system.

We reuse our blocks as much as possible, making life easier for us and our users. When we encounter a snowflake we contribute it to the system so that it can be reused.

Users spend most of their time on other sites. Use patterns that people are already familiar with, don't reinvent the wheel.

We learn from real people and incorporate our findings into an ever improving system. Build a system that is easy to add to, refine and update.


A selection of icons from our system
A selection of icons from our set
Type scale
Typography scale
Colour palette
Full colour palette
Components from the system
A selection of components from our component library

A design system is an ongoing project and can easily take a full-time developer and designer to maintain. Being a small team we made the decision to focus on the essentials, adding new components as we need them over time. Allowing us to avoid impacting our product roadmap. Although fairly simple, the system has proved extremely useful in removing ambiguity and helping us work faster.