# Grafana — Marketing Site Design Spec

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

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces
| 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 |

### Hero gradient (pastels)
| 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) |

### Text
| 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 |

### Accent (brand multi-colour)
| 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 |

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

## 3. Typography Rules

- Display: `Poppins, "Poppins Fallback", sans-serif` — geometric, weight 600.
- Body/UI: `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.

## 4. Component Stylings

### Buttons
- **Primary (blue)**: bg `#1b55f5`, text `#ffffff`, 1px `#1b55f5` border, radius `8px`, h `36px`, Inter 500 14px. Hover: slight darken.
- **Secondary (outline)**: bg `#ffffff`, text `#000000`, 1px `#000000` border, radius `6px`, h `36px`.
- **Dark**: bg `#000000`, text white, radius `8px`, compact (h ~34px, 11px label used on some pills).
- **Nav Sign up**: blue `#1b55f5` pill, white text.

### Inputs / Ask AI composer
- Large rounded white field, radius ~`12px`, thin `#e5e5e9` border, placeholder `#67677e`, leading orange sparkle icon, trailing circular blue arrow-send button. Focus ring not explicitly captured.

### Cards / panels
- bg white, 1px `#e5e5e9` border, radius `12px`, mostly flat (very light or no shadow). Illustration blocks use flat multi-colour geometric shapes.

### Chips / badges
- Small rounded pills, radius `6–8px`, gray or brand-tinted.

### Nav
- White bar, Grafana Labs logo (orange flame) left, center dropdown links, right EN / Downloads / Contact, AI/Search, Sign in (text) + blue Sign up pill.

## 5. Layout Principles

- Max content width ~1280px, centered; hero is center-aligned.
- Hero anatomy: full-width pastel gradient band → 60px black Poppins headline → 16px gray subhead → dual CTA (blue primary + white outline) → rounded white Ask AI composer.
- Dark event/promo bar pinned at the bottom of the first viewport.
- Base spacing ~4px grid; generous section rhythm; colourful illustration blocks between text sections.

## 6. Depth & Elevation

- Radii: `4px`, `6px` (outline button), `8px` (blue button / small pills), `12px` (cards / composer), `24px`, full (pills/avatars).
- Control height: buttons `36px` (compact `34px`).
- Elevation: nearly flat — thin `#e5e5e9` hairlines instead of shadows; when a shadow appears it is minimal.

## 7. Motion

- Micro-transitions ~0.15s. Dominant easing `cubic-bezier(0.4,0,0.2,1)` on `opacity`, `transform`/`translate`; some `0.2s` variants.
- No heavy scroll library detected; illustrations and dashboards animate inside static frames.

## 8. Backgrounds, Effects & WebGL

- Signature is the soft multi-stop pastel gradient hero wash (warm peach → pink-lilac → periwinkle → sky-blue) behind the headline.
- No WebGL/canvas hero captured. Flat multi-colour geometric illustrations (orange/blue/yellow/cyan) provide colour blocks.
- No background video or grain captured. Non-hero surfaces are flat white or `#f4f4f6`.

## 9. Do's and Don'ts

### Do
- Keep the canvas white with black text and a single cobalt-blue `#1b55f5` action colour.
- Reserve the multi-brand palette (orange `#ff671d`, yellow `#fbe136`, cyan `#3fc6eb`) for the logo, hero gradient and illustrations — not the UI chrome.
- Open the hero with a soft pastel gradient wash (peach → pink → periwinkle → sky).
- Set headlines in Poppins 600 with tight negative tracking (~-2.5%); body in Inter.
- Keep controls soft-rounded (6–8px buttons, 12px cards/composer) and mostly flat with `#e5e5e9` hairlines.
- Include the rounded white Ask AI composer with an orange sparkle and blue send button.

### Don't
- Don't turn the chrome multi-coloured — colour belongs in the gradient and illustrations.
- Don't use a dark overall canvas (only the event/footer bar is dark).
- Don't use display weights above 600 or drop the negative tracking on Poppins headings.
- Don't replace hairlines with heavy shadows.
- Don't introduce a second UI action colour beyond cobalt blue.

## 10. Responsive Behavior

- Fluid type; nav collapses to a menu on mobile (markup present). Mobile rendering not verified — captured at desktop 1568px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` · Muted `#67677e` · Border `#e5e5e9` · Accent blue `#1b55f5` · Brand orange `#ff671d`
- Fonts: Poppins 600 (display, -1.5px) / Inter (body) · Body 16px · Radius 8px button / 12px card / 6px outline · Control height 36px
- Focus: not captured · Hover: slight darken, 0.15s cubic-bezier(0.4,0,0.2,1)

<grafana_design_language>
Use the Grafana design language: a bright, friendly observability brand on a clean white canvas with black text, opened by a soft multi-stop pastel gradient hero wash (peach #f4d6bb to pink-lilac #eaaafd to periwinkle #d1e3f7 to sky #8ec0ff). Headlines are geometric Poppins at weight 600 with tight negative tracking (60px display at -1.5px); body is Inter 16/24 at 400 with muted #67677e subheads. UI chrome stays disciplined: a single cobalt-blue #1b55f5 primary button (radius 8px, h36) plus a white 1px-black outline button (radius 6px); the full multi-brand palette (orange #ff671d, yellow #fbe136, cyan #3fc6eb) appears only in the Grafana flame logo, the gradient and flat geometric illustration blocks, never in the chrome. Structure comes from thin #e5e5e9 hairlines with almost no shadow; cards and the rounded white Ask AI composer (orange sparkle + blue circular send) use 12px radius. Motion is quick, 0.15s cubic-bezier(0.4,0,0.2,1) on opacity/transform. Feels: bright, friendly, colorful, modern-technical. Avoid: multi-coloured chrome, a dark overall canvas, Poppins weights above 600 or losing the negative tracking, heavy shadows, or a second UI action colour beyond cobalt blue.
</grafana_design_language>