Calipso Design System

The challenge

When I joined the team there were several competing libraries and approaches to the design system. This caused visual inconsistency, duplicated effort and friction with engineering. The goal was to consolidate what already existed, keep the good practices, and define new rules that would act as the single source of truth for design and engineering. We wanted: a unified and scalable design system, clear rules for developers, reusable patterns, and documentation the whole team could reach.

Process

1. 01

   Research

   I interviewed developers and PMs and reviewed the technologies used on the frontend. I analysed the existing flows to identify the base components, and deepened my knowledge of Atomic Design applied to design systems.

2. 02

   Design

   I started from the brand guidelines and adjusted the colour palette to meet accessibility criteria. I defined tokens, atoms, molecules, organisms, templates and pages, and prototyped the first animations and state transitions.

3. 03

   Development / Automation

   I documented the do’s and don’ts for each component and built the system’s Storybook with the team. We also laid the groundwork so documentation could later be generated with AI and published on a site accessible to everyone.

4. 04

   Data analysis

   I measured consistency, adoption, and design and prototyping times before and after the system.

Role and tools

Outcomes

• Libraries and components consolidated into one system
• Greater visual consistency and standardised design patterns
• Reduced UI design and prototyping time
• Smoother collaboration with engineering and clear rules for implementation

What I learned