網站導覽

Master

品牌

Master 的品牌識別:一條金色緞帶、共通的產品家族,以及連結彼此的細節。

本頁內容

一條金色緞帶,摺成一個 M。Master 的品牌識別串起各項產品,也讓每個產品保有自己的目的。

Master CSS 金色標誌Master CSS 金色標誌
標誌四周保留高度一半的淨空。

介紹組織時,請使用提供的 Master 字標。名稱已清楚可知時,可單獨使用標誌。產品名稱應維持核定的識別組合:Master CSS 與 Master UI。

下載淺色背景用 Master 字標 · 深色背景用

#結構

標誌是一條摺疊的緞帶,具有連續的金色面。請保留其幾何、比例、漸層與留白,四周至少留出標誌高度一半的淨空。高度低於 24px 時使用小型標誌;立體圖像僅限標誌高度至少 64px 時使用。

#使用方式

請選擇為該背景製作的圖像,不可拉伸、旋轉、重繪或改色。不要加入效果,也不要在淨空中放置搶眼細節。產品識別組合代表該產品,組織識別組合則代表 Master。

#色彩

金色是品牌識別中的溫暖焦點,介面則由中性表面與易讀文字承載。請保留提供的漸層色標,介面強調色使用共用的 amber 訊號 token。

淺色背景標誌#FDE2A7 → #E6B65D
深色背景標誌#FCDD98 → #E6B65D
訊號色--color-amber-40
標誌漸層屬於圖像本身;介面金色取自 preset 的 amber 色系。

#字體排版

Geist 用於介面與拉丁文字,Noto Sans TC 用於繁體中文,IBM Plex Mono 用於程式碼、識別字與需要對齊的數字。

Geist介面與拉丁文字
Noto Sans TC繁體中文
IBM Plex Mono程式碼、識別字與對齊數字

#Tokens

品牌 tokens描述品牌識別;設計系統則負責介面材質、間距、高低層級、控制項與動態效果。新增產品時,請維持這些責任的區分。

#元件

產品網站使用共通的設計系統。各產品可組合自己的首頁與範例,同時保留共用材質、字體與互動規則。

#品牌資產包

下載 Master 品牌資產包。內容包含核定的組織與產品圖像、圖示、社群圖片及品牌 tokens。

#產品識別政策

Master CSS 識別指南載有該產品既有的使用政策。