14islands 网站预览
14islands 网站预览

14islands

单色编辑画廊——一个纯净的画廊墙面,其中超大尺寸的黑色文字与满幅摄影存在,无装饰、无色彩、无 UI 干扰。

14islands 作为数字作品的画廊空间:纯白色画布,近黑色文字,以及单一的中灰色用于安静的次要信息。视觉层级完全通过尺寸构建——展示文本放大至 180px,正文文字保持在纪律性的 16px,形成 10× 的关系,呈现出编辑风格而非数字感。组件极为简洁:细线边框、4px 角度、无阴影、界面中任何位置均不使用色彩。摄影与满幅深色媒体块承担了传统系统中色彩应有的视觉重量。打破单色纪律的唯一设计元素是较浅的灰色与号或分类标签——微弱的对比,用于构建字形关系,却不引入色彩。

查看原始网站

使用规范

建议采用

  • 仅使用五个中性色值——Ink、Paper、Fog、Stone、Graphite。绝不引入任何色彩。
  • 展示文本尺寸设为 75-180px,行高为 0.80-1.00,字间距 -0.04em;字重保持为 400。
  • 所有边框圆角保持在 4px——适用于卡片、按钮、标签、输入框和图片框。
  • 维持正文(16px)与展示文本(180px)之间 10× 的尺寸比例,以保持编辑层级。
  • 使用 Stone(#a2a2a9)作为与号、分类标签及任何次要文本——绝不用于正文段落。
  • 主要区块之间垂直间距为 100-160px;元素间距保持在 5-25px 的紧凑范围内。
  • 案例研究图片以边缘对齐方式渲染,无边框、无圆角、无阴影——图片即为卡片本身。

建议避免

  • 绝不引入任何色彩——不使用蓝色、红色、绿色或任何辅助色调。
  • 不使用阴影、光晕或任何 CSS box-shadow。深度仅来自尺寸与对比。
  • 不使用超过 4px 的圆角——4px 为上限,而非下限。
  • 不要在正文尺寸中使用显示类型。AftenScreen 小于 50px 时,应搭配较小的行高以营造刻意感,而非仅仅显得正文过大。
  • 不使用粗体或半粗体字重进行强调——400 字重加尺寸已足够。
  • 不使用 Ink 填充按钮作为主要操作。该系统无填充按钮;导航和行动号召均为纯文字。
  • 不使用 3 列以上的网格布局用于案例研究。布局始终为配对形式。