网站导航

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 识别指南载有该产品既有的使用政策。