How we do design systems

We have a design system, we call it “Beam” ☄️

Beam is our core product design system. We also have a web design system and email design system under the Beam umbrella ☂️

This is how we do design systems…

Design systems speed up design and development cycles 🏎️

They ensure consistency with a shared language, and that we’re not re-solving the same problems.

They ensure our users get a familiar and consistent brand experience, and a quality UI.

Lack of a design system you’ll end up with random “Frankenstein” UI, and subjective decisions all over the place 🧌

A lack of consistency leads to an impression of poor product quality, designers and engineers doing things multiple times, and lots of design debt 💰

Our design systems all use the same foundational design tokens: color, spacing, elevation, iconography. These are defined in Figma and our codebase as variables.

Our design system starts in Figma. This is where we designed it out and thought through the different patterns and components 🧱

Our Figma libraries enable designers to move fast and design consistently 🏎️

On the dev side we use Storybook and Chromatic.

Storybook is where our React components and states live. Chromatic publishes and helps us test + review coded components. These components match whats in Figma & enable our engineers to move fast and code consistently 🏎️

We use Supernova for documentation and reference for designers & developers. These are most helpful when new people start to get up to speed with Beam, & for documenting decisions that get made. Docs include things like icons, animation guidelines &…