201 entries, 447 steal-notes — 281 by hand, 166 model drafts. 201 results have public source URLs. Source and classification review are recorded separately on each reference.
Find a design move. Shortlist the references. Export a brief with the notes and sources ready for your next project — no account needed.
What are you building?
What are you building?
New in the vault: 12 practical patterns with source notes and original diagrams.
Warm Retro-OS / Workstation · landing page · via Curated.design
Source: pending · Classification: pending
Steal · colorNotes by Will
Replaces cold SaaS slate-gray with warm archival paper (#f6f3ec) and oat (#ebe6da) table headers, making a dense contact database feel like a well-kept desk ledger.
Steal · typographyNotes by Will
Pairs a high-contrast editorial serif (Newsreader) for page titles with a crisp grotesque (Inter) at 13px for spreadsheet cells.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-17. Capture does not establish source verification.
Scrollytelling / Interactive Infographic · editorial · via SiteInspire
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
A position: sticky; top: 10vh visualization stage occupies 100% of the viewport while 420px translucent prose cards scroll past at 60vh intervals, triggering discrete chart state transitions.
Steal · component patternNotes by Will
Direct data labeling: instead of a detached color legend box, annotation callouts with 1px leader arrows point directly to the outlier data points discussed in the active paragraph.
Original: The New York Times. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-16. Capture does not establish source verification.
Scrollytelling / Interactive Infographic · editorial · via Fonts In Use
Source: pending · Classification: pending
Steal · component patternNotes by Will
Inline hyperparameter scrubbers let the reader drag learning-rate or epoch sliders directly inside the mathematical figure, updating neural activation heatmaps in real time.
Steal · grid/layoutNotes by Will
CSS Grid academic layout ([screen-start] 1fr [page-start] 64ch [page-end] 240px [screen-end]) lets equations sit in the center measure while interactive figures break out to full page width.
Fonts: Charter, Inter · Original: Distill Editorial Collective
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-16. Capture does not establish source verification.
Scrollytelling / Interactive Infographic · editorial · via Dead Simple Sites
Source: pending · Classification: pending
Steal · colorNotes by Will
Prose mentions of mechanical parts ('escapement wheel', 'pallet fork') are color-coded with inline pill backgrounds that match the exact RGB shader color of that gear in the 3D WebGL canvas below.
Steal · motion/interactionNotes by Will
Every WebGL figure starts paused or at calm low speed with a single explicit slider beneath it, never hijacking native page scroll.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-16. Capture does not establish source verification.
Idea Magazine / Tokyo Graphic Design · full website · via Minimal Gallery
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Square modular tatami-proportioned index grid where every project cell shares a 1:1 aspect ratio, 1px hairline border, and a bilingual caption block (English grotesque left, Japanese mincho right).
Steal · typographyNotes by Will
Micro-scale index numerals (001–148) set at 11px monospace anchor the top-left corner of every grid cell, allowing dense catalog browsing without visual clutter.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-15. Capture does not establish source verification.
Idea Magazine / Tokyo Graphic Design · editorial · via SiteInspire
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Combines vertical writing-mode: vertical-rl issue spines along the right viewport rail with a dense 5-column horizontal story matrix separated by 1px solid ink rules.
Steal · component patternNotes by Will
Issue badges use circular rotary date stamps ('ISSUE 932 · TOKYO') overlapping thumbnail corners by 12px to break the rigid rectangular grid.
Original: Magazine House Tokyo. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-15. Capture does not establish source verification.
Masonry columns maintain a fixed 280px width with 24px gutters while image captions remain hidden at rest and appear in a 12px monospace footer rail only on card focus or hover.
Steal · component patternNotes by Will
Clicking 'Connect' on any artifact opens a lightweight inline cluster search rather than a modal, showing which other curators saved the same work.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-14. Capture does not establish source verification.
Are.na / Spatial Channel Pinboard · full website · via Minimal Gallery
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Two-column hanging-indent resume timeline: a 140px left date column (2023 — Present) aligned to the cap-height of the right-hand role description and collaborator chips.
Steal · component patternNotes by Will
Collaborator tags render as 24px pill chips with tiny 16px avatars that preview the co-worker's role on hover, turning a static resume into a verifiable graph.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-14. Capture does not establish source verification.
All chrome collapses into a single bottom-center 48px floating tool dock and a top-right compact style popover, leaving 94% of the viewport as an unobstructed pan-and-zoom surface.
Steal · texture/materialNotes by Will
radial dot-matrix background scales its grid subdivision dynamically across zoom levels (100% → 25% → 5%) so spatial orientation is preserved without visual moiré.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-13. Capture does not establish source verification.
Right-hand properties inspector groups X, Y, W, H, Angle, and Corner Radius into a compact 2×3 scrubbable numeric grid where dragging any label horizontally adjusts the value.
Steal · motion/interactionNotes by Will
Multiplayer cursors attach a high-contrast colored name pill (#0d99ff, #f24822) that transforms into a live chat bubble inline when the user presses /.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-13. Capture does not establish source verification.
De Stijl / Neoplasticism · editorial · via Stedelijk Museum Graphic Collection
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Asymmetric neoplasticism grid constructed from 4px solid #111111 orthogonal structural rules that divide the viewport into unequal rectangular planes of warm white, red, blue, and yellow.
Steal · typographyNotes by Will
All headings sit flush against the top-left inner corner of their structural cell with 16px uniform inset padding, letting the heavy black grid bars carry the entire visual rhythm.
Original: Stedelijk Museum Amsterdam. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-12. Capture does not establish source verification.
Dynamic Island / Pill Morphing UI · mobile app · via Mobbin
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Split the 36pt hardware cutout capsule into two asymmetric wings: a 24pt leading icon badge anchored flush-left and a tabular-nums countdown (04:18) anchored flush-right with 12pt internal clearance around the camera sensor.
Steal · colorNotes by Will
Use pure #000000 OLED black as the capsule ground so the hardware cutout disappears completely, pairing a single semantic accent (#30d158 active green or #ff9f0a timer amber) for instant peripheral legibility.
Original: Apple Human Interface Team. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-11. Capture does not establish source verification.
Dynamic Island / Pill Morphing UI · mobile app · via Mobbin
Source: pending · Classification: pending
Steal · motion/interactionNotes by Will
Long-pressing the compact pill morphs the container from height: 36pt; border-radius: 18pt to height: 168pt; border-radius: 44pt using a critically damped spring (damping: 0.82, response: 0.38s) while keeping the leading icon pinned to its top-left origin.
Steal · component patternNotes by Will
Limit expanded island actions to at most two 44pt pill buttons in the bottom row so thumb taps never accidentally trigger the underlying status bar.
Original: Apple Human Interface Team. Source verification: pending review.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-11. Capture does not establish source verification.
Dynamic Island / Pill Morphing UI · mobile app · via Mobbin
Source: pending · Classification: pending
Steal · component patternNotes by Will
Render the vehicle license plate inside a high-contrast #1f1f24 monospace badge (14pt bold) paired with a 6pt continuous progress track that advances a miniature vehicle glyph toward the pickup pin.
Steal · copywritingNotes by Will
Replace verbose status sentences with a single two-word verb phrase (Arriving now · 2 min) so the entire lock-screen banner reads in under 300ms.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-11. Capture does not establish source verification.
Dynamic Island / Pill Morphing UI · mobile app · via Mobbin
Source: pending · Classification: pending
Steal · typographyNotes by Will
Airport IATA codes (SFO → LHR) and gate badges (B14) use split-flap inspired tabular-nums monospace with #eab308 amber highlights whenever a gate or boarding time mutates.
Steal · grid/layoutNotes by Will
Pack four flight telemetry variables (Origin, Destination, Gate, Seat) into a 160pt expanded island by using a 1px #27272a horizontal rule to separate route progress from boarding credentials.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-11. Capture does not establish source verification.
Virtual Desktop / In-Browser OS · full website · via Godly
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Replace the standard SaaS marketing hero with a full-viewport desktop surface (100vw × 100vh) featuring a left-hand column of 64×64px double-clickable desktop icons (Product OS, Pricing.calc, Docs.md) and a persistent top menu bar.
Steal · component patternNotes by Will
Every marketing section opens inside a focusable, draggable window frame with 1px solid #151515 borders, classic [—] [□] [×] titlebar controls, and z-index elevation on click.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-10. Capture does not establish source verification.
Virtual Desktop / In-Browser OS · product UI flow · via Godly
Source: pending · Classification: pending
Steal · component patternNotes by Will
Render per-product usage sliders inside a spreadsheet-style OS window where dragging monthly event volume updates a live itemized receipt column in real time with zero hidden enterprise tiers.
Steal · copywritingNotes by Will
Include an explicit 'Free tier included' badge on the first notch of every slider so self-serve developers immediately see their $0/mo runway before scaling.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-10. Capture does not establish source verification.
Virtual Desktop / In-Browser OS · product UI flow · via Godly
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Three-pane file-explorer layout: a 220px collapsible folder tree on the left, a 65ch technical documentation viewport in the center, and an interactive 'On this page' table-of-contents inspector on the right.
Steal · component patternNotes by Will
Code snippets include a header bar formatted like a terminal sub-window with language selector tabs (Node.js, Python, cURL) and a one-click copy button.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-10. Capture does not establish source verification.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-10. Capture does not establish source verification.
Minimal E-Commerce / Giant Typographic Price · full website · via SiteInspire
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Flank a 4-column central product grid with two sticky 160px sidebars: left for alphabetical designer index (A–Z in 11px uppercase sans) and right for sort/color/size filters, eliminating top dropdown menus entirely.
Steal · typographyNotes by Will
Every product card uses strictly 11px line-height: 1.35 uppercase Helvetica for brand, garment title, and tabular price ($640 USD) with zero badges, star ratings, or rounded corners.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-09. Capture does not establish source verification.
Pin garment construction details and fabric composition at position: sticky; top: 35vh in the left 25% wing, pin the size selector and 'Add to Bag' CTA at top: 35vh in the right 25% wing, and scroll full-height vertical photography down the center 50%.
Steal · component patternNotes by Will
Model height and garment size worn (Model is 6ft 1in and wears size 48) sit directly below the fabric bullet list so fit context is visible without opening a modal.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-09. Capture does not establish source verification.
Format the shopping bag as an accounting ledger with 1px solid #000000 horizontal dividers, allowing inline size changes and one-click move-to-wishlist without page reloads.
Steal · typographyNotes by Will
Total order price and duties calculation align flush-right in font-variant-numeric: tabular-nums beside a full-width rectangular #000000 checkout button.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-09. Capture does not establish source verification.
Minimal E-Commerce / Giant Typographic Price · full website · via Godly
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Expose 1px solid #000000 collapse borders around every product cell and sticky navigation button so the entire storefront reads as an industrial inventory manifest.
Steal · typographyNotes by Will
Oversized garment prices and SKU numbers render in stark uppercase grotesk or receipt monospace pinned to the bottom edge of each full-bleed cell.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-09. Capture does not establish source verification.
Neo-Brutalism / Gumroad Pastels · full website · via Godly
Source: pending · Classification: pending
Steal · texture/materialNotes by Will
Every card, button, and price tag combines a 2px solid #000000 outline with an unblurred 4px 4px 0px #000000 offset shadow that translates (-2px, -2px) on hover and collapses to (0px, 0px) on active press.
Steal · colorNotes by Will
Assign high-saturation pastel fills (#ff90e8 bubblegum pink, #ffc900 marigold, #23a094 teal) to individual product categories while keeping all text and borders in pure #000000 for guaranteed AAA contrast.
Recorded rights label: private-reference-only. Original work and reproduction rights belong to their owners. A note license does not grant rights to copy a screenshot, trademark or design.
Trova notes: apply the principles in your own work, including commercial projects. Bulk republication or resale is not permitted. Usage terms.
Captured: 2026-06-08. Capture does not establish source verification.
Publicly sourced references link to an original; private or concept examples are labelled separately. All referenced work belongs to its creators. What this vault adds — and what it is for — is the commentary: the steal-notes are the content, not the pixels. Notes are written by hand unless their card says otherwise; a model draft is always labelled. Study use only.
Made something shown here and want it removed? Email hello@trova.design with the entry title or a link to this page — it comes down promptly, no questions asked.
Try it in your agent · no key
One command puts these notes inside Claude Code. Without a key the agent sees 5 families and gets 5 calls a day — enough to judge the taste before you rent it. The key opens every family and lifts the meter.
claude mcp add --transport http trova https://trova.design/api/mcp
