Atomic Design in Practice

Design System

A set of standards to manage design at scale by creating a shared language and visual consistency across different pages and channels

Atomic design is a mindset for creating maintainable design systems and consistent designs.

Composability

“We want navigation links to be red”

.link { color: blue; }

/** Atomic Design violation: Molecule alters an Atom */
.navigation .link { color: red; }

/** Atomic Design violation: Molecule defines an Atom */
.navigation-link { color: red; }

Evaluate requirements before solutions

• Why are navigation links red?
• Where else will we use red links?
• Does the red color exist in our design system?

Component variants

.link { }
.link-primary { color: blue; }

.link-navigation { color: red; }
.link-secondary { color: red; }

<nav class="navigation">
  <h2 class="headline">Menu</h2>
  <a class="link link-secondary" href="/">Home</a>
  <a class="link link-secondary" href="/blog">Blog</a>
  <a class="link link-secondary" href="/about">About</a>
</nav>

Review ideas in the context of the entire design system

Think globally

Handling violations

• Identify violation
• Raise the issue
• Find a solution
  • Reuse existing atom
  • Introduce new atom
  • Introduce atom variant
  • Make an exception

Tools & Examples

• Pattern Lab — Created by Brad Frost
  • Demo
• Storybook
  • React, Vue, Angular, Svelte, HTML, …
  • Demos
• Carbon Design System

Dos, Don’ts and Challenges

Maintain shared mindset

Maintain shared language

Think globally, act locally

(YAGNI)

Keep a living design system

Spend time to save time

Evaluate component variants

Avoid exceptions

Easy to implement, hard to maintain

Escalate Atomic Design violations

Unite design and implementation

• One source of truth often not feasible
• Keep pattern library synchronized with designs
• Document deviations

Create a component library

Standalone package

import { Button } from "carbon-components-react";
import { Button } from "@mycompany/components";
import Button from "@mycompany/button";

|-- components
  |-- button
    |-- button.story.js
    |-- index.js
|-- application
  |-- checkout

Atomic Design 🤜🤛 Atomic CSS

.margin-2 { ... }
.font-large { ... }
.focus-ring-default { ... }

:root {
  --margin-2: ...;
  --font-large: ...;
  --focus-ring-border: ...;
}

Adapt Atomic Design to your situation

Design Systems / Atomic Design

• Consistent user experience
• Reusal of components and patterns
• Faster design, implementation and testing
• Documentation for everyone