Public vault

Stripe — Checkout preview with options

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Change a control. See the consequence.
**What to borrow:** Keep configuration beside its live preview.
When to use this principle
When it works
Options whose effect can be shown immediately.
When to avoid it
Complex changes that need validation before a preview is accurate.
Original principle diagram — a model-drafted explanation, not a reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · grid/layoutmodel draft
A narrow column of toggles grouped under headers (payment setup, customer details, advanced options) beside a browser-framed live checkout page.
Steal · motion/interactionmodel draft
Each toggle (promotion codes, tax, shipping address) changes the preview at once. The configurator teaches the product by showing every option's effect.
Steal · component patternmodel draft
The preview sits in a fake browser chrome with a desktop/mobile switch and a country picker below, so it reads as the page your customer will see.

Fonts: system-ui · Original: Stripe

private-reference-only

View original ↗

Source & usage rights

Original: Stripe. 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.

Stripe — integration chooser

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Choose effort before implementation.
**What to borrow:** Compare integration paths on the same few criteria.
When to use this principle
When it works
A small number of genuinely distinct setup paths.
When to avoid it
Near-identical options or decisions with undisclosed tradeoffs.
Original principle diagram — a model-drafted explanation, not a reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · component patternmodel draft
Two cards, each a picture, a tag (No code · Low code / More code), a name and two bullets; the selected card has a violet ring, and there is one 'View demo' button for both.
Steal · copywritingmodel draft
The cards sort by effort, not by feature: 'Launch payments out-of-the-box' against 'Build a custom flow with UI components'.

Fonts: system-ui · Original: Stripe

private-reference-only

View original ↗

Source & usage rights

Original: Stripe. 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.

Cal.com — booking details form

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Keep the decision in view.
**What to borrow:** Keep the selected appointment visible while collecting details.
When to use this principle
When it works
Booking flows where date, duration, and person must stay clear.
When to avoid it
Sensitive details on shared screens; summaries that crowd out fields.
Original principle diagram — a model-drafted explanation, not a reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · grid/layoutmodel draft
The left column keeps the meeting's facts and adds the chosen slot (Tuesday, 13 October, 10:30–10:45). The right column swaps the calendar for the form, so the commitment stays in view while you fill it in.
Steal · component patternmodel draft
Three fields only (name, email, what to discuss), 'Add guests' as a quiet link, then Back and Confirm side by side. The terms line sits above the button, not in a checkbox.

Fonts: Inter · Original: Cal.com

private-reference-only

View original ↗

Source & usage rights

Original: Cal.com. 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.

Cal.com — pick a date and time

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation

Context, calendar, then time.

What to borrow: Separate meeting context, date choice, and available times.

When to use this principle

When it works: Scheduling with a manageable set of available slots.
When to avoid it: Three squeezed columns on a phone; stack these regions instead.

Original principle diagram — a model-drafted explanation, not a reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · grid/layoutmodel draft
Three columns in one card: who and what (host, meeting name, length, location, time zone), the month grid, then the chosen day's slots. Date and time are one decision, not two pages.
Steal · component patternmodel draft
The first free day is already selected and its slots already listed; available days are filled and unavailable ones are bare numbers. The visitor can choose a time immediately.
Steal · copywritingmodel draft
A 12h/24h switch and a time-zone menu sit in the panels they affect, not in settings.

Fonts: Inter · Original: Cal.com

private-reference-only

View original ↗

Source & usage rights

Original: Cal.com. 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.

Plausible — period picker

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Common ranges first. Custom last.
**What to borrow:** Put common date ranges before a custom-range editor.
When to use this principle
When it works
Repeated reporting tasks with predictable time windows.
When to avoid it
Hiding the active range or letting a menu cover its own trigger.
Original principle diagram — a model-drafted explanation, not a reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · component patternEvidence rejected — see findingsmodel draft
The period menu lists named ranges (Today, Last 7 days, Month to date, Last 12 months, All time) with a single-letter shortcut on each row, and custom range last.
Steal · grid/layoutEvidence rejected — see findingsmodel draft
The menu drops over the graph's right edge and leaves the KPIs visible, so you can see what will change as you choose.

Fonts: system-ui · Original: Plausible Analytics

private-reference-only

View original ↗

Source & usage rights

