精選 · 開放 · 免費
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，增添溫潤感與編輯權威性。 · 所有內文、UI 與標籤文字使用 Inter，保持清晰度與現代科技感。 · 限制字重變化至 400 與 500，以維持介面簡潔。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
寬裕的垂直與水平內距，強調清晰度並減少視覺雜訊。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 16px
pill · 999px
謹慎使用細微的 1px rgba(24, 24, 34, 0.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
文字與 UI 元素上平滑的 0.2 秒色彩過渡。 · 結構性動畫使用稍長的 0.3 秒至 0.35 秒 cubic-bezier 過渡。
文字顏色平滑過渡，按鈕可能有細微的背景變換或縮放。 · 透過標準的啟用狀態提供即時視覺回饋。
08
組件
- button 主要按鈕為藥丸形，帶有鮮明的紫色背景；次要按鈕為外框或幽靈樣式，採用藥丸形或微圓角。
- card 極簡卡片，帶有柔和的灰色背景，無陰影，並有細微的內距。
- chip 不顯眼使用；改以簡潔的字體排印與圖示取代。
- input 圓潤的藥丸形輸入框，帶有淺灰色邊框與寬裕的內部空間。
- hero 分割式佈局，左側為大型襯線標題，右側為詳細的產品 UI 模型。
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 的設計系統，Vanta 是一個合規與安全 SaaS 平台。其視覺語言平衡了高端的編輯溫潤感與現代科技的精準度，將品牌定位為複雜企業需求中值得信賴的夥伴。關鍵色彩包含純淨白色 (#FFFFFF) 與柔和灰色 (#F7F8FA) 背景、深墨黑 (#181822) 作為文字色，以及鮮明的紫色 (#5E05C4) 作為主要強調色與 CTA。字體排印方面，使用過渡襯線 (Reckless) 作為粗體展示標題，搭配幾何無襯線 (Inter) 作為高可讀性的內文與 UI 文字。關鍵禁忌：切勿使用刺眼或過度飽和的背景色；避免方塊狀、銳角的 UI 元素（如矩形按鈕）；保持寬裕的留白並避免視覺雜訊；且勿使用厚重、引人分心的陰影或過於複雜的漸層。
en · zh-CN · zh-TW · ja · ko