"Digital Styleguides"

Standardized Components + Living Style Guide = Brand Extension & Consistency

The How

Atomic Design

http://atomicdesign.bradfrost.com/table-of-contents/

The How (continued)

Pattern Lab

http://patternlab.io

"Pattern Lab is a living styleguide, component library, and prototyping tool all in one."

Live:

• Atoms: Typography + Links:
  • ​https://www.weightwatchers.com/sites/all/themes/custom/wwvs_bts/pattern-lab/public/?p=atoms-v3-typography
  • https://www.weightwatchers.com/sites/all/themes/custom/wwvs_bts/pattern-lab/public/?p=atoms-v3-buttons
• Molecules: Card:
  • https://www.weightwatchers.com/sites/all/themes/custom/wwvs_bts/pattern-lab/public/?p=molecules-card
• Molecules: Card Grid:
  • ​https://www.weightwatchers.com/sites/all/themes/custom/wwvs_bts/pattern-lab/public/?p=molecules-v3-slice-card-grid
• Organisms: Activity Section (toward bottom)
  • https://www.weightwatchers.com/sites/all/themes/custom/wwvs_bts/pattern-lab/public/?p=organisms-activity-187-section
• Page: Activity Page (full header/footer):
  • https://www.weightwatchers.com/sites/all/themes/custom/wwvs_bts/pattern-lab/public/?p=pages-OT-187-06-activity