一个超级LOGO诞生！幕后团队分享超详细创作经历！

设计资讯

2025-11-06浏览 3352,976 字 · 约 10 分钟

…

Grammarly 于2009年创立于乌克兰，初专注于为学生提供语法和拼写检查服务，但随着AI的发展，已发展成为一个涵盖多种语言功能的综合性写作助手。目前Grammarly 总部位于旧金山，在基辅、温哥华设有办事处。

今年10月底，Grammarly 宣布进行重大品牌重塑，不仅将品牌名称更改为 Superhuman，还联合 Smith & Diction 打造了全新的视觉形象系统。

Smith & Diction 起初只是受 Grammarly 委托，为 Grammarly 打造一个新的 AI 代理品牌。根据当时的任务设定，这只是一个普通的子产品品牌工作。但没多久，Grammarly 告诉他们事情变了，项目范围必须重新定义。

原因是，Grammarly 在内部正在发生大规模的战略调整。Grammarly 收购了 Coda（一个协作型文档/工作空间产品），并且 Coda 的 CEO 将成为 Grammarly 新的 CEO。

后来又过了大约两个月，Grammarly 又买下了 Superhuman（一个很多创业者与设计师都认可的 AI 邮件工具）。最终，Grammarly 决定不再沿用「Grammarly」这个名字，而是把整个公司更名为 Superhuman。

Smith & Diction 原本以为只是为 Grammarly 的 AI 小功能做个品牌，结果发现自己面对的，是三个 AI 工具品牌整合成一个新品牌的超级工程。而他们要交付的不再是一个 logo，而是一个能托住未来产品、公司层级、系统级身份的、完整的动态品牌识别系统。

一个英雄出现了……

在视觉探索阶段，Smith & Diction 和以往一样，先从纸上随手画起。他们没有从复杂的视觉效果开始，而是用最基本的几何图形去找方向。圆形、三角形、方形、八边形……在这些形状之间寻找隐含的故事。

后来，当他们画出一个箭头时，他们突然意识到，这个箭头既像电脑鼠标的光标，又像一块披风。

当他们再加上一个小圆点后，这个组合竟意外形成了一个「超级英雄般的剪影」。

团队当时心里也有疑问。这样的想法客户会不会觉得太大胆？但他们认为这是一个真正独特、值得捍卫的方向。因此，他们甚至在正式展示前，就主动找来了动画师 Justin Lawes，把这个概念做成一个会动的版本，因为他们很清楚：这个标志必须动起来，冲击力才会完整。

当方案提交给客户时，Grammarly 的 Collin Whitehead 一看到作品，就立刻转给法务部门审核，这表示他瞬间就理解了设计想表达的东西，并且在一开始就站到了这个方案的支持方一侧。接下来，整个项目还要让来自三家公司、不同职位的 16 位高层（其中包括两位 CEO 和多个创始人高管）一起认可这个标志，过程压力极大。

在正式展示标志时，高层们基本没有争论设计本身，只提出了一个问题：这个「英雄角色」到底应该叫什么名字？

而 Superhuman 的 Rahul 直接说：「就叫 Hero。」

从那一刻起，这个角色就正式拥有了自己的名字。

不过，Smith & Diction 也非常清楚。选择一个「角色」作为品牌标志，并不是一条简单的路。因为一旦采用角色，就意味着必须回答更多维度的问题。

例如：它是否有明确的个性？它在不同场景时如何动作？它是 2D 还是 3D？披风能不能变形？它出现在产品界面时以什么方式呈现？

UI 图标系统

在确立「Hero」这个核心符号后，Smith & Diction 团队自然想到，既然 Hero 是整个品牌的视觉中心，那能否把它延伸进 UI 图标系统，让产品内部的每个小图标也有它的影子？

他们最初尝试把 Hero 的披风、光标尖这些特色形状，直接塞进 500 多个 UI 图标里。

但是在实际推进过程中他们发现，如果硬把「三角披风＋光标尖」这种结构性特征，塞进 500 多个完全不同任务的图标体系里，不但会让图标形式变得局促、难统一，也会让系统变得越来越难维护。

因此他们意识到：这种「直接塞入角色元素」的做法，并不是最优策略。

于是，图标设计的主导权转交给图标设计师 Helena Zhang。她不是把 Hero 本身直接剪进去，而是反向拆分，从 Hero 这个完整 logo 中抽取几何语言。然后，她把这些抽象形态变成一种「几何语法」，让所有 UI 图标都基于同样的构造逻辑来设计。这样，图标系统看起来依然有 Hero 的「味道」，但不会显得生硬或牵强，也更便于扩展。

字体体系

在字体设计方面，Smith & Diction 必须面对一个现实问题。这三家公司在并入之前各自使用了不同的字体家族，如果继续保留原本的字体组合，未来不但会在产品界面产生视觉混杂，也会在维护成本上变成极大的负担。

