精選 · 開放 · 免費

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 的漸層動畫。

連結採用色彩變化，按鈕搭配細膩的背景變化。 · 透過背景色彩變化或縮放提供即時視覺回饋。

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) 背景為主。主要強調色為鮮明的藍色 (#1B55F5)，用於關鍵行動召喚，而多色漸層（暖橙至冷青）則為首頁增添現代、AI 導向的感受。排版融合幾何與人文無襯線字體（Poppins 用於展示文字，Inter 用於內文），保持高度可讀性。關鍵設計限制：避免厚重陰影，切勿使用裝飾性字體，並確保充足留白以防止視覺雜亂。鮮明的藍色應謹慎使用，以對主要行動產生最大影響，所有文案維持專業、技術性的語調。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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