精选 · 开放 · 免费
Doppler
为工程团队提供安全的密钥管理
devinfra
01
设计气质 DNA
安全基础设施密钥管理开发者企业
为数字密钥打造的加固保险库
02
色彩
#00F575Accent
#F1F0ECInk
#D0C9C4Ink soft
#1C1624BG
#2D2734BG soft
#55505BMuted
rgba(255, 255, 255, 0.08)Line
深色背景上的高对比霓虹色，搭配微妙的紫色渐变
03
字体
geometric-sans · humanist-sans · monospace
- display
56px · 500 - display-sm
32px · 500 - body
16px · 400
标题使用几何无衬线体 · 正文使用人文主义无衬线体 · 大型展示文字保持紧凑的字间距
04
间距
4px
8px
16px
20px
24px
32px
48px
64px
96px
8px网格系统，以32px为基础递增单位
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgba(255, 255, 255, 0.08)
0 4px 12px rgba(0, 0, 0, 0.15) · 0 8px 24px rgba(0, 0, 0, 0.2)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽首屏居中内容，双栏功能板块
07
动效与交互
220msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的平滑颜色过渡 · 聚焦状态的细微变换动画 · 首屏板块的渐变流动
颜色过渡，持续0.3秒 · 细微的缩放或透明度变化
08
组件
- button 实心霓虹绿（#00F575），深色文字，圆角，含悬停状态
- card 深色玻璃质感面板，微妙边框与圆角
- chip 小型状态指示器，圆角
- input 深色背景，微妙边框，带搜索功能
- hero 大型渐变背景，搭配浮动UI模型与醒目标题
09
文案语气与禁用清单
- 语气 自信且技术化，聚焦安全
- 标题风格 直接、行动导向的安全相关陈述
- 按钮文案 清晰的价值主张，搭配绿色强调按钮
- 勿使用浅色背景——截图显示的是深紫/黑色主题
- 勿使用多种强调色——截图显示的是单一霓虹绿强调色
- 勿使用衬线字体——截图显示的是几何/人文主义无衬线体
- 勿使用小而拥挤的间距——截图显示的是充裕的内边距（32-70px）
- 勿使用尖锐的边角——截图显示的是圆角（8-20px半径）
- 勿使用柔和、低对比度的颜色——截图显示的是深色背景上的高对比霓虹色
- 避免: 过于随意的语言
- 避免: 泛泛的商务套话
- 避免: 危言耸听
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Doppler是一款面向密钥管理的优质开发者工具，具有暗黑、聚焦安全的美学设计。设计采用深紫黑色背景（#1C1624），搭配霓虹绿（#00F575）作为高可见度CTA的点缀色。字体方面，展示文字使用几何无衬线体，正文使用人文主义无衬线体。布局以带有浮动UI模型的强大首屏为核心，采用充裕的间距（32-70px内边距）和圆角（8-20px）。关键特性包括渐变背景、玻璃态卡片和平滑的0.3秒过渡。务必避免：浅色背景、多种强调色、衬线字体、拥挤的间距、尖锐的边角以及低对比度配色方案。该系统面向需要跨CI/CD管道进行安全、可扩展密钥管理的企业工程团队。
en · zh-CN · zh-TW · ja · ko