
Calendly
冷大理石纹上印有深蓝色墨水。
Calendly 给人的感觉就像一个平静而自信的规划工作空间:近乎纯白的画布留有足够的空间,简洁的白色产品卡片悬浮在清爽的灰色背景上,所有文字都以深蓝色而非纯黑色呈现。深蓝色 (#0b3558) 是其标志性元素,它被运用在所有出现文字的地方——标题、按钮、图标、链接——柔化了整个界面,使其比典型的 SaaS 落地页更温暖、更时尚。所有主要操作都使用单一的亮蓝色 (#006bff),而延伸到产品布局之外的粉色和蓝色装饰点缀则增添了温暖感,却又不显得杂乱。组件的设计也十分简洁:1 像素的细边框、淡淡的蓝色阴影、24 像素的大卡片半径以及 8 像素的按钮角,都显得精心设计而非平淡无奇。
桌面端最大宽度为 1200 像素,居中显示,并留有宽边距。主屏幕分为两列:左侧列包含 80 像素的标题 + 正文 + 堆叠的登录按钮,右侧列包含一个带有装饰背景元素的预订组件卡片。主屏幕下方是一条全宽的条纹,上面印有 Trust 的标志。后续部分交替使用居中的标题块(H2 标题 + 副标题 + 可选的行动号召按钮)和描述功能的双列块(左侧文字/右侧产品或左侧产品/右侧文字),每个产品图片后方都有装饰性元素。很少使用卡片网格——布局倾向于并排排列的成对部分,而不是多列网格。各部分之间的间距为 48 至 64 像素。导航栏为 64 像素的固定顶部栏,左侧是标志,中间是居中的菜单,右侧是一组行动号召按钮。
主要视觉元素是产品截图——预订日历用户界面的简洁模型,呈现在带有宽圆角的纯白色卡片上。装饰性设计:每张产品卡片周围都环绕着柔和的珊瑚紫 (#e55cff) 或天蓝色 (#0099ff) 色块,略微偏移并模糊处理,营造出拼贴效果,而非平面截图。没有照片,也没有生活方式图片——所有视觉元素都代表产品用户界面、抽象的强调形状或信任栏上的单色合作伙伴徽标。图标为线性图标,线宽为 1.5–2 像素,单色,颜色为深蓝色(墨蓝色)或蓝色(信号蓝)。
调色板
品牌
- Ink Navy
#0b3558— 正文、标题、图标、行动号召、导航链接的深色背景。 - Signal Blue
#006bff— 主要行动号召 (CTA)、主动导航、链接强调、选定状态
中性的
- Carbon
#0a0a0a— 纯黑色文本(备用),徽标字形,图标填充。 - Slate Gray
#476788— 附加正文、辅助文本、静音标签。 - Mist Gray
#a6bbd1— 禁用文本、非活动功能标签、浅色图标轮廓 - Cloud
#f8f9fb— 页面画布、页脚背景、额外表面 - Paper
#ffffff— 卡片表面、凸起面板、深色背景上的按钮文字。 - Pebble
#f0f3f8— 图标背景图、输入字段阴影、细微分隔符、悬停效果。
排版
从 12 像素到 80 像素 · 10 步
- Gilroy — 替代品: Manrope · 轮廓 400, 500, 600, 700 · 所有界面文本。Gilroy 是一款几何人文主义无衬线字体,具有宽阔的字形开口和均匀的笔画对比度;其粗体字重 (700) 用于标题,而 500–600 用于按钮和副标题。可替换为 Manrope 或 Inter。
- Gilroy — 替代品: Inter · 轮廓 400 · 正文和通用 UI 标签 - 400 磅字体粗细确保长文本清晰易读,而不会显得笨重。
- Gilroy — 替代品: Inter · 轮廓 500 · 二级标题和突出显示的正文 - 14/500 字体是卡片标题和行内标签的主要工具。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 8-16px |
| 按钮半径 | 8px |
| 卡片半径 | 24px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 48-64px |
| 页面宽度 | 1200px |
AI 将按照Calendly风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- ElevenLabs — 一组以温暖奶油色调为主、标题简洁的摄影作品。一本包豪斯风格的笔记本——蛋壳色纸张,黑色墨水,仅以一抹紫色和橙色点缀,用于产品展示。
- Awesomic — 编辑用的锌网布,上面点缀着橙色的标点符号,让人联想起五彩纸屑。
- Monad — 关于温暖羊皮纸的编辑技术期刊
- Dub — Link的哑光宣纸控制面板
- Seline Analytics — 温暖的纸张上摆放着一张安静的分析表格。
- Notion — 正午阳光下,一本温暖的纸质笔记本映入眼帘
- Anthropic — 一本印在温暖羊皮纸上的科学野外考察日志——平静的象牙色表面,衬线字体的编辑标题,以及一个仅在需要行动时才会出现的粘土色点缀。
- Augen Pro — 苹果的白色展示柜以单色调空间为背景,仅以清冷、轻盈的电光蓝作为点缀。
- Antimetal — 一篇印在米色纸上的社论——科学期刊一个宁静的早晨,克制传达着自信,衬线字体则承担着重要的作用。
- Perk — 温暖的羊皮纸上的电光石灰
- Ditto — 阳光洒满工作室,人们正在制作野花样本。温暖的奶油色底色,鲜艳的黄色底色,深邃的藏蓝色墨水,以及作品背后绽放的自然色彩。
- Officevibe — 一本印在暖米色纸张上的杂志。想象一下,一篇关于人力资源管理的精辟文章,以产品的形式呈现——流畅的衬线字体在现代蓝色的界面中低语。