feelreef
品牌標誌

礁裡的一株

六段圓端筆畫,一個圓。這一頁就是全部:形狀、規矩,以及一句話——就算我們的檔案一個都不在,你也能照著把牠重畫出來。

起源 · 演化歷程

這株珊瑚不只是珊瑚——四步,從一整面礁到一株會呼吸的標誌;定稿裡藏著 feelreef 的縮寫。

  1. 圖地反轉 · 藏 REEF 字母遊戲:整面礁的負空間裡,藏著 REEF 四個字。
  2. 取出最大株 ·「r」 最大、最挺的一株=領頭的 r。太滿、小尺寸會糊——往精簡收斂。
  3. 手繪手稿 定下六筆的姿態:肥短 U、「r」的肩、向右的小叉。
  4. 向量定稿 · f+r 融合 f =挺直主幹 · r =右枝與叉——無限縮放、可動態。

從圖地反轉的 REEF(取最大株珊瑚當「r」),到現行 f+r 的融合——字母始終藏在形裡,但沒有一眼就跳出來喊「我是字母」。看得懂是彩蛋,看不懂也只是一株漂亮的珊瑚。

牠怎麼長成的

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

一根主幹、頂上分兩瓣的冠、往左下伸的臂、往右伸的枝與枝上的小叉。所有筆畫共用同一個寬度——粗細一致就是這顆標誌的個性,所以不會單獨把某一段加粗或變細。

配方,不是檔案

活得久的紋樣是靠說明傳下去的,不是靠檔案——家紋能撐過六百年的手刻,是因為工匠被告知牠是什麼,而不是收到一份拷貝。所以這株珊瑚自己也帶著逃生艙:一句話就能把整株重建,不需要檔案、不需要廠商,也不需要我們。

圓中一株珊瑚:直幹立中,頂分兩瓣成肥短 U;半腰向右伸枝,枝上小叉指天;三分之二處向左垂一臂,臂圓如鉤。三瓣同出一弧。全株六筆,等寬圓端。
  • ½ branch
  • arm
  • crown
  • ×3 一條母弧 ×3

千年活下來的紋樣(家紋、璽印、紋章)沒有一個是靠檔案——靠的是一句話就能重建的配方。這不是第五個形狀:形狀就是上面那個,改變的是傳遞介質。

羅盤重建 ½・⅔ 刻度+母弧,尺規可作圖。
璽印 · 白文 負空間存活,可刻、可壓、可燙。
手抄 · 容差帶 每筆偏 0.5–1 格仍是牠。身份在拓樸,不在座標。

誠實說:沒有人能設計一個保證千年的形狀——能設計的是它的傳遞方式。Shell 的貝殼一百年重畫了八次而不死,家紋六百年被無數工匠手刻而不走樣,靠的都是「不變量+允許重畫」:這裡的不變量是拓樸(六筆的關係)、分數比例(½・⅔・⅐)、一條母弧;其餘每一代都被允許重新詮釋。我也拒絕為了「更千年」把臂或叉拿掉——那會變成一棵無名的樹;活過千年的紋樣全都「獨特且可重建」,而不是「最簡」。最後,這恰好就是 feelreef 的品牌基因:標誌自己也帶著逃生艙——不需要檔案、不需要我們活著,一句話就能把牠帶走。

容器與留白

珊瑚在框內置中、四周留出均勻呼吸空間。正圓是主要容器;超圓角(squircle)為 app icon 場景的替身。

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

珊瑚在容器內置中並縮至 82% 留白,剪影不變。正圓用於社群頭像與圓形場景;超圓角(rx≈34)用於 iOS/實體 app icon。

剪影只有一個,填色有好幾種

剪影一格都不動——只換填色層。上排是數位日常的四款官方版本;下排留給紙面與特殊載體。

數位日常 · 四款官方版本

主徽
海洋 · 主徽 日常一律用它:導覽列、favicon、頭像、小尺寸。
主推
生長漸層 · 幹底深海、枝尖珊瑚 幹底深海 → 枝尖珊瑚,新生長在尖端。
動態
生長漸層 · 動態 養分沿幹身上湧至枝尖,緩緩呼吸。
珊瑚落日 · 深色背景用 深海漸層圓+暖珊瑚,深色背景用。

