Analogue 网站预览
Analogue 网站预览

Analogue

深色基底、胶囊形控件与紧密字距。

页面以深色为基底,搭配近黑色文字。字体采用 Graphik Medium、LCDDot TR。视觉特点包括胶囊形控件、紧密字距、摄影展示、居中构图。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 只使用从 Paper 到 Ink 的七级无彩色阶,任何位置都不添加彩色强调。
  • 展示标题设为 60px、字间距 -3.0px、行高 1.00,让它读起来像一条紧密连续的文字。
  • 导航采用圆角为 1000px 的漂浮胶囊,并使用磨砂玻璃背景。不要采用实心横条或侧栏导航。
  • 默认元素间距使用 10px;40–70px 间距只用于区块之间的呼吸空间。
  • 图像和卡片使用 10px 圆角,行内链接使用 13px,按钮使用 100px,导航使用 1000px。圆角用于传达元素角色,而非任意风格选择。
  • 每页最多使用一次 LCD 点阵字体,以 20px 呈现强调。将其视为人文系统中一次数字化的打断。
  • 让摄影承担全部颜色与对比。不要对图像使用双色调、改变饱和度或叠加颜色蒙版。

建议避免

  • 不要引入任何彩色,包括蓝、红、绿或紫。这套系统由绝对的无彩色纪律定义。
  • 不要给卡片、按钮或内容表面添加阴影。纵深来自表面色调变化,而非悬浮效果。
  • 不要使用粗体或半粗体字重。系统只采用 400 和 500,通过字重变化而非颜色来建立层级。
  • 桌面宽度下,展示标题不要换行。60px、-3.0px、1.00 这组设置就是为单行电影式宣言设计的。
  • 不要使用 0px、4px 或 8px 圆角。系统中每个容器都采用 10px、13px、100px 或 1000px。
  • 链接不要添加下划线,而应通过不透明度从 0.6 → 1.0 的变化,或 1px 边框变化来表达状态。
  • LCD 点阵字体不要用于正文、标签或功能性界面。它只用于编辑展示或数字化强调场景。