数据看板

Bento Noir

石墨黑 × 酸性青柠的高密度数据看板

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

Pro 会员可用 · 更新于 · Live demo

签名细节

  • 青柠色填充的主 KPI 卡
  • 自绘曲线 + 十字线提示框
  • 侧栏激活项的边缘青柠条

页面区块

  1. 侧边栏
  2. 顶栏
  3. KPI 行
  4. 营收面积图
  5. 环形图
  6. 柱状图
  7. 实时动态
  8. 目标进度
  9. 客户表格

色板

  • Graphite #0B0B0C — background
  • Panel #131315 — surface
  • Bone #EDEDEF — text
  • Acid Lime #D4FF3A — accent
  • Sky #6EA8FE — data-2
  • Violet #A78BFA — data-3
  • Coral #FF6B4A — danger

字体

  • Geist — UI
  • Geist Mono — numbers

提示词目录

  1. Design Intent
  2. Design Tokens
  3. Typography
  4. Color & Material
  5. Layout & Grid
  6. Page Blueprint
  7. Components
  8. Motion & Interaction
  9. Responsive Behavior
  10. Accessibility
  11. Do / Don't
  12. Output Requirements

如何使用这套风格

复制提示词全文粘贴给任意 AI；或下载 Agent 技能 / Cursor 规则 / AGENTS.md；或在接入 MCP 的工具里说：“用 ui-atlas 的 bento-noir-analytics 风格做这个页面”。

免费预览

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