CURATED · OPEN · FREE

Grafana

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

01

Identity DNA

A precise engineering instrument for modern infrastructure

02

Color

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

03

Typography

geometric-sans · humanist-sans · monospace

• display56px · 500
• h240px · 500
• body16px · 400
• small14px · 400

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.

04

Spacing

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

05

Surfaces

1px solid #AEAEBC

0px 1px 2px rgba(0,0,0,0.05)

06

Layout

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

07

Motion & Interaction

Smooth color and background transitions on interactive elements. · Subtle opacity changes for hover states. · CSS-based gradient animations for the hero background.

Color shifts for links and subtle background changes for buttons. · Immediate visual feedback through background color changes or scale.

08

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.

09

Voice & Don'ts

• Tone Professional, direct, and technically authoritative.
• Headlines Concise, benefit-driven, and bold, often using active verbs.
• CTAs Clear and action-oriented, emphasizing ease of use (e.g., 'Get started free').

• 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.
• Avoid: Jargon-heavy sentences
• Avoid: Excessive exclamation points
• Avoid: Vague marketing speak

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko