Project Vision

Guideline was undergoing a rebrand and needed a new, Figma-native design system to help roll out their new brand while unifying the design language across their various products and properties.


Design systems, Design tokens, Figma, UI/UX, Cross-platform design, native apps, responsive web


Design system, Design guidelines, Token library, Component library, Design system training



The Challenge

Guideline had just gone through a rebrand, by Ueno, that needed to be translated to a new, Figma-native design system. They understood how crucial it was to establish a design system to roll out the brand but also scale the company’s growing product offerings quickly and efficiently.

Before and after of the guideline branding
Collage of design system components
Before and after of the guideline branding

The Solution

Our audit found that the Guideline design team already had beautiful user interfaces as well as previous explorations for a design system that were quite good. With these base styles, combined with the new brand identity, we had a solid visual design direction.

We then set our focus to translate these styles to a scalable design language that would work well across multiple platforms and devices, and for multiple branded themes—serving bespoke look and feels to their different audiences and user types.

Design system audit outcomes presentation slides

Establishing the design foundations

The first step in establishing our platform-agnostic design language was to capture and translate the design decisions made during the branding process in a visual style framework using design tokens.

To start, we established a base set of color primitives based on the new brand palette by expanding each color to include lighter and darker shades to account for additional interaction states and use cases when building digital interfaces. Once we had our color primitives, we then created semantic palettes to serve specific use cases like foreground, background, borders, etc. We then moved on to define the rest of our design tokens including grids, sizing, spacing, shadows, borders, and radiuses.

Creating the component library

After reaching our initial draft of our style guide and design tokens, we used the lists of components used across existing product we gathered during our audit, prioritized them based on commonality, focusing on buttons and other smaller components that are most often used and combined to create larger components and expanded from there.

Collage of design system components
Collage of design system components

Pilot explorations

It is critical that all the styles and components work well together. We test this by recreating existing UIs with the new system, allowing us to identify visual issues in our styles while testing the user experience of the components and interaction affordances for end users and of the team of Guideline designers using our design system to design in Figma.

Examples of documentation for various components and file covers for different component libraries
Examples of documentation for various components and file covers for different component libraries

Writing thorough documentation

It’s important that everyone feels comfortable using and implementing the design system. Our guidelines give a straightforward explanation of various styles and components and how to use and employ them in designs.

We often schedule and record live training sessions with the internal design team, create training videos in Loom, and draft an initial governance process for versioning and how to maintain and evolve the system over time.

Additional credit:
  • Victor Erixon (product design) for his collaboration and exceptional attention to detail and visual design polish.
  • Ueno for their partnership and giving us the opportunity to lead this project

Have a project in mind?

Let's get to work.

Submit a project