Beam pattern

Example

HTML code


Jinja2 template code for Wagtail CMS


Beam patterns are a graphic background element that provide grounding and visual interest.

Using overlaid shapes with 9° angles and the full CFPB Green color palette, the beam pattern provides a bold and engaging graphic reference to the beam concept in our logo.

CFPB Beam pattern

Stylistic guidelines

Base shapes

Beam patterns are created using trapezoids and parallelograms that feature the 9° angle.

Base shapes for beams

Color

Beam patterns include all three CFPB Green tones. Using transparency increases the strength of the beam metaphor. Transparency should be achieved through opacity, not blending modes like multiply / darken / etc.

Composition

Beam patterns are composed of overlapping beams that frame areas of white space used for titles, text, and other graphic elements. Beams always point horizontally, not vertically.

Ideal composition

Solid green beam bleeds off the top of the layout. Beams alternate direction to create layered beam shapes.

Ideal composition of beams

Ideal composition

Layered beams anchor to the bottom, leaving plenty of white space above for type. This works especially well for horizontal layouts.

Ideal composition of beams

Poor composition

Beams float in white space, leaving little room for content. No transparency used.

Poor composition of beams

Poor composition

All three beams layer in the same direction, weakening the beam metaphor.

Poor composition of beams