Original: Plausible Analytics. 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.

Excalidraw — export image dialog

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Preview beside export choices.
**What to borrow:** Show export settings and a preview in the same decision space.
When to use this principle
When it works
A small set of visual output options.
When to avoid it
Presenting an inaccurate preview as a guarantee of the final file.
Original principle diagram — a model-drafted explanation, not a reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · component patternmodel draft
Export is one modal: a checkerboard preview of the exact output on the left, three toggles on the right (background, dark mode, embed scene), then three destinations (PNG, SVG, clipboard) as equal buttons.
Steal · grid/layoutmodel draft
The canvas dims behind the dialog but stays visible, so the export plainly reads as a copy of what was drawn, not a new place to work.
Steal · motion/interactionmodel draft
Each toggle repaints the preview immediately (the checkerboard shows transparency once background is off), so no option needs explaining.

Fonts: Assistant · Original: Excalidraw

private-reference-only

View original ↗

Source & usage rights

Original: Excalidraw. 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.

GOV.UK — check answers before submitting

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Review the answer beside its correction.
**What to borrow:** Align each answer with a nearby change action, grouped into meaningful sections.
When to use this principle
When it works
Long forms where people need to check several answers before a final submission.
When to avoid it
Short, reversible tasks where another review screen adds unnecessary work.
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
The example groups personal and application details into separate summary lists. Each row places a label, its answer and a Change link on the same line; use this alignment to make corrections local to the answer.
Steal · copywritingmodel draft
An unanswered optional field is shown as Not provided instead of an empty cell. State absence explicitly when people must distinguish skipped information from a rendering failure.
Steal · component patternmodel draft
The final submission section follows the answer lists and explains the commitment before its button. Keep editing links visually subordinate to the one final submission action.

Fonts: GDS Transport · Original: GOV.UK Design System

private-reference-only

View original ↗

Source & usage rights

Original: GOV.UK Design System. 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.

GOV.UK — error summary with recovery links

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Turn an error list into a recovery route.
**What to borrow:** Put a concise error summary before the form and identify each correction with a link.
When to use this principle
When it works
Forms with multiple fields whose errors may be outside the current viewport.
When to avoid it
A generic alert that replaces field-level explanations or uses color as its only signal.
Original teaching diagram with illustrative content; not a screenshot or reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · component patternmodel draft
The example separates a problem heading from two underlined error links inside one prominent boundary. Make the list an index of corrections, not just a notice that submission failed.
Steal · copywritingmodel draft
One error asks for a missing name; the other states a date constraint. Write the correction or valid condition in the error itself instead of exposing a technical validation code.
Steal · grid/layoutmodel draft
The documentation recommends both an error summary and messages next to the affected answers. Use the summary for orientation and the local message while editing; the standalone capture shows only the summary.

Fonts: GDS Transport · Original: GOV.UK Design System

private-reference-only

View original ↗

Source & usage rights

Original: GOV.UK Design System. 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.

GOV.UK — task list with explicit completion states

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Keep every task beside its status.
**What to borrow:** Align task links and readable status labels in a single list; place hints below their task.
When to use this principle
When it works
Applications and onboarding processes with several independently understandable tasks.
When to avoid it
Presenting blocked tasks as immediately actionable or relying on badge color alone.
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
The example uses ruled rows with the task link at the left and completion status at the right. Repeated alignment makes unfinished work easy to scan without a separate progress dashboard.
Steal · component patternmodel draft
Completed is plain text while Incomplete appears on a tinted background. Both states are written out, so the difference survives loss of color.
Steal · copywritingmodel draft
Only the financial-history task has a supporting hint, placed directly below its link. Add context where a task needs it instead of giving every row an equally long description.

Fonts: GDS Transport · Original: GOV.UK Design System

private-reference-only

View original ↗

Source & usage rights

Original: GOV.UK Design System. 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.

Radix Themes — controls beside component specimens

