Calibre Design System
Calibre is a bootstrapped SaaS business offering web performance monitoring. Often, small, bootstrapped teams are continually working in an environment of scarcity—not enough people, time or monetary resources to execute on important initiatives. Calibre is no different.
With no designer on staff during the first few years, both marketing and the product were built with design sense but no architecture to create brand and cohesiveness. At some point, the need for an overarching system becomes too urgent not to prioritise.
I was responsible for creating a design system in Figma of dozens of components and a visual language that encompassed marketing material, with supporting documentation.
Creating a Design System
Historically, Design Systems on the web emerged from mostly large organisations. Google, Salesforce or AirBnB are perfect examples. At scale, a Design System becomes a necessity: a single source of truth for hundreds, if not thousands of designers and engineers. It’s untenable to build products without one.
However, in the case of small teams who often cannot afford hiring designers and kicking off teams to create a Design System, its purpose and scope change.
↑ Above: The speed of creating marketing properties with Calibre Design System.
Prioritising visual language
Visual language lies at the core of any Design System and represents essential design properties. Often referred to as design tokens or atoms, in our case, visual language spans over typography, colour and spacing.
Design tokens require less time to produce than a complex UI component library, yet can have a massive difference in the perception of the brand and the product. They can effectively be used by engineers (especially taking into account their design sense and product experience) to create new components and marketing material at velocity. And that’s precisely what Calibre needed at this stage.
↓ Below: Calibre’s Design Tokens—brand colors and typography.
The visual language was then extended with essential elements such as buttons, forms, labels, refreshed logotype and more complex components—i.e. navigation, footers, iconography.
When working with scarcity, it becomes crucial to establish which initiatives bring the most impact and identify opportunities to iterate.
↓ Below: Examples of components included in the system.
Empowering contributors
Design Systems are only useful when they’re actively maintained and can be easily consumed by anyone working on the product.
Because Calibre’s Design System was built in Figma, it’s easily accessible to anyone, on any operating system, as quickly as opening a website. More importantly, updates to the Team Library, where the system lives, are pushed automatically to all members, so everyone’s always up-to-date. Figma also supports prototyping and code snippets—both great features for bridging the gap between designers and developers.
Calibre’s Design System exists as a visual language and a set of documented components that have been translated into Storybook UI library powering upcoming marketing and product redesign.
The creation of the design system has empowered everyone in the organisation to launch new marketing pages rapidly and consistently as well as improve the product’s interface with confidence.
Position
Design Lead
Company
Calibre
Year
2019
Responsibilities
- Design Systems
- Design Ops
- Documentation
