精選 · 開放 · 免費

Cal

一套為個人與企業打造,完全可自訂、對開發者友善的排程軟體。

ProductivitySaaSCalendarCleanProduct
Cal 網站截圖
↓ 下載設計系統包 (8 MB)在 OpenDesign 中開啟

原站: https://cal.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

排程日曆會議生產力可自訂

簡潔現代的瑞士鐵路時刻表,轉化為數位排程平台。

02

色彩

#000000Ink
#292929Ink soft
#FFFFFFBG
#F4F4F4BG soft
#E1E2E3BG quiet
#898989Muted
rgba(0,0,0,0.16)Line

單色調搭配高對比度。純黑與純白,輔以中性灰色建立層級與結構。

03

字型

geometric-sans · humanist-sans · monospace

標題使用 -0.2px 的緊湊字距 · 內文使用舒適的 1.5 行高 · 按鈕與導覽列使用 500 字重以強調 · 日曆日期與小型標籤使用 400 字重

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

一致的 4px 基礎網格,確保使用者介面元件緊密對齊,內容區段則保有寬鬆的留白。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

使用 rgba(0,0,0,0.16) 或淺灰色的細微 1px 實線邊框,用於卡片邊緣。

rgba(34, 42, 53, 0.08) 0px 0px 0px 1px · rgba(34, 42, 53, 0.05) 0px 4px 8px 0px · rgba(0, 0, 0, 0.16) 0px 1px 1.9px 0px inset

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央容器佈局,設有大型主視覺區段,採用文字與使用者介面模型並列的分割設計。

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

按鈕與連結的細微 hover 轉場效果 · 互動式日曆元件的平滑佈局位移

按鈕與互動元件的背景色彩變化或細微高度變化。 · 透過色彩變化或焦點環提供立即的視覺回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

Cal.com 是一套高端、可自訂的排程軟體平台。其設計基因建立在黑、白與中性灰色的簡潔單色調色板上,展示文字使用幾何感無襯線字體,內文則使用人文主義無襯線字體。佈局寬敞且結構分明,採用 12 欄網格與 4px 的間距基礎。關鍵元件包括藥丸形按鈕與細微卡片,以展示產品功能。關鍵約束:避免任何鮮豔的強調色,不使用襯線字體,並保持高對比度的專業美學。避免雜亂的佈局;優先考慮清晰度與留白。整體感覺是 premium 且以開發者為中心,強調可靠性與精確度。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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