Atomic Design in Practice

Dariusz Winkler

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.

Non-linear process


  .link { color: blue; }

<a class="link" href="#">Link</a>

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

“We want navigation links to be red”

“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; }

Atomic Design: “We don’t have red links”

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>

Enforced reflexion

Enforced consistency

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

Dos, Don’ts and Challenges

Maintain shared mindset

Maintain shared language

Think globally, act locally


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

Thank you! / presentations

Dariusz Winkler