28 references, 61 human-written steal-notes. Every entry answers: where is it from, what family is it, and what would you steal?
Palette: #ffffff, #111111 Print-Tech Paper · poster · via V&A Collections
Steal · typography
Two voices and nothing between them: enormous condensed bold sans for the two headlines that bracket the poster top and bottom, and typewriter monospace for every word of body copy. No intermediate sizes, no third face. The absence of a middle tier is what makes both ends read as deliberate.
Steal · grid/layout
Body-text measures are keyed to the width of the photo band directly above them, not to a uniform column — so the text grid changes width three times down the page while staying locked to the images. Steal for image-heavy articles: set caption measure from the figure it belongs to.
Steal · texture/material
Emphasis is carried entirely by underline, because a typewriter has nothing else — no bold, no italic in the body at all. Attributions are underlined; that is the only mechanism. Adopting the constraint forces you to earn emphasis rather than sprinkle it.
Steal · copywriting
Every quotation carries its attribution underlined on the same line, immediately after the claim. Source-adjacent-to-assertion, never footnoted away. Use it wherever credibility is the argument — the citation belongs where the eye already is.
Fonts: condensed grotesque, typewriter monospace · curated by 1977
Palette: #e8dca8, #d94f5c, #f2c33c, #8f8f8f, #151210 Editorial · poster · via Art Institute of Chicago
Steal · color
Five flat values and no shading anywhere: black silhouette crowd behind, the lit cream subject in the middle, a large desaturated grey cut-out figure in front. Depth is built purely by value separation and overlap — the nearest figure is the *dullest*, the subject the brightest. Invert the usual instinct to make foreground elements the most saturated.
Steal · typography
'MOULIN ROUGE' is repeated three times on stacked lines with one oversized red 'M' spanning all three as a shared initial. Repetition used as texture rather than emphasis — the name becomes a pattern block. Works for a hero wordmark: set the word three times, let one letter run the full stack height.
Steal · grid/layout
There is no grid. Type sits in four clusters at four different scales, placed wherever the illustration leaves room, and the foreground figure crops through the bottom headline so image and lettering interlock instead of occupying separate bands. Steal for editorial hero art: let one element break the type's bounding box.
Fonts: hand-lettered condensed sans · curated by Henri de Toulouse-Lautrec, 1891
Palette: #e8442a, #c9c6c1, #2b2825, #f2f0ec Swiss / International · editorial · via V&A Collections
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
Palette: #efece2, #1c1a17 Swiss / International · type specimen · via V&A Collections
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
Palette: #0b0d10, #1c2b33, #e8ecee, #7fd4c1 Vast-Quiet Cinematic · full website · via Awwwards
Steal · motion/interaction
Camera dolly through 3D ice responds to scroll velocity, not position — fast scrolls feel like skidding. Inertia as a material property.
Steal · color
Entire palette is one hue family (glacial teal) plus near-black; the single mint accent reads as luminous because nothing else is saturated.
Fonts: PP Neue Montreal, Suisse Int'l Mono
Palette: #050505, #26221c, #f5f2ec, #c9a96a Vast-Quiet Cinematic · landing page · via Godly
Steal · grid/layout
Product floats in a sea of black with 60%+ vertical whitespace; specs appear one per viewport. Scarcity of information per screen = perceived value.
Steal · typography
Type never exceeds 24px outside the hero — authority through smallness against vast space.
Fonts: Söhne, Söhne Mono
Palette: #0e0e11, #23212a, #ececf1, #8b8bf4 Vast-Quiet Cinematic · landing page · via Cosmos
Steal · typography
Sans for UI, Times for the manifesto line — the serif interruption marks 'this part is belief, not feature'.
Steal · copywriting
'A discovery engine for creatives' — category invention instead of comparison. No feature list above the fold.
Fonts: ABC Diatype, Times New Roman
Palette: #ffffff, #111111, #0000ee Brutalist / Indie · full website · via Httpster
Steal · texture/material
A wiki any faculty member can edit — chaos as institutional honesty. The 'undesigned' surface signals intellectual confidence.
Steal · copywriting
Default-blue underlined links everywhere: legibility of intent over brand cohesion.
Fonts: Times New Roman, Arial
Palette: #fffef2, #1a1a1a, #ff4400 Brutalist / Indie · full website · via Httpster
Steal · copywriting
'HTML is a material' — reframing markup as craft medium. Manifesto tone with zero jargon.
Steal · component pattern
Bare <ul> of member sites, no cards, no thumbnails — the list as an aesthetic object.
Fonts: system-ui, monospace
Palette: #f7f7f5, #222222, #6b6b6b Brutalist / Indie · product UI flow · via Are.na
Steal · component pattern
Blocks and channels: one primitive, one container, infinitely composable. UI disappears behind the content it holds.
Steal · grid/layout
Uniform square-ish blocks in a strict grid make wildly heterogeneous content look calm — the grid does the curation.
Fonts: Arial, Courier
Palette: #f4f1ea, #101010, #e63329 Swiss / International · type specimen · via Grilli Type
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
Palette: #ffffff, #000000, #ff2d1f Swiss / International · full website · via Typewolf
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
Palette: #ece8df, #141414, #d43a2f Swiss / International · poster · via It's Nice That
Fonts: Akzidenz-Grotesk
Palette: #eeeae2, #1c1c1c, #ff4d00 Print-Tech Paper · full website · via Godly
Steal · texture/material
Product pages formatted like a parts catalog: SKU numbers, exploded diagrams, torque specs. The datasheet as brand voice.
Steal · component pattern
Accessory list rendered as an order form with checkboxes — commerce disguised as engineering paperwork.
Fonts: Univers, TE mono
Palette: #f2efe6, #16160f, #2b4c9b Print-Tech Paper · type specimen · via Fonts In Use
Steal · typography
License tiers named like defense contracts ('Developer', 'Enterprise', 'Air-gapped') set in the mono itself — the font sells the font.
Steal · texture/material
Form number and revision code in every page footer (BG-101 REV C). Fictional bureaucracy as world-building.
Fonts: Berkeley Mono
Palette: #e8e4da, #191919, #c8102e Print-Tech Paper · editorial · via Behance
Fonts: Helvetica, Letter Gothic
Palette: #f9f6ef, #1f1d1a, #8f1f1f Editorial · editorial · via SiteInspire
Steal · typography
Tiempos at 20px/1.7 with a 65ch measure — reading comfort as the entire design thesis.
Steal · component pattern
Interview headers set as playbill credits (INTERVIEWED BY…, ISSUE NO…) — structure borrowed from print tradition.
Fonts: Tiempos Text, Founders Grotesk
Palette: #ffffff, #141414, #d0021b Editorial · full website · via It's Nice That
Steal · grid/layout
12-col grid broken by a full-bleed image every third section — rhythm of restraint, release, restraint.
Steal · copywriting
Case studies open with the problem in one sentence before any image. Editorial discipline applied to portfolio.
Fonts: Neue Haas Grotesk, Tiempos Headline
Palette: #efe9df, #171412, #3a4f9c Editorial · full website · via Obys
Steal · motion/interaction
Text blocks assemble letter-by-letter on scroll like typesetting in progress — motion that references the medium's history.
Steal · typography
Serif italic display crashed into grotesque body at 4:1 scale ratio. The clash IS the hierarchy.
Fonts: Object Sans, Fragment Serif
Palette: #08090a, #f7f8f8, #5e6ad2, #26283b Dark Premium · landing page · via Godly
Steal · color
Purple accent appears ONLY in glows and gradients, never as flat fill — light, not paint.
Steal · motion/interaction
Feature cards tilt ≤2° on hover with a 400ms ease — motion you sense rather than watch.
Steal · grid/layout
Hairline borders at 8% white opacity define all structure; no shadows anywhere in dark mode.
Fonts: Inter Display, Berkeley Mono
Palette: #0a0a0c, #f5f5f7, #ff6363, #1c1c22 Dark Premium · landing page · via Dark Mode Design
Steal · component pattern
Pricing table where the free tier is visually equal to paid — confidence signaling that converts better than dark-patterning.
Steal · texture/material
Subtle noise grain over every gradient stops the banding AND adds materiality at 2% opacity.
Fonts: Inter, JetBrains Mono
Palette: #050607, #e9e5dc, #b8a170, #141a1c Dark Premium · landing page · via Awwwards
Steal · typography
Tiempos Headline / Söhne pairing: old-money serif for claims, neutral grotesque for evidence. Finance gravitas without cliché.
Steal · copywriting
Six words on the entire first viewport. Institutional confidence = information withheld.
Fonts: Tiempos Headline, Söhne
Palette: #fdf3e3, #1f1f1f, #ff8a3d, #67c7c2, #f6d34e Playful / Toy-like · full website · via Httpster
Steal · texture/material
Mac OS 7 chrome + VHS grain + Garamond: three eras collaged into one coherent 'summer memory' texture.
Steal · motion/interaction
Cursor leaves a brief shimmer trail — pure delight, zero utility, perfectly on-brand.
Fonts: Chicago, Garamond
Palette: #f4f4f4, #111111, #ff7262, #0acf83, #a259ff Playful / Toy-like · landing page · via Godly
Steal · color
Brand colors used at full saturation but never adjacent — always separated by white or black. Loud yet never muddy.
Steal · motion/interaction
Speaker cards squash-and-stretch on hover with spring physics (mass 1, tension 280) — cartoon rules applied to UI.
Fonts: Whyte Inktrap, Whyte
Palette: #ab9ff2, #1c1c1c, #ffdc62, #2ec08b, #ff7243 Playful / Toy-like · landing page · via Curated.design
Steal · color
Lavender as a primary brand color in crypto — category-defiant palette choice that owns the shelf.
Steal · component pattern
Ghost mascot reacts to scroll position and form errors — mascot as system feedback, not decoration.
Fonts: PP Mori, PP Fraktion Mono
Palette: #e84f38, #f2a03d, #3d6ef2, #101010 WebGL Maximalist · full website · via Lusion
Steal · motion/interaction
Every transition is a shader morph — no cuts, no fades. Continuity of surface across the whole session.
Steal · texture/material
Real-time cloth sim reacts to cursor like a physical drape. The site has mass.
Fonts: Neue Machina, Space Mono
Palette: #151ab0, #e33fa1, #41d3f2, #f5f5f5 WebGL Maximalist · full website · via Active Theory
Steal · motion/interaction
Case studies load as 'levels' with a persistent HUD — game grammar for portfolio navigation.
Steal · grid/layout
Depth replaces the grid: content organized along the z-axis, camera moves instead of page scrolls.
Fonts: Aeonik, IBM Plex Mono
Palette: #0d0d12, #8c5bf2, #39e0c8, #f2f0eb WebGL Maximalist · full website · via Awwwards
Steal · typography
Display type runs through a fluid-distortion shader on hover but stays 100% legible at rest — spectacle with an off switch.
Steal · motion/interaction
Scroll-driven mask reveal on the hero: image emerges through type counters. Type as window, not label.
Fonts: Migra, Neue Montreal
Provenance & takedown
Every reference here links out to its original, and all referenced work belongs to its creators. What this vault adds — and what it is for — is the human-written commentary: the steal-notes are the content, not the pixels. Study use only.
Made something shown here and want it removed? Email util.wills@gmail.com with the entry title or a link to this page — it comes down promptly, no questions asked.
Fork this vault
Take the whole thing — references, steal-notes, provenance — and make it your starting point. Every steal-note here was written by a human. That is the point.
npx trova init