Pros

• Ensures consistency
   
• Cleaner code base
   

• Keeps brand identity alive
   

• Reduces documentation
   

• Easier to adapt, test and estimate
   

• Reusable

Cons

• Constrains a designer when code base is inflexible
   
• Takes time to set up
   
• Tend to become inflexible

Examples

Audi

A list apart

Yelp

Salesforce

Mailchimp

Atomic Design

How to start

First things first

• Decide on pattern
   
• Have design briefing

Atoms

• Basic building blocks
   
• Example:
  • Font
  • Colour palette
  • Input
  • Label
  • Button
  • Animations

Molecules

• Groups of atoms
   
• Are the backbone of your pattern
   
• Example:
  • Form with a label, input and button
  • Navigation with list and items

Organisms

• Groups of molecules
   
• Shows the interface
   
• Creates reusable, standalone and portable components

Templates

• Groups of organisms
   
• Design starts coming together

Pages

• Instances of templates
   
• Placeholder text is replaced
   
• The place to test variations in templates