Bento Stats

Features

• Twelve-cell grid-template-areas bento — stats, runs, contacts and timeline cells reflow across one, two, three and four columns
• Distinct skeleton vocabularies per cell: big-num counters, mini-bar sparklines, avatar lists, timelines, heatmaps, progress bars and status dots
• Rows grow to their content via auto tracks so tall cells never clip — the page scrolls instead
• Per-cell accent hues computed via oklch color-mix from semantic palette tokens
• Skeleton wireframe placeholders with dashed borders and color-mixed accent fills
• A pulsing .sk--status-live dot animates opacity only for composite-friendly motion
• All colors, spacing, and radii driven by design-system tokens
• Dark/light support via the body.dark class remap (CSS-only, no bundled toggle)
• Prefers-reduced-motion support for accessibility

Accessibility

ARIA label

.bento grid has aria-label="Stats dashboard bento grid"

Busy state

.bento starts aria-busy="true" and is cleared to false by markReady() once rendered

Reduced motion

prefers-reduced-motion: reduce kills all animations and transitions

Focus-visible

Interactive focus styling relies on :focus-visible from the design tokens

Dynamic viewport

Uses 100dvh for proper mobile viewport height

Customise it with AI

Open Bento Stats in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the layout is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.