Capacities

白色基底、圆角卡片与大字排版。
页面以白色为基底,搭配近黑色文字。字体采用 Inter、JetBrains Mono。视觉特点包括圆角卡片、大字排版、紧密字距、细线分隔。适合参考的场景:效率工具官网、协作产品介绍页。
查看原始网站使用规范
建议采用
- 使用 Paper White (#ffffff) 作为默认画布和卡片表面颜色。
- 将显示标题设置为 Inter 700 字重:首屏区域语句使用 64px/1.05,字间距 -1.92px;主要编辑过渡使用 48px/1.05,字间距 -1.44px。
- 在转换按钮中使用 Ink (#1a1a1d) 与 Paper White 文字搭配,按钮填充部分使用 6px 圆角和 8px 14px 内边距。
- 使用 16px 圆角、28px 内边距、1px Stone (#ecebea) 边框以及 0 1px 2px rgba(0,0,0,0.04) 的阴影,构建信任、指标和用户评价卡片。
- 将 Sunlit Wash (#fef3c7)、Honey Line (#fde68a) 和 Amber Ink (#945424) 三色组合用于促销条和温暖的选中胶囊控件。
- 正文文字使用 Graphite (#5c5959) 16px/1.5,仅在元数据和辅助文本中使用 Ash (#a7a2a1)。
- 以 4px 为间距基准,使用 6px、8px、12px、16px 的间距组合构建紧凑的集群,然后为主要区块提供 73px 的间距。
建议避免
- 不要使用饱和的蓝色、紫色、绿色或红色作为全页转化色;仅将淡蓝色和薰衣草色用于对象卡片的点缀。
- 不要在矩形转化按钮上使用胶囊圆角;保持填充按钮和发现按钮的圆角为 6px 或 8px。
- 不要让卡片无边框或过度抬升;使用 Stone (#ecebea) 边框和 0 1px 2px rgba(0,0,0,0.04) 的卡片阴影。
- 不要将正文文本默认设置为 Ink (#1a1a1d);仅将 Ink 用于标题、强调标签和填充控件。
- 不要将 Sunlit Wash (#fef3c7) 涂满整个内容区域;仅限于公告层、选中筛选器和局部首屏区域高光区域。
- 不要在大标题上使用松散的正字间距;保持显示标题字间距为 -0.0300em,小节标题字间距为 -0.0250em。
- 不要在首屏引入密集的仪表盘网格;应以一个居中的核心思想为主导,辅以外围的碎片化对象元素。