因此团队提出一个更彻底的选择，建立一个能够同时覆盖无衬线体、衬线体与等宽体的超级字体家族，让所有字体都基于同一种设计语言。这样无论用于界面、产品文案、市场视觉或品牌宣传文字，都能保持一致性。

最后他们选择了 Luzi Type 的 Messina Super Family 作为基础，这套字体本身既干净又具有高度扩展性，它的无衬线体能达到当下流行的人机界面字体水准，而衬线体则能带给写作产品一种专业作家般的质感，这正好呼应 Superhuman 这个品牌既技术又文学的双重属性。

团队随后将这个字体族进一步定制，形成专属于 Superhuman 的 Super Sans 与 Super Serif 字体。他们在标点与部分小写字母处加入更圆润柔和的处理方式，既回应了「Hero 」标志的圆角特征，也让整个产品界面看起来更亲和，而不再只是一个冷冰冰的技术工具。他们甚至还额外设计了特别的箭头字符，让字体本身也能在细节处延续品牌的几何语言。

色彩体系

在色彩体系上，Smith & Diction 以 Superhuman 这个名字的两层含义为基础，将色彩划分为两个方向。「Super」代表能力的提升与超速感，「Human」代表情绪、温度与生命性。因此，团队希望颜色能够同时具备科技的冷冽感与人性的温暖感，而不是偏向其中一侧。

基于这一思路，设计团队为品牌确定了两种核心色。第一种是代表「Super」的主色 Mysteria，它位于蓝色和紫色之间，接近黄昏天空的那类带空灵气质的色调。这种颜色看起来带有一种漂浮感与轻微的超现实感。第二种是代表「Human」的主色 Heart，它是一种偏深的红色，带有暖度与血液感，更接近人的肉身温度，是一种象征真实生命的色调。

这两个颜色在科技品牌中并不常见组合出现，正因为这种不寻常的搭配，Superhuman 才呈现出一种既未来又有体温的视觉位置感。它既不是冷冰冰的实验室工具，也不是纯情绪化的艺术表达。团队随后建立了一套完整的色彩层级、使用规范与语义规则，使色彩从产品界面背景到局部提示与图形构成，都具有明确的意义，而不仅仅是视觉装饰。

品牌流程：分层方法

在品牌流程中，Smith & Diction 为 Superhuman 制定了一套“五层结构”的方法。这一体系强调，品牌并不是只有一个标志或一个字标，而是由视觉、氛围、工具、界面体验和最终内容呈现共同构成的复杂系统。五层分别为：

第一层是人类层。所有表达的起点来自人本身。人的大脑、人的思考、人的语言、人的表达欲望，是品牌叙事的核心。这个层强调品牌系统必须始终从人出发，而不是先从技术出发。

第二层是想法层。思想在最初是模糊而自由的，它在脑中跳跃，随后某一个瞬间落在手上，被写在纸面或键盘上。这个层描述的，是从「灵感出现」到「转化为文字」的关键过程，是想法成形的瞬间。

第三层是技术层。写字、记录、编辑、修改这些行为通常发生在软件界面里。拼写检查、改写建议、引文生成、语法判断等技术逻辑都属于这一层。在这个项目里，Smith & Diction 与来自 Datalands 的 Gavin 合作，为 Figma 开发了两个工具。Superdots 可以把任何照片转成具有技术质感的纹理点阵。Superflow 则能通过拖动滑杆生成线条结构或动态图案，并直接导出 SVG。这一层为品牌提供了可执行的技术工具。

第四层是调性层。调性指的是氛围与情绪。人工智能往往在「情绪」方面给人印象较弱，因此团队刻意创建一个视觉情绪生成系统。他们将 Unsplash 的摄影图像与渐变遮罩、模糊与噪点叠加，用以制造一种柔软又具体的氛围，使品牌拥有情绪温度，而不是机械化的冷感。

第五层是输出层。所有写作与思考最终都会转化为某一种呈现形式，例如一个论点的写作，一个作品的草稿，一封情书，或是一份清单。最后印在页面上的字，就是结果本身。团队甚至把文字本身当作一种纹理，用来构建品牌视觉资产。

Smith & Diction 为 Superhuman 创作了几十个基于这五层方法的品牌叙事示例。每一个示例都以不同的人物设定与不同的「层」组合，呈现一篇文字从灵感、思考、推敲到最终落地的整个历程。品牌不只是靠一个标志瞬间完成记忆，而是在横幅广告、登陆页面、应用界面与社交媒体这些真实场景中被反复建立。这个分层结构让 Superhuman 拥有非常深的品牌工具箱，可以在各种传播体积和形式中灵活扩展。