Sackville & Co. 网站预览
Sackville & Co. 网站预览

Sackville & Co.

近白色基底、衬线字形与宽松留白。

页面以近白色为基底,搭配近黑色文字。字体采用 FoundersGrotesk、TimesNow SemiLight。视觉特点包括衬线字形、宽松留白、摄影展示。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • Cobalt Ink #245dc5 作为所有主要交互元素的轮廓操作边框,绝不用它填充按钮;轮廓就是品牌标志。
  • 展示文字使用 72px+,行高 0.80–0.85,形成定义系统编辑重量的杂志刊头压缩感。
  • 让奶油画布 #f3f4ee 露出,不要用白表面或深色模式等效色盖住;暖纸色调是品牌基础。
  • Riso 强调色板 Peach Wash、Fire Red、Marigold、Vermillion、Terracotta 只用于插画色层、装饰边框与专色强调,绝不用作按钮、徽章或状态的功能填充。
  • TimesNow SemiLight 每页最多用于一两处标题,打破无衬线单调,应像罕见的编辑中断。
  • 文字标志保持手绘资产,叠在插画面板上;不要用网页字体重做,也不要放在没有影像的平面表面上。
  • 81px 圆角专用于年龄验证椭圆与其他大型交互提示;拉长椭圆是系统标志,而不是默认值。

建议避免

  • 任何按钮都不要用 Cobalt Ink、Fire Red 或任何彩色填充;系统只有轮廓操作,填充按钮会破坏小刊美学。
  • 不要引入 box-shadow、投影或任何浮起效果;设计原则上平面,深度来自色彩对比与插画密度,不来自模糊或偏移。
  • 不要使用白画布 #ffffff;奶油色 #f3f4ee 更温暖,正是它让墨色读来像印刷而非屏幕。
  • 正文不要使用衬线 TimesNow SemiLight,它只是展示对照字体;正文保持 FoundersGrotesk 400。
  • 不要加粗或半粗;字体系统刻意只有一个字重 400,层级来自字号与行高,绝不来自字重。
  • 卡片或图片圆角不要超过 10px;50px 与 81px 留给按钮和椭圆操作,其他一切接近尖角。
  • 任何元素不要添加渐变、模糊或光晕;色板是 Risograph 式平面,任何平滑色调过渡都会破坏印刷幻觉。