解決方案 · 品牌識別

Muzi Studio 品牌構成

替別人建品牌十年,最後一個做的是自己的。2016 年那一版是黃底正紅,那時候我們只做平面;後來加上網站與技術架構,識別跟著長出一道漸層。2026 這一輪是十週年。

這一件走的是品牌識別這條線 —— 同一套方法,換成你的案子長什麼樣?

類型品牌識別・設計系統年份2016–2026(三代)角色策略・命名・識別・設計系統・網站範圍3 代・4 條延伸・9 個漸層停點・33 個 token 區塊狀態運作中

Muzi Studio 品牌構成

封面是一張 v10 光場,這一張只出現在這裡。

01

/09

ORIGIN

起點

2016 年這間工作室叫 MuziCreative,中文是木子創意事務所,只做平面設計。那一版識別是黃底配正紅,記號是一個六角形,站在 i 的那一點上。

2020 年業務長出網站與技術架構,識別跟著換了一輪:底色收成白的,那一點分出四種顏色,並且第一次有了一道紫到綠松的漸層。同一輪還長出四條支線:Creative、Library、Insight、Shop。

2016:黃底、正紅六角形2020:紫到綠松漸層2020:四條支線,沒有規則

左起:2016 只做平面的那幾年,記號就是一塊實心的色。2020 的漸層帶是從當年的檔案裡裁出來的,兩個停點,中間交給算圖器。四條支線,四個顏色,它們只是各自被畫出來而已。

名字比任何設計決定都早

父母的名字裡剛好各有一個森與一個林,孩子順理成章是木子。而那三個字本身就是一個計數系統。

森三木林二木木一木

木的角度

木的橫撇捺兩兩 60°=六角形的三條軸

字形給了角度,名字給了單位。木的橫、撇、捺擺進同一組 60° 的軸,而 60° 就是六角形的角度。

所以記號選了那個唯一能無縫重複的形狀。名字在 2016 之前就已經是這個形狀。

2016 那一版,六角形已經站在 i 上,取代了原本那一點。

02

/09

THE TURN

轉折

前兩代在決定顏色,這一代在決定光。

兩次轉變,各有機緣

識別沒有為了換而換。兩次都是業務先變,識別才跟上。

2016MuziCreative 木子創意事務所平面設計工作室2020MuziCreative加上網站服務與技術架構2026Muzi Studio技術與 AI 更多,母體要能延伸

到了 2026,這裡不再只是設計工作室。技術的比重一年比一年大,AI 又多打開了一整片可能。Muzi 要的是一個之後還能往外長的母體。

找新的,也先決定什麼不動

顏色一直在換,因為交付物一直在換:紙、螢幕,然後是光。

i那一點的位置60°六邊形的角#6400DE紫,與 2020 同一個值

不動的有三樣:那一點的位置、60° 的角度,以及紫。2026 的 #6400DE 與 2020 那一版一個位元都沒差。

03

/09

DERIVATION

推導

這一輪是十年來第一次換字。

一步一步長出來

六步推導

每一個比例都取自 token。這是依現行幾何重繪的構成推演,不是當年的過程稿。

字標解剖

字標用的是無點 i。那一點是整個字裡唯一可以被換掉而不傷辨識的元件,所以記號長在名字裡面。

項目值六邊形扁平寬1.20 × 字幹寬離 x 高的距離0.50 × 字幹寬字標字距+1.5%描述詞0.70 × x 高 · 0.1em · 500光學間距490.6 單位

三種之中最省的那一個

同面積周長:六邊形最省放大一個頂點:直角無縫、圓角漏星

能無縫鋪滿平面的正多邊形只有三種。同樣的面積,六邊形用掉最少的邊。這個說法要成立,頂點就不能是圓的:實測 6% 圓角會在每個頂點漏出白色針孔,12% 是明顯的星芒。

全部以字幹寬為單位

三個倍率:8×・1×・16px

那一點的寬是字幹的 1.2 倍,離 x 高度線半個字幹。換字重時它自己跟著長。

淨空區:x 高 × 1,已含在檔案裡最小尺寸:螢幕 140px・印刷 24mm

淨空區是一個 x 高,已經含在檔案裡。字標組合在螢幕上最小 140px、印刷最小 24mm,再小就只用字標。

記號在紙上:紫記號在深色介面:亮紫記號在光上:白、左上角、≤ 6%

記號在紙上是紫,在深色介面是亮紫,在光上是白。三種底,同一條規則:只在左上角,邊長不超過畫面的 6%。

更精細,是量得出來的