Functional Product UI · product UI flow

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Keep settings beside representative examples.
**What to borrow:** Pair a compact settings panel with several specimens that expose the consequences of a design choice.
When to use this principle
When it works
Theme editors, configuration tools and component libraries with meaningful visual alternatives.
When to avoid it
Showing only a decorative swatch when a setting affects text, focus or control readability.
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
The captured playground gives component specimens the broad left region and theme settings a narrow right panel. This separates the object being evaluated from the controls used to configure it.
Steal · component patternmodel draft
Radius choices are illustrated with corner shapes, while scale choices use percentages. Give each setting a representation that matches what changes rather than forcing every option into identical text labels.
Steal · colormodel draft
The selected accent and gray swatches have visible rings, and the appearance control also uses text labels. Show selected state with shape or borders as well as the chosen color.

Fonts: untitledSans, -apple-system · Original: Radix / WorkOS

private-reference-only

View original ↗

Source & usage rights

Original: Radix / WorkOS. 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.

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.

Craft — tactile collage around a product preview

Playful / Toy-like · landing page

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Let the product anchor an expressive scene.
**What to borrow:** Frame a legible product preview with expressive material cues while leaving the headline and action clear.
When to use this principle
When it works
Creative tools whose product experience benefits from a warm, personal visual identity.
When to avoid it
Texture or overlapping artwork that obscures the action, product detail or text contrast.
Original teaching diagram with illustrative content; not a screenshot or reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · texture/materialmodel draft
The hero combines a blue sky field with torn-paper edges and notebook-like fragments around the product preview. The material references relate to note-taking rather than functioning as unrelated decoration.
Steal · typographymodel draft
A large serif headline sits above a compact sans-serif action. Use the display face for the promise and keep navigation and controls visually direct.
Steal · grid/layoutmodel draft
The preview enters from the lower part of the scene beneath the headline and centered action. Keep a recognizable product surface visible so the atmosphere still explains what is being offered.

Fonts: UntitledSansFont, UntitledSerifFont · Original: Craft

private-reference-only

View original ↗

Source & usage rights

Original: Craft. 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.

Ghost — typographic promise above product evidence

Swiss / International · landing page

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Make the promise lead into the product.
**What to borrow:** Use a strong typographic promise followed by a wide product view that explains the offer.
When to use this principle
When it works
Products with a clear central benefit and a recognizable interface worth showing.
When to avoid it
Borrowing the example's dashboard numbers as evidence for your own product.
Original teaching diagram with illustrative content; not a screenshot or reconstruction of the source. Trova · AI-assisted illustration. Original Trova diagram.

Steal · typographymodel draft
The captured hero uses a very large, heavy sans-serif headline across two centered lines. Smaller navigation and a compact release announcement create hierarchy without several competing display styles.
Steal · grid/layoutmodel draft
A wide dark dashboard preview follows the white headline region. The change in surface gives the product its own zone while keeping it directly connected to the promise.
Steal · colormodel draft
The release announcement uses a warm yellow accent while the primary navigation action is dark. Give secondary news a distinct signal without making it look like the main conversion action.

Fonts: InterVariable · Original: Ghost

private-reference-only

View original ↗

Source & usage rights

Original: Ghost. 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.

Resend — documentation with three levels of navigation

Functional Product UI · editorial

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Give each navigation level its own place.
**What to borrow:** Separate global sections, document navigation and the current page's contents around a readable main column.
When to use this principle
When it works
Documentation with a large hierarchy and articles that contain several sections.
When to avoid it
Squeezing three columns onto a phone or adding a contents list to a very short page.
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
The captured page has global documentation sections across the top, grouped document links on the left, the article in the center and an On this page list on the right. Each region answers a different navigation question.
Steal · copywritingmodel draft
The introduction presents prerequisites before the framework quickstarts. State what readers need before asking them to choose implementation instructions.
Steal · component patternmodel draft
Quickstart choices pair a framework icon with its name in a repeated grid. Preserve readable names so recognition does not depend on familiarity with the icons.

Fonts: Inter · Original: Resend

private-reference-only

View original ↗

Source & usage rights

Original: Resend. 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.

Stripe Press — a catalogue composed from book spines

Dark Premium · full website

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Make the objects form the catalogue.
**What to borrow:** Use an object's recognizable form to organize a collection while keeping its title visible.
When to use this principle
When it works
Small visual catalogues whose products have distinctive physical forms.
When to avoid it
Using a visual stack as the only navigation for a large or accessibility-critical catalogue.
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
The captured catalogue centers a vertical stack of book spines on a dark field, with generous space around the stack. The physical objects become the organizing structure rather than sitting inside a conventional product-card grid.
Steal · typographymodel draft
The upper-left brand lockup uses serif type, while each book retains its own cover typography. Keep the interface restrained when the collection already contains many visual voices.
Steal · colormodel draft
Most of the visible color belongs to the book spines against the dark background. Let the objects supply variety while the surrounding interface stays quiet; this observation does not establish keyboard or motion behavior.

