Building an Atomic Design System

Tim Wright, @csskarmaRevolve Conference 2016

Building an Atomic Design System

Content Design Layout


The CMS


The CMSClient: Can you update my photo on the website? Developer: Sure, let me know if there’s anything else you need!

Client: EMERGENCY! There’s a typo on the home page. Developer: Fixed!

Client: Can you add our phone number to the contact page? Developer: …yeah, sure

December 24, 1992


The CMSClient: We hired someone, can you add them to the about page? Developer: …uh huh

Client: That person got fired, can you take them down ASAP?! Developer: Good news! I built you a CMS, so you can make these all these changes yourself!


– Sun Tzu, The Art of War

“There are [only a few] musical notes, yet the combinations of these […] give rise to more melodies than can ever

be heard.”


Style Guide


BUTTON

Text Input

Checkbox Radio Button

Select Menu

Textarea

Style Guide


SIGN IN

Password

Username

Remember Me

Sign In


SEARCH

SearchSearch


Checkout

CHECKOUT

Name

I have read the privacy policy

State

Street Address

Zip Code

Credit Card Number


BUTTON

Text Input

Checkbox Radio Button

Select Menu

Textarea

Style Guide


The Design System


– Peter Drucker, Managing Oneself

“It takes far more energy and work to improve from incompetence to

mediocrity than it takes to improve from first-rate performance to excellence.”


Content Design Layout

System Patterns


Content Patterns


Content PatternsEvents

URL: http://dogs-with-beards.com

Title: Bearded Dogs

Description: If your dog has a beard, this event is for you!

Image(s):


Content PatternsArticle

URL: http://this-article.com

Title: Amazing Article about Dogs

Author(s): Bobby Orr

Publish Date: Oct. 1, 2016

Content: Lorem Ipsum…

http://this-article.com


Design Patterns


Design PatternsNarrow Card

Lorem ipsum dolor sit ametMorbi sagittis mauris posuere fel ornare, porttitor euismod augue eleifend.

LABEL

Dogs with BeardsIf your dog has a beard, this event is for you!

EVENT


Design PatternsWide Card


LABEL


Design PatternsWide Card

Dogs with BeardsIf your dog has a beard, this event is for you!

EVENT


Design PatternsWide Card, no image

Dogs with BeardsIf your dog has a beard, this

event is for you!

EVENT


Design PatternsCall to action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend hendrerit neque id tempor. Curabitur placerat commodo erat sit amet volutpat.

CTA Button

Lorem ipsum dolor sit amet



Come out to the park with your bearded dog for some fun in the sun. If you’re dog doesn’t have a beard already there will be a shaving station.

Don’t Miss the Bearded Dog Event



We have the best newsletter, it’s great… it’s the best newsletter of all time. You’ll love every email we send you. It’s the best.

Sign Up

Sign Up for Our Newsletter


Layout Patterns


Hero

Navigation

Feature One

Feature Two

Feature Three

Call to action

Footer


Layout PatternsThe Master Template

Content Zone A

Content Zone C

Content Zone D

Master Template

Content Zone B


Layout PatternsContent Zone B

Purpose

Rules

Layout Style

Technical Dependencies

Voice & Tone


Layout PatternsModule Modifications


CATEGORY


CATEGORY


Layout PatternsTemplate Modifications


Layout PatternsTemplate Modifications




Designer

Editor

CMS

System Patterns

“I need a button”“Here’s a button”

“The button should say, “Learn more about dogs.””


LEARN MORE ABOUT DOGS


– Elon Musk, Miscellaneous rant, 2016

“We realized that the true problem, the true difficulty, and where the greatest potential is – is building the machine

that makes the machine.”


Thank you for listening…and I’ll try and do better next time.