# Grafana · Design system migration spec

> Source: https://grafana.com  ·  Curated by OpenDesign  ·  en

> A strong example of how a technical platform can use clean design and subtle gradients to appear modern and accessible without sacrificing authority.

## 1. Identity DNA

Grafana's design language functions as a precise engineering instrument for modern infrastructure, translating the complexity of observability into a clear, structured interface. Its identity is built on the foundational principles of open-source transparency and cloud-native precision, where every visual element serves a diagnostic purpose rather than a decorative one.

**One-liner:** Full-stack observability platform combining open-source heritage with AI-driven cloud capabilities.
**Keywords:** observability · open-source · monitoring · cloud-platform
**Analogy:** A precise engineering instrument for modern infrastructure

## 2. Color

The color system is built upon a high-contrast neutral base, using white and soft grey to establish a clean operational field. This neutrality is punctuated by a vibrant primary blue that commands attention for key actions, while subtle gradients introduce a modern, layered depth.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F4F6` | card background |
| `--bg-quiet` | `#F9F9FA` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#67677E` | secondary text |
| `--muted` | `#454554` | placeholder |
| `--muted-soft` | `#67677E` | weak hint |
| `--accent` | `#1B55F5` | single accent |
| `--line` | `rgba(174,174,188,1)` | divider |

**Color principle:** High-contrast neutral base punctuated by a vibrant primary blue for action, with subtle warm-to-cool gradients for depth.

The principle is clarity through restraint, using color not for decoration but to direct focus and signify functional states within the interface.

## 3. Typography

Typographic voice is established through a deliberate pairing: Poppins for prominent display text provides a geometric, brand-defining presence, while Inter handles body copy and UI elements with optimal humanist readability.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 500 | -1.5px | Hero headlines |
| h2 | 40px | 1.15 | 500 | -0.5px | Section headings |
| body | 16px | 1.5 | 400 | 0px | General text |
| small | 14px | 1.375 | 400 | 0px | Captions and nav links |

**Type rules:**
- Use Poppins for prominent display text to establish brand identity.
- Use Inter for body copy and UI elements for optimal readability.
- Keep body text at 16px base size with a line height of 1.5.
- Use negative letter spacing for large headings to create a tighter, more modern feel.

## 4. Spacing

All spacing adheres to a consistent 4px base grid, creating a predictable and harmonious rhythm that allows generous white space to maintain layout clarity.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous white space to maintain a clean, airy layout.

## 5. Surfaces

Surfaces are defined by minimal depth, relying on thin borders and the faintest of shadows to separate elements without visual weight. This approach keeps the interface flat and functional, prioritizing content over container.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 2px rgba(0,0,0,0.05)
- **Borders:** 1px solid #AEAEBC

## 6. Layout

The layout skeleton begins as a centered, single-column column for the hero section, focusing user attention on a single message. It then transitions to a structured, multi-column grid for feature cards, organizing complex information into digestible modules.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column layout for the hero, transitioning to a multi-column grid for feature cards.

## 7. Motion & Interaction

Motion philosophy is strictly functional, employing smooth CSS transitions to provide immediate feedback on interactive elements. Animations are unobtrusive, existing only to confirm user actions or signal state changes, never to draw attention to themselves.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background transitions on interactive elements.
  - Subtle opacity changes for hover states.
  - CSS-based gradient animations for the hero background.

- **Hover:** Color shifts for links and subtle background changes for buttons.
- **Click:** Immediate visual feedback through background color changes or scale.
- **Transition:** Smooth 150ms to 300ms transitions for most UI state changes.
- **Keyboard:** Standard focus-visible outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and technically authoritative, using concise, benefit-driven headlines and clear, action-oriented calls to action.

- **Tone:** Professional, direct, and technically authoritative.
- **Headline style:** Concise, benefit-driven, and bold, often using active verbs.
- **CTA style:** Clear and action-oriented, emphasizing ease of use (e.g., 'Get started free').
- **Avoid:** Jargon-heavy sentences / Excessive exclamation points / Vague marketing speak

### Don'ts
- ❌ Don't use excessive drop shadows — screenshot shows very subtle, almost non-existent shadows.
- ❌ Don't use decorative or script fonts — screenshot relies strictly on geometric and humanist sans-serifs.
- ❌ Don't use heavy background textures — screenshot uses clean solid colors and smooth gradients.
- ❌ Don't use cluttered layouts — screenshot shows generous white space and a clear visual hierarchy.
- ❌ Don't use aggressive, pulsing animations — screenshot relies on smooth, standard CSS transitions.
- ❌ Don't use low-contrast text — screenshot maintains high readability with black on white or white on blue.

The system deliberately avoids decorative flair, jargon-heavy language, and aggressive animations, maintaining a tone of focused, technical utility.

## System Prompt (paste into AI tool)

```
Grafana Labs' homepage is a masterclass in clean, developer-focused SaaS design. The layout is centered and airy, anchored by a white (#FFFFFF) base and a soft grey (#F4F4F6) background. The primary accent is a vibrant blue (#1B55F5) used for key CTAs, while a multi-color gradient (warm orange to cool teal) adds a modern, AI-forward feel to the hero. Typography mixes geometric and humanist sans-serifs (Poppins for display, Inter for body), maintaining high legibility. Critical design constraints: avoid heavy shadows, never use decorative fonts, and ensure generous white space to prevent visual clutter. Use the vibrant blue sparingly for maximum impact on primary actions, and maintain a professional, technical voice throughout all copy.
```