Monocle 网站预览
Monocle 网站预览

Monocle

暖白色基底、大幅摄影展示与紧密字距。

页面以暖白色为基底,搭配近黑色文字。字体采用 Plantin、Helvetica Neue。视觉特点包括大幅摄影展示、紧密字距、细线分隔、衬线字形。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • 所有编辑内容,包括标题、正文、眉题和作者署名,都使用Plantin,绝不用另一种衬线字体替代。
  • 标题使用 Plantin 400 字重,字号 24–40px,字间距 -0.0200em。负字间距是其标志性特征。
  • 区块标题前的小标签(POLITICS、OPINION、AFFAIRS)采用带字间距的全大写 Plantin,字号 13px,字间距为 0.05–0.075em;页面用这种方式标示内容分类。
  • 仅在订阅按钮、Monocle 广播卡片和编辑插图中使用 #ffc500。其他界面元素不得使用颜色。
  • 卡片与列之间使用 1px #d9d9d9 细分隔线分隔,而非仅靠间距。网格结构源自印刷排版。
  • 所有边框保持 0 圆角。仅在首屏特写行内的摄影容器中使用 8px 圆角。
  • 在桌面端保持3 列编辑网格(导语 | 次要内容 | 侧边栏广播),在移动端坍缩为单列。

建议避免

  • 任何组件均不得使用阴影效果。层级感为明暗对比,而非投影。
  • 不得引入额外的强调色。系统为单色加一种黄色。
  • 正文不得使用无衬线字体。Plantin 承载整体语气;Helvetica Neue 仅用于界面元素。
  • 不得使用大于 8px 的圆角。0圆角的美学对编辑类卡片和按钮是不可妥协的。
  • 文章标题不得居中对齐——必须左对齐,符合日报风格。
  • 订阅按钮只能放置在顶部工具栏,其他位置出现黄色会破坏信号。
  • 图标仅允许使用 #000000 或 #ffc500 填充。图标语言为二元制。