兩停點 ➔ 九停點

同一道漸層從兩個停點變成九個。換端點那一步讓白字安全區變短,是亮度緩動把它賺回來並超過上一代。

參數值內插空間oklch亮度曲線t^1.5中段彩度+0.03色相路徑short_arc停點9 個

位置色0.0%#6400DE12.5%#5324E525.0%#3E3CE937.5%#1A51EB50.0%#0064E862.5%#0076E275.0%#0087D987.5%#0095CF100.0%#00A1C5

十年三代,那一點沒動過

三代並排

變的是顏色、字體與媒介。六角形的位置與形狀,十年一次都沒動。

04

/09

THE SYSTEM

系統

這一輪交出去的是一條規則:下一條業務線接上來的時候,不必重做。

交付的是一條規則

延伸字標

給任何後綴,都推得出合法的組合。七項恆定、一項可變、四條禁止,而且有一個產生器把它算出來。

換一個還不存在的名字試試。AI 會打開哪些業務現在還說不準,規則要先準備好接住它們。

恆定7字標的外框(muzı 的 path)—— 永遠不重畫六邊形的形狀、方位(pointy-top)、直角六邊形相對字幹的比例(1.20× / 0.50×)字標字距 +1.5%描述詞的四個參數(0.70× / 0.10em / 共用基線 / 500)光學間距 490.6 單位紫只出現在六邊形,且全站只有那一個顏色事件可變1槽位詞本身(studio / labs / …)—— 長度不限,光學間距會自動吸收禁止4槽位詞用小寫給槽位詞換顏色(顏色用掉兩次,六邊形就不再是唯一的記號)為某個支線改字標、改六邊形、改比例為某個支線新增第二個品牌色

中文不單獨出現

字標以英文為主。中文與日文走第二行小字,兩行之間留一段空。

雙語字標:英文為主,中日文走第二行

工作室的中文是木子工作室,字距撐到與 muzi 同寬;日文是木子工房;母體只寫木子。

母體與工作室

Muzi 是公司,muzi studio 是它底下的一條業務線。母體只用紙與墨,紫只在那一點,頂邊一條九停點的漸層條。工作室不畫這條線,它的顏色在光裡。

母體與工作室:同一道顏色兩種狀態

同一道顏色,兩種狀態。左:母體的漸層條,粗細等於字標的字幹寬,左右收在版心裡。右:工作室名片背面,光上一個白記號,在左上角。

顏色只來自光

表面只有一條中性色階,七階,從紙到墨。其餘的顏色都從光裡取樣:紫、藍、青三個點;光上的字只有三種灰。資料視覺化的色序也取自同一道漸層。

paper#FAFAFD16.7:1mist#DFDFE313.1:1steel#4D4D508.1:1ink#1A1A1D16.7:1field#0E0E11光場暗部gradient9 stopsoklchviolet#6400DE0%blue#0064E850%cyan#00A1C5100%text#FFFFFF · 19.27:1text-muted#9D9D9F · 7.12:1text-subtle#7A7A7D · 4.5:1

字、元件、圖標

字級八階,一階都不多。Outfit 只給字標,內文與標題一律 IBM Plex。有圖標不稀奇,有造字法才是設計系統。

display-1 · 76/1.02muzi studiodisplay-2 · 40/1.14光從一側灑下來title · 24/1.32六邊形站在 i 的點上lead · 21/1.58前兩代在決定顏色,這一代在決定光。body · 17/1.75每一張光場只用一次,編號寫在圖說裡。small · 15/1.65起點一個位元都沒動,終點是推導值。caption · 13/1.6SEED 4471 · 光從右上 · 色相 231°label · 11.5/1.9PAPER · FIELD · 1/1

開始一個案子開始一個案子開始一個案子開始一個案子開始一個案子defaulthoverfocus-visibleactivedisabled公司名稱Muzi StudioEmailmuzi@格式不完整品牌識別網站SEED 4471231°色相中位FIELD · 1/189.8%暗部佔比

brandwebcontentappvideosocialdesignadsrevenuebrandwebcontentappvideosocialdesignadsrevenue

arrow-rightarrow-leftarrow-uparrow-downchevron-rightchevron-downcloseaddminuscheckcopydownloadexternallinkmenusearchmailplaypausealertinfo

05

/09

ALIVE

有生命的識別設計

識別可以是一組檔案,也可以是一個會長的東西。這一輪要的是後者:規則恆定,實例每次不同。

取材只有一個題目

會長的東西最怕認不出來,所以有一半刻意不動:那一點、字、色盤、圖標、元件的狀態。另一半交給光。

