精选 · 开放 · 免费

Grafana

融合开源底蕴与AI驱动云能力的全栈可观测性平台。

devobservability
Grafana 网站截图
↓ 下载设计系统包 (19 MB)在 OpenDesign 中打开

原站: https://grafana.com

📦 浏览包内文件 →

01

设计气质 DNA

可观测性开源监控云平台

为现代基础设施而生的精密工程仪器

02

色彩

#1B55F5Accent
#000000Ink
#67677EInk soft
#FFFFFFBG
#F4F4F6BG soft
#F9F9FABG quiet
#454554Muted
rgba(174,174,188,1)Line

高对比度的中性基底，以鲜艳的主蓝色用于行动号召，并辅以微妙的冷暖渐变增添层次。

03

字体

geometric-sans · humanist-sans · monospace

使用Poppins作为醒目的展示文本，以建立品牌识别度。 · 使用Inter作为正文和UI元素，确保最佳可读性。 · 正文基础字号保持16px，行高为1.5。 · 为大标题使用负字间距，营造更紧凑、现代的视觉感受。

04

间距

4px
8px
12px
16px
20px
24px
32px
48px
64px
96px

基于一致的4px网格，搭配充足的留白，保持布局干净、通透。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid #AEAEBC

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

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

主区域采用居中单列布局，过渡至多列网格用于功能卡片。

07

动效与交互

150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上平滑的颜色与背景过渡。 · hover状态下的微妙透明度变化。 · 基于CSS的hero背景渐变动画。

链接的颜色变化，按钮的微妙背景变化。 · 通过背景颜色变化或缩放提供即时视觉反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

Grafana — 桌面首屏（hero）
桌面首屏（hero）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Grafana — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Grafana Labs的主页是简洁、面向开发者的SaaS设计的典范。布局居中且通透，以白色（#FFFFFF）为基底，搭配柔和的灰色（#F4F4F6）背景。主色调是用于关键CTA的鲜艳蓝色（#1B55F5），而多彩渐变（暖橙到冷青）则为hero区域增添了现代感和AI前沿气息。排版混合了几何与人文主义无衬线字体（Poppins用于展示，Inter用于正文），保持了极高的可读性。关键设计约束：避免厚重阴影，绝不使用装饰字体，并确保充足的留白以防止视觉杂乱。将鲜艳蓝色谨慎地用于主要操作以达到最大影响力，并在所有文案中保持专业、技术的语调。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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