CHELSEA 网站预览
CHELSEA 网站预览

CHELSEA

近黑色基底、大幅摄影展示与胶囊形控件。

页面以近黑色为基底。字体采用 Neue Haas Unica Pro。视觉特点包括大幅摄影展示、胶囊形控件、分屏构图、视频展示。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • #4490ff 是体系唯一彩色,每个链接、强调和焦点圆点都使用它。
  • 所有交互元素设为 9999px border-radius,形成定义品牌的胶囊形。
  • 画布保持纯 #000000,不在页面中途引入卡片表面、灰色面板或浅色分区。
  • 媒体从边缘到边缘铺开,不加外边距、圆角或框架。
  • 正文采用 Neue Haas Unica Pro 400 字重;700 只用于字标与按钮标签。
  • 标题和正文采用紧凑行高(1.0–1.15),维持片尾字幕密度。
  • 元素间距使用 8px,组件内边距 16px,主要分区之间跃迁至 96px。

建议避免

  • 不引入投影、抬升层或卡片容器;体系有意扁平。
  • 不添加第二种强调色或任何暖调,色板为黑、白加一种蓝。
  • 图像或媒体框架不加圆角,它们必须是延伸至视口边缘的尖角矩形。
  • 链接不使用 #0000ee 或浏览器默认蓝,必须为 #4490ff。
  • 不加可见标志块、导航背景或页眉栏,导航是漂浮在黑底上的文字。
  • 正文行高不超过 1.5;片尾字幕感依赖紧凑行高。
  • 状态不引入绿/黄/红语义色,体系没有需要编码的界面状态。