Factory 网站预览
Factory 网站预览

Factory

午夜的终端作战指挥室。Factory是一块对比鲜明的黑色控制界面,一张白色卡片如被闪光灯照亮的简报般落在其上——房间里唯一的对象就是工作本身。

Factory 以终端作战指挥室的形式运作:深黑色画布,采用 400 字重的 Geist 字体,字间距为负值,紧密压印,留出充足的负空间,使两个功能性的强调色——信号橙色和用于指标的绿色——能够超越噪音清晰表达。其标志性手法是浅色卡片浮于近黑色底面(#eeeeee 卡片置于 #101010 画布上),形成鲜明的形与背景对比,而非柔和的立体感。几乎所有的交互都通过单色表面实现;色彩仅用于实时数据状态和状态脉冲,绝非装饰。组件保持平面,圆角极小,仅 1px 薄边框,无阴影依赖——设计的深度来自对比与间距节奏,而非模糊或发光。

查看原始网站

使用规范

建议采用

  • 每个区块均保持 #101010 画布底色。仅允许浅色卡片(#eeeeee)保持明亮。
  • 所有内容均使用 Geist 400 字体。仅当标签需在密集表面中突出时(如页脚标题、关键行动按钮),才可使用 500 字重。
  • 根据尺寸比例应用负字间距:72px 时为 -0.04em,44px 时为 -0.025em,12px 时为 -0.02em。大标题的视觉分量来自紧密的排版,而非粗体。
  • 将 #ee6018 保留用于实时状态、构建状态指示器以及数据图表中的强调线条。切勿将其用作按钮填充色。
  • 按钮和导航元素的圆角设为 3px,卡片为 10px,最大面板为 20px。不可超过此数值——系统并非柔软。
  • 通过 #eeeeee 在 #101010 上的对比以及 96px 以上的区块间距来构建深度。禁止引入阴影或模糊以模拟立体感。
  • 眉题、状态标签和列标题采用Geist Mono 12px大写文字。这是系统的次要语气,也是最快传达“仪器而非营销”感的方式。

建议避免

  • 禁止引入额外的强调色。色彩体系仅包含两种中性色(#101010、#eeeeee)、一种暖灰用于弱化文本(#8a8380),以及两个功能性强调色(#ee6018、#a0ca92)。其他任何颜色均为噪音。
  • 禁止在标题中使用 600 及以上或粗体字重。系统以 400 字重搭配紧密字间距表达——粗体会破坏其声音。
  • 禁止将 #ee6018 或 #a0ca92 用于按钮背景、卡片表面或大文本填充。它们是数据状态色,而非 界面外围元素 色。
  • 禁止行高超过 1.5。显示尺寸使用 lh=1;正文使用 1.5。任何更松散的行高都会让页面显得像编辑稿件,而非技术文档。
  • 禁止为卡片、按钮或弹窗添加阴影、发光或模糊效果。该系统的立体感来自对比,而非景深。
  • 禁止混入衬线字体或展示字体。仅限 Geist 与 Geist Mono。
  • 禁止用品牌色填充按钮。主要操作应使用中性深色填充(#1f1d1c)或中性浅色填充(#fafafa)——彩色行动按钮会破坏单色金属感。