feelreef
品牌标志 feelreef

礁里的一株

六段圆端笔画,一个圆。这一页就是全部:形状、规矩,以及一句话——就算我们的档案一个都不在,你也能照着把牠重画出来。

牠怎么长成的

一根主干、顶上分两瓣的冠、往左下伸的臂、往右伸的枝与枝上的小叉。所有笔画共用同一个宽度——粗细一致就是这颗标志的个性,所以不会单独把某一段加粗或变细。

  • 主干 · 1 段
  • 冠 · U 形两瓣
  • 左臂 · 1 段
  • 右枝+上叉 · 2 段
  • viewBox 100×100
  • r = 46
  • stroke = 11
  • pathLength = 100
  • ½ branch · ⅔ arm

起源 · 演化历程

这株珊瑚不只是珊瑚——四步,从一整面礁到一株会呼吸的标志;定稿里藏着 feelreef 的缩写。

  1. 图地反转 · 藏 REEF
    图地反转 · 藏 REEF 字母游戏:整面礁的负空间里,藏着 REEF 四个字。
  2. 取出最大株 ·「r」
    取出最大株 ·「r」 最大、最挺的一株=领头的 r。太满、小尺寸会糊——往精简收敛。
  3. 手绘手稿
    手绘手稿 定下六笔的姿态:肥短 U、「r」的肩、向右的小叉。
  4. 向量定稿 · f+r 融合 f =挺直主干 · r =右枝与叉——无限缩放、可动态。
从图地反转的 REEF(取最大株珊瑚当「r」),到现行 f+r 的融合——字母始终藏在形里,但没有一眼就跳出来喊「我是字母」。看得懂是彩蛋,看不懂也只是一株漂亮的珊瑚。

剪影只有一个,填色有好几种

剪影一毫米都不动——只换填色层。上排是数位日常的四款官方版本;下排留给纸面与特殊载体。

数位日常 · 四款官方版本

主徽
海洋 · 主徽 日常一律用它:导览列、favicon、头像、小尺寸。
主推
生长渐层 · 干底深海、枝尖珊瑚 干底深海 → 枝尖珊瑚,新生长在尖端。
动态
生长渐层 · 动态 养分沿干身上涌至枝尖,缓缓呼吸。
珊瑚落日 · 深色背景用 深海渐层圆+暖珊瑚,深色背景用。

纸面与特殊载体

单色 · 正片 原稿方向 · 印章、雷雕、单色印刷。
深底 · 正片 深色纸面 · 白圆墨珊瑚。
纯字形 · 随文色 currentColor · 行内、载入动画、浮水印。

容器与留白

珊瑚在框内置中、四周留出均匀呼吸空间。正圆是主要容器;超圆角(squircle)为 app icon 场景的替身。

主要
置中圆 · 加留白 重心置中、四周均匀
squircle · app icon 契合
超圆角 · 深海 落日珊瑚配深底

字标

永远全小写、永远 Young Serif、永远放在圆徽旁边,间距约是圆徽直径的三分之一。官方三款:生长渐层为主推,深底用珊瑚落日,反白的那款骑在渐层带上。

feelreef
生长渐层字标 · 主推
feelreef
珊瑚落日字标
feelreef
渐层底 · 反白字标

REEF with X · 模组命名系统

每个模组都是「REEF with X」家族的一员——同一个珊瑚、同一个 REEF、同一个连接词,只有末尾的能力名与它的专属色会变。

RiseEmergeEvolveFlourish —— REEF 的字源,也是这个系列最初的命名由来。

REEF with Members
REEF with Card
REEF with Site
REEF with Editor
REEF with Blog
REEF with Lingo
REEF with Members
REEF with Checkout
REEF with Domain
REEF with GAIDO
REEF with KAITO
REEF with Century
REEF with Ejecta
REEF with MCP
REEF with Page
REEF with PWA
REEF with Email

每支 lockup 是一支单色——珊瑚徽章、REEF、能力名共用同一个专属色,只有 with 保持灰。免费入门的 Card 绿、核心 Site 海洋、收钱的 Checkout/Members 绿与珊瑚、AI 双人组 GAIDO/KAITO 同紫系。徽章与 REEF 永远同色,所以看起来协调。

配方,不是档案

