Cap 网站预览
Cap 网站预览

Cap

浅色基底、细线分隔与分屏构图。

页面以浅色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 defaultFont、ui-monospace, SFMono-Regular, Menlo, Consolas。视觉特点包括细线分隔、分屏构图、网格布局、宽松留白。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 所有按钮、导航栏、分段控件和标签使用9999px边距半径——胶囊形状是标志性的轮廓。
  • 将双按钮CTA集群配对为左侧黑色(#202020)'下载'和右侧蓝色(#2563eb)'升级';绝不颠倒此顺序。
  • 首屏和区块标题显示尺寸设为52–60px,字重700,自然(0)字间距,行高1.07–1.11——紧凑、自信,无多余呼吸感。
  • 所有特征标题上方全大写眉标在11–12px字重500时使用0.2em字间距。
  • 默认使用白色(#fcfcfc)表面,搭配1px #e0e0e0 或 #e5e7eb 边框进行分隔;仅在提升卡片和悬浮聊天组件上使用阴影。
  • 仅在产品示意窗口和装饰性缎带艺术中出现多色渐变——UI边框保持单色加一个蓝色。
  • 页面最大宽度设为1200px,水平内边距约20px;在此宽度下首屏始终为两栏布局(左侧文字,右侧产品视觉)。

建议避免

  • CTA控件除黑色(#202020,所有权)或蓝色(#2563eb,升级)外,不得使用其他任何颜色填充——双色按钮系统是整个决策架构。
  • 按钮、链接或交互状态中不得使用Spark Violet(#7c3aed)、Ember(#d97706)或Sky(#0d74ce)等辅助色——这些颜色仅作装饰用途。
  • 主内容流内的卡片不得添加阴影;应使用1px #e0e0e0 边框替代。阴影仅保留用于悬浮聊天组件和下载CTA卡片。
  • 正文文本不得低于14px或高于16px——正文设计本就狭窄。
  • 页面背景不得使用纯白色(#ffffff);应使用#fcfcfc(Paper)作为底色,使画布自然地置于内容之下。
  • 不得在按钮、徽章、导航栏或页脚中使用多色渐变;渐变仅存在于产品示意图艺术中。
  • 不得破坏9999px胶囊形状规范用于主要操作——有效卡片半径仅有12px(特性卡片)和16px(下载CTA卡片)