Fonts: Ivar Headline, Ivar Text · Original: Stripe Press

private-reference-only

View original ↗

Source & usage rights

Original: Stripe Press. 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.

Our World in Data — search-led research discovery

Editorial · editorial

Source: pending · Classification: pending

Original principle diagram · Draft explanation

Offer a direct search and a browsable start.

What to borrow: Combine a prominent search field with topic shortcuts and a readable editorial feed.

When to use this principle

When it works: Large knowledge libraries visited by both people with a specific question and people exploring a topic.
When to avoid it: Search examples that promise query behavior the actual search engine cannot support.

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
The first screen places a broad search input under the mission statement, with topic shortcuts above and article previews below. It offers a direct route for known questions and a browsing route for open-ended visits.
Steal · typographymodel draft
Serif headings distinguish the mission and article titles from sans-serif navigation and metadata. Assign type roles consistently so readers can separate editorial content from interface controls.
Steal · component patternmodel draft
Article previews combine a small chart image, a title, an explanatory deck and an author. Give enough context to judge relevance before asking a reader to open the full article.

Fonts: Lato, Playfair Display · Original: Our World in Data

private-reference-only

View original ↗

Source & usage rights

Original: Our World in Data. 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.

The Pudding — visual essay index with format shortcuts

Playful / Toy-like · editorial

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Keep a consistent frame for varied stories.
**What to borrow:** Give visually different stories the same metadata, image and headline sequence.
When to use this principle
When it works
Editorial archives where each story has a distinctive visual treatment.
When to avoid it
Letting expressive title lettering replace readable summaries or clear browsing controls.
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
The captured index uses three columns. Each story follows a stable sequence: issue number and date, a large preview image, a display title and a short description. The repeated frame makes varied artwork scannable.
Steal · component patternmodel draft
A story search sits opposite labelled format shortcuts such as video and audio. Pair distinctive icons with text so the browsing categories remain understandable.
Steal · typographymodel draft
Chunky expressive story headings contrast with quieter descriptions and compact metadata. Limit the playful display treatment to short titles while preserving ordinary reading text.

Fonts: Atlas Grotesk, Atlas Typewriter, Gooper SemiCondensed · Original: The Pudding

private-reference-only

View original ↗

Source & usage rights

Original: The Pudding. 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.

Figma Slides — product explanation with an editor preview

Playful / Toy-like · landing page

Source: pending · Classification: pending

Original principle diagram · Draft explanation
Show the working context around the result.
**What to borrow:** Show the output inside its editor, including the tools and context that make the product understandable.
When to use this principle
When it works
Creative tools where the workflow is part of the value, not just the final image.
When to avoid it
A miniature interface whose labels become unreadable or imply features your product does not have.
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
The product name, explanation and two actions sit above a broad editor preview. The preview includes a slide rail, central canvas and settings region, so the visitor sees the working environment around the slide.
Steal · colormodel draft
Bright geometric artwork occupies the right side of the hero while the main text and actions remain black on white. Concentrate expressive color where it can support the composition without weakening the copy.
Steal · component patternmodel draft
The primary action uses a solid dark fill and the sales action uses an outline. Distinguish self-serve and contact routes without making them identical competing buttons.

Fonts: figmaSans, figmaMono · 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-10-10. Capture does not establish source verification.

Plausible — filtered to one source

Swiss / International · product UI flow

Source: pending · Classification: pending

Steal · component patternmodel draft
Clicking a row in a table becomes a filter chip ('Source is Google') next to the site name, and every number on the page re-scopes. Drill-down needs no query builder.
Steal · motion/interactionmodel draft
The filter lives in the URL (?f=is,source,Google), so a drilled view is a link someone can share or bookmark.

Fonts: system-ui

private-reference-only

View original ↗

Source & usage rights

Original: Creator not recorded. 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.

Plausible — live demo dashboard

