Relate

清晨的微光洒落在产品画布上
Relate 以一种清凉的白色 SaaS 表面呈现,搭配近黑色的标题墨色和一个鲜明的皇家蓝色点缀,完成品牌表达。产品 UI 通过柔和的圆角卡片悬浮在淡薰衣草色背景上,彩色状态点(蓝色/绿色/红色/橙色)点缀在流程列中,如同看板中的任务卡片。字形紧凑:Inter 字号 56–80px,负字间距(负字间距)增强视觉尺度,正文文字保持在 14–16px,行高充裕,字间距密集(8–12px 间隙)而非松散。所有元素均位于胶囊形或圆角矩形容器中,无任何直角边角。
查看原始网站使用规范
建议采用
- 使用 #145aff 作为唯一饱和的主色点缀,用于标题、链接、标志以及首屏文案中的一个色彩词——绝不引入第二个品牌色
- 正文文字设定为 14–16px 的 Inter 400,搭配 #14141 或 #374151,背景为 #fcfcfc;对比度至少达到 17.8:1
- 为所有按钮、标签和导航项应用胶囊圆角(9999px 或 100px)——交互元素中不得出现 90° 的硬角
- 在特性区域卡片上使用多层柔和阴影堆叠(三个 rgba 层,模糊度递增)以实现浮起的立体感
- 渲染彩色状态点,直径为 4–6px,分别使用 #3b82f6/#16ca2e/#f26052/#ffa64d 用于流程与交易状态
- 设置首屏区域及标题文字大小为56–80px,使用Inter 600字体,字间距为-0.027至-0.037em,以实现紧凑压缩的视觉效果
- 内层卡片(交易行、客户条目)使用 8px 圆角,外层特性容器使用 16–40px 圆角——保持双层级圆角系统
建议避免
- 不要使用 #0000ee 或浏览器默认链接蓝——这是错误的产物,而非品牌选择;应使用 #145aff 或 #3b82f6
- 不要用厚重的实色块填充 CTA 按钮——此处的模式是透明描边或磨砂胶囊,而非实心矩形
- 不要引入超过两个色阶的渐变;所有检测到的渐变均为简单的线性或径向双色混合
- 任何可见元素的边角均不得为锐利的 0px 圆角;系统中最小圆角为 4px
- 正文文字不得低于 14px 或高于 #6b7280 的亮度阈值——低于此阈值可读性将崩溃
- 一个组件内不得堆叠多个饱和的主色——每个表面最多仅允许一个蓝色、绿色、红色或橙色状态点
- 不要使用 Inter 字重高于 600 或低于 400——系统运行在 400/500/600 的狭窄范围内