跳到主要内容

ÌTÌ — 品牌识别与在线品牌手册

品牌识别与在线品牌手册

一家精品咖啡烘焙商的品牌规范,可在线查阅:标志、五种色调、三款字体、品牌语气与应用——一份离开作者仍然有效的文件。

2025-11
  • 品牌与视觉识别
  • 设计系统
  • 前端开发
Next.jsTypeScriptTailwind CSSVercel
ÌTÌ — 品牌识别与在线品牌手册 预览
  1. 01

    可翻阅的六节手册,而不是一份会过期的 PDF

  2. 02

    「语气」一节与标志同级,并附实例

  3. 03

    五种色调与三款字体——一套真正落得了地的系统

需求

阿比让的一家精品咖啡烘焙商,做东非产区——埃塞俄比亚、卢旺达、布隆迪——与生产者直接合作。品牌当时只有一个名字和一套主张,别无他物。

委托的不是标志,而是那份能让别人不出错地做东西的文件。品牌手册的成色,在一个外部的人第一次打开它的那天就见分晓。

约束

  • 手册必须离开作者也能用。 印厂、开发者、摄影师,都得在里面找到答案,而不必打电话给谁。
  • 咖啡类的识别极易落入俗套:麻袋、咖啡豆特写、棕上加棕。
  • 它要在屏幕上成立,也要在包装袋上成立——这两种载体能容忍的误差并不相同。

决策

做可翻阅的手册,而不是 PDF。

交付物是一个六节的网站:总览、标志、色彩、字体、语气、应用。四十页的 PDF 只会被读一次,然后在共享文件夹里慢慢过期。而一个网页,在问题出现的当下,用手机三秒就能打开。

把「语气」放到与标志同级。

多数手册止步于视觉。这一份用整整一节讲语气——准确、温暖、不用行话——并列出该怎么写和不该怎么写的例子。人们辨认一个品牌,靠它说话的方式不亚于靠它的颜色,而这恰恰是所有人都在临场发挥的部分。

五种色调、三款字体,一个都不多。

浓缩棕、赤陶、金赭、橄榄、浅纸色。标题用 Fraunces,正文用 Hanken Grotesk,数据用 Space Mono。受限的系统是会被执行的系统;十二种色调的色板,只会被各自解读。

结果

一份可在线查阅的手册,涵盖标志字与其印记、色板、三款字体、四条支柱构成的宣言——可追溯的产地、手艺、人的温度、透明——以及各类应用:包装、店铺、文具、器物。

如果重做

手册展示了应用,却没有让它们可下载。把一份包装袋模板和一套正确格式的标志放在页面上直接取用,就能挡掉大部分制作错误——那些出自一个赶工的供应商手工重画的文件的错误。

Médiathèque