Analytics Dark (Grafana-esque)

---
name: analytics-dark-grafana
description: Apply the Analytics Dark (Grafana-esque) visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Analytics Dark (Grafana-esque), mentions Grafana style, observability dashboard, ops monitoring UI, or describes draggable panel grid, time-series charts, threshold colors (green/yellow/red) — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Analytics Dark (Grafana-esque) Design System

Dark-first ops monitoring UI in the Grafana mold: a wall-to-wall grid of flat panels on near-black, time-series charts with threshold-colored series (green/yellow/red), tight 8px spacing, 2px radii, and no shadows at all. Built to be read at 2 a.m. in a dark NOC.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Analytics Dark (Grafana-esque).
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Grafana style, observability dashboard, ops monitoring UI, metrics dashboard), or describes its traits: draggable panel grid; time-series charts; threshold colors (green/yellow/red); flat, shadowless panels; dark-first palette; compact 12–14px type.

## Design tokens

### Color palette

- Canvas behind the panel grid: `#111217` (--color-bg)
- Panel background: `#181b1f` (--color-surface)
- Primary text — soft gray-lavender, Grafana's body color: `#ccccdc` (--color-text)
- Axis labels, legends, panel descriptions: `#8e8e9a` (--color-text-muted)
- Interactive blue: links, focus, default series color: `#5794f2` (--color-accent)
- Healthy/nominal series and stat thresholds: `#73bf69` (--color-ok)
- Warning threshold: `#fade2a` (--color-warning)
- Critical/alerting threshold: `#f2495c` (--color-critical)
- 1px panel and input borders: `#2c3235` (--color-border)

### Typography

- Display / headings: Inter (fallback: Roboto, Helvetica Neue, sans-serif)
- Body: Inter (fallback: Roboto, Helvetica Neue, sans-serif)
- Mono / data: JetBrains Mono (fallback: Menlo, Consolas, monospace)
- Type scale: 1.2 ratio, base 13px — computed steps: 13px / 16px / 19px / 22px / 27px / 32px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.25, letter-spacing 0
- Body: line-height 1.4, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32 — Maximum information density: 8px gaps between panels, 8–12px panel padding, 12px axis text. Whitespace is spent on data, not decoration.
- Border radius: sm 2px, md 4px — Barely-rounded corners; anything softer reads as consumer, not ops.
- Border treatment: 1px solid #2c3235 — Panels separate from the canvas by border and a slightly lighter fill — never by shadow.

### Shadows

- none: `none` — Panels and cards — the style is deliberately flat
- overlay: `0 8px 24px rgba(0, 0, 0, 0.5)` — Only for modals and dropdown menus floating above the grid

### Layout

- Max content width: 1920px
- Full-width 12- or 24-column draggable panel grid; no page max-width in practice
- Slim top bar with dashboard title, variable dropdowns, and a time-range picker at top right
- Panels are self-contained: 500-weight title row, chart body, legend bottom or right
- Repeated panel rows per host/service via template variables

### Effects

- Chart crosshair with shared tooltip across panels
- Threshold bands drawn as translucent red/yellow regions behind series
- Alert-state panel header tint (red at ~15% opacity)

### Motion

- Easing: linear; durations 100ms / 150ms / 250ms
- Almost no ornamental motion — data refresh redraws in place
- Panel drag/resize snaps to the grid with a translucent placeholder
- Tooltips and crosshairs track the cursor with zero lag or easing

## CSS variables (drop-in)

```css
:root {
  --color-bg: #111217;
  --color-surface: #181b1f;
  --color-text: #ccccdc;
  --color-text-muted: #8e8e9a;
  --color-accent: #5794f2;
  --color-ok: #73bf69;
  --color-warning: #fade2a;
  --color-critical: #f2495c;
  --color-border: #2c3235;
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
  --border-default: 1px solid #2c3235;
  --font-display: Inter, Roboto, "Helvetica Neue", sans-serif;
  --font-body: Inter, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", Menlo, Consolas, monospace;
  --text-base: 13px;
  --leading-heading: 1.25;
  --leading-body: 1.4;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: linear;
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 250ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** 48px top bar on bg with 1px bottom border: breadcrumb-style dashboard title left, variable selects center, time-range picker and refresh interval right; optional icon-only left rail
- **Hero:** No hero — the dashboard IS the page; the closest analog is a top row of single-stat panels with big threshold-colored numbers
- **Card:** Panel: surface fill, 1px border, 2px radius, 8px padding, 13px 500-weight title with a hover-revealed kebab menu; body is the visualization
- **Button (primary):** Accent #5794f2 fill, white text, 2px radius, 32px height, 13px label; brightens slightly on hover
- **Button (secondary):** Transparent fill, 1px #2c3235 border, text color; border lightens on hover
- **Form fields:** Dark input (#111217) on panel, 1px border, 2px radius, 32px height; focus ring in accent at 40% opacity

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A dense grid of flat #181b1f panels, each a titled time-series chart whose series and stat values flip green → yellow → red as metrics cross alert thresholds. Spend boldness here; keep everything else quiet.

## Do

- Keep green/yellow/red strictly mapped to ok/warning/critical thresholds
- Design panels to be legible at half size — dashboards get squeezed onto TVs
- Use template-variable dropdowns rather than duplicating dashboards
- Show units and axis labels; ops users mistrust naked numbers

## Don't

- No drop shadows, gradients, or glass on panels — flatness is the brand
- Don't exceed ~8 series per chart without a scrollable legend
- Don't use the alert colors for buttons or decoration
- Never hide the time range; every chart is meaningless without it

## Accessibility notes

- Warning yellow #fade2a is illegible as text on light surfaces and only ~11:1 on the dark bg as a fill — pair threshold colors with icons or labels, never color alone
- 12–13px body text is below comfortable minimums for some users; expose a density/zoom preference and keep browser zoom unbroken
- Red/green threshold pairs must also differ in position or label for color-blind operators (Grafana itself offers color-blind-safe series palettes)

## Reference sites

- Grafana: https://grafana.com
- Datadog: https://www.datadoghq.com
- Kibana: https://www.elastic.co/kibana

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip analytics-dark-grafana.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/analytics-dark-grafana.json

Settings → Capabilities → Skills → Upload skill → analytics-dark-grafana.zip