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
version: alpha name: Grafana description: "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."
colors: primary: "#F46800" on-primary: "#ffffff" primary-hover: "#DC5C00" ink: "#D9D9D9" ink-muted: "#8E8E8E" canvas: "#181B1F" surface-1: "#212327" surface-2: "#292C30" border: "#3D4045" panel-bg: "#1F2126" success: "#73BF69" danger: "#F2495C" warning: "#FF9830" info: "#5794F2" chart-green: "#73BF69" chart-blue: "#5794F2" chart-red: "#F2495C" chart-yellow: "#FADE2A"
typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: -0.01em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64]
radius: sm: 2px md: 4px lg: 8px pill: 9999px
shadows: card: "0 1px 4px rgba(0,0,0,0.4)" elevated: "0 4px 16px rgba(0,0,0,0.5)" panel: "0 1px 2px rgba(0,0,0,0.3)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
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.