Data display

Rows in uppercase hairline columns, for archives and directories. Linked rows dim to the readable 60% floor on hover and keep a 44px target; external URLs are detected automatically and get a stroke arrow plus target="_blank".

A selected-work register with compact media, bracketed sequence numbers, title, year, scope, and status. Linked entries dim their image to 60% while the readable metadata stays unchanged. Entries without an href remain static for announced or forthcoming work.

A fixed-schema provenance register for a case-study opening. Client, year, scope, and optional publication status share one ruled row; the about note spans beneath it. Use DescriptionList when the fields do not follow this project-specific schema.

Nested disclosure rows behind hairline left guides, with full-ink mono labels, a square selection marker, and a rotating 1px chevron on branches. Arrows move and disclose, Home/End jump, and character keys search visible rows.

Disclosure rows over hairline dividers, single- or multi-open, with a rotating plus icon or a flipping chevron. Panel layout changes discretely while its contents settle through opacity and a four-pixel translation in 300ms, then retreat in 180ms before unmount. The icon uses the same shorter exit duration; reduced motion is immediate.

The spec-sheet disclosure variant: hairline rows, a one-pixel plus icon, and one open panel at a time. Its panels use the same 300ms settle and 180ms retreat as the general accordion.

Entry metadata expressed as mono label-and-value pairs over a hairline. Article pages may pin it beneath the header; this specimen keeps it static to show the complete row.

A nineteen-pixel, three-column information strip with truncating cells and a hairline base. It belongs beneath heroes or above footers when a composition needs terse, persistent context.

A compact operational register for releases, jobs, or audit events. Records stay plain text and the shared marquee provides a visible pause control. It also pauses on attention, offscreen placement, and hidden tabs; reduced motion collapses to one complete static row.

Ruled rows that reveal an aria-hidden image in a viewport corner on fine-pointer hover or keyboard focus. Optional destinations turn rows into 44px links that remain fully useful on touch; static rows never become fake tab stops.

A semantic local-time stamp for footers and datelines. Server output is a stable placeholder, then the client updates once per second. Invalid locale input falls back to en-US instead of breaking render.

A squared status mark and readable mono label. Live state adds a slow inner-square pulse that only steps down the opacity ladder. Reduced motion holds a complete static mark. Optional companion tints support the written status and fall back to currentColor.

A sortable, dense table: header buttons announce their next sort state, numeric columns use tabular-nums, and empty cells show an em dash. Row selection is optional, with a header select-all; Skeleton rows show while loading, and an EmptyState appears when the set is empty. Sort and selection can each be controlled or uncontrolled — below, selection is controlled to read back a count, while the table owns its own sort.

A KPI tile: a mono micro-label with an optional icon slot, a poster-weight tabular figure, then a delta + note row and an optional sparkline across the base. Direction is shown by a glyph (▲/▼/–) with an sr-only word, never by colour alone. Given href, the shell becomes a link while its full-ink figure and delta self-dim; /60 supporting copy stays readable.

A monochrome mini chart: an inline SVG polyline in currentColor, optionally filled beneath at the dim-3 opacity. Data normalises into the viewBox, and a non-scaling stroke keeps the hairline even at any box size. Flat, single-point, and empty series all render without throwing. It appears inside StatCard above, and stands alone here.

A frame for analytical graphics with a semantic heading, unit or context, written legend, source, and an optional disclosed table. The plot slot stays open so exact values and explanatory copy remain separate from the drawing layer.

A static-first SVG plot for ordered observations. Series use solid, dashed, or dotted currentColor strokes rather than hue; invalid observations are omitted and flat or single-point domains settle to a safe range. Put exact values in ChartFrame's table disclosure.

A semantic span table with an exact time ruler and restrained Gantt-like bars. Written labels, nesting, durations, and endpoints carry the meaning; low-opacity currentColor fills only accelerate scanning. Bars reveal by horizontal scale over 340ms and resolve to the complete trace immediately under reduced motion or no script.

Grouped or stacked comparisons in either orientation. Repeating solid, stripe, cross, and dot registers distinguish up to six series without saturated colour; negative values retain a real zero baseline. The horizontal specimen keeps long measure names readable.

A deterministic histogram from raw finite observations. Equal-width bins, an optional observation rug, and factual reference markers support model error, latency, and return distributions. The component does not interpolate a smooth curve.

A semantic table with a low-contrast scanning layer. Every cell keeps its written value in full ink; low-opacity washes and repeated rules indicate range or magnitude without turning colour into meaning. Invalid cells render an explicit em dash.

Key/value details at density: a semantic <dl> of mono uppercase terms against ink values, tabular-nums throughout. Inline layout puts the term in a narrow left column beside its value on md+ and stacks below that; stack layout keeps term over value at every width. Hairline row separators by default.

Displays several large statistics in one row. Each item uses the fluid display scale with a mono label beneath. Hairlines run between columns at md and switch to horizontal rules when the band stacks on mobile.

Squared, not circular — people are never shown in circles. Photographs run through the monochrome pipeline; without a source it falls back to mono initials on the secondary surface.