Contract 网站预览
Contract 网站预览

Contract

白色基底、大幅摄影展示与紧密字距。

页面以白色为基底,搭配近黑色文字。字体采用 Plain。视觉特点包括大幅摄影展示、紧密字距、细线分隔、扁平表面。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 所有结构分隔都使用1px #e5e7eb边框,让极细线承担传统UI中由阴影和填充承担的分量。
  • 展示标题采用100px Plain、字重300及-5px字间距;轻如低语的巨大文字是品牌最易识别的处理。
  • 区块过渡交替使用白色与#000000全宽色带,反转是系统中唯一的高度表达。
  • 所有圆角保持0px,输入框除外,采用2px;锐利直角保持建筑式、蓝图般的表面。
  • #2563eb仅用于激活链接和焦点指示符,绝不用于填充、背景或装饰元素。
  • 所有主要文字、标题和导航使用#000000,#b3b3b3或#6b7280仅用于弱化的正文、说明文字和辅助文字。
  • 让摄影承担全部温度与色彩,界面装饰保持无彩色,让家具与室内场景完成彩色表达。

建议避免

  • 任何操作都不要使用填充按钮、圆润胶囊或彩色背景;系统没有按钮,仅通过带下划线的排版链接表达操作。
  • 不要应用投影、模糊或多层高度效果;深度来自色带反转,而非z轴效果。
  • 不要引入额外强调色、渐变或彩色填充,仅有1%的色彩丰富度就是核心。
  • 不要将#2563eb用于装饰、仅悬停时出现的花样或任何非文字用途;它只表示激活或链接状态。
  • 正文不要小于16px或大于24px;字号尺度以自信的大幅跃迁变化,而不是UI式的小步递增。
  • 任何元素的圆角都不要超过2px;圆角会破坏编辑式瑞士网格纪律。
  • 不要将#ffffff卡片放在白色背景上;系统没有卡片表面,应改用1px #e5e7eb框线或一条完整黑色色带。