礁裡的一株
六段圓端筆畫,一個圓。這一頁就是全部:形狀、規矩,以及一句話——就算我們的檔案一個都不在,你也能照著把牠重畫出來。
起源 · 演化歷程
這株珊瑚不只是珊瑚——四步,從一整面礁到一株會呼吸的標誌;定稿裡藏著 feelreef 的縮寫。
- ① 圖地反轉 · 藏 REEF 字母遊戲:整面礁的負空間裡,藏著 REEF 四個字。

- ② 取出最大株 ·「r」 最大、最挺的一株=領頭的 r。太滿、小尺寸會糊——往精簡收斂。

- ③ 手繪手稿 定下六筆的姿態:肥短 U、「r」的肩、向右的小叉。

- ④ 向量定稿 · 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
千年活下來的紋樣(家紋、璽印、紋章)沒有一個是靠檔案——靠的是一句話就能重建的配方。這不是第五個形狀:形狀就是上面那個,改變的是傳遞介質。
誠實說:沒有人能設計一個保證千年的形狀——能設計的是它的傳遞方式。Shell 的貝殼一百年重畫了八次而不死,家紋六百年被無數工匠手刻而不走樣,靠的都是「不變量+允許重畫」:這裡的不變量是拓樸(六筆的關係)、分數比例(½・⅔・⅐)、一條母弧;其餘每一代都被允許重新詮釋。我也拒絕為了「更千年」把臂或叉拿掉——那會變成一棵無名的樹;活過千年的紋樣全都「獨特且可重建」,而不是「最簡」。最後,這恰好就是 feelreef 的品牌基因:標誌自己也帶著逃生艙——不需要檔案、不需要我們活著,一句話就能把牠帶走。
容器與留白
珊瑚在框內置中、四周留出均勻呼吸空間。正圓是主要容器;超圓角(squircle)為 app icon 場景的替身。
珊瑚在容器內置中並縮至 82% 留白,剪影不變。正圓用於社群頭像與圓形場景;超圓角(rx≈34)用於 iOS/實體 app icon。
剪影只有一個,填色有好幾種
剪影一格都不動——只換填色層。上排是數位日常的四款官方版本;下排留給紙面與特殊載體。
數位日常 · 四款官方版本
紙面與特殊載體
全部用 SVG gradient 實作,剪影與筆畫路徑不變——換色只換 stroke 的漸層引用,動態版也只動漸層、不動形狀。守則:一次只用一種漸層;漸層僅限彩色版。正片(白圓深珊瑚,原稿方向)退居紙面;日常數位一律海洋主徽。單色只有黑與白。
字標
永遠全小寫、永遠 Young Serif、永遠放在圓徽旁邊,間距約是圓徽直徑的三分之一。官方三款:生長漸層為主推,深底用珊瑚落日,反白的那款騎在漸層帶上。
字標漸層用 background-clip:text,方向與圓徽漸層一致(左深海 → 右珊瑚)。留白、字母造型、圓徽比例全部照基本鎖定——漸層字標僅限彩色場合;正式文件、內文、小尺寸一律回到單色字標。
REEF with X · 模組命名系統
每個模組都是「REEF with X」家族的一員——同一個珊瑚、同一個 REEF、同一個連接詞,只有末尾的能力名與它的專屬色會變。這也是 Stripe SKU 的字首,一眼看得出「這是 feelreef 的一部分」。
RiseEmergeEvolveFlourish —— REEF 的字源,也是這個系列最初的命名由來。
每支 lockup 是一支單色——珊瑚徽章、REEF、能力名共用同一個專屬色,只有 with 保持灰。免費入門的 Card 綠、核心 Site 海洋、收錢的 Checkout/Members 綠與珊瑚、AI 雙人組 GAIDO/KAITO 同紫系。徽章與 REEF 永遠同色,所以看起來協調。
怎麼用牠
四周留白至少一個筆畫寬,約是圓徽直徑的 12%。留白裡不放文字、不放其他圖形、不放框線。
圓徽最小到 20px(favicon 可用);純字形最小 14px。印刷最小 6mm。
- 不加陰影或漸層
- 不壓扁或拉伸
- 不用低對比配色
- 不隨意旋轉(擺動除外)
牠有三種動法
進場 · 一次 · 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,最後會變成圓中圓。