Components

Understanding atomic design: atoms

The term components is used to reference the variety of different modules that you can use to craft your emails; and using the atomic design model helps us think of our email interfaces as both a cohesive whole and a collection of parts.

In chemistry, atoms are considered the basic building blocks of matter; and in design, we use the term atoms to refer to the foundational elements of our email components—or modules—that can’t be broken down any futher without ceasing to be functional. For example: badges, text links, images, or buttons are all atoms.

Below is a list of all of the available atomic components, along with any restrictions regarding their use.

Badge

Orange badge

Used to highlight a promotion. Text should appear in ALL CAPS.

Blue badge

Used to highlight an article. Text should appear in ALL CAPS.

White badge

Used to highlight a promotion when appearing on a dark background. Text should appear in ALL CAPS.

Button

Solid button in Kiwi-80

This CTA should be used in the primary area of all email designs.

Ghost button in Kiwi-80

This CTA should be used in primary areas, as a second solid button would be too prominent.

Solid button in Fig-120

This CTA should be used in the primary area of all email designs.

Ghost button in Fig-120

This CTA should be used in secondary areas, as a solid button would be too prominent.

Solid button on Fig-120

CTAs should appear in white when placed on Fig-120.

Ghost button on Fig-120

This CTA should be used as a secondary button in white when placed on WR-Blue05.

Header button

There are two types of CTAs are specifically designed to be used for the email header. Please pay attention to their sizes.

Image

Images

Images are used throughout the email design system. Their suggested sizes are noted on them (WxH). Images are sized at 2x to allow optimal viewing on retina-ready screens.

The heights of all images are flexible, allowing for shorter or longer images where desired; however, the width of images should not be adjusted.

Video

The video component is used to display actionable video thumbnails and video links within a page.

Link

Some modules in this email toolkit use text links instead of large CTA buttons. It’s also possible to add text links to your body copy where necessary. A text link must always appear in Blueberry-80, and be underlined to add emphasis (except when being used as body copy against a darker or lighter colored backgrounds). When adding text links to any copy, the text link should always appear in the same font size as the surrounding copy.