Grafana
An open-source observability platform with a dark canvas (#181B1F base) and Grafana's signature orange (#F46800) used on the logo, primary CTAs, and key navigation elements. The product is a dashboard-building environment: a flexible grid of panels (charts, stats, tables, alerts) that teams compose to visualize any data source. The UI is deliberately neutral — dark background lets colorful data visualizations take center stage without competition. Typography uses Inter at dense sizes. The overall aesthetic is open-source pragmatic: functional, extensible, and focused on getting the most information onto the screen at once.
Color Tokens
1. Visual Theme & Atmosphere
Grafana is where you see the truth about your systems. The dark interface serves this purpose: colorful charts read clearly against dark backgrounds, and the neutral chrome doesn't compete with the data. Orange is Grafana's identifier — not used within dashboards (where it might be confused with warning-state data) but reserved for the product chrome and brand. The panel-based composition system lets users build anything from a simple uptime display to a complex multi-datasource operations center.
2. Color System
- Canvas: #181B1F — Grafana's characteristic dark gray, slightly warmer than pure black
- Panel background: #1F2126 — panels sit slightly elevated from the dashboard canvas
- Orange: #F46800 — brand orange; logo, primary buttons, active navigation
- Data palette: Green #73BF69, Blue #5794F2, Red #F2495C, Yellow #FADE2A — standard chart series colors
- Semantic: Green (healthy), Red (critical), Yellow (warning) — matching chart language to alert language
- Ink: #D9D9D9 — light gray text, not pure white, for extended session comfort
3. Typography
Inter at 14px body — observability tools need to pack information. Stat panels display large numbers (48–72px) for at-a-glance reading. Axis labels at 11–12px. Alert and legend text at 13px. The hierarchy is driven by information priority, not visual aesthetics.
4. Components & Patterns
- Dashboard grid: CSS grid of draggable panels, variable column/row sizing
- Timeseries panel: Multi-series line chart, legend below, interactive hover tooltip
- Stat panel: Large metric number + trend sparkline + threshold color coding
- Table panel: Dense rows with column sorting, cell coloring based on value thresholds
- Alert rules list: Alert name, state (Firing/Normal), last evaluation, labels
- Variable dropdowns: Top-of-dashboard filter bar for dynamic dashboard parameterization
5. Spacing & Layout
Dashboard: full-viewport grid. Nav sidebar: 56px icon-only (expandable to 240px with labels). Panel inner padding: 8px. Dashboard grid gap: 8px between panels. Very dense — every pixel serves a metric.
6. Motion & Interaction
Charts auto-refresh on configurable intervals. Time range picker has a smooth date selection animation. Panel editing shows a slide-in sidebar. Alert state transitions animate the status indicator. Graph crosshair syncs across all panels simultaneously — the flagship interaction.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for