Design Systems & Accelerators

Join our CXO, Jason Poole, as he walks you through the importance of a great design system to improve the speed of our development projects.

---

A key part of our Gesso Accelerator is our design system. It’s a robust toolkit of design tokens, components and patterns that give our projects a massive head start. Design systems are the modern way to manage design and user experience (UX) at scale. It provides a hyper degree of consistency and reliability for our project teams.

What is a design system?

No surprise that the great minds at Nielsen Norman Group have summed it up well:

“A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.” - Design Systems 101

That’s a great definition from a high-level perspective, but let’s get into the weeds a bit and define what this means in a more practical sense.

While there are many, we recognize four key benefits:

• As mentioned: it’s scalable. When everyone works from the same language, we can scale efficiently; it reduces design debt.
• It’s fast. Working with pre-existing components and relying on established guidelines mean we don’t always have to reinvent.
• It saves time/money. We don’t have numerous people trying to solve the same problems over and over.
• It creates a higher quality product. We get consistent and clear user experiences that are on-tone and on-brand.

What makes up a design system?

We subscribe to the atomic design principle (shout-out to Brad Frost) sans the chemistry analogy.

Tokens > Components > Patterns > Layouts > Pages

Tokens

Design tokens are the smallest visual design elements, the initial building blocks of the whole design system. Think colours, typefaces, spacing, radii, shadows, etc. 

Our design tokens are housed in Figma, providing a single point for designers to make no-code updates that flow directly into the rest of the system. Unlike a style or brand guide, this is not a static reference. These tokens connect dynamically to the rest of the design system.

Components

Components are all the actual assets you might encounter on a website or app: buttons, cards, straps, tables, forms elements, carousels, and more. And, of course, they are constructed using the design tokens. 

You might think, “Okay, cool, the components show us what all these things should look like — right?” 

And you’d be right, but only partially right, cause you’re also partially wrong. That’s because each component is fully coded, documented, tested, made accessible to a11y standards and responsive. You can imagine doing this for 80+ components represents significant work, and you’d be right (not wrong at all).  

We use Storybook to catalogue all of our components. SB provides a place for our teams to view them in isolation and access props and documentation. Mock data mimics real-world use cases. 

We’ve also gone the extra mile to pair each coded component with a Figma component, allowing us to create rapid prototypes for unique workflows and edge cases. 

Patterns

Multiple components are grouped together to form reusable patterns. Consider a header or footer, product tile grid or checkout forms. 

Layouts

The building blocks are coming together — when we take components and patterns and organize them on various grid structures, we create a layout.

Pages

This is where all roads lead: real content and data are populated into the layouts as a usable presentation layer (or front end). Pages are what our end users interact with on their devices of choice.

To learn more about experience design and how our design system can improve your site, visit our website or fill in the contact form below.