品牌工作室 - Lolly

位於 #/start 的品牌工作室是你形塑品牌的唯一地方 - 它的標誌、色彩、字體、其餘的權杖以及它保存的檔案。在這裡設定一次,每個工具、頁面與匯出結果就會依此建構自動跟隨,而不必逐一檢查。

變更會在整個應用程式中即時預覽,所以你能在確定套用之前,先看到某個色彩或字型套用到各處的樣子。這一切都在裝置端進行:你的品牌檔案與權杖絕不會離開你的機器(選擇 Google 字型時,會在同意對話框確認後,向 Google 一次性擷取該字型家族),而品牌本身則以單一品牌包檔案的形式攜帶。

這裡是編輯器,儀表板只是鏡子。 儀表板(#/d)上的設計系統分頁只是唯讀顯示你的品牌;你要編輯品牌則要在這裡的 #/start。如果之後想改色彩,回到品牌工作室即可。

各個房間

這間工作室是側邊列出的一組房間 - 不是步驟。沒有編號,彼此之間也沒有前後依賴,從任何一間進入都算合理:

總覽 - 中樞。一眼看清目前有什麼,並有通往每個房間的入口。
色彩 - 逐一加入色彩、指派角色,或從單一色彩產生整套調色盤。
字體 - 應用程式、你的工具與每次匯出所讀取的四款字體。
標誌 - 你的商標,涵蓋各種方向與處理方式。
權杖 - 圓角、間距、陰影以及系統其餘部分。
檔案 - 你的品牌所保存的圖像、音訊與動態檔案。

在手機上,同一份清單會變成釘在頁首下方的橫向卡片列。切換房間絕不會重新載入任何內容 - 編輯器會讓所有面板保持掛載狀態,只是顯示你要求的那一個。

用 #/start?area=<key> 可深層連結到某個房間。可用的鍵值有 overview、color(注意 URL 中是美式拼法)、type、logos、tokens、catalogue(檔案房間 - 面板鍵值是永久性的約定,因此 URL 沿用舊名稱)以及 versions。?tab= 是同一功能長期沿用的別名,依然可以解析,所以舊連結與書籤仍可正常運作;無法辨識的值一律開啟總覽,而不會出現死路。

釘在側邊列底部的是屬於整個設計系統、而非單一房間的動作:

加入來源… - 來源選擇器,可從檔案、PDF、圖片、字型或網站帶入品牌。詳見下方帶入既有品牌。
候選匣 - 掃描找出但尚未確定採用的候選項目。除非某次掃描真的保留了內容,否則會保持隱藏,一旦有內容則會顯示數量;裡面的任何項目在你按下該列的「加入」之前都不會影響你的品牌。
匯出 - 將整個品牌寫成一個 LollyBrand-…zip。
權杖(.json) - 單獨匯出純文字設計權杖文件,供儲存庫、建置流程或其他權杖工具使用。
版本 - 發布、啟用並還原設計系統的具名副本。除非你已有可發布的內容(或有 ?area=versions 連結指名要求),否則會保持隱藏。

signed by Lollyvector SVG2026-08-24自己驗證 Get the signed file20 paths~1.1k nodes37 groups19 KBsigned by Lollyvector SVG2026-08-24自己驗證 Get the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

總覽

總覽是你進入時停留的房間,有兩種面貌。

當尚未設定任何內容時,會提供兩扇門 - 從檔案開始(設計權杖、Penpot 專案、設計系統包或 SVG)與從零開始(先加入一個色彩,之後隨時可以繼續) - 以及下方一個低調的探索工具出口,因為直接離開也是合理的選擇。

一旦設計系統已經存在,同一個房間就會顯示你目前擁有的內容:調色盤及其色彩數量、目前使用的字體家族、已填入多少個標誌欄位、有多少個權杖,以及檔案房間。每個區塊都是通往該房間的入口。這裡只有數量,絕不會有進度條,也絕不會有完成卡片 - 這間工作室不欠你任何東西。

標誌

從把你資料夾裡的商標全部倒進最上方的拖放區開始:「把標誌拖到這裡,或一次選取多個」可一次接受你手上所有的檔案。每個檔案會先被讀取其形狀與用色,然後排入等待欄位佇列,以卡片顯示系統的判斷 - 例如「看起來像是橫式主標誌」,附上判斷依據的量測值,以及一個放置按鈕(若該欄位已有內容,則顯示取代)。如果系統沒有把握,卡片會坦白說明,並改為提供列出全部八個欄位的變更欄位選項。在你按下任何動作之前,不會有任何內容被放置。

這個佇列周圍會發生兩件事。留白過多的商標會先收到裁切建議——回應它,或按下 Escape 讓原始檔案原樣放入。而當某個商標可以填補另一個空的相鄰欄位時,該房間會提供衍生的單色或反白版本作為獨立卡片,標記為自動產生,若你之後用其他方式填了那個欄位,這張卡片就會自動消失。

下方是每個商標最終落腳的網格 - 方向 × 處理方式的欄位:

方向:橫式(文字商標與圖形符號並排)與直式(堆疊排列,適合方形與縱長空間)。
處理方式:主要版、主要反白版(用於深色背景)、單色版與單色反白版。

共有八個可選欄位。點一下空欄位可加入 PNG、SVG、JPEG 或 WebP;點一下已填入的欄位可取代它。每個欄位都是選填的,而且一切都保留在這台裝置上。

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file8 paths~4.8k nodes19 groups54 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file8 paths~4.8k nodes19 groups54 KB

自訂商標 - 在自訂商標底下加入你品牌以自訂方式命名的商標(圖示、徽章、favicon);為它命名並選擇檔案即可。
更多身分 - 子品牌、產品或活動可以擁有自己完整的一整套標誌。使用+ 新增另一個標誌並命名;你的主要標誌集就是「你的標誌」。
上傳 SVG,Lolly 會讀取其中的色彩。 在全新安裝的環境中,系統會靜靜地依據標誌設定你的主要色彩,並告知此情況。在已有品牌的環境中,則會改為以建議形式提供該色彩 - 「在標誌中找到:#…」並附上一個設為主要色彩按鈕 - 位於色彩房間中,你可以採用或略過。

色彩

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file114 paths~26k nodes149 groups4 images523 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file114 paths~26k nodes149 groups4 images523 KB

內容最豐富的房間,分成兩個窗格。左側是你操作的地方;右側是你的即時調色盤。拖曳兩者之間的分隔線可調整大小(在其上按 Enter 可將調色盤收起讓開)。

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file61 paths~9.4k nodes77 groups200 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file61 paths~9.4k nodes77 groups200 KB

先加入一個色彩,再賦予它任務

加入色彩就是簡單路徑的全部內容:以任何標記方式貼上或挑選一個色彩,它就會成為恰好一個權杖。不會從中衍生任何東西,不會提供任何建議,也不會要求任何其他事項。貼上一整份色彩清單,每個色彩都會各自成為一張可單獨加入的卡片。

角色是疊加在上面的一層——決定哪個色彩擔任哪個部分。角色是選填的(一個設計系統只有三個鬆散的色彩、沒有任何角色,也完全是合理的),任何色票都可以指定角色,而對比讀數是以 APCA 為優先,針對所在表面測量而得。

進階區塊

這兩者下方是四個折疊區塊。展開你需要的那一個;每個都可用 #/start?area=color&focus=<wing> 深層連結:

產生入門調色盤(focus=generate) - 由一個色彩產生一整套色調。詳見下文說明。
色階曲線(focus=curves) - 逐點重塑色階。明度、彩度與色相各有自己的曲線,可用 L / C / H 切換,拖曳時下方的色階會即時重新計算。
對比(focus=contrast) - 對比鎖定會針對你選擇的背景重新調整色階以達到 APCA 目標,每個階層保留自己的色相與彩度;旋轉色相會將整個色階沿色輪整體旋轉,每個色調保留自己的明度與彩度。
印刷(focus=print) - 主要色彩在印刷上的呈現:自動螢幕色值,或改用固定的 CMYK 組合或指定的專色油墨。

一個色彩,一整套調色盤

在產生入門調色盤裡,選一個主要色彩,Lolly 就會運用引擎各處通用的同一套感知色彩數學(OKLCH),推算出一整套調色盤 - 明暗表面、文字、強調色以及完整的淺/深色階。可調整的衍生選項:

配色方案 - 單色、互補色、類似色或三等分色 - 決定次要色彩與主要色彩之間的關係。
色調數 - 一個從 3 到 20 的滑桿(預設 5),控制每個色階產生多少階層。
微調(折疊) - 介面強度(柔和/濃郁)、對比(舒適/高)與品牌上的文字(自動/淺色/深色)。

這個區塊裡的任何操作都不會寫入你的品牌。在你按下取代調色盤(見下文)之前,這一切都只是整個應用程式中即時可見的預覽,供你評估。

主要色彩下方會看到即時的主要 / 中性 / 次要 / 混合色階,以及淺色與深色樣本卡片,每張都附有自己的對比讀數 - WCAG 比例旁邊附上 APCA 的 Lc 數值。點一下中性或次要色階中的某個階層,可將該色調固定,取代預設的衍生色。

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file25 paths~4.6k nodes60 groups57 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file25 paths~4.6k nodes60 groups57 KB

建立你的調色盤(調和產生器)

同樣在這個區塊裡,建立你的調色盤會根據主色產生相配的強調色。選擇一種調和方式 - 互補色、鄰近色、三角色、四角色或類比色(此選項會另外帶出 2 到 5 個的強調色數量,以及 10° 到 45° 的色相角度)- 每個候選色都會附上自動產生的易讀名稱與一個+ 加入按鈕。按下加入就會立即把該顏色放進你的調色盤,一按對應一個色彩權杖。「你的調色盤,實際套用」會在真實圖形上預覽整組配色。

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file8 paths936 nodes14 groups15 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file8 paths936 nodes14 groups15 KB

套用已產生的調色盤

取代調色盤是這個區塊裡唯一會寫入變更的控制項,而且它從不會直接寫入。按下之後會先開啟一張審視卡,標題為「要取代調色盤嗎?」,逐項列出即將發生的變更:多少角色會維持你指定的樣子、多少你自行加入的顏色會被保留、多少色階曲線會重新錨定、多少印刷鎖定會重新固定、多少隱藏色階會維持隱藏、多少漸層停駐點會保留其顏色。

卡片上的取代調色盤會提交這項變更;取消則會離開並且不做任何更動。執行完成後,卡片會變成「調色盤已取代。」,並已聚焦在單一的復原按鈕上 - 而且在替換之前,整個設計系統就已建立一次檢查點,所以「還原成原本的樣子」只是一次還原,而不是白費一個下午。

調色盤、色表與每個色塊

右側面板會列出你品牌擁有的每個顏色,依群組排列(主色、中性色、次要色、光譜色、自訂、角色),每個群組都可摺疊,並各自有一個+ 加入。下方的色表可展開為同一組色塊的兩種檢視:色輪(OKLCH 色輪 - 拖曳圓點可重新上色,點按圓點可編輯,點按空白處可新增色塊)以及色域圖,顯示可顯示範圍實際的邊界所在。#/start?area=color&focus=chart 會直接開啟該卡片,?wheel 一直以來也是如此。

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file155 paths~14k nodes199 groups1 image191 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file155 paths~14k nodes199 groups1 image191 KB

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file274 paths~3.7k nodes67 groups83 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file274 paths~3.7k nodes67 groups83 KB

點按任一色塊即可開啟其編輯器:

重新命名。
設定顏色 - 選色器會以感知式的 OKLCH 滑桿開啟,並提供 Hex、HSL、RGB 與 CMYK 模式;數值欄位會依目前使用的色彩空間進行讀取與寫入,因此你可以貼上十六進位色碼或輸入油墨百分比。請注意,輸入 CMYK 會透過換算設定螢幕顏色 - 若要固定精確油墨值,請使用下方的印刷鎖定。
儲存為 - 選擇色塊的儲存方式:LCH(預設 - 感知式、廣色域,編輯時的最佳選擇)、Hex、RGB 或 HSL。當你需要固定精確的舊版十六進位色碼或比對 sRGB 值時可覆寫此設定。
用作 - 直接把這個色塊指定為某個品牌角色,不必回到角色面板。(角色本身的圖磚不提供此選項 - 角色不能取代角色。)
印刷替代色(可摺疊) - 鎖定顏色的印刷行為:
CMYK - 從自動切換為已鎖定,以精確油墨值(C/M/Y/K,0–100)覆寫自動的 sRGB→CMYK 換算。
特別色 - 從無切換為已設定,將色塊鎖定為特別色;為它指定名稱(例如 PANTONE 186 C)、選填的色卡與選填的加工方式(預設為一般油墨),用於油墨其實不是油墨的情況 - 燙金、凸/凹壓、局部上光、觸感加工或模切、壓線、打孔。
在其他色彩空間中(可摺疊) - 同樣的概念再擴大:每一列都是這個色塊可以表示的一種色彩空間,可以從標準值換算而來,也可以由你自行指定,自行指定的值在匯出時優先採用。

這些印刷鎖定就是印刷廠在你匯出 CMYK PDF 或 TIFF 時所使用的依據 - 參見匯出。

刪除色塊是安全的:衍生的色階步驟與主題角色會被隱藏(底層權杖仍會持續解析,因此不會造成下游任何損壞),而你自行新增的顏色則會直接移除。

漸層

選用的漸層面板會依你的調色盤建立用於背景與強調色的混色權杖。如果你的品牌不使用漸層,可以完全略過。每個漸層都有預覽圖、具名的停駐點(2–8 個)與一個角度。關鍵行為在於:停駐點會參照某個色塊,因此只要重新上色那個色塊,漸層就會跟著改變。內插運算以 OKLCH 進行,以獲得乾淨的混色效果。刪除停駐點即可縮減漸層的長度。

把調色盤帶到別處使用

停靠在調色盤面板底部邊緣的浮動小圓鈕,可將整個調色盤下載為設計權杖(JSON)、CSS 變數、CSS 類別、SCSS 變數、GIMP 調色盤(.gpl)或 Adobe Swatch Exchange(.ase) - 讓品牌可以直接匯入 Illustrator、Figma、GIMP 或樣式表。它位於面板捲動範圍之外,因此無論調色盤捲到多遠,它都會保持在原位。(你也可以從目錄檢視畫面下載調色盤。)

字體

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file74 paths~11k nodes99 groups234 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file74 paths~11k nodes99 groups234 KB

這個區塊以四張角色卡開頭 - 這是應用程式、你的工具與每一次匯出實際會讀取的四種字體。每張卡都會顯示目前該角色所使用的字體,以該字體排版呈現,並在下方附上一行真實的示範文字:

主要字體 - 內文、按鈕與每個工具皆使用。
標題 - 用於 h1/h2 的展示字體。
程式碼 - 用於程式碼與資料的等寬字體。
斜體 - 用於強調、引用與旁述的真正斜體字。

標題、程式碼與斜體在你指定之前都會退回使用主要字體,因此單一字體的品牌在這裡完全不需要做任何決定。卡片上的任何操作都不會直接提交變更:變更(若角色為空則顯示選擇字體)會開啟限定於該角色的比較舞台。

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file59 paths~9.3k nodes73 groups196 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file59 paths~9.3k nodes73 groups196 KB

比較舞台

比較舞台會直接在該區塊內開啟,而非以對話框呈現,因此你原本所在的卡片仍會留在畫面上。搜尋 Google Fonts 字體家族(Inter、Fraunces、Space Grotesk……)或拖放字體檔案,按下加入比較,候選字體就會在安裝前以相同文字並排顯示。按 Escape 可取消,並將鍵盤焦點交還給你開啟此舞台前所在的卡片。

這就是唯一的入口,因此沒有任何東西能在你未察覺的情況下進入你的品牌。舞台下方是兩個管理面板:

此裝置上的字體 - 每個已安裝的字體家族、其負責的角色與刪除按鈕。在此按加入字體會開啟同一個未限定角色的比較舞台。
你的字體 - 從你自己的電腦上傳 TTF、OTF 或 WOFF。這是用於你已擁有授權的企業自有字體的路徑。

不論哪種方式,字體都會保留在這台裝置上,並在應用程式、你的工具與每一次匯出中呈現,永久離線可用,並隨你的品牌包一起攜帶 - 渲染時不會擷取任何外部資源。Google Fonts 上的所有字體皆以開放授權(OFL/Apache/UFL)提供。

底部的字體角色面板會顯示每個角色的即時樣本 - 主要字體呈現的內文與介面文字、選用的標題展示字體、用於強調的斜體、用於程式碼與資料的等寬字體 - 讓你能看到整組字體一起運作的效果。

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file17 paths~5.6k nodes29 groups68 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file17 paths~5.6k nodes29 groups68 KB

權杖

設計系統的其餘部分,不需碰程式碼即可編輯:

signed by Lollyvector SVG2026-09-03自己驗證 Get the signed file73 paths~14k nodes95 groups1 image292 KBsigned by Lollyvector SVG2026-09-03自己驗證 Get the signed file73 paths~14k nodes95 groups1 image292 KB

圓角 - 單一半徑滑桿(0–1.5rem),應用程式中的卡片、按鈕與面板皆會依此設定。
更多權杖 - 新增與編輯間距、尺寸、筆畫寬度、不透明度、旋轉角度、一般數值與陰影。選擇一種類型,為它命名(例如 間距、卡片陰影……),再設定其值。這些會以標準設計權杖(DTCG)格式儲存,並隨你的品牌一起攜帶。

檔案

把你品牌保存的檔案放到這裡 - 標誌除外:向量、圖片、音訊與動態(影片、Lottie、動畫)素材。它們會進入你的目錄,依區段分類,並可在每個工具的素材選取器中隨時取用。所有內容皆保留在這台裝置上。(側邊列將此區塊標示為檔案;URL 鍵仍為 catalogue,因為面板鍵是永久性的約定。)

匯入品牌

側邊列底部的從……加入會開啟兩階段的選取器。第一階段詢問的是你擁有什麼,而非它是什麼格式:

設計權杖或設計檔案 - DTCG 或 Tokens Studio 的 JSON、Penpot 專案、權杖組的 zip 壓縮檔、Lolly 設計系統包或 SVG。
PDF - 簡報或風格指南檔案,會在這台裝置上讀取其色彩、印刷標記與內嵌字體。
圖片 - 截圖或相片;其色彩會在這台裝置上讀取,不會上傳任何內容。
字體檔案 - TTF、OTF 或 WOFF。會開啟字體區塊,在那裡安裝字體。
網站 - 單一頁面,讀取其色彩與字體。這個圖磚只會在確實能讀取頁面的裝置上出現,因為顯示一個沒人能按的停用圖磚,比根本不顯示還糟。若圖磚出現,它會清楚說明讀取方式:由這台裝置上的應用程式擷取,或透過瀏覽器擴充功能在背景分頁中以你的登入身分讀取。輸入網址只會預先填入欄位 - 擷取按鈕才是同意的動作,因此別人傳給你的連結永遠無法自行啟動讀取。

選擇設計檔案來源後,第二階段就是下方這張卡片:接受的格式以圖示圖磚依優先順序排列,整張卡片本身就是一個放置區 - 點按卡片任何位置或將檔案拖放到卡片上皆可。你也可以直接把檔案拖放到工作室上。

signed by Lollyvector SVG2026-08-24自己驗證 Get the signed file19 paths~3.2k nodes35 groups2 images175 KBsigned by Lollyvector SVG2026-08-24自己驗證 Get the signed file19 paths~3.2k nodes35 groups2 images175 KB

每種設計檔案能為你帶來什麼:

LollyBrand 包(.zip) - 一步安裝完成;
Penpot 匯出檔(.penpot) - 匯入其設計權杖;
Design Tokens 檔案(.json) - W3C DTCG;
Tokens Studio 檔案(.json) - Tokens Studio;
純 SVG(.svg) - Lolly 會掃描其中的色彩,讓你選擇要保留哪些,第一個會成為你的主色。

來源安裝會先建立檢查點,因此「還原到匯入之前」只需一次還原即可。而掃描找到的內容不會直接套用:候選項目會進入暫存區,在那裡每一項都要透過負責該類素材的區塊,各自按下加入才會生效。

#/start?source=<kind> 會以指定來源開啟選取器(file、pdf、image、font、url),而 ?import 則會開啟一般清單。

在裝置間搬移品牌

側邊列底部的匯出會寫出單一個 LollyBrand-…zip - 內含你的權杖、字體、標誌與主題偏好設定,並附有完整性清單,會在匯入回來時進行驗證。旁邊的權杖(.json)則會單獨寫出純粹的設計權杖文件:不含字體,不含標誌,只有權杖 - 這正是版本庫、CI 流程或其他權杖工具實際會讀取的內容。

把品牌帶回來的方式是從……加入 → 設計權杖或設計檔案(如上所述),或直接拖放到工作室上。這是同事把品牌交給你,或是你把品牌帶到第二台裝置安裝的方式 - 不需帳號,不需雲端。若要改從命令列匯入品牌,請參閱 ingest:brand。

版本

側欄底部的版本功能,正是設計系統不再是「移動目標」的地方。發布一個版本,你就會得到保存在這台裝置上的永久具名複本:之後它永遠不會改變,因此釘選該版本的工具會持續繪製出相同的內容。此面板在你尚未有任何內容可發布之前會保持隱藏,因此從未發布過的工作室也永遠不會看到這些控制項。

在你按下任何按鈕之前，有三件事要先知道，而面板會在按下之前就說明這三件事，而非之後：

版本是永久的。 目前尚未提供刪除功能,因此面板只會如實說明哪些內容已被保存、且會持續保存,而不會提供一個會說謊的按鈕。
移除項目會列在相容性卡片的最前面。 新增與變更的權杖是好消息;而移除的權杖才是會破壞工具的關鍵所在,因此會優先列出,並直接稱之為移除。
發布無法復原;還原則可以。 從此版本還原至最新狀態屬於對主幹的一般編輯,因此會進入工作室的復原堆疊,面板也會立即提供復原選項。

你可以選擇 Publish only（僅發布），或 Publish and make active（發布並設為使用中）- 差別在於工具與應用程式從此是否會跟隨該版本，還是繼續跟隨你的最新編輯。Follow the latest again（再次跟隨最新版本）會讓每次編輯一做出就立即生效。#/start?area=versions 可直接開啟該面板。

品牌固定時

有些版本會附帶鎖定品牌 - 其顏色、字型與權杖就是每個工具與匯出所使用的內容，沒有東西可以更改。在這種情況下，工作室會被一段簡短說明取代，說明此版本內建固定品牌，編輯功能已關閉。這是刻意的：這是組織確保一切維持符合品牌規範的方式。

接下來往哪裡走

Using Lolly - 畫布、儲存、專案與目錄。
Design Tokens - 你的品牌所表達的權杖模型。
Exporting & formats - 列印單位、CMYK 以及你的品牌會匯出成的格式。