精選 · 開放 · 免費

Rippling

一個整合式平台，運用 AI 將人力資源、IT、財務與薪資管理無縫連接成一個完整的系統。

01

設計氣質 DNA

一家企業的單一神經系統，取代數十個零散的工具。

02

色彩

深邃飽滿的紫色首頁主視覺與純淨白色內容區之間形成強烈對比，並以鮮豔的橙色作為點綴。

03

字型

geometric-sans · humanist-sans · monospace

• display48px · 500
• heading32px · 500
• body16px · 400
• small14px · 400
• micro12px · 400

大型展示標題使用緊湊的字距調整。 · 小型 UI 文字使用略寬鬆的字距調整 (0.25px)。 · 標題 (500) 與內文 (400) 之間需維持清晰的字重層次。

04

間距

基於 4px 增量的垂直節奏，主要內容區塊之間留有充裕的空白 (40px-64px)。

05

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

極少使用邊框；主要透過間距與細微的色彩變化來區隔內容。主要邊框顏色為 rgb(229, 231, 235)。

0px 6px 6px 0px rgba(0, 0, 0, 0.06) · 0px 96px 160px 48px rgba(27, 16, 20, 0.6)

06

版面

採用置中的最大寬度容器，首頁主視覺具有清晰的雙欄結構 (內容在左，視覺元素在右)，內容區塊則為全寬置中的單欄。

07

動效與互動

互動元素採用細膩的淡入淡出與色彩過渡效果。 · 懸停時背景色與透明度的平滑變化。

互動元素的文字與背景色在 0.15 秒內進行細膩的色彩過渡。 · 立即的視覺反饋，通常為細微的縮放或色彩變化。

08

組件

• button 主要操作使用實心的橙色 (點綴色) 圓角 (膠囊) 按鈕；次要操作使用帶有底線的文字連結。
• card 淺米色/灰色 (bgSoft) 卡片，帶有細微陰影與圓角 (md)。
• chip 用於導覽與分類，通常具有淺色背景與細微邊框。
• input 白色背景的輸入欄位，帶有細微邊框與圓角 (md)，通常垂直堆疊。
• hero 全寬區塊，採用深紫色背景，搭配大型展示標題與顯眼的電子郵件訂閱表單。

09

文案語氣與禁用清單

• 語氣 自信、具權威性且以效益為導向。
• 標題風格 簡短、大膽且具宣告性，聚焦於核心價值主張。
• 按鈕文案 直接且以行動為導向，使用明亮、高對比度的按鈕。

• 避免在紫色背景上使用低對比度的顏色作為主要文字——截圖顯示應使用高對比度的白色與黑色文字。
• 避免使用過多種字重——截圖顯示字重 400 與 500 之間有嚴格的層次區分。
• 避免在按鈕或卡片上使用尖銳的直角——截圖顯示使用圓角 (8px, 12px, 或膠囊型)。
• 避免使用繁複、多色的色板——截圖顯示使用專注於深紫、橙、黑、白與米色的色板。
• 避免使用緊密、擁擠的佈局——截圖顯示元素之間有充裕的間距 (24px-64px)。
• 避免使用裝飾性的襯線字體——截圖顯示使用乾淨的幾何與人文無襯線字體類別。
• 避免: 未經脈絡的術語
• 避免: 模糊的承諾
• 避免: 被動語態
• 避免: 雜亂的佈局
• 避免: 不一致的字體排印
• 避免: 低對比度的文字

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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