Usage examples

div-action1

Contrast

Maintain sufficient contrast between the lines by making sure the thick line is five times thicker than the thin line.
Always start with the thick line above the message and finish with a thin line.

Composition

Always place dividers where the image is the least busy. This will increase readability.

div-action2

Body copy

Always place body copy beneath the thin divider. This will help the layout feel open and balanced.

Composition

Whether dividers are part of a standard or slim-jim brochure layout, they anchor the main message and span the distance between the margins.



Don’ts

div-dont1

Color

DON’T use the secondary palette for dividers as multi-colored layouts feel unsophisticated.

Scale

DON’T overemphasize the scale of the dividers because the visual balance of the layout will become too heavy.

Headlines

DON’T use the primary palette for headlines because they will become difficult to read.

div-dont2

Photography

DON’T use photography with obtrusive background colors as text and dividers will become difficult to read.

Dividers

DON’T use multiple thick dividers as the layout will become too complicated.