references/visual-composition.md · wp-patterns

Visual Composition Moves

When the request calls for a visually distinctive pattern, use these composition moves:

Oversized display type: use a short word or title at display scale with tight line-height, uppercase or italic treatment, and enough surrounding space. Keep letter spacing at 0 unless the design specifically needs a tracked wordmark.
Offset color fields: split a cover background with a hard-stop gradient or two-tone color field, then let the type or image cross the boundary.
Editorial cover image: use a full-bleed Cover block with image, dim/duotone treatment, and left-anchored copy; place the CTA in a clearly separated lower area.
Image plus quiet content: use Media & Text for case-study or portfolio patterns where the image carries visual weight and the content side stays intentionally sparse.
Header plus hero: combine a flex header with Site Logo, Site Title, and Navigation above a full-width Cover when the pattern is a page opener or starter page.
Post index as graphic layout: for Query Loop patterns, make dates and titles part of the visual hierarchy with large title links, strong separators, and pagination.
Repeated display text: repeat a single word or short phrase in varied tones when the design is poster-like, but keep it readable and avoid repeating long content.
Centered image on two-tone field: place a single image inside a constrained group over a split-color background for a gallery, collection, or album-style pattern.

These moves must still pass the Technical Validation Checklist in references/anti-patterns.md.