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 🧱