[samcm]

Reworks the shared design system so every page picks up a tidier, more consistent look. All changes are made centrally in tokens and core components, not per page; .interface-design/system.md is updated to match.

What changes

Structure

• Card anatomy — Card takes title / subtitle / actions and renders one header row. Header py-5 → py-3; header, body and footer share one inset so content lines up under the title. PopoutCard and hand-built card titles use it.
• Radius — two tokens: rounded-xs (4px) for inline marks, rounded-sm (6px) for every container and control. md–3xl alias to sm. Card, Button, ButtonGroup, SelectMenu, Toggle and Checkbox are rounded by default (the rounded prop now opts out).
• Controls — new SegmentedControl replaces seven copy-pasted time-window pill rows; selects and filter inputs are h-8 text-sm; chart legend chips lose their borders.
• Tables — ~40px rows, muted text-xs headers, tabular numerals; nested tables run flush inside cards and align with the card title.
• Stats — headline numbers render as one KPI strip (a panel split by hairlines) instead of a card per number, with one icon style.

Character

• Type — Geist for UI text, numbers and charts; Geist Mono for identifiers; Space Grotesk kept for the wordmark and landing hero. Charts get the font through a registered lab ECharts theme. Page titles drop to text-2xl semibold; the gradient accent bar and showAccent are removed; a text-2xs token replaces 121 arbitrary text-[8–11px] sizes.
• Surfaces — hairline panels with no shadows in both themes; the dark palette gets three distinct steps (page #0f0f0e, panel #181817, hairline #2c2b29).
• App frame — breadcrumb moves into a sticky 48px top bar aligned with the sidebar header; navigation states are neutral (primary marks only the active icon).
• Charts (MultiLine) — hairline grid lines, 11px labels, horizontal y-axis unit above the axis, no redundant "Date" axis name, slim neutral zoom slider, rounded tooltips.

Subtraction

• No decorative motion, blur or gradients — page-entry fade-ins, staggered row animations, backdrop blur on menus/overlays/bars, the home hero glow and dot grid, gradient washes on error/loading screens, and CardChain's glow/3D/animated line are removed.
• Consensus Overview — one full-width stack of synced charts with attestation participation leading, instead of a grid of ten equal cards; only the expanded view shows a range slider (MultiLine showDataZoomSlider). Hourly axes label each day once.
• Copy — subtitles that restated the title or selected window, or were phrased as questions, are removed. InfoBox gains summary, collapsing method notes behind "How this is measured".

Long lists page through full history

• New RangePager + getRangePage (Latest / Newer / Older / go to a number, ?from= URLs, clamped to the earliest indexed row from /bounds).
• Slots: 50-slot pages back to the start of proposer data, replacing "Load older slots" (which kept at most 100 rows).
• Epochs: 10-epoch pages instead of only the latest 10. Offline validators follow the page: the chart shows the worst 10 entities, and a new table lists every entity with total and per-epoch counts, worst first, filterable.
• Entity Blocks tab: every proposal, 25 per page, instead of the 10 most recent within 12h.
• Locally built blocks: 6-slot pages through the indexed prepared-block history instead of only the latest 6.

Fixes

• Live: the data-column status waits for the 4s deadline before calling a slot unavailable, and says "No blobs" for blobless blocks.
• buttonClassName gives router links the exact Button styles; Stats accepts rich labels and values (gas profiler block stats now use it, tooltip kept).

Colour, charts and layout

• Colour only exceptions: normal and good values render neutral; warning/danger states, live indicators and categorical data colours are unchanged. Each client has one colour (getClientColor) across charts.
• MultiLine labels lines at their ends (2–8 plain lines; off for narrow charts, secondary-axis charts and lines that end too close together); legends still toggle series.
• MultiLine axes and marks:
  • Date axes tick on calendar boundaries (years, quarters, months, weeks, days) instead of every Nth point; value axes use compact numbers (40M, 1.2B) on every chart type; dataMin/dataMax bounds round to the tick interval.
  • Lines default to 1.5px; series over 600 points are LTTB-sampled; share stacks render as opaque bands, confidence bands stay translucent.
  • Fork marks: half-strength rules with title-case names that start below the plot's top edge, sit above the data, truncate inside the plot, and merge when crowded ("Istanbul · Muir Glacier", "Fusaka +2").
  • The legend is one wrapping row with swatches that match the mark; the zoom track appears only once zoomed; at height="100%" legend and chart share the container instead of pushing the x axis out.
• Execution Overview Min/Max bands start hidden.
• Attestation Arrivals by Block Vote: votes for this block in neutral ink, votes for older blocks in warning/danger at the chunks where they arrived, seconds axis synced with the other slot-time charts, 4s deadline marked.
• Execution Overview and Partial Columns become synced stacks with a lead chart, like Consensus Overview; overview skeletons match.
• Home becomes a start page: each network's fork, head slot/epoch and indexing lag, then a live feed of the latest blocks (slot, proposer, relays or local, MEV value, txs, blobs, gas, age), refreshed every slot.
• Overview pages default to the all time range.
• Validators: PerformanceSummary is a Stats strip; fork status badges share one treatment.

App-wide pass

• Shared components: no shadows on menus/dialogs/popovers/tooltips, one radius scale, one focus style, Alert on semantic tokens, gate/error screens without glows.
• Charts: Bar, Line, ScatterAndLine, BoxPlot, Heatmap, StackedBar and Donut share MultiLine's chrome via chartChrome.
• Pages: hand-built panels and headers → Card title/subtitle/actions, stat grids → Stats, pills → Badge, toggles → SegmentedControl; decorative pings, gradients, medal emoji and tracked uppercase labels removed. Live page titles, HUD labels and status marks follow the same rules.

CI

• The Test job runs on ubuntu-24.04: ubuntu-latest moved to 26.04, where Playwright 1.58 can't install Chromium.

Worth checking

• The rounded default flips from opt-in to opt-out on several core components.
• The old design doc said "never add grid lines"; MultiLine now has horizontal hairlines.
• Category/date x-axes on MultiLine no longer show their axis name.
• Bar, StackedBar, Line, ScatterAndLine and BoxPlot get the new font but keep their old axis styling.
• Consensus Overview chart order is a judgment call (participation, missed slots, head votes, reorgs, proposals, inclusion delay, blobs, payload delivery, MEV reward).
• New dependencies: @fontsource-variable/geist, @fontsource-variable/geist-mono.

Verification

• tsc, eslint (no new warnings), 702 unit tests, Storybook play tests for core components; CI green.
• Before/after screenshots in dark and light mode against the production backend are in the Amp thread.

[redpandabot]

A central design-system refresh: Card gains title/subtitle/actions anatomy, radius and text-size tokens are consolidated, SegmentedControl replaces seven copy-pasted pill rows, Stats becomes a KPI strip, tables get one density, and charts pick up a registered ECharts theme. I verified the Tailwind v4 mechanics it depends on (in-data-[slot=card-body] variant, --spacing() in arbitrary properties, --font-sans emission), the OSV status of the two new font packages, all removed-prop call sites, and the MultiLine memo deps; nothing is broken. The intentional flips listed in the PR description are documented in system.md, so I have no findings.

---

_{Reviewed 111 changed file(s) @ 0d62b223 — no blocking issues found.
"A camel is a horse designed by committee."}