Preview image. Unlock full-res
Color-pairing page with an isometric layer diagram of background/graphic/text, over two rows of swatch-in-swatch tiles showing approved fill and stroke combinations.
Summary
A color-pairing page: an isometric diagram explains the background / graphic-element / text layering, and two rows of nested swatch tiles below show approved fill and Poppy-stroke combinations.
Visual description
Two-column layout, heading "Color Combinations" over copy plus a "Note" repeating the Poppy-as-stroke rule. The right side opens with a rounded ecru panel headed "Suggested Color Pairings" containing an isometric exploded diagram of three stacked rounded planes labeled, top to bottom, "Text", "Graphic Elements", and "Backgrounds", with leader lines. Beneath it run two rows of six nested swatch tiles each: the top row shows a background color with a graphic block and a knocked-out center (white or black) demonstrating fill pairings; the bottom row shows the same combinations with a thin Poppy outline added around the inner shape, demonstrating the accent stroke. Together they map every approved background/graphic/text combination.
Key takeaway
The isometric layer diagram that names the three roles (background, graphic, text) before the swatches, so the nested-tile grid that follows is instantly legible. The second row isolating the Poppy stroke shows the accent as an additive layer, not a color swap.
Reuse notes
A clear way to specify multi-layer color pairings rather than single swatches. Reuse the "role diagram + nested swatch grid" pattern for any system where text, graphics, and backgrounds must be coordinated. Pairs with the ratio and applied-example pages around it.
From this deck: Docusign suggested color pairings
View deck
