精選 · 開放 · 免費

Deel

一個簡潔、結構化的 SaaS 平台，用於雇佣、管理與支付全球團隊。

01

設計氣質 DNA

一個專業的企業級儀表板，用於全球團隊管理。

02

色彩

簡潔的留白，搭配高對比的深色與淺色區塊，並以明亮的主色點綴為基調。

03

字型

transitional-serif · humanist-sans · monospace

• display56px · 560
• heading36px · 500
• body16px · 400
• caption14px · 400

標題使用過渡襯線字體，展現優質的字重。 · 內文使用極具易讀性的人文主義無襯線字體。 · 主要文字顏色為深木炭色 (#1B1B1B)，而非純黑。

04

間距

一致的 4px 基礎網格，應用於內距、間距與邊距。

05

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

極簡邊框，運用細微陰影與顏色對比來定義表面層次。

rgba(27, 27, 27, 0.16) 0px 16px 32px 0px · rgba(27, 27, 27, 0.05) 0px 2px 32px 0px

06

版面

多欄主視覺過渡至全寬的深色與淺色內容條帶。

07

動效與互動

互動元素上流暢的填充與顏色過渡效果。 · 按鈕與連結上細微的 hover 變換效果。

細微的顏色變化或透明度改變，以指示互動性。 · 透過按鈕按下狀態提供即時的視覺回饋。

08

組件

• button 膠囊形按鈕，採用高對比配色（白底黑字或黑底白字），並帶有細微的圓角邊框半徑。
• card 帶有輕微圓角的容器，配有淺陰影，通常包含主要操作按鈕或圖片。
• chip 帶有圖示的小型圓角標籤，用於分類功能（例如：PEO、EOR）。
• input 簡潔的表單欄位，配有清晰標籤與標準圓角邊框。
• hero 分割版面配置，左側為大型文字區塊，右側為情境圖片。

09

文案語氣與禁用清單

• 語氣 專業、權威且直接。
• 標題風格 大型、有力的宣言式語句，強調核心價值主張。
• 按鈕文案 以行動為導向的標籤，例如「預約演示」或「了解更多」。

• 勿使用明亮的霓虹色 —— 截圖顯示以黑、白、木炭色為基調的配色方案。
• 勿使用過於裝飾性的手寫字體 —— 截圖顯示過渡襯線與人文主義無襯線的結構性混合搭配。
• 勿使用刺眼的純黑背景 —— 截圖顯示深色模式區塊使用柔和的木炭色 (#141414)。
• 勿使用尖銳的矩形按鈕 —— 截圖顯示高度圓潤的膠囊形按鈕。
• 勿使用密集、雜亂的網格 —— 截圖顯示充裕的留白與清晰的區塊劃分。
• 勿使用細薄、難以閱讀的字體 —— 截圖顯示高對比、字重恰當的字型排印。
• 避免: 避免過度隨意的俚語。
• 避免: 避免雜亂的版面配置。
• 避免: 避免霓虹燈或不接地氣的配色方案。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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