UI Patterns

Every pattern, three ways

The prompts are the point. Each one is written to survive being handed to an agent with no other context: it names the surfaces the pattern belongs on, spells out the constraint that makes it work, and calls out the failure it exists to prevent. Nothing here is a dependency you install.

1. 01

   Windowed schedule grid

   Rows of resources against a fixed time window, where each block is sized by its overlap with the window rather than by its own duration.

   schedule, timeline, grid, flexbox, time Data displayAdded Aug 11, 2026
2. 02

   Benchmark progress bar

   Places a raw figure on a scale of external benchmarks instead of printing it plain.

   progress, benchmarks, css-only, data-viz, empty-state Data displayAdded Aug 11, 2026
3. 03

   Cross-highlight matrix

   A two-axis lookup table with both headers sticky, hover lighting the full row and column at once, and a durable click-to-pin selection for touch.

   table, matrix, sticky, accessibility, hover Data displayAdded Aug 11, 2026
4. 04

   Left-truncating paths

   Shortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart.

   truncation, paths, text-overflow, breadcrumbs, file-systems Data displayAdded Aug 11, 2026
5. 05

   Shape-mark sequence Updated

   A sequence compressed into a row of small marks whose shape carries the state.

   stepper, sparkline, series, truncation, css-only, no-assets Data displayUpdated Aug 21, 2026
6. 06

   Linked month bars

   A month-by-month volume timeline built from plain divs where every aggregate row links to the filtered view that produced it.

   timeline, drill-down, css-only, data-viz, no-assets Data displayAdded Aug 21, 2026
7. 07

   Glass vial meter

   A vertical potion-vial meter whose liquid fills a wide bulb first and then rises into a narrow neck — all CSS, no images.

   meter, skeuomorphic, css-only, reduced-motion, no-assets Data displayAdded Aug 21, 2026
8. 08

   Partitioned stage bar

   Progress for work with several possible endings, drawn as a census rather than a fraction.

   progress, stacked-bar, batch, legend, status, aria-label Data displayAdded Sep 12, 2026
9. 09

   Term-by-term derivation

   A computed figure shown with the audit trail behind it — the number is the product and the derivation is the receipt.

   explainability, calculator, disclosure, formula, tabular-nums, details Data displayAdded Sep 12, 2026
10. 10

    Plan preview tree Updated

    A dry run shown as a before-and-after tree with counts now, after, and the difference.

    dry-run, diff, tree, preview, bulk-operation, confirmation Data displayUpdated Sep 12, 2026
11. 11

    Uniform slot shell

    One card shell many independent sources render through, where the shell does the capping.

    dashboard, widgets, cards, empty-state, error-state, grid Data displayAdded Sep 12, 2026
12. 12

    Object-shaped cards Updated

    Where a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.

    cards, css-only, gradients, variations, no-assets, skeuomorphic LayoutUpdated Aug 11, 2026
13. 13

    Adaptive tile mosaic

    A container with no artwork draws one from up to four member tiles, grid tracks following tile count.

    css-grid, css-only, no-assets, cards, layout LayoutAdded Aug 11, 2026
14. 14

    Ground-scrimmed artwork Updated

    Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.

    layout, css-only, gradients, contrast, no-assets, hero, cards LayoutUpdated Aug 11, 2026
15. 15

    Hairline stat strip Updated

    Stat tiles joined by hairlines that are grid gap, not borders.

    stats, css-grid, css-only, hairline, no-assets LayoutUpdated Aug 21, 2026
16. 16

    Annotated transcript

    Conversation bubbles with a speaker-colored spine and a fixed metadata gutter.

    conversation, gutter, status-roles, contrast, css-only LayoutAdded Aug 21, 2026
17. 17

    Cork notice board

    Pinned paper notes on a cork board where every texture is layered CSS gradients.

    skeuomorphic, gradients, no-assets, cards, css-only LayoutAdded Aug 21, 2026
18. 18

    Hotspot marker layer Updated

    Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.

    hotspots, pointer-events, aspect-ratio, container-query, overlay, responsive LayoutUpdated Sep 12, 2026
19. 19

    Line-art empty states

    Inline drawings for empty surfaces stroked in the inherited text colour.

    empty-state, svg, currentcolor, illustration, aria-hidden, no-assets LayoutAdded Sep 12, 2026
