---
name: Grafana
description: "A strong example of how a technical platform can use clean design and subtle gradients to appear modern and accessible without sacrificing authority."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#67677E"
  tertiary: "#1B55F5"
  neutral: "#454554"
  bg-soft: "#F4F4F6"
  bg-quiet: "#F9F9FA"
  muted-soft: "#67677E"
  line: "rgba(174,174,188,1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1.5px"
  h2:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.15
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.375
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Full-stack observability platform combining open-source heritage with AI-driven cloud capabilities.

*A precise engineering instrument for modern infrastructure*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#67677E`)** — uses `ink-soft` token
- **Accent (`#1B55F5`)** — uses `accent` token
- **Muted (`#454554`)** — uses `muted` token
- **Borders (`rgba(174,174,188,1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Consistent 4px base grid with generous white space to maintain a clean, airy layout.

## Elevation & Depth

- 0px 1px 2px rgba(0,0,0,0.05)
- Borders: 1px solid #AEAEBC

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid primary blue (#1B55F5) for main CTAs, outlined/ghost styles for secondary actions, with rounded corners.
- **card:** White background with subtle border and 8px border-radius, using minimal shadows.
- **chip:** Pill-shaped elements with subtle borders, typically containing text labels.
- **input:** Clean bordered fields with subtle background transitions on focus.
- **hero:** Large centered headline over a multi-color gradient background, featuring an AI search input bar.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```