01
设计气质 DNA
开发者工具错误监控性能SaaS
一位警惕的工程师，守护你的代码库健康。
02
色彩
#eb4c8cAccent#ffffffInk#d4d4d4Ink soft#150f23BG#1f1633BG soft#79628cMutedrgba(255, 255, 255, 0.1)Line深邃靛蓝背景上的高对比度霓虹强调色，传达技术精确感。
03
字体
- display
60px · 500 - body
16px · 400 - mono
16px · 400
标题和正文使用人文无衬线体，营造友好的开发者体验。 · 等宽字体严格保留用于代码块和技术数据。 · 保持严格的排版层级，尺寸跳跃清晰。
04
间距
4px8px16px24px32px48px64px96px采用标准的4px网格系统，确保组件间距一致。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 10px
pill · 999px
1px细边框，使用rgba(255, 255, 255, 0.1)或rgb(58, 46, 74)
0px 0px 8px 6px rgb(21, 15, 35) · 0px 2px 10px 0px inset rgba(0, 0, 0, 0.15) · 0px 2px 8px 0px rgba(0, 0, 0, 0.08)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽深色容器，内容区域居中，主视觉区域垂直内边距充足。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover状态平滑的颜色过渡 · 背景渐变微妙变化
通过0.2s cubic-bezier过渡改变背景色或边框颜色。 · 按下时微妙的缩放或透明度降低。
08
组件
- button 粗体、圆角按钮（主要为实心白色配深色文字，次要为描边白色文字）。
- card 深色凸起卡片，带有微妙渐变和发光边框。
- chip 小尺寸圆角徽章，低透明度背景。
- input 深色输入框，带微妙内阴影和细边框。
- hero 居中的大尺寸排版，搭配鲜明渐变强调色和背景插图。
09
文案语气与禁用清单
- 语气 技术性、略带不羁、高度自信。
- 标题风格 直接、行动导向，常使用文字游戏或戏剧性措辞。
- 按钮文案 清晰、祈使语气、聚焦于价值主张。
- 不要使用明亮、饱和的背景——截图显示为深靛蓝和紫色调
- 不要使用浅色主题UI元素——截图显示为带霓虹强调色的深色模式
- 不要使用纤细、精致的字体——截图显示为粗体、高冲击力标题
- 不要在所有地方使用柔和、圆润的形状——截图显示为尖锐、技术感的UI元素
- 不要使用灰暗、低对比度的调色板——截图显示为高对比度的霓虹绿和粉
- 不要为技术内容使用衬线字体——截图显示为人文无衬线体和等宽字体
- 避免: 过度企业化术语
- 避免: 被动语态
- 避免: 不必要的填充词
10
包内真实截图
11
System Prompt
Sentry 是一款面向开发者的应用监控SaaS。设计风格大胆且技术感强，采用深靛蓝与紫色系色板（#150f23, #1f1633），搭配鲜艳的霓虹粉色（#eb4c8c）和绿色（#00f5a0）强调色。字体采用人文无衬线体，营造友好而专业的感受，并强调粗体标题。关键设计约束包括：绝不使用浅色主题，避免纤细精致的字体，以及避免使用过于企业化或生硬的语言。UI以高对比度元素和略带不羁的基调为特色，以与开发者受众产生共鸣。