精選 · 開放 · 免費
Cal
一套為個人與企業打造，完全可自訂、對開發者友善的排程軟體。
ProductivitySaaSCalendarCleanProduct
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
- display
48px · 500 - h2
32px · 600 - body
16px · 400 - caption
12px · 400
標題使用 -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
組件
- button 藥丸形或圓角矩形按鈕，主要操作使用實心黑色填充，次要操作使用白色或透明填充。
- card 帶有細微陰影或淺色邊框的白色卡片，用於展示日曆使用者介面或整合網路格。
- chip 小型圓角藥丸，用於標籤，例如「App store」或「Cal.com 推出 v6.5」。
- input 簡潔的文字輸入框，帶有圓角邊框與細微陰影，常用於預訂小工具。
- hero 顯眼的頂部區段，左側為大型排版文字，右側為詳盡的排程小工具模型。
09
文案語氣與禁用清單
- 語氣 專業、清晰、直接。著重於效率與可自訂性。
- 標題風格 大膽、簡潔的陳述，以價值主張為開頭。
- 按鈕文案 以行動為導向且直接（例如「使用 Google 註冊」、「立即開始」）。
- 不要使用高飽和度的主色調 — 畫面截圖顯示的是嚴格的黑白單色調色板。
- 不要使用裝飾性襯線字體 — 畫面截圖顯示的是簡潔、幾何感的無襯線字體。
- 不要為卡片添加厚重的陰影 — 畫面截圖顯示的是透過淺色邊框營造的極其細微、近乎平坦的高度感。
- 不要使用尖銳的按鈕角落 — 畫面截圖顯示的是一致的圓角或藥丸形按鈕設計。
- 不要在佈局中塞入過多元素 — 畫面截圖顯示的是寬裕的留白與聚焦的內容層級。
- 不要使用全大寫的內文 — 畫面截圖顯示的是混合大小寫的文字以提升可讀性。
- 不要依賴沒有標籤的圖示 — 畢面截圖顯示每個使用者介面元件都有清晰、描述性的文字相伴。
- 避免: 在標題中使用過度技術性的術語
- 避免: 使用過於鮮豔或霓虹色的強調色
- 避免: 依賴裝飾性圖片而非產品模型
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Cal.com 是一套高端、可自訂的排程軟體平台。其設計基因建立在黑、白與中性灰色的簡潔單色調色板上，展示文字使用幾何感無襯線字體，內文則使用人文主義無襯線字體。佈局寬敞且結構分明，採用 12 欄網格與 4px 的間距基礎。關鍵元件包括藥丸形按鈕與細微卡片，以展示產品功能。關鍵約束：避免任何鮮豔的強調色，不使用襯線字體，並保持高對比度的專業美學。避免雜亂的佈局；優先考慮清晰度與留白。整體感覺是 premium 且以開發者為中心，強調可靠性與精確度。
en · zh-CN · zh-TW · ja · ko