Letterboxd 网站预览
Letterboxd 网站预览

Letterboxd

近黑色基底、衬线字形与居中构图。

页面以近黑色为基底,搭配蓝色文字。字体采用 object-fit: cover;、Graphik。视觉特点包括衬线字形、居中构图、渐变展示、摄影展示。适合参考的场景:内容网站首页、编辑专题页。

查看原始网站

使用规范

建议采用

  • #00e054 仅用于主要操作按钮、星级评分和体现品牌的场景,绝不用作背景、表面或装饰铺色。
  • 所有全大写标签都使用 Graphik,字间距为 0.075em 至 0.083em,以保留界面框架像印刷品般有意安排的感觉。
  • 内容从产品转入编辑表达时,例如影评、日志条目和描述,使用 Tiempos Text,字号与行高为 15px/1.67。
  • 所有卡片、按钮、徽章和输入框使用 3px 圆角;20px 只留给图标容器和评分星星。
  • 通过 #14181c → #202830 → #2c3440 的中性表面颜色变化创造纵深,而不是投影。
  • 主要正文使用 Pewter #99aabb,次要文字使用 Fog #667788,标题使用 Ice #aabbcc。冷蓝灰阶建立一致色温。
  • 每页顶部都以 Void Black 上的通栏导航锚定,让深色画布从边缘铺到边缘;导航不使用 max-width 容器。

建议避免

  • 绝不引入第二种高饱和色。酸绿是独奏者,任何其他色相都会稀释其信号。
  • 卡片或按钮不要通过阴影产生悬浮感。内嵌 1px 边框是正常内容流元素唯一的纵深处理。
  • Tiempos Headline 应避免使用 36px 之外的字号。缩小或拉伸到多个组件中,会让它失去仪式般的分量。
  • 句式大小写的正文不要采用宽字间距。它只属于全大写标签和眉题。
  • 大块正文绝不使用纯白 #ffffff,因为这在深色界面中产生过强对比;应改用 Pewter 或 Ice。
  • 矩形组件圆角不要超过 3px。锐利几何形态是电影院大厅审美的一部分。
  • 导航、按钮或标签中不要混入衬线 Tiempos。界面与编辑内容之间的字体边界必须清楚。