精选 · 开放 · 免费
Vanta
一个通过自动化简化合规流程并建立信任的企业SaaS平台。
saassecurity
01
设计气质 DNA
信任合规安全自动化审计
一个为现代SaaS公司打造的自信、专业的盾牌。
02
色彩
#5E05C4Accent
#181822Ink
#6D6E87Ink soft
#FFFFFFBG
#F7F8FABG soft
#EDE9F6BG quiet
#484960Muted
rgba(24, 24, 34, 0.1)Line
一套克制、专业的配色方案，以深海军蓝黑色为基调，并搭配一个单一、高饱和度的紫色作为强调色。
03
字体
transitional-serif · geometric-sans · monospace
- display
72px · 400 - headline
40px · 400 - body
16px · 400 - label
14px · 500
所有展示和标题文本使用Reckless，以增添温暖感和编辑权威性。 · 所有正文、界面和标签文本使用Inter，以保持清晰度和现代科技感。 · 将文本字重变化限制在400和500，以保持界面简洁。
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
充足的垂直和水平内边距，强调清晰度并减少视觉杂乱。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
采用rgba(24, 24, 34, 0.1)的微妙1像素边框，用于谨慎地定义结构。
0px 0px 2px 2px rgba(204, 204, 204, 1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个带有宽阔栏间距的结构化12栏网格，支持简洁、模块化的布局。
07
动效与交互
200msmicro
350mssmall
645msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing
文本和界面元素上平滑的0.2秒颜色过渡。 · 结构动画上稍长的0.3秒至0.35秒cubic-bezier过渡。
文本颜色平滑过渡，按钮可能有微妙的背景变化或缩放。 · 通过标准激活状态提供即时的视觉反馈。
08
组件
- button 主按钮为胶囊形，采用鲜艳的紫色背景；次要按钮为描边或幽灵样式，带有胶囊形或略微圆角的边角。
- card 极简主义卡片，采用柔和的灰色背景，无阴影，并带有微妙的内边距。
- chip 并非突出使用；而是依赖于简洁的字体和图标。
- input 圆角、胶囊形的输入框，带有浅灰色边框和充足的内部边距。
- hero 分栏布局，左侧是一个大的衬线标题，右侧是详细的产品界面模型。
09
文案语气与禁用清单
- 语气 专业、令人安心、权威但平易近人。
- 标题风格 直接、陈述性的语句，使用过渡衬线字体以增强影响力。
- 按钮文案 面向行动且简洁，通常置于胶囊形按钮内。
- 不要使用刺眼、高饱和度的颜色作为背景——截图显示的是柔和的淡紫色和灰色。
- 不要使用方块状、矩形的按钮——截图显示的是完全圆角的胶囊形按钮。
- 不要依赖厚重的投影来营造深度——截图显示的是扁平或非常微妙的立体效果。
- 不要使用多种多样的字重——截图显示主要使用400和500字重。
- 不要用过多的元素使布局显得杂乱——截图显示留白充足。
- 不要用无衬线字体作为大型标题——截图显示使用的是独特的过渡衬线字体。
- 避免: 行话密集的语言
- 避免: 侵略性的销售说辞
- 避免: 俏皮或过于随意的语气
- 避免: 视觉杂乱
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Vanta的设计系统，一个合规与安全的SaaS平台。其视觉语言在高端编辑风格的温暖感与现代科技的精准性之间取得平衡，将品牌定位为应对复杂企业需求的可信赖伙伴。关键颜色包括清爽的白色（#FFFFFF）和柔和的灰色（#F7F8FA）背景，用于文本的深邃墨黑色（#181822），以及作为主强调色和行动号召的鲜艳紫色（#5E05C4）。字体方面，用于醒目展示标题的是过渡衬线字体（Reckless），搭配高度易读的正文和界面文本使用的几何无衬线字体（Inter）。关键禁忌：绝不使用刺眼或过度饱和的背景颜色；避免方块状、尖锐边角的界面元素，如矩形按钮；保持充足的留白并避免视觉杂乱；不要使用厚重、分散注意力的投影或过于复杂的渐变。
en · zh-CN · zh-TW · ja · ko