Swiss / International · product UI flow

Source: pending · Classification: pending

Steal · grid/layoutmodel draft
Six KPIs across the top as a strip of label, number and delta, one graph below, then paired tables (sources | pages). The whole product is one scroll.
Steal · copywritingmodel draft
The demo is the real dashboard for plausible.io with live numbers, linked from the marketing site. The product is its own screenshot.
Steal · colormodel draft
One purple tints the graph and the selected KPI; everything else is zinc greys. Colour means 'the series you are looking at'.

Fonts: system-ui

private-reference-only

View original ↗

Source & usage rights

Original: Creator not recorded. 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.

Excalidraw — a first sketch

Playful / Toy-like · product UI flow

Source: pending · Classification: pending

Steal · component patternmodel draft
Selecting a tool opens its properties as a narrow left column (stroke, fill, width, roundness). The panel exists only while a tool is in hand, so the empty canvas stays empty.
Steal · texture/materialmodel draft
Shapes are drawn with a deliberate hand wobble. The roughness says 'draft', which makes people willing to put half an idea down.

Fonts: Assistant

private-reference-only

View original ↗

Source & usage rights

Original: Creator not recorded. 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.

Squoosh — codec switched to WebP

Playful / Toy-like · product UI flow

Source: pending · Classification: pending

Steal · motion/interactionmodel draft
Changing the codec recompresses in place and the saving badge updates. There is no apply button; the preview is the confirmation.
Steal · component patternmodel draft
Options grow with the codec. WebP adds lossless, effort and quality controls under the same header, and the rarely-touched ones stay folded under 'Advanced settings'.

private-reference-only

View original ↗

Source & usage rights

Original: Creator not recorded. 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.

Squoosh — editor, before/after split

Playful / Toy-like · product UI flow

Source: pending · Classification: pending

Steal · component patternmodel draft
The editor opens on a full-bleed split: original left, compressed right, one draggable divider. The comparison is the screen, not a preview inside a form.
Steal · grid/layoutmodel draft
Each half gets its own floating settings card in its own corner, so the two sides read as two jobs set against each other.
Steal · copywritingmodel draft
The result sits in the bottom corner as a number before any setting is touched: the size and a percentage saved. The first thing shown is what you get.

private-reference-only

View original ↗

Source & usage rights

Original: Creator not recorded. 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.

Squoosh — start screen

Playful / Toy-like · product UI flow

Source: pending · Classification: pending

Steal · component patternmodel draft
The first screen is one drop target: three overlapping pink blob shapes centered under the logo, an add-image icon, and "Drop OR Paste" with "Paste" underlined as a link. Steal a single oversized drop zone with paste offered as the second input, for a tool whose only first step is supplying a file.
Steal · grid/layoutmodel draft
Below a wave-edged blue band, "Or try one of these:" leads to four circular sample-image thumbnails. Steal sample inputs placed directly under the upload target, so the tool can be tried by someone with no file at hand.
Steal · texture/materialmodel draft
The ground is a pale grey-and-white checkerboard, the image editor's transparency convention, so the page reads as an empty image canvas; a "Ready to work offline" toast with "DISMISS" sits at the bottom edge. Steal the medium's own background convention as the app ground, and announce offline readiness in a dismissible toast.

private-reference-only

View original ↗

Source & usage rights

Original: Creator not recorded. 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.

Steal this vault

What are you building?

Stripe — Checkout preview with options

Stripe — integration chooser

Cal.com — booking details form

Cal.com — pick a date and time

Plausible — period picker

Excalidraw — export image dialog

GOV.UK — check answers before submitting

GOV.UK — error summary with recovery links

GOV.UK — task list with explicit completion states

Radix Themes — controls beside component specimens

shadcn/ui — dashboard navigation and reporting regions

Craft — tactile collage around a product preview

Ghost — typographic promise above product evidence

Resend — documentation with three levels of navigation

Stripe Press — a catalogue composed from book spines

Our World in Data — search-led research discovery

The Pudding — visual essay index with format shortcuts

Figma Slides — product explanation with an editor preview

Plausible — filtered to one source

Plausible — live demo dashboard

Excalidraw — a first sketch

Squoosh — codec switched to WebP

Squoosh — editor, before/after split

Squoosh — start screen