Josephmark 网站预览
Josephmark 网站预览

Josephmark

深色基底、胶囊形控件与紧密字距。

页面以深色为基底。字体采用 Scto Grotesk A。视觉特点包括胶囊形控件、紧密字距、细线分隔、网格布局。适合参考的场景:创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 所有展示与标题尺寸均使用 Scto Grotesk A 字体 300 字重——轻量级是其标志,而非降级方案
  • 保持一致的负字间距:在展示尺寸(70px)时为 -0.035em,按比例缩放至说明文字(12px)时为 -0.019em
  • 采用全铺满区块,而非受限于最大宽度的布局——让深色画布延伸至视口边缘
  • 以 #000000 和 #f4f5ef 作为两个主要画布颜色,交替使用以形成区块节奏
  • 交互元素定义为 1px 边框和 9999px 半径——胶囊形状是唯一的按钮形态
  • 正文文字设定为 16px/1.38,深色背景使用 #ffffff,浅色背景使用 #4e5449
  • 内容区块间以 1px #e5e7eb 细线分隔,绝不使用阴影或背景填充

建议避免

  • 除单一暖棕(#a9a498)外,不得引入任何其他色彩——该系统的强大之处在于其仅 1% 的色彩性
  • 不得添加阴影、光晕或任何投影效果——此系统严格保持平面性
  • 卡片、图片或容器不得使用圆角——仅按钮有圆角(至 9999px)
  • 文字不得居中——所有内容均左对齐,遵循编辑栏逻辑
  • 不得使用粗体字重(600 及以上)进行强调——字重序列从 300 → 400 → 500,强调来自尺寸与色彩,而非字重
  • 不得添加图标系统或装饰性图形——仅文字与摄影为视觉元素
  • 不得将 #ffffff 用作区块背景——仅作为表层出现在表单内,或作为深色背景上的文字颜色