紙面與特殊載體

單色 · 正片 原稿方向 · 印章、雷雕、單色印刷。
深底 · 正片 深色紙面 · 白圓墨珊瑚。
純字形 · 隨文色 currentColor · 行內、載入動畫、浮水印。

全部用 SVG gradient 實作,剪影與筆畫路徑不變——換色只換 stroke 的漸層引用,動態版也只動漸層、不動形狀。守則:一次只用一種漸層;漸層僅限彩色版。正片(白圓深珊瑚,原稿方向)退居紙面;日常數位一律海洋主徽。單色只有黑與白。

字標

永遠全小寫、永遠 Young Serif、永遠放在圓徽旁邊,間距約是圓徽直徑的三分之一。官方三款:生長漸層為主推,深底用珊瑚落日,反白的那款騎在漸層帶上。

feelreef
生長漸層字標 · 主推
feelreef
珊瑚落日字標
feelreef
漸層底 · 反白字標

字標漸層用 background-clip:text,方向與圓徽漸層一致(左深海 → 右珊瑚)。留白、字母造型、圓徽比例全部照基本鎖定——漸層字標僅限彩色場合;正式文件、內文、小尺寸一律回到單色字標。

REEF with X · 模組命名系統

每個模組都是「REEF with X」家族的一員——同一個珊瑚、同一個 REEF、同一個連接詞,只有末尾的能力名與它的專屬色會變。這也是 Stripe SKU 的字首,一眼看得出「這是 feelreef 的一部分」。

RiseEmergeEvolveFlourish —— REEF 的字源,也是這個系列最初的命名由來。

REEF with Members
REEF with Card
REEF with Site
REEF with Blog
REEF with Lingo
REEF with Members
REEF with Checkout
REEF with Domain
REEF with GAIDO
REEF with KAITO

每支 lockup 是一支單色——珊瑚徽章、REEF、能力名共用同一個專屬色,只有 with 保持灰。免費入門的 Card 綠、核心 Site 海洋、收錢的 Checkout/Members 綠與珊瑚、AI 雙人組 GAIDO/KAITO 同紫系。徽章與 REEF 永遠同色,所以看起來協調。

怎麼用牠

四周留白至少一個筆畫寬,約是圓徽直徑的 12%。留白裡不放文字、不放其他圖形、不放框線。

圓徽最小到 20px(favicon 可用);純字形最小 14px。印刷最小 6mm。

20px
32px
48px
76px
  • 不加陰影或漸層
  • 不壓扁或拉伸
  • 不用低對比配色
  • 不隨意旋轉(擺動除外)

牠有三種動法

生長 · 進場 從幹底長到枝尖,只在第一次出現時跑一次。 進場 · 一次 · 1.8s · ease-out · 依生長順序
逐枝搖曳 · 待機 主幹不動,每一枝錨在自己的關節、各自的振幅與相位——像水流過珊瑚。 待機 · 循環 · 3.2–4.4s · ease-in-out
生長循環 · 載入 長到滿、停一下、再縮回根部重新長——同一個生長,只是循環。 載入/AI 思考 · 循環 · 3.6s · ease-in-out

通則:一次只用一種動態;動態只動 transform 與 dashoffset,永不改變剪影路徑;逐枝動作一律錨在關節、依生長順序(主幹 → 左臂 → 右枝 → 冠與上叉)錯開相位;prefers-reduced-motion 一律定格在完整靜態。

檔案

四個 SVG,儘管拿去:海洋主徽、給印章與單色印刷的單色版、會跟著周圍文字顏色走的純字形,以及給 app icon 的超圓角方版。

向量

點陣

給吃不下 SVG 的地方——GitHub/Slack 頭像、npm 套件、各種服務的上架頁。方形那款是刻意滿版的:那些服務會自己裁切、自己圓角,所以給它一張裡面有圓的透明 PNG,最後會變成圓中圓。