---
name: "Cal"
description: "该设计是单色调、开发者优先美学如何实现高品质感与高度功能性的绝佳范例。"
version: alpha
specification_status: not-validated
license_status: unknown

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#292929"
  neutral: "#898989"
  bg-soft: "#F4F4F4"
  bg-quiet: "#E1E2E3"
  muted-soft: "#D3D3D3"
  line: "rgba(0,0,0,0.16)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-0.2px"
  h2:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*一份简洁现代的瑞士铁路时刻表，被转化为一个数字化的日程管理平台。*

## Colors

单色系，高对比度。纯黑搭配白色，并使用中性灰建立层次与结构。

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#292929`)** — uses `ink-soft` token
- **Muted (`#898989`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.16)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- 标题使用 -0.2px 的紧凑字间距
- 正文使用舒适的 1.5 行高
- 按钮与导航使用 500 字重以示强调
- 日历日期与小型标签使用 400 字重

## Layout

居中容器布局，包含一个大型主视觉区域，该区域采用文字与界面模型并列的分屏设计。

*Rhythm:* 基于 4px 的统一基础网格，确保界面组件排列紧凑，内容区域留白舒缓。

## Elevation & Depth

- 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
- Borders: 卡片边缘使用微妙的 1px 实线边框，颜色为 rgba(0,0,0,0.16) 或浅灰色。

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** 胶囊形或圆角矩形按钮，主操作按钮为纯黑填充，次要按钮为白色/透明填充。
- **card:** 带有微妙阴影或浅色边框的白色卡片，展示日历界面或集成网格。
- **chip:** 小型圆角胶囊标签，用于标记诸如 '应用商店' 或 'Cal.com 发布 v6.5' 之类的内容。
- **input:** 简洁的文本输入框，带有圆角边框和微妙阴影，常作为预订组件的一部分。
- **hero:** 位于页面顶部的突出区域，左侧是大型排版文字，右侧是详细的日程管理组件模型。

## Do's and Don'ts

**Don't:**
- 不要使用高饱和度的主色 — 截图显示的是严格的单色黑白调色板。
- 不要使用装饰性衬线字体 — 截图显示的是简洁、几何感的无衬线字体。
- 不要给卡片添加厚重的投影 — 截图显示的是使用浅色边框实现的非常微妙、近乎扁平的浮起效果。
- 不要使用尖锐的圆角按钮 — 截图显示的是始终保持圆角或胶囊形的按钮设计。
- 不要在布局中堆砌过多元素 — 截图显示的是充裕的留白和专注的内容层次。
- 不要在正文文本中使用全大写 — 截图显示的是混合大小写文本以提高可读性。
- 不要使用无标签的图标 — 截图显示每个界面元素都伴有清晰、描述性的文字。

---

## System Prompt (paste into AI agent)

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