精選 · 開放 · 免費

Hashicorp

一個簡潔、具權威性的雲端基礎架構與安全管理平台

01

設計氣質 DNA

雲端的工業控制面板

02

色彩

高對比深色模式，搭配單一主導的企業藍色強調色

03

字型

humanist-sans · monospace

• display52px · 600

主要內文使用 system-ui 無襯線字體 · 主要標題與品牌識別使用自訂的人文主義無襯線字體 · 程式碼片段與技術標籤使用等寬字體

04

間距

嚴格的 4px 基礎網格，區塊間保留充足留白

05

表面 (圓角 / 陰影 / 邊線)

1px solid rgb(213, 215, 219)

0px 1px 1px 0px rgba(97, 104, 117, 0.05) · 0px 2px 2px 0px rgba(97, 104, 117, 0.05) · 0px 1px 2px 1px inset rgba(101, 106, 118, 0.05)

06

版面

標準的置中容器，搭配彈性網格欄位

07

動效與互動

懸停時快速切換顏色與背景過渡 · 聚焦與互動時細微的透明度變化

在 0.15s ease-in 內變更顏色與背景色 · 立即的視覺回應，帶有細微的縮放或色彩轉移

08

組件

• button 簡潔的實色背景，搭配細微的 1px 邊框或 4px 圓角。'開始使用'按鈕採用主藍色，其他操作則使用次要的白色或黑色。
• card 簡約的容器，帶有細微邊框或陰影，常使用漸層背景來區分類別。
• chip 膠囊狀的徽章，帶有淺色邊框，用於狀態或標籤。
• input 標準表單欄位，帶有 1px 實色邊框，聚焦時有細微的內部陰影。
• hero 全幅深色背景，搭配大型字體與顯著的漸層網格或抽象光影效果。

09

文案語氣與禁用清單

• 語氣 專業、具權威性且技術導向
• 標題風格 簡短、有力、陳述式（例如：'正確地運行雲端'）
• 按鈕文案 行動導向且直接（例如：'認識基礎架構雲端'、'開始使用'）

• 避免使用複雜的網格佈局——截圖顯示為一個簡潔的置中容器，並有充足留白
• 避免使用多樣化的色彩——截圖顯示的色調以白色、黑色和單一主藍色強調色為主
• 避免使用裝飾性或手寫字體——截圖顯示全程使用簡潔、專業的無襯線字體
• 避免使用生硬、粗重的邊框——截圖顯示為細微的 1px 邊框，具有極低的透明度或色彩對比
• 避免使用沉重、深色的陰影——截圖顯示幾乎沒有陰影，或只有極其細微的陰影以增加深度
• 避免到處使用醒目、明亮的強調色——截圖顯示藍色強調色極其節制地用於主要操作
• 避免: 過於隨意或俚語的語言
• 避免: 浮誇或過度描述性的形容詞
• 避免: 具侵略性或過度推銷的標點符號
• 避免: 過多的驚嘆號

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko