Primer

How do you refine an existing design system to make the product more cohesive?

Primer

primer.ai

Primer, an artificial intelligence company, builds synthetic analysts that collect large amounts of data and output meaningful, succinct insights in natural language.

Capabilities
  • Strategy & Process
  • Core Libraries
  • System Documentation
  • Audit of existing system

The Problem

Primer came to us with a living design system named Sentio. Sentio is a mature design system being used across two products, but it had grown as much as it could in its current state.

Our goal was to help Primer get their design system to a place where it could continue to scale, and help the design and development teams speak the same language to ease and quicken internal processes.

Guiding Principle

Refining an existing design system (but not breaking it) can help different product teams create a more cohesive experience.

Solution

The Scenery audited Sentio’s typography, spacing, and colors by reviewing the code and visual design alongside each other. Additionally, we balanced visual presentation of Sentio’s form fields, created a flexible grid system, and remade design files for clean SVG icons.

The Scenery applied our approach defined by Ether to refine the Sentio design system. We extracted a set of core colors from the existing Sentio color palette, resulting in a palette of 51 color variables down from 109. This creates a much more manageable and scalable environment for design and development.

Along those same lines, semantic html names were removed from visual presentation of typography. This allowed for semantic code to be abstracted from presentation, thus making the type system to be much more purposeful and flexible.

A system of six spacers was created to fit the needs of the existing design, down from 11. This created a system of spacers that have enough difference between them to allow for practical use without bloating the system. We also created a grid system that did not yet exist to allow for graceful flow of the content within Sentio’s product between all screen sizes.

Lastly, Sentio’s SVGs were simplified down to single paths that can now be colored and themed with one line of CSS. We delivered these new SVGs in one, clean Sketch file to serve as the singular source-of-truth going forward.

The Outcome

Primer was thrilled to see how Sentio had been refined—allowing their teams to create a more unified product across multiple tools with greater ease.