Loom 网站预览
Loom 网站预览

Loom

白色基底、胶囊形控件与圆角卡片。

页面以白色为基底,搭配近黑色文字。字体采用 Charlie Display、Charlie Text。视觉特点包括胶囊形控件、圆角卡片、居中构图、网格布局。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 所有可点击元素(按钮、导航链接、标签、图标控件)均使用 9999px 圆角——无例外
  • 所有主要文本设置为 #101214 在 #ffffff 背景上,以满足 AAA 对比度;正文内容绝不能低于 #292a2 在白色背景上
  • 为卡片和视频容器应用三层环境阴影堆叠(0px 2px 6px / 0px 5px 18px / 0px 24px 83px)——这是系统中唯一的抬升模式
  • 所有 25px 及以上标题使用 Charlie Display 字重 700;19px 及以下内容则使用 Charlie Text
  • 通过柔和的表面色调(#e9f2fe、#fff5d4、#efffd6、薰衣草紫)区分内容区域,而非增加额外边框或分隔线
  • 在导航、链接和按钮中统一使用 #1868db 作为唯一交互强调色——禁止使用其他色彩作为辅助动作色
  • 首屏文本和行动号召(CTA)保持居中对齐;产品语气直接、正面,而非不对称

建议避免

  • 卡片或图片绝不要使用方形或小圆角(小于 12px)——整个系统依赖于充足的圆角设计
  • 绝不添加第二个动作色;蓝色是唯一的色彩决策,添加绿色或红色按钮将割裂视觉连贯性
  • 正文内容中绝不使用粗体字重低于 19px;UI 标签的字重下限为 500,以维持轻盈、克制的氛围
  • 绝不使用单层扁平阴影或硬边框来分隔卡片;分层环境阴影才是让表面具有实体感的关键
  • 在展示尺寸上行高绝不能低于 1.2,正文尺寸上绝不能高于 1.7——系统运行在一个狭窄的垂直节奏窗口内
  • 绝不将彩色填充用于结构化区域的背景;粉彩仅用于内容卡片,而非页面背景条
  • 正文文本字号绝不能低于 15px 或高于 19px;产品整体阅读感舒适,不显密集或过大