Grafana 的界面为长时间值守而生：近黑 #111217 画布托起 #181B1F 面板，橙色 #F46800 只在告警与品牌位置上亮起，余下全是灰度数据。细发丝边框、2px 圆角与高密度图表把信息量推到极限，同时保持扫描效率——监控、可观测性与运维大屏的行业默认语言。
Grafana设计系统
提示词模板
基础模板
Design a Grafana-inspired observability dashboard. - Near-black #111217 canvas with #181B1F panels; - #F46800 orange reserved for alerts and brand highlights; - Hairline #2C3235 borders, 2px radii, dense grids; - High-density time series, gauges, and stat panels; - Dark ops console layouts. Colors: #F46800, #111217, #181B1F, #CCCCDC with #F46800 accent. Typography: Inter.
变体提示词
📱 移动端
Design a mobile app with Grafana aesthetics. Use Grafana color identity with #F46800 accents. Clean, touch-friendly, native feel.
💻 Web端
Design a web application with Grafana style. Use Grafana color identity with #F46800 accents. Professional, responsive layout.
📊 仪表板
Design a dashboard with Grafana design language. Use Grafana color identity with #F46800 accents. Data-rich, organized, clear hierarchy.
📄 落地页
Design a landing page with Grafana visual identity. Use Grafana color identity with #F46800 accents. Compelling, conversion-focused.
使用示例
Grafana 监控墙
仪表板Create a monitoring wall with Grafana style: near-black canvas, #181B1F panels, orange #F46800 alert accents, and high-density time-series charts.
Grafana 日志查询界面
Web 端Design a log explorer with Grafana aesthetics: dark surfaces, hairline borders, monospace log lines, and orange highlights for errors.
✅ 适合场景
- 监控与告警大屏
- 可观测性平台
- 运维与 SRE 控制台
❌ 不适合场景
- 面向大众的消费级应用
- 需要柔和情绪的官网
DESIGN.md 文件
符合 design.md 开放格式的设计系统描述，可复制或下载后交给 AI 编程工具使用。