01
设计气质 DNA
安全基础设施密钥管理开发者优先
一款用于保护基础设施的干净、高精度工具
02
色彩
#1E1F22Ink#475569Ink soft#F3F4F6BG#F9FAFBBG soft#FFFFFFBG quiet#A3A3A3Mutedrgba(204, 204, 206, 1)Line从冷灰到近黑的单色渐变,强调清晰度和焦点。
03
字体
- display
48px · 400 - body
16px · 400 - small
14px · 400
对所有展示和正文文本使用 'alliance' 字体,以保持一致、优雅的排版风格。 · 保持严格的排版比例,主要使用 48px、24px、16px 和 14px 作为关键尺寸。 · 确保行高始终设置为 1.5(16px 文本对应 24px 行高),以实现最佳可读性。
04
间距
4px8px16px24px32px48px64px96px基于 4px 网格的统一间距,利用充足的留白来框定内容,并营造平静与精确感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用 #E5E7EB 或 #CC00CE 的 1px 细实线边框,实现微妙的分隔。
0 1px 3px rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个干净、居中的网格系统,具有充足的内边距和清晰的视觉层级。
07
动效与交互
200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停状态下颜色和背景色的平滑过渡。 · 页面区域和模态框的细微淡入效果。
文本链接的颜色变化和按钮的背景色过渡。 · 标准按钮和链接点击行为,提供即时反馈。
08
组件
- button 主要操作使用纯黑按钮,次要操作使用带黑色边框的白色按钮,以及带箭头的简单文本链接。
- card 干净、带边框的卡片,具有细微阴影和充足的内边距。
- chip 简单的、带边框的徽章或标签,样式极简。
- input 干净、带边框的输入框,具有清晰的标签和占位符。
- hero 大型、居中的排版式首屏,包含清晰的行动号召(CTA)和支持性视觉元素。
09
文案语气与禁用清单
- 语气 专业、自信且令人安心。
- 标题风格 直接、以利益为导向的陈述,清晰传达价值。
- 按钮文案 以行动为导向且清晰,例如“获取演示”或“开始使用”。
- 不要使用鲜艳、饱和的强调色——截图显示的是灰色和黑色的单色调色板。
- 不要使用装饰性、圆润的字体——截图显示的是干净的过渡衬线字体。
- 不要使用复杂、杂乱的布局——截图显示的是干净、居中的单栏结构。
- 不要使用厚重的阴影或 3D 效果——截图显示的是带有细微边框的极简平面设计。
- 不要使用多色按钮或元素——截图显示的是以黑、白、灰为主的 UI 组件。
- 不要使用大块色彩或渐变——截图显示的是以白色和浅灰色为主的背景。
- 避免: 避免使用过于随意或俚语化的语言。
- 避免: 避免使用未经解释的术语。
- 避免: 避免使用模糊或含糊的声明。
10
包内真实截图












11
System Prompt
Infisical 是一个开发者优先的安全平台,用于管理密钥、证书和 AI 代理。设计干净、专业且高度结构化,使用近黑(#1E1F22)、冷灰(#F3F4F6, #A3A3A3)和白色(#FFFFFF)的单色板,没有主导的强调色。排版依赖于过渡衬线字体('alliance')用于展示和正文文本,营造出精致、编辑感。布局宽敞且居中,强调清晰度和信任感。关键禁忌:避免使用鲜艳、饱和的颜色或渐变;保持单色、高对比度的调色板。不要使用圆润、活泼的字体;坚持使用干净的过渡衬线字体。不要创建杂乱的布局;保持设计极简,专注于清晰的排版层级和充足的留白。