网站导航

资源

Master CSS 品牌

Master CSS 的标志、金色、字体与文字语气,以及原始图像与使用规范。

本页内容
Master CSS 金色标志Master CSS 金色标志
标志四周保留高度一半的净空。

#品牌识别

Master CSS 是以标记驱动的 CSS 编排语言,服务开发者与 AI 代理。品牌识别与产品作出相同承诺:决策明确、关系可读,细节彼此连贯。

  • 清晰是首要原则。 工作内容优先;文字、代码与数据各有明确位置。
  • 读得懂的系统。 共用数值、稳定节奏与有意识的状态,将各部分连接起来。
  • 精准而有温度。 结构保持中性,金色只加入一个小而鲜明的温暖焦点。

本页定义标志、金色、字体与文字语气;设计系统则将这些原则带入界面的材质、控件、布局与动态效果。

#标志

M 标志与横式标准字是品牌识别组合。紧凑空间使用独立标志,需要读出名称时则以标准字介绍 Master CSS。两者都来自核定的 Master 品牌识别 v2 图像,各有适用于浅色与深色背景的版本。

横式标准字

Master CSS 横式标准字Master CSS 横式标准字
x 代表字标的 x-height,标志高度为 1.3x。完整识别组合四周保留一个 x 的净空。
图像SVG 画布最小尺寸净空
标志216.6 × 120高 24px标志高度的一半
小型标志216.6 × 120高 16px 至不足 24px标志高度的一半
横式标准字1197.53 × 130.26高 16px,或印刷宽 25mm一个字标的 x-height
立体图像—标志高至少 64px与平面版相同

最小尺寸

以实际 CSS 像素显示

小型标志 · Master CSS · 16px小型标志 · Master CSS · 16px小型标志 · 16px
标志 · Master CSS · 24px标志 · Master CSS · 24px标志 · 24px
标准字 · Master CSS · 16px标准字 · Master CSS · 16px标准字 · 16px
请以实际使用尺寸检查图像。

使用提供的图像、保持比例,并选择为该背景制作的版本。

不要重绘、拉伸、旋转、改色或添加效果,也不要让文字与边缘侵入净空。

#色彩

金色用于识别品牌,周围界面保持中性。每个视图只设一个金色焦点,例如标志,或重要操作旁的一个信号;状态含义与可读内容则交由文字传达。

浅色背景标志#FDE2A7 → #E6B65D
深色背景标志#FCDD98 → #E6B65D
信号色--color-amber-40
标志渐变属于图像本身;界面金色取自 preset 的 amber 色系。

两种标志版本共用连续的垂直香槟金渐变与柔和翼部阴影,请保留提供 SVG 中的每个色标。中性角色、材质与状态色由设计系统维护,完整调色板则位于色彩参考文档。

#字体排版

Geist 用于界面与拉丁文字,Noto Sans TC 用于繁体中文,IBM Plex Mono 用于代码、标识符与需要对齐的数字。字体无法使用时,回退到系统 sans-serif 或 monospace。

Geist界面与拉丁文字
Noto Sans TC繁体中文
IBM Plex Mono代码、标识符与对齐数字

中文字距应保持自然;会变化或需要对齐的数值使用等宽数字,长标题则换行,不要缩小。字号尺度请参阅文字参考文档。

#文字语气

以体贴的协作者语气编写。从读者的任务开始,准确指出对象,并以浅白文字说明结果。主张应贴近产品能实际证明的范围。

情境清晰实用应避免
介绍产品在标记中使用 class 名称与设计 tokens 编写样式。终极、革命性的样式体验。
引导操作复制色彩变量。释放调色板的全部潜能。
说明结果已复制 var(--color-amber-40)。成功!一切准备就绪。
编写繁体中文在標記中編寫樣式,使用共用的設計 tokens。透過極致創新的方案,全面賦能設計體驗。

英文标题使用句首大写,正文名称写作“Master CSS”。英文与繁体中文应传达相同意思,API 名称与 class 字符串保持原样。消息要说明实际发生的事,必要时提供有用的下一步。

#下载

标准字与标志可用于文章、视频、文档与集成页面。每个文件都是透明 SVG,请选择适合背景的版本并保持比例。

#标准字

深色背景用标准字

浅色字样搭配香槟金渐变标志。

浅色字样的 Master CSS 标准字

浅色背景用标准字

深色字样搭配香槟金渐变标志。

深色字样的 Master CSS 标准字

#标志

深色背景用标志

标准平面标志,适用高度 24px 以上。

深色背景用 Master CSS 金色标志

浅色背景用标志

标准平面标志,适用高度 24px 以上。

浅色背景用 Master CSS 金色标志

深色背景用小型标志

较宽间隙,适用高度 16px 至不足 24px。

深色背景用 Master CSS 小型标志

浅色背景用小型标志

较宽间隙,适用高度 16px 至不足 24px。

浅色背景用 Master CSS 小型标志

完整资源包另含竖式识别组合、字标、单色与立体图像、PNG 导出、图标及社交图片,并附使用说明与来源 manifest。写作工具与 AI 代理可以 Markdown 阅读本页。

下载品牌资源包(ZIP)资源 manifest

#商标政策

“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。