精選 · 開放 · 免費

Gusto

為中小企業打造的簡化薪資、HR 與福利管理平台。

fintechsaas

Gusto 網站截圖

↓ 下載設計系統包 (15 MB)在 OpenDesign 中開啟

原站: https://gusto.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

薪資管理人力資源福利制度中小企業簡化流程

中小企業人才管理的作業系統

02

色彩

#0A8080Accent

#1C1C1CInk

#535353Ink soft

#FFFFFFBG

#F8F5F2BG soft

#6B6B6BMuted

rgba(28,28,28,0.12)Line

高對比、無障礙配色方案，以 teal 強調色為主軸，搭配溫暖中性色調，營造親切感。

03

字型

didone-serif · humanist-sans

display56px · 500
display42px · 500
body18px · 400
body16px · 400
body14px · 400

標題採用高對比襯線字體，並收緊字間距。 · 內文使用高度易讀的人文無襯線字體。 · 所有內文維持一致的 1.5 行高比例。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

以 4px 為基礎格線，標準間距採用 8px、16px、24px、32px 遞增。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(28,28,28,0.12)

0px -2px 16px 0px rgba(28, 28, 28, 0.08) · 0px 12px 24px 0px rgba(28, 28, 28, 0.12) · 0px 8px 16px 0px rgba(28, 28, 28, 0.08)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

置中最大寬度容器，搭配 12 欄格線與 24px 間距。

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

互動元素採用流暢的 0.2s 背景與色彩過渡效果。 · 懸停狀態包含細微的 0.1s ease-out 變形動效。

背景色略微加深，游標變為指標。 · 0.1s ease-out 變形效果，提供觸覺回饋。

08

組件

button 圓角膠囊造型，內距 8px-12px，提供 teal 實心主按鈕與白底 teal 反轉按鈕兩種變體。
card 白色背景，8px 圓角，搭配 0.08-0.12 透明度的柔和陰影。
chip 小型圓角膠囊，用於次要標籤或狀態顯示。
input 簡潔邊框輸入框，聚焦時帶有細微陰影。
hero 置中排版主視覺，搭配大型襯線標題、無襯線副標題與雙按鈕行動號召。

09

文案語氣與禁用清單

語氣專業、親切且令人安心。
標題風格 清晰的利益驅動式陳述，展現經典襯線字體的權威感。
按鈕文案 直接、行動導向的動詞，如「建立」、「比較」、「查看」。

勿使用霓虹或高飽和主色——截圖顯示為柔和、專業的 teal 色。
勿使用超現代幾何無襯線字體作為標題——截圖顯示為經典襯線字體。
勿使用尖銳方形邊角——截圖顯示為一致的 8px 圓角。
勿使用強烈陰影或 3D 效果——截圖顯示為柔和、低透明度的陰影層次。
勿使用過於緊湊的行高——截圖顯示內文採用舒適的 1.5 比例。
勿使用過粗字重作為內文——截圖顯示以 400 字重為標準。
避免: 術語過多的財務專業用語
避免: 過於激進或緊迫的銷售語言
避免: 冷淡、缺乏人性的企業腔調

10

包內真實截圖

Gusto — 桌面首屏（hero） — 桌面首屏（hero）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Gusto — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Gusto 是一款高端、親切的 HR 與薪資管理 SaaS 平台。其設計 DNA 結合經典高對比襯線標題與簡潔人文無襯線內文，基於純白與溫暖米白背景。主要品牌色為專業柔和的 teal（色碼 #0A8080），一致用於關鍵行動與強調元素。佈局寬鬆且置中，採用 12 欄格線、24px 間距與嚴謹的 4px 間距比例。核心設計原則包括充裕留白、柔和陰影營造的細膩層次感，以及令人安心的專業語調。避免使用過度強烈的霓虹色、尖銳方形邊角或緊湊排版。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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