Steal this vault

• Steal · color

  Exactly one saturated colour — a vermillion field holding the right ~28% as a full-bleed column — against an otherwise fully greyscale photograph. One hue, one large flat area, zero elsewhere. The discipline is what makes the orange read as loud; a second colour anywhere would halve it.

• Steal · grid/layout

  The subject straddles the seam: the figure sits half on the photograph and half on the flat colour field, so the boundary runs *through* the focal point instead of beside it. The masthead crosses the same seam. Steal this for split-panel heroes — put the subject on the join, not politely inside one side.

• Steal · texture/material

  A drawn white window grid is laid flat over a photographic landscape, so hard vector line sits directly on continuous tone with no blending at all. Cheap to reproduce in CSS: a `repeating-linear-gradient` mullion grid over an image, no blend mode, full opacity.

• Steal · typography

  Masthead is all-lowercase light geometric sans, reversed to white, and the date stacks under it at two sizes ragged-left on a shared left edge. A single line of micro-type sits alone in the top-right corner as counterweight to the photographic mass — the smallest element placed furthest from the heaviest.

Fonts: geometric sans, lowercase · curated by László Moholy-Nagy, 1929

• Steal · typography

  **Delete the capitals entirely.** The whole alphabet is single-case — there is no uppercase to fall back on, so hierarchy has to be carried by size, weight and position alone. Try it as a hard constraint: `text-transform: lowercase` on every heading, then make the page work anyway. What survives is real hierarchy rather than shouting.

• Steal · texture/material

  One glyph is blown up to roughly 8× the alphabet's reading size and filled with a coarse grain, sitting immediately beside the same letterforms set plain. The identical shape appears twice — once as information, once as image. Steal the pairing, not the grain: a display-scale letterform with texture next to the same face at body scale, clean.

• Steal · grid/layout

  Composition is anchored in the upper two-thirds and the bottom third is left completely empty — not balanced, just abandoned. Caption text is tiny and bold, giving a display-to-caption ratio near 20:1 with nothing in between. Two type sizes, one enormous void.

Fonts: Universal (Bayer) · curated by Herbert Bayer, 1925

• Steal · typography

  Specimen shows the same sentence across 6 widths × 7 weights in a matrix — the family as a system, not a menu.

• Steal · grid/layout

  Baseline-locked two-column layout where every image top-aligns to a text cap-height. Invisible rigor you feel, not see.

Fonts: GT America

• Steal · motion/interaction

  Hover on a typeface name swaps the entire viewport background to that face's specimen — navigation IS the demo.

• Steal · color

  Pure #000 on pure #FFF with a single fire-red. No grays anywhere; the absence of mid-tones is the brand.

Fonts: SangBleu, Euclid Flex

• Steal · grid/layout

  Müller-Brockmann concert posters: type set on a strict grid, then ONE element breaks it diagonally. The violation only works because the grid is absolute.

Fonts: Akzidenz-Grotesk