精选 · 开放 · 免费
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
卡片边缘使用微妙的 1px 实线边框，颜色为 rgba(0,0,0,0.16) 或浅灰色。
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 过渡效果 · 交互式日历元素上平滑的布局变化
按钮与交互元素在 hover 时发生背景色变化或微妙的浮起效果。 · 通过颜色变化或焦点环提供即时的视觉反馈。
08
组件
- button 胶囊形或圆角矩形按钮，主操作按钮为纯黑填充，次要按钮为白色/透明填充。
- card 带有微妙阴影或浅色边框的白色卡片，展示日历界面或集成网格。
- chip 小型圆角胶囊标签，用于标记诸如 '应用商店' 或 '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 基础间距。关键组件包括胶囊形按钮和微妙的卡片，用于展示产品功能。关键约束：避免使用任何鲜艳的强调色，不使用衬线字体，并保持高对比度、专业的美学。避免拥挤的布局；优先考虑清晰度和留白。整体感觉是高端且面向开发者的，强调可靠性与精确性。
en · zh-CN · zh-TW · ja · ko