光場給螢幕、空間、封面與周邊,紙感給要被讀完的東西。每一件物料只屬於其中一邊。

有生命的識別設計的取材:光・暗場・顆粒・整片灑下的漸層・60°

光、暗場、顆粒、一整片灑下來的漸層、60°。

說過不的東西

說不的紀錄:候選方向裡被退掉的八個

候選方向裡被退掉的八個。上排:置中的六角形兩種、切角的名片、字裡填光。下排:黑底大字、巨大的章節號、直排、分數當主角。

記號是點綴,不是主角,所以置中的六角形一律退。

大面積的字不刻在圖裡:字要能被選取、能換語言。字裡填光、黑底大字、分數當主角因此都退。

切角的名片屬於物件質感那一條方向,直排與巨大的章節號屬於編輯排版那一條,兩條整條都沒有選。

每一張都只出現一次

v10:一張滿版

一整片漸層光從畫面外灑進來,暗的地方是空的,顆粒摸得到。沒有形體,所以怎麼裁都不會斷。

v10 ②v10 ③v10 ④

v10 ⑤v10 ⑥v10 ⑦

同一套規則生出來的六張。每一件物料認領一張,台帳記著,不會發第二次。

光是怎麼生出來的

一顆種子決定這一張的光從哪條邊進來、蓋住多少、偏紫還是偏青、退得多快。同一顆種子永遠長出同一張,換一顆就是另一張。

01種子每一張有自己的編號,同一顆種子永遠重建出同一張02抽樣光從哪一條邊進來、蓋多大、怎麼淡出、顆粒多粗模型這一步的樣張03模型固定的風格段+這一次的變化04契約十二軸量一遍,明顯出界的先擋下人眼這一步的樣張05人眼形狀對不對,看過才進白名單06台帳認領一張就記一筆,永不重用

生出來之後先量

色相與暗部是這個品牌的簽名,界線很窄;光在哪裡、有多大,界線很寬。不在界線裡的直接重抽。

色相中位202 – 252簽名暗部佔比0.668 – 0.933簽名色相跨度46 – 66簽名彩度中位0.414 – 0.762自由顆粒能量0.0003 – 0.0006自由亮區橫跨0.312 – 0.767自由邊緣能量0.0011 – 0.0028自由峰值亮度0.160 – 0.426自由亮區重心 x0.320 – 0.849自由亮區塊數1.000 – 2.000自由平均亮度0.033 – 0.095自由亮區重心 y0.163 – 0.818自由

然後人再看一次

契約量不出「看得出是個東西」。光束、光球、圖裡自己長出來的字,都是人看過才擋下的。看過的才進白名單,現在白名單裡有 45 張。

26 張量契約用的樣本0.111最相近的一對,構圖距離1.387兩兩距離中位

被退的光:光束光束被退的光:光球光球被退的光:極光與波浪極光與波浪被退的光:圖裡長出字圖裡長出字

一盞燈

一盞燈:光在右上,字放左下暗處一盞燈:同一條規則,換一張光

光在哪裡,字就放在另一側;內文離光越遠越暗。每一張的角落都有編號:種子、光從哪裡來、色相、1/1。

同一道光,兩個版本

同一道光・品牌物料版同一道光・網站版

左邊給物料。右邊給網站:整張壓暗,光埋在暗裡,亮處的顏色反而更飽。muzi.tw 的背景一律走右邊那一版。

三條車道,同時在跑

車道・線與材質:一道光落在一個表面上車道・具象:構造物,講一件事怎麼運作車道・光場:沒有物件,只有光

分界是主體:一條拍材質,一條拍構造,一條只拍光。三條共用同一組規則,各自回答不同的問題,沒有誰取代誰。

06

/09

IN USE

放到不同的地方

同一套規則,八種場景。每一件的背景都是一張只用一次的光。

品牌用品一組:名片正面・信紙・信封

平面稿是程式排的,逐像素來自向量原檔;場景是模型生的空白照。模型從頭到尾沒有畫過那個記號。

數位:筆電上的 muzi.tw 首頁

螢幕裡是 muzi.tw 的首頁。

手機三頁:服務・作品・關於簡報:會議室螢幕上的封面

左:手機上的三頁,服務、作品、關於。右:會議室螢幕上的簡報封面。

平面:海報上牆三連平面:地下道燈箱三連

海報與燈箱,每一張各認領自己的一張光。

一場活動需要的東西

大型活動:攤位背板

攤位背板與易拉展各用一張只出現一次的光。攤位那張是提案稿,Muzi 目前沒有實體據點。

