Agronomy Workshop 网站预览
Agronomy Workshop 网站预览

Agronomy Workshop

如同贴在工作室墙上的新闻纸独立小志。

Agronomy Workshop像一本印刷与产品相结合的目录:温暖、略微泛黄的白色画布、超大编辑式摄影,以及用古怪衬线字体排出的文案,感觉更像盖印而非排字。布局不对称且密集,产品元数据——名称、价格、描述和色样——挤在满幅造型画册图像旁的窄栏中,更像翻阅独立小志,而非浏览商店。唯一的饱和蓝色和芥末黄色促销色洗,是仅有的彩色音符;其余全部为黑、白和暖灰,使色样和蓝色“Shop”按钮像被通电启动。紧压的展示标题、打字机式衬线正文,以及宽字间距的全大写等宽标签,让系统具有刻意的模拟与创客语气,实用、不繁琐,并略带粗粝边缘。

查看原始网站

使用规范

建议采用

  • Workshop Blue(#0076ff)只用于操作按钮和链接的激活状态,绝不要作为装饰。
  • 正文采用Gerstner Programm 14px、1.14行高和-0.02em letter-spacing,以保留盖印般的编辑式感受。
  • 产品页标题和分区标题采用紧缩展示字体OT Neue Montreal 32-54px,行高接近0.81,使文字紧密叠排。
  • 价格、标签和导航等所有微型标签都采用宽字间距等宽字体,10px、+0.1em letter-spacing和全大写。
  • 维持温暖米白画布:页面背景为#ffffff,面板和卡片为#eeede8。
  • 密集网格中的分隔线、色样框和缩略图轮廓广泛使用1px solid black边框。
  • 所有按钮都保持5px圆角;轻微圆润让UI现代,同时不失实用的独立小志感。

建议避免

  • 不要引入Workshop Blue、Hail Yellow和Pale Sky之外的额外强调色;系统刻意保持克制。
  • 正文不要使用标准无衬线字体;带定制特性的Gerstner衬线字体是标志性语气。
  • 不要给卡片或按钮添加投影;设计依靠平面表面和细线边框建立结构。
  • 标题不要采用宽体或正常比例字体;略为挤压或窄体的展示字体是品牌身份不可缺少的部分。
  • 正文不要采用宽松行高;1.14刻意保持紧密,形成印刷般的段落块。
  • 图像不要使用大圆角;所有摄影都保持0px直角。
  • Hail Yellow不要用于促销条带之外的任何地方;它是单一用途的强调色。