601 Inc. 网站预览
601 Inc. 网站预览

601 Inc.

黑暗中呈现温暖的电影式海报效果

601 是一家东京电影工作室,其视觉系统将网页简化为电影本身的构成元素:近黑色的虚空,一种来自老式胶片的温暖奶油色调,以及一个定制字体,以建筑级规模呈现。整个配色系统功能明确——所有面向观众的内容使用奶油色,屏幕背景则为黑色——这迫使每一个构图决策都围绕尺度、摄影和静默展开,而非金属感或装饰性元素。边框为1px细线,无层叠效果,唯一结构是照片本身以及与之并列的超大数字,如同放映时刻表。每一页都像单个胶片缓缓展开:一个标志、一个日期、一张静态画面,以及留白的空间。

查看原始网站

使用规范

建议采用

  • 仅使用 #ece4b4 和两种黑色;引入第三种颜色会破坏胶片投影的逻辑
  • 在任何品牌展示场景中,将 changeling-neo 设置为精确的 230px 或 280px —— 大尺寸即为品牌特征
  • 所有边框必须保持为恰好 1px 实线 Celluloid Cream —— 从不加粗,也绝不带有背景填充
  • 图片需满幅呈现,内边距为 0px,圆角为 0px,无边框;照片必须紧贴视口边缘
  • 导航与页脚项目之间使用 圆点 图标(•)和 21px 水平内边距分隔,而非仅靠分隔线或间距
  • 仅将 12px 圆角用于次要 UI 元素(如小标签、通知),绝不用于主要内容区域
  • 所有文本必须锚定在视口边缘——左或右,绝不居中于受限的列内

建议避免

  • 不得添加阴影、光晕、模糊或其他任何层叠效果
  • 不得引入第二种字体;该系统仅使用一种字体、一种字重、三种尺寸
  • 不得使用填充按钮——唯一的行为模式是 1px 边框链接
  • 不得将布局限制在最大宽度;必须满幅填充以保留电影画面的完整性
  • 不得在 UI 元素上使用任何颜色——所有色彩必须来自摄影
  • 不得将正文或段落文字设置在 42px 以下;如果不是标签或展示性场景,就不应出现在此站点
  • 不得在 UI 表面应用渐变填充、噪点纹理或胶片颗粒叠加效果;系统中唯一的颗粒感来自摄影