01
设计气质 DNA
可观测性开源监控云平台
为现代基础设施而生的精密工程仪器
02
色彩
#1B55F5Accent#000000Ink#67677EInk soft#FFFFFFBG#F4F4F6BG soft#F9F9FABG quiet#454554Mutedrgba(174,174,188,1)Line高对比度的中性基底，以鲜艳的主蓝色用于行动号召，并辅以微妙的冷暖渐变增添层次。
03
字体
- display
56px · 500 - h2
40px · 500 - body
16px · 400 - small
14px · 400
使用Poppins作为醒目的展示文本，以建立品牌识别度。 · 使用Inter作为正文和UI元素，确保最佳可读性。 · 正文基础字号保持16px，行高为1.5。 · 为大标题使用负字间距，营造更紧凑、现代的视觉感受。
04
间距
4px8px12px16px20px24px32px48px64px96px基于一致的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
组件
- button 主CTA使用实心主蓝色（#1B55F5），次要操作使用描边/幽灵样式，采用圆角设计。
- card 白色背景，带微妙边框与8px圆角，使用极简阴影。
- chip 药丸形元素，带微妙边框，通常包含文本标签。
- input 简洁的带框输入框，focus时带有微妙的背景过渡效果。
- hero 居中的大标题置于多彩渐变背景上，并包含一个AI搜索输入栏。
09
文案语气与禁用清单
- 语气 专业、直接，具有技术权威性。
- 标题风格 简洁、以效益为导向、加粗，常使用主动动词。
- 按钮文案 清晰、行动导向，强调易用性（例如，“免费开始”）。
- 避免使用过多投影——截图中显示的是非常微妙、近乎不存在的阴影。
- 避免使用装饰性或手写字体——截图严格使用几何与人文主义无衬线字体。
- 避免使用厚重的背景纹理——截图使用干净的纯色和平滑渐变。
- 避免使用杂乱的布局——截图展示了充足的留白和清晰的视觉层级。
- 避免使用激进、脉冲式的动画——截图依赖平滑的标准CSS过渡。
- 避免使用低对比度文本——截图通过白底黑字或蓝底白字保持高可读性。
- 避免: 术语堆砌的句子
- 避免: 过多的感叹号
- 避免: 模糊的营销话术
10
包内真实截图
11
System Prompt
Grafana Labs的主页是简洁、面向开发者的SaaS设计的典范。布局居中且通透，以白色（#FFFFFF）为基底，搭配柔和的灰色（#F4F4F6）背景。主色调是用于关键CTA的鲜艳蓝色（#1B55F5），而多彩渐变（暖橙到冷青）则为hero区域增添了现代感和AI前沿气息。排版混合了几何与人文主义无衬线字体（Poppins用于展示，Inter用于正文），保持了极高的可读性。关键设计约束：避免厚重阴影，绝不使用装饰字体，并确保充足的留白以防止视觉杂乱。将鲜艳蓝色谨慎地用于主要操作以达到最大影响力，并在所有文案中保持专业、技术的语调。