Grafana Labs

浅灰底色、蓝色操作与宽幅渐变。
浅灰背景搭配大号黑色标题,蓝色突出按钮、链接和操作重点;柔和渐变用于首屏,大圆角区域承载产品截图。页面通过宽松的分区展示不同功能。适合参考的场景:数据工具、监控产品或功能较多的技术产品官网,借助大图介绍产品能力。
查看原始网站使用规范
建议采用
- 使用云画布 #f4f4f6 作为页面主区域,页眉和输入层使用白底 #ffffff。
- 页面标题使用 Poppins 600 字重,主首屏使用 60px/75px 字号/行高,-1.5px 字间距;主要部分使用 48px/54px 字号/行高,-1.2px 字间距。
- 段落文本使用 Inter 400,16px/24px;桌面导航使用 Inter 500,13px/19.5px。
- 将电蓝色信号 #1b55f5 保留用于填充转化按钮、文本链接、箭头和活跃界面高亮。
- 产品图片以 24px 圆角的柔和卡片框住,无阴影;搭配薰衣草色调 #f9e8ff 与洋紫边 #eeaafd,或蓝雾色 #eaf0ff 与天空边 #8ec0ff。
- 基于 4px 基础间距单位构建间距,元素间距 12px,部分区域间距 64px。
- 使用 1px 分割线灰 #e6e6ea 作为结构边界,输入框轮廓使用输入钢 #d8d8df。
建议避免
- 不要在功能卡片上使用厚重的阴影;产品展示卡片不使用阴影。
- 不要将 24px 卡片圆角替换为 8px;保留 8px 用于按钮和输入控件。
- 不要将电蓝色信号 #1b55f5 用作大页面背景或大面积区域填充。
- 不要在大营销标题中使用 Inter 字体;24px 至 60px 的标题层级使用 Poppins 600。
- 不要将导航标签设为黑色;公共导航保持 蓝灰色 导航色 #67677e。
- 不要引入饱和色作为通用徽章;可见的色彩系统主要为蓝色链接和柔和卡片边框。
- 不要将主要部分压缩到 64px 以下的间距,或使页面变成密集的仪表盘网格。