Glein 网站预览
Glein 网站预览

Glein

暖亚麻上的工作室造型册:满幅摄影、细线分割、一个低声字重的声音。

Glein 是单色编辑画布:超大产品和生活方式摄影填满几乎每个视口,白色无衬线分类标签直接浮在影像上。色板是紧密的暖无彩色系统:Bone White、Midnight Black、标志 Warm Sand 米色与 Concrete Gray,零彩色强调,使摄影的自然色调,牛仔、亚麻、皮革,成为色彩故事。无衬线及配套等宽字体都保持字重 400,没有粗体,因此层级仅通过字号建立,最高达 111px 展示文字。组件极薄:黑细线边框、零圆角、微内边距、无阴影。结果像艺术学校造型册,克制、可触、安静,装饰的缺席就是标志。

查看原始网站

使用规范

建议采用

  • 每个元素都保持字重 400,F-Grotesk 与 Maison-Neue-Mono 都只用一个字重。通过字号和空间建立层级,绝不加粗。
  • 摄影边到边填满视口,图片网格无内部沟槽,无圆角,不在照片周围加边框。
  • 白色 F-Grotesk 分类标题直接叠在影像上,分类名 30px,“mehr anzeigen”子链接用 13px 等宽字体。
  • 区块用暖沙色 #ebe6dc 条带或 1px #000000 细线分隔,绝不用阴影或卡片浮起。
  • 所有功能标签使用 Maison-Neue-Mono,包括导航项、按钮、标签、页脚元信息;等宽字体是系统“功能声音”。
  • 展示文字充分呼吸:111px F-Grotesk,行高 1.0,四周充足留白。不收紧字间距,F-Grotesk 天然的等宽影响节奏承担表达。
  • 所有交互元素使用 2px/6px 微内边距,按钮刻意做成邮票大小,而非意外太小。

建议避免

  • 不要引入任何彩色,系统 0% 彩色,即使加一个强调色都会破坏整个单色约定。
  • 不要使用粗、半粗或轻字重;字体文件只加载 400,尝试 500/600/700 会回退或显错。
  • 不要添加阴影、光晕或模糊,表面模型平面,浮起通过暖色条带过渡表达,而非 z 轴深度。
  • 不要圆角,系统所有圆角都是 0px,添加 border-radius 会引入卡片或按钮感,与编辑纸张美学冲突。
  • 功能标签不要用无衬线,等宽字体留给导航、按钮与元信息,在这里混入 F-Grotesk 会稀释工作室声音。
  • 111px 展示文字周围不要挤入界面元素,展示需要空气,其直接边距区内不要放按钮、链接或图片。
  • 链接不要使用彩色悬停状态,同色悬停下划线是系统唯一支持的状态变化。