WW Design System

UI

WW (formerly Weight Watchers) embarked on a huge redesign during the summer of 2018.

Colors

Primary and Secondary

Typography

This example uses the National 2 typeface for all headlines, subtitles, body, and captions, creating a cohesive typography experience. Hierarchy is communicated through differences in font weight (Bold, Medium, Regular), size, letter spacing, and case.

Shadows

Shadows help create distance between surfaces. They make the top most surface appear to be elevated. Focus attention on the highest elevation.

Iconography

Grid

The Weight Watchers responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. The layout grid is made up of three elements: columns, gutters, and margins Content is placed in the areas of the screen that contain columns.

Text fields

Text fields let users enter and edit text. They should stand out and indicate that users can input information. They should make it easy to understand the requested information and to address any errors.

Buttons