Public vault · every note in the open

Steal this vault

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

Practical patterns, explained.

Forms, workspaces, product pages and reading layouts. Each reference includes what to borrow, when it works and when to avoid it. Diagrams are original explanations; notes remain labelled drafts.

Jump to results

Active filters:kind: product UI flow tag: “practical-patterns”

5 references · product UI flow tagged “practical-patterns”Clear search & filters

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.

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