活得久的纹样是靠说明传下去的,不是靠档案——家纹能撑过六百年的手刻,是因为工匠被告知牠是什么,而不是收到一份拷贝。所以这株珊瑚自己也带着逃生舱:一句话就能把整株重建,不需要档案、不需要厂商,也不需要我们。

圆中一株珊瑚:直干立中,顶分两瓣成肥短 U;半腰向右伸枝,枝上小叉指天;三分之二处向左垂一臂,臂圆如钩。三瓣同出一弧。全株六笔,等宽圆端。
  • ½ branch
  • arm
  • crown
  • ×3 一条母弧 ×3

千年活下来的纹样(家纹、玺印、纹章)没有一个是靠档案——靠的是一句话就能重建的配方。这不是第五个形状:形状就是上面那个,改变的是传递介质。

罗盘重建 ½・⅔ 刻度+母弧,尺规可作图。
玺印 · 白文 负空间存活,可刻、可压、可烫。
手抄 · 容差带 每笔偏 0.5–1 格仍是牠。身份在拓朴,不在座标。
诚实说:没有人能设计一个保证千年的形状——能设计的是它的传递方式。Shell 的贝壳一百年重画了八次而不死,家纹六百年被无数工匠手刻而不走样,靠的都是「不变量+允许重画」:这里的不变量是拓朴(六笔的关系)、分数比例(½・⅔・⅐)、一条母弧;其余每一代都被允许重新诠释。我也拒绝为了「更千年」把臂或叉拿掉——那会变成一棵无名的树;活过千年的纹样全都「独特且可重建」,而不是「最简」。最后,这恰好就是 feelreef 的品牌基因:标志自己也带着逃生舱——不需要档案、不需要我们活着,一句话就能把牠带走。

怎么用牠

留白
四周留白至少一个笔画宽,约是圆徽直径的 12%。留白里不放文字、不放其他图形、不放框线。
最小尺寸
圆徽最小到 20px(favicon 可用);纯字形最小 14px。印刷最小 6mm。
渐层
一次只用一种渐层,而且渐层仅限彩色版。单色只有黑与白。 全部用 SVG gradient 实作,剪影与笔画路径不变——换色只换 stroke 的渐层引用,动态版也只动渐层、不动形状。守则:一次只用一种渐层;渐层仅限彩色版。正片(白圆深珊瑚,原稿方向)退居纸面;日常数位一律海洋主徽。单色只有黑与白。
字标
字标渐层用 background-clip:text,方向与圆徽渐层一致(左深海 → 右珊瑚)。留白、字母造型、圆徽比例全部照基本锁定——渐层字标仅限彩色场合;正式文件、内文、小尺寸一律回到单色字标。
动态
通则:一次只用一种动态;动态只动 transform 与 dashoffset,永不改变剪影路径;逐枝动作一律锚在关节、依生长顺序(主干 → 左臂 → 右枝 → 冠与上叉)错开相位;prefers-reduced-motion 一律定格在完整静态。
容器
珊瑚在容器内置中并缩至 82% 留白,剪影不变。正圆用于社群头像与圆形场景;超圆角(rx≈34)用于 iOS/实体 app icon。
  • 不加阴影或渐层
  • 不压扁或拉伸
  • 不用低对比配色
  • 不随意旋转(摆动除外)
20px
32px
48px
76px

牠有三种动法

生长 · 进场 从干底长到枝尖,只在第一次出现时跑一次。 进场 · 一次 · 1.8s · ease-out · 依生长顺序
逐枝摇曳 · 待机 主干不动,每一枝锚在自己的关节、各自的振幅与相位——像水流过珊瑚。 待机 · 循环 · 3.2–4.4s · ease-in-out
生长循环 · 载入 长到满、停一下、再缩回根部重新长——同一个生长,只是循环。 载入/AI 思考 · 循环 · 3.6s · ease-in-out

档案

四个 SVG,尽管拿去:海洋主徽、给印章与单色印刷的单色版、会跟着周围文字颜色走的纯字形,以及给 app icon 的超圆角方版。

向量

点阵

给吃不下 SVG 的地方——GitHub/Slack 头像、npm 套件、各种服务的上架页。方形那款是刻意满版的:那些服务会自己裁切、自己圆角,所以给它一张里面有圆的透明 PNG,最后会变成圆中圆。