20. 20

    Column-flow wall

    Cards flowing down columns instead of across rows, with the reading-order cost stated plainly.

    masonry, columns, break-inside, reading-order, cards, responsive LayoutAdded Sep 12, 2026
21. 21

    Scroll edge shadows

    An inset shadow shown only on the edge that has more content behind it.

    scrolling, affordance, lists, overflow, progressive-disclosure InteractionAdded Aug 11, 2026
22. 22

    Frozen-batch deck

    A one-card-at-a-time review queue whose batch is snapshotted at mount.

    queue, review-flow, animation, keyboard, reduced-motion InteractionAdded Aug 11, 2026
23. 23

    Controls beside the anchor Updated

    Per-card controls over a fully-linked card without nesting interactive elements in the anchor.

    cards, accessibility, keyboard, focus-within, grid InteractionUpdated Aug 11, 2026
24. 24

    Pluggable canvas visualizer Updated

    One canvas, a registry of draw modes, each mode owning its entire frame.

    canvas, visualization, registry, animation, reduced-motion InteractionUpdated Aug 11, 2026
25. 25

    Roving-grid board Updated

    A dense grid of state cells that is one tab stop with arrow-key navigation.

    keyboard, roving-tabindex, accessibility, states, dense-data InteractionUpdated Aug 21, 2026
26. 26

    Section rail

    Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.

    navigation, toc, responsive, aria-current, intersection-observer, container-queries, sticky InteractionAdded Aug 21, 2026
27. 27

    Ledge-press buttons

    Buttons on a solid ledge shadow that travel down onto it when pressed.

    buttons, skeuomorphic, press, tokens, css-only InteractionAdded Aug 21, 2026
28. 28

    Guarded control Updated

    A blocked control stays focusable, carries the reason as text, and refuses in its handler.

    aria-disabled, disabled, preconditions, keyboard, aria-describedby, forms InteractionUpdated Sep 12, 2026
29. 29

    Polled job card Updated

    One card for every state a background job passes through.

    progress, polling, background-job, indeterminate, aria-busy, reduced-motion InteractionUpdated Sep 12, 2026
30. 30

    Entry-transform motion

    FLIP-style motion between two rendered states when the old DOM is already gone.

    animation, transitions, reflow, reduced-motion, navigation, layout-effect InteractionAdded Sep 12, 2026
31. 31

    Slot-first picker Updated

    Assignment that starts at the destination slot, then narrows the catalogue.

    assignment, picker, aria-pressed, filtering, forms, data-driven InteractionUpdated Sep 12, 2026
32. 32

    Undo toast

    A destructive action with no confirm dialog, held behind a toast and committed when it expires.

    undo, toast, destructive, aria-live, reduced-motion FormsAdded Aug 28, 2026
33. 33

    Blast-radius confirm New

    A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.

    confirm-dialog, destructive, cascade, dialog-element, forms FormsAdded Sep 28, 2026
34. 34

    Batch action bar Updated

    A bar that exists only while something is selected, states the count in words, caps at five actions.

    selection, bulk-actions, toolbar, checkbox, indeterminate, bulk-edit, mixed-values FormsUpdated Aug 28, 2026
35. 35

    Filtered to zero

    The three empty states a list actually has, written as three different screens.

    empty-state, filter, search, zero-results, aria-live, copywriting FormsAdded Sep 12, 2026
36. 36

    Parsed query chips

    A search box that echoes back how it read the text as removable chips.

    search, query-syntax, chips, facets, parsing, aria-live FormsAdded Sep 12, 2026
37. 37

    Compound-value picker

    One grouped select whose value carries both the kind and the id.

    select, optgroup, polymorphic, forms, dependent-fields, keyboard FormsAdded Sep 12, 2026
38. 38

    Ground-referenced color Updated

    Colors solved against the page's own ground token so they invert correctly between themes.

    color, contrast, color-mix, accessibility, wcag, theming, year-map ColorUpdated Aug 11, 2026
39. 39

    Single-property color variants Updated

    One custom property carries the hue; border, fill, spine and dot derive from it.

    color, color-mix, custom-properties, theming, data-attributes, badges ColorUpdated Aug 21, 2026
40. 40

    Controls on an unknown fill Updated

    Opaque controls, a gradient-darkened fill, and a two-tone focus ring on a surface whose colour arrives from outside.

    contrast, brand-color, focus-ring, opacity, wcag, theming ColorUpdated Sep 12, 2026