OpenDesign·你的设计资产库

网页参考

Cal

一款完全可定制、对开发者友好的日程管理软件，适用于个人与企业。

ProductivitySaaSCalendarCleanProduct
Cal 网站截图

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

  • display48px · 500
  • h232px · 600
  • body16px · 400
  • caption12px · 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

包内真实截图

Cal — 桌面首屏（hero）
桌面首屏（hero）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cal — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Cal.com 是一款高端、可定制的日程管理软件平台。其设计基因建立在由黑、白和中性灰构成的简洁单色调色板之上，使用几何无衬线字体进行展示，人文主义无衬线字体用于正文。布局宽敞且结构化，采用 12 栏网格和 4px 基础间距。关键组件包括胶囊形按钮和微妙的卡片，用于展示产品功能。关键约束：避免使用任何鲜艳的强调色，不使用衬线字体，并保持高对比度、专业的美学。避免拥挤的布局；优先考虑清晰度和留白。整体感觉是高端且面向开发者的，强调可靠性与精确性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。