201 entries, 447 steal-notes — 281 by hand, 166 model drafts. 23 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 to borrow: Keep persistent navigation outside the reporting area, with summary metrics above a larger chart.
When to use this principle
When it works
Operational dashboards where people alternate between a quick overview and a more detailed report.
When to avoid it
Filling the first screen with metrics that have no relationship to the user's next decision.
Original teaching diagram with illustrative content; not a screenshot or reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.
Steal · grid/layoutmodel draft
Inside the dashboard example, a narrow navigation column sits beside a broad report region. Four summary cards share a row, while a larger visitor chart spans the area beneath them.
Steal · copywritingmodel draft
Each metric combines a value, a change indicator and a short interpretation. Explain the direction of a change in words when the number alone cannot tell the reader why it matters.
Steal · component patternmodel draft
The chart's period options sit in its own header, separate from the page's example navigation. Place a control near the region it affects so scope is visible before interaction; the screenshot does not verify the data behavior.
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-10-10. Capture does not establish source verification.
Functional Product UI · product UI flow · via Mobbin
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
Two-pane master-detail split (320px queue list on the left, fluid issue document on the right) separated by a 1px solid rgba(255,255,255,0.07) hairline with zero outer card margins.
Steal · component patternNotes by Will
Triage action bar pins four single-keystroke verbs (Accept [1], Duplicate [2], Snooze [H], Decline [⌫]) directly above the issue description so the cursor never travels to a corner.
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-28. Capture does not establish source verification.
Functional Product UI · product UI flow · via Refero
Source: pending · Classification: pending
Steal · grid/layoutNotes by Will
35/65 split view: a compact 260px item list on the left drives a rich right-hand pane split vertically into a rendered Markdown preview (top 60%) and a key-value metadata table (bottom 40%).
Steal · typographyNotes by Will
Metadata keys sit flush-left in 12px muted sans (#8e8e93) while values sit flush-right in 12px tabular monospace or colored status pills.
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-27. Capture does not establish source verification.
Functional Product UI · product UI flow · via Mobbin
Source: pending · Classification: pending
Steal · component patternNotes by Will
Build phases (Running Build, Generating Static Pages, Finalizing) collapse into 40px accordion rows with right-aligned duration counters ('14.2s'), auto-expanding only the step that emitted a warning or error.
Steal · typographyNotes by Will
Log timestamps use 12px Geist Mono with font-variant-numeric: tabular-nums in a fixed 96px gutter so multi-line stack traces stay strictly left-aligned.
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-26. Capture does not establish source verification.
Calendar events use 18% opacity tint fills over a backdrop-filter: blur(16px) card with a 3px saturated left accent bar, letting underlying hour gridlines show through without losing text contrast (11.2:1).
Steal · component patternNotes by Will
Dragging a to-do item from the frosted sidebar onto the timeline morphs its width in real time to match the 60-minute column grid before drop release.
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-24. Capture does not establish source verification.
Every executed shell command and its stdout stream is encapsulated into a discrete DOM block with its own sticky header (working directory, exit code badge, elapsed time, and one-click permalink).
Steal · typographyNotes by Will
Strict character-cell alignment: all borders, padding, and status columns use integer ch and lh units so ASCII tables and box-drawing characters (┌─┐) never suffer subpixel drift.
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-21. Capture does not establish source verification.
Mobile Native / Haptic Minimal · mobile app · via Refero
Source: pending · Classification: pending
Steal · component patternNotes by Will
Tapping any wallet card triggers a spring-driven accordion expansion while sibling cards tuck cleanly into a 44px bottom bezel tray, keeping every primary action inside the one-handed thumb arc.
Steal · motion/interactionNotes by Will
Numeric keypad entries scale individual digit glyphs from 48px down to 28px dynamically as the amount grows, paired with crisp stepped scale bounces on each digit tap.
Original: Benji Taylor / Family. 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-20. Capture does not establish source verification.
Mobile Native / Haptic Minimal · mobile app · via Mobbin
Source: pending · Classification: pending
Steal · motion/interactionNotes by Will
Two-stage horizontal swipe threshold: dragging 0–64px reveals the 'Accept' icon in muted gray; crossing 64px snaps the background to #5e6ad2 and scales the icon 1.15× to confirm release commit.
Steal · grid/layoutNotes by Will
Each mobile issue row compresses metadata into a 12px monospace prefix ('ENG-402') plus a two-line clamped title, preserving a full 56px touch target height without visual bloat.
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-20. Capture does not establish source verification.
Hyper-Dense Data / Telemetry · product UI flow · via Refero
Source: pending · Classification: pending
Steal · typographyNotes by Will
Every numeric column enforces font-variant-numeric: tabular-nums at 12px/16px line-height with right-aligned decimal points so 40 rows × 12 columns of live tick data scan vertically without eye zig-zag.
Steal · colorNotes by Will
Cell background heatmaps use 8–22% opacity emerald (#10b981) and crimson (#ef4444) washes behind crisp #e2e8f0 text, encoding magnitude by background luminance while preserving AA text legibility.
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-19. Capture does not establish source verification.
Hyper-Dense Data / Telemetry · product UI flow · via Refero
Source: pending · Classification: pending
Steal · component patternNotes by Will
Synchronized dual-cursor timeline: hovering any microsecond in the top minimap projects a hairline crosshair down through 100+ nested RPC span bars and pins latency deltas inline.
Steal · grid/layoutNotes by Will
Zero-gap 22px row height in the span table packs service name, operation, duration bar, and percentage of trace time into a single horizontal band.
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-19. Capture does not establish source verification.
Strict semantic color budget: 92% of the UI is slate monochrome (#0f172a / #f8fafc), reserving amber (#f59e0b) exclusively for ATC delay vectors and sky blue (#38bdf8) for active flight path.
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-19. Capture does not establish source verification.
Hyper-Dense Data / Telemetry · product UI flow · via Dark Mode Design
Source: pending · Classification: pending
Steal · component patternNotes by Will
Color-coded ticker linking: assigning a 6px colored dot (e.g. orange Group A) to the top-left corner of four separate chart/table widgets synchronizes their active symbol across the workspace.
Steal · grid/layoutNotes by Will
Tiling window manager snaps panels to a 4px grid with zero drop shadows and 24px compact titlebars containing inline timeframe pills (1D 1W 1M 1Y ALL).
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-19. 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.
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.
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.
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.
Claymorphism / Inflated 3D Matte · product UI flow · via Mobbin
Source: pending · Classification: pending
Steal · component patternNotes by Will
Construct primary action buttons with a border-bottom: 4px solid #46a302 extruded lip that translates translateY(4px) and zeroes border-bottom-width on :active, delivering physical arcade-button feedback in pure CSS.
Steal · grid/layoutNotes by Will
Arrange lesson nodes along a sinusoidal S-curve vertical path so a 50-lesson curriculum reads as a spatial board game rather than a long checklist.
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-07. Capture does not establish source verification.
Organize application launchers into a fixed 4×3 television-safe matrix of rounded-rect TV screen bezels framed by a recessed brushed-white bottom control dock.
Steal · motion/interactionNotes by Will
Hovering any channel slot triggers a soft #38bdf8 cyan outer glow ring and scales the slot by 1.04x without shifting adjacent cells.
Original: Nintendo UI Study. 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-06. Capture does not establish source verification.
Present page weight diagnostics as an A+ to F energy-efficiency rating badge alongside concrete physical equivalents (grams of CO2 per 10,000 views, kWh of renewable vs grid energy).
Steal · typographyNotes by Will
Use the native OS system-ui font stack at dramatic display weights (clamp(2.5rem, 5vw, 4.5rem)) to achieve strong typographic hierarchy with 0KB of font network transfer.
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-04. Capture does not establish source verification.
Syntax-highlight generated passwords inside the vault inspector by coloring uppercase/lowercase letters in #f5f3ff, numerals in #6d4aff violet, and symbols in #22c55e emerald.
Steal · component patternNotes by Will
Email alias generation ('Hide-my-email') runs inline inside the credential creation drawer with a live forwarding-route diagram (alias@passmail.net → inbox).
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-03. Capture does not establish source verification.
Zero-instruction onboarding: clicking anywhere on the step-sequencer matrix immediately sounds the corresponding pentatonic pitch and illuminates the cell with a rhythmic pulse when the playhead sweeps past.
Steal · component patternNotes by Will
Keep transport controls (Play/Pause, Tempo Slider, Instrument Switcher) inside a single 56px bottom bar so 90% of the screen acts as a direct acoustic drawing surface.
Original: Google Creative Lab. 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-02. Capture does not establish source verification.
Monocle Magazine / High-Density Global · editorial · via Fonts In Use
Source: pending · Classification: pending
Steal · typographyNotes by Will
Set feature headlines in tightly tracked Neue Haas Grotesk Bold (letter-spacing: -0.03em) flush-left against heavy 4px solid #000000 top section rules and #2800d7 ultramarine data callouts.
Steal · grid/layoutNotes by Will
Interleave 2-column narrative journalism with inline tabular-nums financial comparison matrices that span 3 columns without breaking the vertical baseline rhythm.
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-05-30. 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
