Public vault · every note in the open

Steal this vault

201 entries, 447 steal-notes — 281 by hand, 166 model drafts. 17 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.

Jump to results

Active filters:kind: product UI flow section: dashboard

17 references · product UI flow · dashboard sectionsClear search & filters

shadcn/ui — dashboard navigation and reporting regions

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Separate navigation, summary and investigation.
**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.

Fonts: Geist · Original: shadcn/ui

private-reference-only

View original ↗

Source & usage rights

Original: shadcn/ui. 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-10-10. Capture does not establish source verification.

Linear — Triage Inbox & Split Inspector

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.

Fonts: Inter, Berkeley Mono · Original: Linear

private-reference-only

View original ↗

Source & usage rights

Original: Linear. 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-28. Capture does not establish source verification.

Raycast — Split Preview & Metadata Table

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.

Fonts: Inter, JetBrains Mono · Original: Raycast

private-reference-only

View original ↗

Source & usage rights

Original: Raycast. 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-27. Capture does not establish source verification.

Vercel — Deployment Build Logs & Check Summary

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.

Fonts: Geist, Geist Mono · Original: Vercel

private-reference-only

View original ↗

Source & usage rights

Original: Vercel. 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-26. Capture does not establish source verification.

Amie — Frosted Calendar Overlay & Time-Block Scheduler

Glassmorphism / Frosted Acrylic · product UI flow · via Godly

Source: pending · Classification: pending

Steal · colorNotes by Will
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.

Fonts: Inter, JetBrains Mono · Original: Amie

private-reference-only

View original ↗

Source & usage rights

Original: Amie. 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-24. Capture does not establish source verification.

Warp Terminal — Block-Scoped Command & Output Architecture

Terminal / CLI Portfolio Emulation · product UI flow · via Godly

Source: pending · Classification: pending

Steal · component patternNotes by Will
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.

Fonts: JetBrains Mono, Inter · Original: Warp

private-reference-only

View original ↗

Source & usage rights

Original: Warp. 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-21. Capture does not establish source verification.

Koyfin — Multi-Asset Macro & Yield Curve Telemetry Matrix

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.

Fonts: Inter, JetBrains Mono · Original: Koyfin

private-reference-only

View original ↗

Source & usage rights

Original: Koyfin. 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-19. Capture does not establish source verification.

Grafana Tempo — Distributed Trace Flamegraph & Span Waterfall

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.

Fonts: Inter, JetBrains Mono · Original: Grafana Labs

private-reference-only

View original ↗

Source & usage rights

Original: Grafana Labs. 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-19. Capture does not establish source verification.

OpenBB Terminal Pro — Modular Quantitative Workspace

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).

Fonts: JetBrains Mono, Inter · Original: OpenBB

private-reference-only

View original ↗

Source & usage rights

Original: OpenBB. 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-19. Capture does not establish source verification.

Cosmos — Spatial Cluster & Curated Element Stream

Are.na / Spatial Channel Pinboard · product UI flow · via Cosmos

Source: pending · Classification: pending

Steal · grid/layoutNotes by Will
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.

Fonts: ABC Diatype, Times New Roman · Original: Cosmos

private-reference-only

View original ↗

Source & usage rights

Original: Cosmos. 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-14. Capture does not establish source verification.

tldraw — Infinite Dot-Matrix Canvas & Floating Tool Dock

Infinite Canvas / Spatial Zoomboard · product UI flow · via Godly

Source: pending · Classification: pending

Steal · component patternNotes by Will
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é.

Fonts: Inter, JetBrains Mono · Original: tldraw

private-reference-only

View original ↗

Source & usage rights

Original: tldraw. 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-13. Capture does not establish source verification.

Figma Canvas — Multiplayer Presence Cursors & Zoom HUD

Infinite Canvas / Spatial Zoomboard · product UI flow · via Mobbin

Source: pending · Classification: pending

Steal · component patternNotes by Will
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 /.

Fonts: Inter, JetBrains Mono · Original: Figma

private-reference-only

View original ↗

Source & usage rights

Original: Figma. 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-13. Capture does not establish source verification.

Duolingo Path — Tactile Inflated 3D Stepping Stones & Depressable Lip Buttons

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.

Fonts: DIN Next Rounded, Nunito · Original: Duolingo Design

private-reference-only

View original ↗

Source & usage rights

Original: Duolingo Design. 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-07. Capture does not establish source verification.

Wii Channel Matrix Study — Translucent Aqua Bezels & Ambient Slot Grid

Frutiger Aero / Glossy Horizons (2004–13) · product UI flow · via Are.na

Source: pending · Classification: pending

Steal · grid/layoutNotes by Will
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.

Fonts: Rodin, Helvetica Neue · Original: Nintendo UI Study

private-reference-only

View original ↗

Source & usage rights

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.

Website Carbon Calculator — Gram-per-Pageview CO2 Budget & System Font Stack

Solarpunk / Dithered Low-Energy UI · product UI flow · via Httpster

Source: pending · Classification: pending

Steal · component patternNotes by Will
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.

Fonts: system-ui, Courier New · Original: Wholegrain Digital

private-reference-only

View original ↗

Source & usage rights

Original: Wholegrain Digital. 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-04. Capture does not establish source verification.

Proton Pass — End-to-End Encrypted Vault Inspector & Obsidian Argon2id Status

Lunarpunk / Stealth Cryptographic · product UI flow · via Mobbin

Source: pending · Classification: pending

Steal · colorNotes by Will
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).

Fonts: Inter, JetBrains Mono · Original: Proton Design

private-reference-only

View original ↗

Source & usage rights

Original: Proton Design. 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-03. Capture does not establish source verification.

Chrome Music Lab — Kandinsky & Spectrogram Real-Time WebAudio Canvas

Procedural Audio / Interactive Acoustics · product UI flow · via Awwwards

Source: pending · Classification: pending

Steal · motion/interactionNotes by Will
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.

Fonts: Roboto, Roboto Mono · Original: Google Creative Lab

private-reference-only

View original ↗

Source & usage rights

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.

Read the editorial record

Provenance & takedown

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