Design System Basics

A typical design system consists of:

Principles

Style Guide

Content

The language to design a more thoughtful product experience.

Design

The visual elements of the design system.

Component Library

The building blocks for developing new products and features.

Patterns

The individual pieces for creating meaningful product experiences.

"We should start with language, not interfaces" when creating a design system.

One, start with a fast, unified platform. Two, be scenario-driven when creating variations. And three, find key moments for visual brand expression.

So scenarios, not layouts, should drive variation

"Each pattern describes a problem "that occurs over and over again in our environment, "And then describes the core of the solution to that problem in such a way that you can use the same solution over and over again, without ever doing it the same way twice."

Successful design patterns don't exist in a vacuum. And whether you're designing for a design system for eight brands or one, your design patterns need to reflect the context that they're in, the people that are gonna be using them, the content that they need to display and how they need to all work together.

Successful design systems need to solve specific problems. We can't just design for modularity or layouts, or flexibility. We need to think about how every single pattern that we create is solving a specific problem for someone. And that means that our successful design systems need to start with content and with people.

Design Systems philosophy

Safire follows atomic design philosophy. Link.

Atomic Design uses a handy analogy of chemistry:

Atom

The atom analogy would break down the designs to its most individual element that it is still functional, a button for example.

Molecules

Then you can combine these atoms into smaller groups functioning together, these are called *molecules**. Think about an input field.

Organisms

Organisms are a bit more complex and they combine molecules and/or atoms; an example could be a header. Then you also have templates and pages, outside the analogy, but still used by Atomic Design

Templates

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. To build on our previous example, we can take the header organism and apply it to a homepage template.

Pages

Pages are specific instances of templates that show what a UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action.

Structure