WW Design System
WW (formerly Weight Watchers) embarked on a huge redesign during the summer of 2018.
Primary and Secondary
These are used mostly for body text. All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for normal text, and 3:1 to large text.
The background colors appears behind images and components, such as cards.
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 help create distance between surfaces. They make the top most surface appear to be elevated. Focus attention on the highest elevation.
Utility buttons allow users to take actions, and make choices, with a single tap. Each icon is reduced to its minimal form, expressing essential characteristics.
Delight icons are designed to be simple, modern, friendly, and sometimes quirky and they are not actionable. Each icon is reduced to its minimal form, expressing essential characteristics.
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.
Column width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range at which a screen is viewed.
Gutters are the spaces between columns. They help separate content. Gutter widths are fixed values at each breakpoint range. To better adapt to the screen, gutter width can change at different breakpoints.
Margins are the space between content and the left and right edges of the screen. Margin widths are defined as fixed values at each breakpoint range. To better adapt to the screen, the margin width can change at different breakpoints.
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.