周邊

周邊一律走光場:它們不承載資訊。每一件各認領一張只出現一次的光,印在上面的就是那一張的 1/1。

周邊:托特包・筆記本・貼紙平拍周邊:絲巾周邊:壓克力光磚

托特包、筆記本與貼紙;絲巾;壓克力光磚。

周邊:桌墊周邊:杯墊三入周邊:明信片三入

桌墊;杯墊三入;明信片三入。

周邊:金屬書籤周邊:裱框微噴

金屬書籤;裱框微噴,限量一張。

07

/09

MOTION

動起來

動起來的時候,動的只有光。記號與字待在原位。

品牌片頭

片頭。黑場,光從邊緣浮起、灑過畫面;記號在左上角出現,接著是字標。那一點只動這一次,不旋轉、不循環、不閃。

光場緩慢流動段落轉場

左:光場緩慢移動。這裡壓成七秒一圈,規則是十八到三十秒,而且看不出迴圈的接縫。右:段落之間先退到墨,再亮起下一張。

轉場的四個速度

階時長用在即時0ms狀態切換:勾選、聚焦快120ms按鈕、標籤標準240ms面板、抽屜慢400ms換頁、那一點落定不用> 600ms人會開始等它

08

/09

AFTER HANDOFF

交出去之後

交付物不只是規範,是一組每天會自己跑的規則。

三支會擋人的檢查

01識別verify_muzi_identity.py41 個資產9 項恆定零字體依賴通過02版面verify_muzi_case.py八階字級一個左緣一套節首9 幕 30 節通過03渲染verify_case_render.py圖真的載入沒被拉扁沒有橫向溢出版心沒有空帶對比夠圖說沒跟丟通過

第二支在這一頁上跑過。它擋下來的是「頁面自己發明了第九階字級」,而那種錯誤看起來只是「這行字好像大了一點」。

三十三個區塊,一份契約

字標、幾何、色彩、光、字級、間距、狀態、版面、動態、工藝,全部寫在同一份 JSON 裡。頁面讀它,產生器也讀它。

muzi-tokens.json33 個區塊typeface / metrics字族與字幹寬、x 高、大寫高wordmark / mark / lockup無點 i、六角形比例、光學間距color / gradient / neutrals唯一的顏色事件、九個停點、七階中性light / web_grade從光裡取樣的顏色、網站版的濁bilingual / parent中日文第二行、母體的漸層條motion四個速度,動的只有光type / space / layout八階字級、九階間距、版心extension七項恆定、一項可變、四條禁止craft六條看得見的做法

規範書的一頁:起源

左:規範書 81 頁,HTML 與 PDF 出自同一份來源。右:tokens 的一段。

"mark": {
  "shape": "hexagon", "orientation": "pointy-top",
  "corner_radius_ratio": 0.0,
  "tittle": { "flat_width_over_stem": 1.2,
              "gap_above_x_height_over_stem": 0.5 }
},
"gradient": { "from": "#6400DE", "to": "#00A1C5", "stops": 9 }

09

/09

THE OUTCOME

交付與結果

交出去的東西

字標與記號41 個資產:橫式、小尺寸、反白、單色、中日文雙語、母體 muzi設計 token33 個區塊寫成一份 JSON。頁面讀它,產生器也讀它延伸規則與產生器七項恆定、一項可變、四條禁止。給任何後綴都推得出合法組合九停點漸層與表面色盤一條七階中性色,其餘的顏色都從光裡取樣。白字安全區實算到 61%圖標的造字法線寬、端點、轉角、網格全部訂成規則。現在的 11 枚是第一批,要再畫多少枚都照同一套長出來muzi.tw 全站每一頁吃同一份 token,字標與圖標都是算出來的

成果這套規則現在在跑。muzi.tw 的每一頁都吃同一份 token,而字標、色盤與圖標都是產生器算出來的,不是檔案夾裡的檔案。仍在努力Venture 與 Institute 還只是名字。規則接得住它們,但那兩條線要收什麼錢、服務誰,還沒有答案。

本身是品牌設計工作室,該怎麼樣建構自己的品牌反而成為難題。

Credits

Design & BuildMuzi Studio客戶自有專案年份2016–2026解決方案品牌識別,策略・識別・設計系統交付物字標與記號 ・ 設計 token ・ 延伸規則與產生器 ・ 漸層與色盤 ・ 服務圖標

想知道同一套方法在你的案子上長什麼樣?

先聊三十分鐘,不收費。

  • 下一件作品LifeOS 品牌識別設計