Usage examples

cont-action1

Transparency

Use a slight transparency when placing a container over an image.

Dividers

Use dividers to anchor headlines and text within large-scale containers.

cont-action2

Color

Select a color from the primary or secondary palette that matches the tone of the image.

Typography

When using secondary colors,
be sure to set typography using neutral colors. This helps establish an appropriate amount of contrast to ensure the text is legible.

cont-action3

Iconography

Containers can provide an anchor for icons as well as typography.

Color fill

Pantone 1575 C
Use a solid fill of color when using containers on a clean, white background.

Color stroke

Pantone 1205 C
Always use an outline when using containers on a colored background.


Dont’s

cont-dont1 DON’T place containers within other holding shapes like rectangles or squares.

DON’T introduce new holding shapes to hold iconography.