精选 · 开放 · 免费
Highlight
一个面向现代 Web 应用的开源全栈监控平台。
devobservability
01
设计气质 DNA
开源监控全栈开发者工具可观测性
一个用于全栈监控的、深色、简洁的 IDE 仪表盘。
02
色彩
#72E4FCAccent
#FFFFFFInk
#DFDFDFInk soft
#0D0225BG
#30294EBG soft
#9D97AAMuted
rgba(48, 41, 78, 1)Line
深色模式优先，搭配高对比度青色点缀与微妙的霓虹黄高亮。
03
字体
humanist-sans · monospace
- display
58px · 600 - heading
44px · 600 - body-lg
18px · 400 - body
16px · 400
04
间距
4px
8px
12px
16px
24px
32px
44px
48px
64px
96px
基于一致的4px网格，留白充裕以保证可读性。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 44px
1px solid rgba(48, 41, 78, 1)
rgb(108, 55, 244) 8px 8px 0px -2px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
内容居中，两侧留有宽边距，使用 flexbox 实现功能标签页。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素在 hover 时进行微妙的颜色过渡。 · 功能标签页之间平滑过渡。
按钮和链接在 hover 时进行微妙的色彩与不透明度变化。 · 通过颜色过渡提供即时反馈。
08
组件
- button 药丸形按钮，主按钮为实心青色，次按钮为描边样式。
- card 深色卡片，带微妙边框，常包含集成图标。
- chip 标签页式芯片，用于功能导航（如会话重放、错误监控等）。
- input 极简深色输入框，但在主视觉区域中不突出显示。
- hero 大型居中标题，采用点缀色，堆叠式 CTA 按钮，并配有功能概览标签页。
09
文案语气与禁用清单
- 语气 技术感强但平易近人，专业，面向开发者。
- 标题风格 直接、价值驱动，并突出开源特性。
- 按钮文案 行动导向（开始使用、实时演示），视觉层次清晰。
- 不要使用浅色主题——截图显示的是深海军蓝背景（#0D0225）的深色模式界面。
- 不要使用次要强调色——截图显示按钮和高亮仅使用单一主导的高饱和青色（#72E4FC）。
- 不要使用装饰性衬线字体——截图显示所有文字使用的是简洁、现代的人文主义无衬线字体（Poppins）。
- 不要全部使用直角——截图显示采用微妙的8px/16px圆角与44px药丸形状的混合设计。
- 不要使用低对比度文字——截图显示在深色背景上使用高对比度白色（#FFFFFF）和浅灰色（#DFDFDF）。
- 不要让页头显得杂乱——截图显示的是简洁、顶部对齐的导航，并设有清晰的主要/次要操作按钮。
- 避免: 避免使用过于随意或“创业兄弟”式的行话。
- 避免: 避免在主视觉区域使用复杂的架构图。
- 避免: 避免使用杂乱的布局而模糊核心价值主张。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个面向开发者的 SaaS 落地页，用于一个开源监控平台。设计基因包含深色模式界面，深海军蓝背景（#0D0225），高对比度白色文字（#FFFFFF），以及单一主导的青色强调色（#72E4FC）。排版使用现代人文主义无衬线字体（Poppins），营造简洁、技术感。关键元素包括大型粗体标题、药丸形按钮（实心青色和描边变体）以及功能导航标签页。布局居中且宽敞，强调可读性和清晰的行动号召。关键禁忌：绝不要使用浅色主题，绝不要引入次要强调色，绝不要使用装饰性衬线字体。设计整洁、专业，并针对开发者受众进行了优化。
en · zh-CN · zh-TW · ja · ko