Bright observability brand: a clean white canvas opened by a soft pastel gradient hero wash (peach to lilac to sky), black Poppins-600 headlines with tight negative tracking, one cobalt-blue #1b55f5 CTA, a rounded white Ask-AI composer, and a multi-brand orange/yellow/cyan palette reserved for the flame logo and flat illustrations.
Browse Grafana in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: grafana.com (live DOM, computed styles), 2026-07-16 (desktop 1568px). Coverage: home / marketing. Dashboard: pending login (needs-dashboard). Responsive: breakpoints from tokens only; mobile rendering not verified.
Bright, optimistic observability brand: a clean white canvas opened by a soft pastel gradient wash (peach → pink → lavender → sky-blue) behind a big black Poppins headline, with a full multi-colour brand system (Grafana orange, cobalt blue, sunflower yellow, cyan) that appears in the logo flame, geometric illustrations and category accents. The chrome itself is restrained — black text on white, a cobalt-blue primary button, and thin gray hairlines — so the colour lives in the hero gradient and playful illustration blocks rather than the UI. A rounded white "Ask AI" composer sits under the hero, and a dark event bar anchors the bottom. The feel is friendly and modern-technical: generous whitespace, tight-tracked geometric headlines, soft rounded controls. Feels: bright, friendly, colorful, modern-technical.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Primary page background, cards |
| surface | #f4f4f6 | Section tint, inset panels |
| surface-2 | #e6e6ea | Hover fills |
| dark | #2e2e38 | Dark event/footer bar |
| Token | Hex | Role / usage |
|---|---|---|
| peach | #f4d6bb / #f3d5bb | Gradient start (warm) |
| lilac | #eaaafd | Gradient mid (pink-lilac) |
| periwinkle | #eaf0ff / #d1e3f7 | Gradient toward blue |
| sky | #8ec0ff | Gradient end (cool) |
| Token | Hex | Role / usage |
|---|---|---|
| text | #000000 | Primary text, headings |
| ink-2 | #2e2e38 / #454554 | Strong secondary text |
| muted | #67677e | Body / subhead |
| muted-2 | #505062 | Tertiary text |
| faint | #bcbcc8 | Captions, placeholder |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #1b55f5 | Primary CTA, links, active (also #2a68fb) |
| orange | #ff671d | Grafana brand/logo flame, illustration accent |
| yellow | #fbe136 | Illustration / category accent |
| cyan | #3fc6eb | Illustration / category accent |
| Token | Hex | Role / usage |
|---|---|---|
| border | #e5e5e9 | Default hairline (most used) |
| border-2 | #d8d8df | Stronger dividers |
| border-strong | #aeaebc / #bcbcc8 | Control borders |
| border-black | #000000 | Outline-button border |
Rule: UI chrome stays black-on-white with a single cobalt-blue action colour; the orange/yellow/cyan multi-brand palette appears only in the logo, hero gradient and illustrations.
Poppins, "Poppins Fallback", sans-serif — geometric, weight 600.Inter, "Inter Fallback", sans-serif.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 60 / 75 | 600 | -1.5px |
| Section (h2) | 48 / 54 | 600 | -1.2px |
| Subsection (h3) | 30 / 37.5 | 600 | -0.75px |
| Body | 16 / 24 | 400 | normal, Inter |
| Small / caption | 13 / 19.5 | 500 | normal, Inter, #67677e |
| UI / button | 14 | 500 | normal, Inter |
Patterns: Poppins headings carry consistent negative tracking (~-2.5%); body is Inter. Weight tops at 600 for display, 500 for UI.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.