Bento Noir
Graphite black × acid lime, a dense analytics dashboard
Graphite panels tile a bento grid with 12px gaps, every number set in tabular monospace; acid lime is reserved for the most important KPI and the current-period line. The revenue chart draws itself on load and shows a crosshair comparison tooltip on hover. For SaaS back offices, finance and operations monitoring.
Included with Pro · Updated · Live demo
Signature details
- Lime-filled hero KPI tile
- Self-drawing chart with crosshair tooltip
- Lime edge bar on the active nav item
Page sections
- Sidebar
- Top bar
- KPI row
- Revenue area chart
- Donut chart
- Bar chart
- Live activity
- Goal progress
- Accounts table
Palette
- Graphite
#0B0B0C— background - Panel
#131315— surface - Bone
#EDEDEF— text - Acid Lime
#D4FF3A— accent - Sky
#6EA8FE— data-2 - Violet
#A78BFA— data-3 - Coral
#FF6B4A— danger
Typefaces
- Geist — UI
- Geist Mono — numbers
Prompt outline
- Design Intent
- Design Tokens
- Typography
- Color & Material
- Layout & Grid
- Page Blueprint
- Components
- Motion & Interaction
- Responsive Behavior
- Accessibility
- Do / Don't
- Output Requirements
How to use this style
Copy the full prompt into any AI; or download it as an agent skill / Cursor rule / AGENTS.md; or, in any MCP-connected tool, say: “Build this page in the bento-noir-analytics style from ui-atlas”.
Free preview
# Bento Noir — Revenue Analytics Dashboard You are a senior product designer specializing in data-dense SaaS interfaces and a front-end engineer fluent in SVG charts. Build the main "Overview" screen of a fictional revenue analytics product called **"Ledgerline"** in the **Bento Noir** style described below. Every value is a specification, not a suggestion. ## 1. Design Intent Dense, quiet, instrument-grade — like the dashboard of a well-made electric car at night. Near-black graphite panels sit in a tight 12-column bento grid separated by only 12px of darkness. Color is reserved for data: one acid-lime accent marks "this period" and the single most important KPI; sky, violet and coral encode secondary series and risk. Everything numeric is set in a monospace with tabular figures so columns of numbers never jitter.