Pattern library
UI Patterns
14 patterns, each shown three ways: rendered for you, as source you can paste, and as the prompt that rebuilds it from scratch.
14 patterns
Data display
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 display
Benchmark progress bar
Places a raw figure on a scale of external benchmarks instead of printing it plain, so a number becomes "most of the way to the long estimate."
- progress
- benchmarks
- css-only
- data-viz
- empty-state
Data display
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 display
Left-truncating paths
Shortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart — the opposite of what CSS ellipsis throws away.
- truncation
- paths
- text-overflow
- breadcrumbs
- file-systems
Layout
Object-shaped cards
Where a record stands for a physical thing, the card is drawn as that thing. Five variations — note, payment card, contact card, vinyl record, disc — all in gradients, with no image assets.
- cards
- css-only
- gradients
- variations
- no-assets
- skeuomorphic
Layout
Adaptive tile mosaic
A container with no artwork of its own draws one from up to four member tiles, with the grid tracks following the tile count so the frame is always full.
- css-grid
- css-only
- no-assets
- cards
- layout
Layout
Blurred cover hero
A detail-page header that blows up a record’s own artwork, blurs it toward the theme’s luminance, and scrims it with the page ground itself, so title text stays legible over artwork nobody has reviewed.
- layout
- hero
- css-only
- gradients
- no-assets
- contrast
Layout
Measured scrim band
A two-phase gradient that ramps and then holds flat under a text region hard-capped to exactly that held band, so the worst-case contrast is an enumerable number rather than whatever alpha a line of text happened to land on.
- layout
- css-only
- gradients
- contrast
- cards
Interaction
Scroll edge shadows
An inset shadow on a scroll container, shown only on the edge that actually has more content behind it, so the shadow reports state instead of decorating.
- scrolling
- affordance
- lists
- overflow
- progressive-disclosure
Interaction
Frozen-batch deck
A one-card-at-a-time review queue whose batch is snapshotted at mount, because the list it was handed shrinks underneath it as each card is acted on.
- queue
- review-flow
- animation
- keyboard
- reduced-motion
Interaction
Controls beside the anchor
Per-card controls that sit visually on top of a card whose whole surface is a link, without nesting an interactive element inside the anchor that invalid HTML forbids.
- cards
- accessibility
- keyboard
- focus-within
- grid
Interaction
Pluggable canvas visualizer
One canvas, a registry of draw modes, and the rule that each mode owns its entire frame — including the background — so a persistence mode can wash instead of clear.
- canvas
- visualization
- registry
- animation
- reduced-motion
Color
Adaptive accent color
Takes an arbitrary brand hex and mixes it toward the ground color until it clears a 4.5:1 contrast floor, so an uncontrolled palette becomes legible in both themes.
- color
- contrast
- accessibility
- wcag
- theming
Color
Theme-aware intensity ramp
A five-step intensity ramp mixed against the page ground rather than white or black, so "stronger" always means "further from the page" and the scale inverts correctly between light and dark from one expression.
- color
- color-mix
- data-display
- theming
- grid