Schema 网站预览
Schema 网站预览

Schema

白色基底、紧密字距与细线分隔。

页面以白色为基底。字体采用 Source Sans Pro、Figma Sans Display。视觉特点包括紧密字距、细线分隔、网格布局、几何图形。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 所有卡片、按钮、图片和标签均使用0px边框圆角——锐角是不可妥协的
  • 将深色首屏搭配一个大尺寸轮廓按钮(1px纸张边框,无填充);悬停时填充
  • 对于需要呈现雕刻感的任何标题,使用Figma Sans Display字体,字号56–86px,字间距-0.02em,行高0.90–1.00
  • 在小标签(13–18px)上达到0.03em字间距,为大写文字和导航链接增加顶部弧度感
  • 交替使用全 满幅 的彩色条带(薄荷色洗涤 #c7f8fb,翡翠条带 #24cb71)在深色与浅色部分之间,以营造视觉节奏
  • 使用灰白(#e2e2e2)1px边框进行细线分隔;在浅色区块中保留深黑(#0f0f0f)边框以强调重点
  • 保持界面单色——色彩仅用于装饰性壁画和演讲者头像背景,绝不能用于控件

建议避免

  • 不要为任何元素添加边框圆角——锐角定义了系统的海报式特征
  • 不要使用阴影、光晕或模糊效果——平滑才是此处唯一的立体感语言
  • 不要引入色彩化的行动号召按钮——该系统刻意保持单色,操作仅以轮廓或纯文字形式呈现
  • 不要将正文文字设置在16px以下;字幕可降至13px,但绝不能更小
  • 不要让展示标题的行高超过0.90–1.00——紧凑的行距才是其建筑感的来源
  • 不要使用品牌色填充按钮;系统中唯一的按钮样式是轮廓纸张(Paper-on-Obsidian)
  • 不要用灰条分隔浅色区块——应使用满幅彩色条带或无缝的纸张到纸张过渡