Grafana

---
version: alpha
name: Grafana-design-analysis
description: Grafana's design language is an observability platform that puts data first: a deep charcoal `#111217` canvas with the signature orange `#f46800` for brand and alerts. Text and charts are light on dark, panels are bordered cards, and color is reserved almost entirely for data series and status. The interface is dense, precise, and built for long monitoring sessions.

colors:
  primary: "#f46800"
  primary_light: "#ff9830"
  canvas: "#111217"
  surface: "#1f2937"
  surface_2: "#2a3441"
  panel: "#1b1d21"
  fg_default: "#d8d9da"
  fg_muted: "#9fa1a6"
  fg_faint: "#62656b"
  border_default: "#3b3f45"
  link: "#5794f2"
  success: "#73bf69"
  warning: "#fade2a"
  danger: "#f2495c"

typography:
  display-xxl:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Inter", system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Grafana

## 1. Visual Theme & Atmosphere

Grafana is the observability tool where data is the star: the entire interface is a dark, near-black canvas `#111217` that lets time-series lines and heatmaps glow. The orange `#f46800` is the single brand moment, while the remaining color budget is spent on data series, alert states, and status. The tone is focused, technical, and unblinking — built for screens watched all night.

## 2. Color System

- **Grafana orange** `#f46800` — brand, primary buttons, active nav.
- **Canvas** `#111217` with elevated panels `#1b1d21` / surfaces `#1f2933` / `#2a3441`.
- Text light-on-dark: `#d8d9da` default, muted `#9fa1a6`, faint `#62656b`.
- Semantic palette for status: success `#73bf69`, warning `#fade2a`, danger `#f2495c`, link `#5794f2`.

## 3. Typography

Inter (system fallback) at a compact scale. Body 14px/1.5; dashboard titles larger but never heavy. Monospace is used for metrics, units, and query text. Density is high but legibility is protected by clear size steps.

## 4. Components & Shape

The signature component is the panel — a bordered card (`#3b3f45`) with a title bar, dropdown, and drag handles. Buttons are 2-4px rectangles; the primary is a muted orange. Time-picker, variables bar, and legend are the persistent controls. Color-coding of series follows a curated, high-contrast categorical palette.

## 5. Layout & Spacing

A 4px grid with 8/16/24 spacing tokens. Dashboards are a masonry of resizable panels with 8px gutters; the left nav is collapsible. The header is a slim dark bar with search and the time-range picker.

## 6. Motion

Charts animate on refresh with smooth transitions; panels drag and resize with live feedback. Motion is functional — it communicates data changes — and stays fast (<200ms).