UI Wall
A six-screen product interface grid with state-level captions showing the full range of a design system from empty states to dense data views.
A six-screen product interface grid with state-level captions showing the full range of a design system from empty states to dense data views.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
UI Wall shows six screens from the Ledger product design system in a uniform three-column grid, each with a short caption that names the view and its state, Onboarding step 1 of 3, Dashboard overview, Settings account, Inbox unread, Report monthly, and Search results. The count label, 6 screens, sits inline with the heading at the top right using tabular-nums.
All six screens are one array of Placeholder tiles at aspect-video. Captioning each screen with its state, not just its name, is the distinctive detail: it shows range and the depth of coverage in a single scan.
Reach for this block as the interface overview on a product design portfolio or after a case study to show the full screen count. The installer swaps the product name in the lede and replaces the six captions with the actual screen names and states.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product screens overview. Other interface layouts:
Tip: name the state as well as the screen; Dashboard overview says more than Dashboard.