Master CSS 品牌
Master CSS 的标志、金色、字体与文字语气,以及原始图像与使用规范。
本页内容
#品牌识别
Master CSS 是以标记驱动的 CSS 编排语言,服务开发者与 AI 代理。品牌识别与产品作出相同承诺:决策明确、关系可读,细节彼此连贯。
- 清晰是首要原则。 工作内容优先;文字、代码与数据各有明确位置。
- 读得懂的系统。 共用数值、稳定节奏与有意识的状态,将各部分连接起来。
- 精准而有温度。 结构保持中性,金色只加入一个小而鲜明的温暖焦点。
本页定义标志、金色、字体与文字语气;设计系统则将这些原则带入界面的材质、控件、布局与动态效果。
#标志
M 标志与横式标准字是品牌识别组合。紧凑空间使用独立标志,需要读出名称时则以标准字介绍 Master CSS。两者都来自核定的 Master 品牌识别 v2 图像,各有适用于浅色与深色背景的版本。
横式标准字
| 图像 | SVG 画布 | 最小尺寸 | 净空 |
|---|---|---|---|
| 标志 | 216.6 × 120 | 高 24px | 标志高度的一半 |
| 小型标志 | 216.6 × 120 | 高 16px 至不足 24px | 标志高度的一半 |
| 横式标准字 | 1197.53 × 130.26 | 高 16px,或印刷宽 25mm | 一个字标的 x-height |
| 立体图像 | — | 标志高至少 64px | 与平面版相同 |
最小尺寸
以实际 CSS 像素显示
使用提供的图像、保持比例,并选择为该背景制作的版本。
不要重绘、拉伸、旋转、改色或添加效果,也不要让文字与边缘侵入净空。
#色彩
金色用于识别品牌,周围界面保持中性。每个视图只设一个金色焦点,例如标志,或重要操作旁的一个信号;状态含义与可读内容则交由文字传达。
#FDE2A7 → #E6B65D#FCDD98 → #E6B65D--color-amber-40两种标志版本共用连续的垂直香槟金渐变与柔和翼部阴影,请保留提供 SVG 中的每个色标。中性角色、材质与状态色由设计系统维护,完整调色板则位于色彩参考文档。
#字体排版
Geist 用于界面与拉丁文字,Noto Sans TC 用于繁体中文,IBM Plex Mono 用于代码、标识符与需要对齐的数字。字体无法使用时,回退到系统 sans-serif 或 monospace。
中文字距应保持自然;会变化或需要对齐的数值使用等宽数字,长标题则换行,不要缩小。字号尺度请参阅文字参考文档。
#文字语气
以体贴的协作者语气编写。从读者的任务开始,准确指出对象,并以浅白文字说明结果。主张应贴近产品能实际证明的范围。
| 情境 | 清晰实用 | 应避免 |
|---|---|---|
| 介绍产品 | 在标记中使用 class 名称与设计 tokens 编写样式。 | 终极、革命性的样式体验。 |
| 引导操作 | 复制色彩变量。 | 释放调色板的全部潜能。 |
| 说明结果 | 已复制 var(--color-amber-40)。 | 成功!一切准备就绪。 |
| 编写繁体中文 | 在標記中編寫樣式,使用共用的設計 tokens。 | 透過極致創新的方案,全面賦能設計體驗。 |
英文标题使用句首大写,正文名称写作“Master CSS”。英文与繁体中文应传达相同意思,API 名称与 class 字符串保持原样。消息要说明实际发生的事,必要时提供有用的下一步。
#下载
标准字与标志可用于文章、视频、文档与集成页面。每个文件都是透明 SVG,请选择适合背景的版本并保持比例。
#标准字
#标志
深色背景用标志
标准平面标志,适用高度 24px 以上。
浅色背景用标志
标准平面标志,适用高度 24px 以上。
深色背景用小型标志
较宽间隙,适用高度 16px 至不足 24px。
浅色背景用小型标志
较宽间隙,适用高度 16px 至不足 24px。
完整资源包另含竖式识别组合、字标、单色与立体图像、PNG 导出、图标及社交图片,并附使用说明与来源 manifest。写作工具与 AI 代理可以 Markdown 阅读本页。
#商标政策
“Master CSS”、Master CSS 标志与相关标记,是 Aoyue Design 所有的商标,代表本项目与社区。请按下列方式使用。
#允许的使用
- 在教育内容、博客文章、教程与开源工具中提及“Master CSS”。
- 说明项目是“built with”“powered by”或“compatible with”Master CSS。
- 在博客文章、视频、界面模型与插件文档中显示标志,或用于表示与 Master CSS 的集成或支持关系。
- 按比例调整标志大小,保留原始宽高比。
#不允许的使用
- 将“Master CSS”或标志用于产品、域名或公司名称,例如
mastercss-tools.io或Master CSS UI。 - 未正式合作,却将项目描述为官方或获得背书。
- 未取得书面同意,销售 T 恤或贴纸等商品,或将标志放在商品上。
- 修改标志的颜色、形状或方向,或添加阴影、渐变及其他视觉效果。
- 将标志作为自己的标志或产品识别的一部分。
#名称使用
名称请写作 Master CSS,例如“Built with Master CSS”或“Powered by Master CSS”。不要写成 mastercss、MASTERcss 或 CSSMaster。