Chromaticity, Colorways, Textures, and PatternsGraphic Standards Manual

Patterns

Patterns and textures for data visualization, accessibility-minded charts, oceanographic or topographic mapping, illustration, and other uses as they arise.

Edit this page

The library

Six base patterns, each drawn in a single brand color or tint over another. They are live CSS from Pencil Box, so they scale cleanly and recolor with color and background.

Grid
doi-pattern--grid

Dots
doi-pattern--dots

Lines
doi-pattern--lines

Diagonal
doi-pattern--diagonal

Zigzag
doi-pattern--zigzag

Wave
doi-pattern--wave

Grid, Manila on Blue

Diagonal, Red on Manila

<div class="doi-pattern doi-pattern--dots"
     style="background: var(--color-black-100); color: var(--color-manila-100)"></div>

Colorways

Patterns follow the color rules. Black and Manila first; then tints of Black; then Blue and Red and their tints, sparingly.

Manila on Black

Manila on Blue

Blue on Blue 5%

Red on Manila

Manila on Black 75%

Black on Black 30%

Red 50% on Manila

Manila on Red

Broadcast interference

Scan lines and a red-and-cyan fringe recall the Department’s short-lived public access television station of the late 1980s. It is an archival effect, not a house style: use it for headlines on Blue or Red fields, in moments that are meant to feel transmitted.

In the Supreme Court's 1964 landmark case on obscenity and pornography, Justice Potter Stewart famously wrote: “I know it when I see it.”

<div class="doi-broadcast" style="background: var(--color-blue-100)"><p>…</p></div>

Manual spread: white headline type on a blue television screen, with scan lines and color fringing. — Neue Haas Grotesk on an experimental public access television station run by the Department in the late 1980s.Manual, pp. 26–27

Guidelines

Use patterns to tell values apart in charts and maps, so meaning never rests on color alone.

Don't

Put a pattern behind body text, or layer two patterns on one shape.