DocuSign suggested color pairings

Summary

The color-pairings page: an isometric three-layer diagram labeling background, graphic, and text levels, above a grid of nested-square tiles showing approved color combinations.

Visual description

Standard page chrome ("Color" / "Color Combinations", page "31"). The left column heading "Color Combinations" runs over a paragraph and a "Note:" about Poppy as an outline accent. The right area opens with a rounded ecru panel titled "Suggested Color Pairings" holding an isometric exploded diagram of three stacked rounded planes with leader lines labeling them Text, Graphic Elements, and Backgrounds. Beneath, a 6-column, 2-row grid of tiles shows concentric nested squares (a background color, a graphic-element color, an inner text block). The top row uses solid inner blocks; the bottom row swaps the middle ring for a thin poppy stroke, illustrating the accent-as-outline rule.

Key takeaway

The isometric exploded stack makes the abstract idea of background/graphic/text layers tangible before the swatch grid gets concrete. Showing the same pairings once with solid fills and once with a poppy outline teaches the accent rule by direct comparison.

Reuse notes

A reusable pattern for documenting layered color relationships, not just flat pairs. The nested-square tile is a compact way to encode three roles per combination; reuse the exploded diagram to set up the mental model first.