# Placement Patterns

## Hero Media

- Choose hero media after defining the first-screen message.
- Constrain media by the intended hero height; do not let the asset create
  excessive scroll.
- Give text-safe negative space or add a contrast layer.
- Treat image position as part of copy placement. If the copy crosses a map,
  face, prop cluster, high-contrast texture, or similarly busy region, first
  try shifting the copy into quieter space or moving the image focal point away
  from the copy.
- If the image is intentionally rich and should remain visible, prefer a local
  translucent reading field behind the affected text over a full hero overlay.
  The reading field should feel native to the visual system, not like a generic
  card pasted over the image.
- Avoid reusing a detailed proof image as both background and side art.
- For right-side hero media, set a stable aspect ratio and max height.

## Case Cards And Proof Cards

- Use real evidence when the card describes real work.
- Keep generated art out of proof slots unless clearly illustrative.
- Make the image crop reveal the artifact, product, map, screen, or person
  relevant to the card.
- Use captions for reader value, not process notes.

## Detail Pages

- Give evidence room to breathe when the detail matters.
- Avoid repeating the same image in hero, sidebar, body, and background.
- Pair large visuals with a short caption that explains why the viewer is
  seeing it.
- Use links for downloadable or full-resolution artifacts.

## Backgrounds And Texture

- Backgrounds should support hierarchy, contrast, and world feel.
- Use texture as a layer, not as the content.
- Do not let texture become the immediate background for body copy unless the
  texture is quiet enough to read through. Test the exact rendered text region,
  not only the average image contrast.
- Keep section backgrounds distinct enough to orient the reader, but not so
  varied that the surface feels like multiple sites.

## Icons And UI Assets

- Use familiar system icons for common actions.
- Use generated/custom icons for brand, world, or product-specific concepts.
- Pseudo-letter icons, placeholder monograms, and unlabeled shapes are temporary
  scaffolding unless they are the actual identity system.
- Check icon legibility at the rendered size, not only in source resolution.
