Metric Bento

Written for the variant you picked above: Night

Build an analytics bento: a grid of tiles that are each a small working chart. Props: tiles [{id, title, meta (a short note on the right, such as the period), visual, span {lg, md, sm} as [columns, rows]}], eyebrow, title, lede and theme. Export the visuals separately. Layout: 4 columns at 900px and over, 2 from 560px, 1 below (ResizeObserver), 12px gaps, rows at least 220px. Tiles are flat panels with 18px corners and a 1px hairline; each has a small muted title with the meta in mono on the right, and the chart below. Colour: one categorical order (blue, orange, aqua — the validated slots of a standard data-viz palette, stepped separately for dark and light surfaces), one blue sequential ramp for magnitude, and ordinal blue steps for the funnel. Text always uses the ink and muted tokens, never series colours. Status (up/down) carries an arrow icon as well as colour. Visuals: - KpiTrend: the latest figure large and tabular, a chip with the change since the first point (arrow + signed percentage), the period under it, and an area sparkline (2px line, area fading from 28% to 0). Pointing at the chart scrubs it: a dashed crosshair, a dot on the line, and the figure and label above switch to that point; the chart is focusable and the arrow keys step through points (Escape returns to the latest). It's an image with a summary label and a live label. - LiveCounter: requests per minute with a pulsing dot, over 28 bars that shift left every 1.2s with a new value eased towards the base; it ticks only while on screen and the tab is visible, and stops under reduced motion. - PlanMix: a ring of three arcs with small gaps between slices, the total in the middle; hovering an arc or its legend row thickens that arc and dims the others; the legend shows each share as a percentage, so identity is never colour alone. - HeatCalendar: 12 weeks of days in columns, Monday on top, padded so weeks align, five levels from the empty step to the darkest; hover shows a tooltip 'Tue, Sep 16 · 42 deploys'; a Less → More key; an image label with the total and the busiest day. - BarList: ranked rows, each a translucent bar behind its label and value. - Funnel: one column per step with its count, a bar filling the share of the first step in ordinal blues, and the conversion from the step before ('57% from signed up'). Two themes, dark and light, each with its own chart colours. Selected variant — Night (night): Palette for this theme (Night): --mx-down #ff8a7a; --mx-f1 #9ec5f4; --mx-f2 #5598e7; --mx-f3 #2a78d6; --mx-f4 #184f95; --mx-ground #0a0b0e; --mx-ink #f2f3f5; --mx-l0 #1e2128; --mx-l1 #184f95; --mx-l2 #2a78d6; --mx-l3 #5598e7; --mx-l4 #9ec5f4; --mx-line rgba(255, 255, 255, 0.08); --mx-muted #9a9ca4; --mx-s1 #3987e5; --mx-s2 #d95926; --mx-s3 #199e70; --mx-tile #121317; --mx-tip #f2f3f5; --mx-tip-ink #0a0b0e; --mx-up #5fd39a. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "night". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Scrub the revenue trend with the pointer or arrow keys; hover a day in the calendar or a slice of the ring to read it; the request counter ticks on its own while visible. Motion: The request bars shift every 1.2s and ease to their new heights over 600ms; the live dot pulses. Ring slices thicken over 160ms on hover. Reduced motion stops the ticking and the pulse. Accessibility: Each tile is an article labelled by its title. Charts are images with text summaries; the trend is keyboard-scrubbable with a live label. The ring's legend and the funnel give every value as text, so nothing relies on colour alone. Status chips carry an arrow and screen-reader text. Responsive behavior: Four, two or one columns from the grid's own width; the funnel's steps wrap; rows grow to fit their content. Touch: Charts read at a glance without hover; tooltips and scrubbing are extras. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Scrub the revenue trend with the pointer or arrow keys; hover a day in the calendar or a slice of the ring to read it; the request counter ticks on its own while visible.

Motion

The request bars shift every 1.2s and ease to their new heights over 600ms; the live dot pulses. Ring slices thicken over 160ms on hover. Reduced motion stops the ticking and the pulse.

Accessibility

Each tile is an article labelled by its title. Charts are images with text summaries; the trend is keyboard-scrubbable with a live label. The ring's legend and the funnel give every value as text, so nothing relies on colour alone. Status chips carry an arrow and screen-reader text.

Responsive

Four, two or one columns from the grid's own width; the funnel's steps wrap; rows grow to fit their content.

On touch

Charts read at a glance without hover; tooltips and scrubbing are extras.