# Bento Noir

> Graphite black × acid lime, a dense analytics dashboard

- URL: https://ui.ddct.top/p/bento-noir-analytics
- Category: Dashboard
- Tags: Dark, Bento, Dashboard, Data Viz, Minimal
- Access: Included with Pro
- Live demo: https://ui.ddct.top/api/demo/bento-noir-analytics
- Updated: 2026-10-10

## About

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.

中文简介：深石墨面板以 12px 间距拼成 Bento 网格，所有数字使用等宽表格数字；青柠色只用在最重要的 KPI 与“本期”曲线上。营收曲线加载时自绘，悬停显示十字线与对比提示框。适合 SaaS 后台、金融分析、运营监控类产品。

## 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

| Name | Hex | Role |
| --- | --- | --- |
| 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

## How to use

- Copy the prompt from https://ui.ddct.top/p/bento-noir-analytics into any AI that writes front-end code.
- Or export it as an agent skill, a Cursor rule or AGENTS.md from the same page.
- Or connect the UI Atlas MCP server (https://ui.ddct.top/mcp) and ask: “Build this page in the bento-noir-analytics style from ui-atlas”.

## 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.

_The full prompt is available to Pro members at https://ui.ddct.top/p/bento-noir-analytics._