---
title: "Grafana Labs design system"
variant: extended
source: https://grafana.com/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/grafana-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Grafana Labs · Design System

> Open observability, clearly presented

**Theme:** light · **Industry:** devtools · **Source:** https://grafana.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Grafana Labs pairs a quiet light canvas and bold editorial headings with restrained blue calls to action. Product interfaces, customer proof, and soft pastel gradients make a long SaaS homepage feel structured without losing visual warmth.

## North star

Keep the canvas quiet and the typography confident; use blue only to signal action, and let product evidence carry the detail.

## Overview

The page is built on a cool, near-white canvas (#f4f4f6), with black headings and muted grey copy keeping the long homepage calm and legible. Signal Blue (#1b55f5) is reserved for primary actions and links, so it reads as a clear interaction cue rather than a decorative wash. Soft pastel gradients—peach, lilac, pale blue and teal—appear behind the hero and final product-led CTA; they frame the content instead of replacing the neutral base. Poppins gives large headings a rounded, confident editorial character, while Inter handles navigation, body text, labels and controls. The layout alternates centered statements with left-aligned feature splits, product UI, customer proof and dense link groups. Generous gaps between major blocks are balanced by compact navigation and footer columns. Cards mostly rely on pale surfaces, hairline borders and rounded corners; dark product screenshots supply contrast and technical detail without turning the site into a dark theme.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#f4f4f6` | `--color-cloud-canvas` | surface | Dominant page background across the hero, feature sections, logo band, and most content blocks. |
| Signal Blue | `#1b55f5` | `--color-signal-blue` | brand | Primary CTA fill and prominent inline link colour; keep it focused on interactive elements. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Main headings, strong body text, and high-contrast labels across the page. |
| Mist Border | `#e6e6ea` | `--color-mist-border` | neutral | Most frequent hairline and divider colour, including section boundaries and navigation details. |
| Slate Copy | `#454554` | `--color-slate-copy` | neutral | Muted supporting text where readable contrast is needed beneath prominent headings. |
| Pure White | `#ffffff` | `--color-pure-white` | surface | Inputs, selected card faces, navigation surfaces, and contrast panels against the canvas. |
| Graphite Panel | `#2b2d32` | `--color-graphite-panel` | surface | Dark editorial card backgrounds and inverse surfaces in content and insight cards. |
| Soft Divider | `#d5d5d6` | `--color-soft-divider` | neutral | Secondary input and interface outlines; a quieter supporting neutral than the primary border. |
| Muted Violet Grey | `#67677e` | `--color-muted-violet-grey` | neutral | Secondary muted text in navigation, footer, and small supporting labels. |
| Apricot Wash | `#fad7ac` | `--color-apricot-wash` | accent | Warm-tinted surface and accent, including community content; not a primary action colour. |
| Peach Card | `#f4d6bb` | `--color-peach-card` | surface | Warm card background seen in editorial content cards. |
| Pastel Coral | `#f7bfa3` | `--color-pastel-coral` | accent | One stop in the soft hero and CTA gradient, not a standalone brand control colour. |
| Soft Lilac | `#e6b3e6` | `--color-soft-lilac` | accent | Pastel gradient colour behind hero and lower CTA content. |
| Pale Sky | `#a3d8f7` | `--color-pale-sky` | accent | Cool pastel gradient stop that balances the hero and CTA wash. |
| Quiet Aqua | `#7be7e7` | `--color-quiet-aqua` | accent | Subtle gradient stop within broad atmospheric background treatments. |
| Deep Slate | `#505062` | `--color-deep-slate` | neutral | Additional subdued text tone for secondary copy and interface details. |

### Semantic aliases

`--color-canvas` → `#f4f4f6` (Cloud Canvas) · `--color-surface` → `#ffffff` (Pure White) · `--color-surface-2` → `#2b2d32` (Graphite Panel) · `--color-surface-3` → `#e6e6ea` (Mist Border) · `--color-surface-4` → `#fad7ac` (Apricot Wash) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#454554` (Slate Copy) · `--color-text-subtle` → `#67677e` (Muted Violet Grey) · `--color-border` → `#e6e6ea` (Mist Border) · `--color-accent` → `#1b55f5` (Signal Blue) · `--color-accent-2` → `#fad7ac` (Apricot Wash) · `--color-accent-3` → `#f7bfa3` (Pastel Coral) · `--color-on-accent` → `#ffffff` (Pure White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f4f4f6` | 19.12:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#2b2d32` | 1.52:1 | fail |
| `#000000` | `#e6e6ea` | 16.87:1 | AAA |
| `#454554` | `#f4f4f6` | 8.56:1 | AAA |
| `#454554` | `#ffffff` | 9.41:1 | AAA |
| `#454554` | `#2b2d32` | 1.46:1 | fail |
| `#454554` | `#e6e6ea` | 7.56:1 | AAA |
| `#67677e` | `#f4f4f6` | 5.01:1 | AA |
| `#67677e` | `#ffffff` | 5.5:1 | AA |

### Gradients

- `linear-gradient(rgb(244, 244, 246) 20%, rgba(255, 255, 255, 0)), linear-gradient(120deg, rgb(247, 191, 163) 10%, rgb(230, 179, 230) 40%, rgb(163, 216, 247) 75%, rgb(123, 231, 231))`
- `linear-gradient(rgba(255, 255, 255, 0), rgb(244, 244, 246) 80%), linear-gradient(120deg, rgb(247, 191, 163) 10%, rgb(230, 179, 230) 40%, rgb(163, 216, 247) 75%, rgb(123, 231, 231))`
- `linear-gradient(rgb(244, 244, 246) 0%, rgb(244, 244, 246) 10%, rgba(244, 244, 246, 0.95) 20%, rgba(244, 244, 246, 0.85) 35%, rgba(244, 244, 246, 0.6) 50%, rgba(244, 244, 246, 0.3) 65%, rgba(244, 244, 246, 0.1) 80%, rgba(`
- `linear-gradient(to top, rgb(244, 244, 246) 0%, rgb(244, 244, 246) 10%, rgba(244, 244, 246, 0.95) 20%, rgba(244, 244, 246, 0.85) 35%, rgba(244, 244, 246, 0.6) 50%, rgba(244, 244, 246, 0.3) 65%, rgba(244, 244, 246, 0.1) 80`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 700 | Navigation, body copy, captions, links, buttons, and form controls. | Roboto |
| Poppins | `--font-display` | webfont | 600, 500 | Display and page headings, including hero and section titles. | Plus Jakarta Sans |

- **Inter:** Neutral, highly legible sans; use regular body text, medium controls, and semibold links without uppercase styling.
- **Poppins:** Use confident semibold headings, compact negative tracking on display sizes, and natural sentence case.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.25 | -0.025em | — | Poppins | Oversized lead statements and prominent page-level display headings. |
| h1 | 48px | 600 | 1.13 | -0.025em | — | Poppins | Primary hero heading and major page titles. |
| h2 | 36px | 600 | 1.13 | 0 | — | Poppins | Main feature-section and CTA headings. |
| h3 | 30px | 600 | 1.25 | -0.025em | — | Poppins | Subsection headings and emphasized feature titles. |
| h4 | 24px | 500 | 1.25 | -0.025em | — | Poppins | Smaller card and editorial headings. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Feature descriptions, explanatory copy, and general paragraph text. |
| caption | 14px | 500 | 1.38 | 0 | — | Inter | Supporting labels, small explanatory notes, and metadata. |
| button | 13px | 500 | 1.5 | -0.01em | — | Inter | Primary and secondary action labels. |
| nav | 13px | 500 | 1.5 | -0.01em | — | Inter | Header navigation and compact utility links. |
| link | 14px | 600 | 1.43 | 0 | — | Inter | Inline and standalone text links, often blue when interactive. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 12, 16, 20, 24, 32, 48, 64 px.
- Section rhythm 64px · element gap 12px · card padding — · max content width 1248px.

Use a centered content frame with a measured page maximum width of 1248px, broad section breathing room, and a comfortable density. The top hero is centered; feature stories switch to aligned split rows, while product, customer, and editorial blocks mix centered introductions with multi-column content. The products area becomes a denser four-column card grid, and the footer uses compact link columns. Keep repeated section spacing generous and internal gaps more compact.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `24px` · media `12px` · nav `4px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px` · 2xl `24px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1p`
- Shadow `hairline` (link, button, nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 141, 54, 0.4) 0px 0px 20.422px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: use subtle borders and white or tinted surfaces to distinguish cards rather than heavy shadows. Rounded cards and screenshot frames add grouping, while light, restrained elevation appears on select interface elements. Preserve clear contrast between the pale canvas, white panels, and dark product imagery.

## Imagery

Use authentic product-interface screenshots as the primary evidence: dark dashboards and application views sit inside rounded, lightly bordered frames against the pale page. Combine these with customer and community photography, partner and certification logos, and small integration marks. Pastel gradients create atmospheric backdrops, while screenshots remain crisp and legible. Avoid treating the gradient as a substitute for product content.

## Components

### Primary CTA

Signal Blue (#1b55f5) button with white text and an 8px radius; use for high-intent actions such as starting free.

### Announcement strip

Slim top-line announcement with small copy, a learn-more link, and minimal chrome.

### Feature split

Alternate short copy and blue text links with dark product screenshots in a two-sided story layout.

### Integration field

Centered open-standards message surrounded by small integration marks with ample breathing room.

### Product card grid

Grouped product and telemetry links in compact white cards within a pale bordered container.

### Editorial feature card

Large rounded image-and-copy panel using dark graphite or warm peach surfaces for contrast.

### Newsletter form

White email input and blue Subscribe action, paired with concise supporting copy.

### Measured component styles

- **Primary button** (“Get started free”): background #1b55f5 · text #ffffff · border 1px solid #1b55f5 · radius 8px · padding 12px 20px · 600 18px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Downloads”): transparent background · text #67677e · border 1px solid · radius 8px · padding 8px 12px · 500 11px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“AI-Powered Observability”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter
- **Input**: background #ffffff · text #000000 · border 1px solid #d8d8df · radius 8px · padding 13px 44px · 400 14px Inter
- **Card** (“Insights on the state of observability E”): background #2b2d32 · text #000000 · border 1px solid #909194 · radius 24px · padding 0px · 400 16px Inter
- **Navigation item** (“Grafana Labs is a Leader in the 2026 Gar”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use Cloud Canvas (#f4f4f6) as the dominant page background.
- Reserve Signal Blue (#1b55f5) for actions and meaningful links.
- Set prominent headings in Poppins and supporting UI in Inter.
- Alternate centered introductions with aligned product and feature layouts.
- Show product screens clearly inside lightly framed rounded containers.
- Use pastel gradients as soft backdrops, not as loud content surfaces.

## Don't

- Do not turn the full page into a dark theme.
- Do not use blue as a large decorative background field.
- Do not crowd major sections together.
- Do not add heavy shadows to ordinary cards.
- Do not let screenshots overwhelm their adjacent explanatory copy.
- Do not use gradients in place of real product evidence.

## Agent prompt

Build a new Grafana Labs-style SaaS page with a calm Cloud Canvas (#f4f4f6) foundation, True Ink (#000000) headings, and Slate Copy (#454554) supporting text. Use Signal Blue (#1b55f5) selectively for primary buttons and links, with white button text. Set display and section headings in Poppins; use Inter for navigation, body copy, labels, and forms. Compose spacious sections that alternate centered statements with split feature rows and compact card grids. Use crisp dark product screenshots in rounded, lightly bordered frames. Add soft pastel gradient washes using Pastel Coral (#f7bfa3), Soft Lilac (#e6b3e6), Pale Sky (#a3d8f7), and Quiet Aqua (#7be7e7) only behind key narrative moments. Prefer hairline borders over strong shadows, and keep the footer dense but orderly.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, subheading, paired plan choices, primary CTA, and Ask AI bar. | start free, compare plans, ask AI | pastel gradient wash, blue primary button, wide prompt bar |
| 2 | logo-cloud | Centered trust statement above a horizontal row of customer logos. | social proof | monochrome partner marks, open spacing |
| 3 | feature-split | Section heading followed by a split copy-and-product-interface feature row. | feature discovery, inline links | dark product screenshot, small icon accent |
| 4 | feature-split | Alternating split row with product image and adjacent explanatory copy. | cost optimization, feature link | dashboard screenshot, pale framed media |
| 5 | feature-split | Split text and screenshot, alternating placement with the previous feature row. | faster troubleshooting, feature link | dark trace interface, warm media frame |
| 6 | integrations | Centered heading and description surrounded by scattered integration icons. | explore integrations, open standards | floating partner marks, light canvas |
| 7 | product-grid | Centered introduction above a dense multi-column product and telemetry card grid. | browse products, navigate by category | grouped link cards, pale bordered container |
| 8 | other | Security statement and link sit beside a row of certification marks. | view certifications | certification logo row, compact labels |
| 9 | video | Centered callout over a full-width product demo image. | try demo, open Grafana Play | dashboard backdrop, centered overlay copy |
| 10 | content-feed | Editorial cards in a multi-column row, with varied image and surface treatments. | read more, browse insights | dark feature card, blue-tinted card, image-led cards |
| 11 | testimonials | Centered title and customer selector above a wide testimonial panel. | switch customer, read customer quote | tab-like customer names, logo and quote panel |
| 12 | feature-split | Wide rounded editorial panel with copy on one side and a photo collage on the other. | explore projects, visit community | warm apricot surface, community photo collage |
| 13 | cta | Centered welcome, plan options, and CTA above overlapping product-interface images. | create free account, explore plans | pastel gradient background, layered dashboard screenshots |
| 14 | newsletter | Two-column band pairing a question prompt with a newsletter signup form. | ask a question, subscribe by email | white input fields, blue submit button |
| 15 | footer | Dense multi-column navigation lists on a subtly lighter footer background. | browse site sections, compare offerings | multi-column link lists, small headings |
| 16 | footer | Brand mark and closing CTA above legal links and social icons. | try Grafana Cloud, open legal links, follow social channels | large brand mark, compact legal row, social icons |

## Source CSS custom properties (selected)

```css
--gmui-color-white: #fff;
--gmui-color-black: #000;
--gmui-color-black-5: #0000000d;
--gmui-color-black-10: #0000001a;
--gmui-color-black-25: #00000040;
--gmui-color-orange-100: #ffe8dd;
--gmui-color-orange-300: #ffae70;
--gmui-color-orange-500: #ff671d;
--gmui-color-orange-600: #f04306;
--gmui-color-orange-900: #7f230f;
--gmui-color-yellow-200: #fffea8;
--gmui-color-yellow-500: #fbe136;
--gmui-color-green-100: #d1f0e1;
--gmui-color-green-200: #aaf0c7;
--gmui-color-green-300: #73e2a7;
--gmui-color-green-400: #3bcc84;
--gmui-color-green-500: #17b26a;
--gmui-color-green-600: #0b9065;
--gmui-color-green-700: #097347;
--gmui-color-green-800: #0a5b39;
--gmui-color-green-900: #094b31;
--gmui-color-blue-50: #eef5ff;
--gmui-color-blue-200: #bcd8ff;
--gmui-color-blue-300: #8ec0ff;
--gmui-color-blue-400: #599cff;
--gmui-color-blue-500: #2a68fb;
--gmui-color-blue-600: #1b55f5;
--gmui-color-blue-700: #1440e1;
--gmui-color-blue-800: #1734b6;
--gmui-color-blue-900: #19318f;
--gmui-color-purple-100: #f9e8ff;
--gmui-color-purple-200: #f3cfff;
--gmui-color-purple-700: #9d1ab1;
--gmui-color-purple-900: #6e1976;
--gmui-color-amber-200: #ffe899;
--gmui-color-amber-400: #ffc746;
--gmui-color-amber-600: #ff8200;
--gmui-color-amber-800: #af450a;
--gmui-color-light-green-500: #91d441;
--gmui-color-red-100: #fce1df;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/grafana-com