SpatialChat 网站预览
SpatialChat 网站预览

SpatialChat

近白色基底、分屏构图与居中构图。

页面以近白色为基底,搭配近黑色文字。字体采用 Satoshi。视觉特点包括分屏构图、居中构图、细线分隔、扁平表面。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • #5727e7 仅用于填充主要 CTA、公告栏、“New”徽章和强调圆点,不用于正文或边框。
  • 全部按钮圆角为 12px,卡片为 16px;控件与容器间的 4px 差异使体系显得有意设计。
  • 展示或分区标题采用 40-60px Satoshi 700,500 留给按钮,400 留给段落。
  • 每个首屏都将填充紫 CTA 与幽灵描边 CTA 配对,双按钮节奏是标志性 CTA 模式。
  • 全部阴影保持 rgba(0,0,0,0.06):按钮为 0 1px 2px,卡片为 0 4px 16px,首屏图像为 0 4px 28px。
  • 结构分隔采用 #e5e7eb,输入框边框采用 #d1d5db,两级灰阶避免表单显得过平。
  • 页面画布为 #f9fafb,卡片表面为 #ffffff,米白基底让白卡片不像剪贴块。

建议避免

  • 不引入第二种彩色,紫色是唯一强调,青绿、绿或红会削弱品牌。
  • 按钮圆角不超过 14px,也不低于 10px;12px 胶囊形与 Satoshi 末端形状相协调。
  • 阴影不深于 6% 黑,也不染彩色,体系依靠细线边框与几乎不可见的阴影。
  • Satoshi 不低于 400 字重或超过 700;体系没有细体或黑体变体,加入会破坏尺度。
  • 超过两行的正文不居中,两列功能分区内说明左对齐。
  • 紫色不叠在紫色上,如紫 CTA 放在紫底色上;#f2f2ff 仅用于高亮,而非按钮状态。
  • 大内容区不用 #030712 填充,深色模式不属于体系;需要区分分区时采用细线边框与白卡片。