Julia Krantz 网站预览
Julia Krantz 网站预览

Julia Krantz

近黑色基底、网格布局与大字排版。

页面以近黑色为基底。字体采用 DM Sans、ClashDisplay。视觉特点包括网格布局、大字排版、错落拼贴、大幅摄影展示。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 所有背景使用 #000000 — CSS 变量 --bg: #000 为绝对值;禁止用深灰色或近黑色替代
  • 所有 ClashDisplay 展示标题(44px 方块代码)均设为 300 字重,字间距 -0.04em — 与摄影内容形成超轻的对比,是其标志性手法
  • 为所有结构边界应用 1px 实线 rgba(248,248,248,0.12):方块分隔线、区块分隔线、列规则线
  • 所有交互的悬停状态仅使用颜色或滤镜过渡:链接采用 color: rgba(248,248,248,0.45),图像块采用 filter: brightness(0.82),过渡为 0.2s ease。
  • 所有元素(包括方块、容器、交互控件)的圆角均设为 0px — 锐角规则绝对成立
  • 所有正文、导航和标签文本均使用 DM Sans 300 字重 — UI 层内禁止使用粗体字
  • 通过 #707070(区块标签、数字、分类标签)表达次级层级关系 — 严禁通过字号增大或字重变化实现

建议避免

  • UI 层内绝不添加任何色彩 — 按钮、链接、标签、边框必须仅限于 #f8f8f8 / #707070 / 不透明度系统内
  • 绝不使用圆角 — 方块、容器或任何交互元素均不得有 border-radius;0px 为不可妥协的规则
  • 绝不使用字重高于 500 — ClashDisplay 500 为上限,仅用于名称标志;DM Sans 始终保持在 300 字重
  • 绝不添加阴影或层叠效果 — 设计中不存在任何阴影令牌;深度仅来自与黑色画布的对比
  • 绝不添加悬停背景或按钮填充 — 交互状态仅改变文字不透明度或图像亮度,绝不添加背景色
  • 绝不引入渐变、叠加层或有色背景 — CSS 令牌明确表明不存在渐变系统;#000 是唯一的背景
  • 类别标签与其项目代码之间的间距绝不可超过4px——元素间的紧密堆叠(元素间4px下边距)构成空间节奏