# Master CSS brand
Canonical: https://master.co/brand/master-css
The mark keeps half its height clear on every side.
## Identity
Master CSS is a markup-driven CSS orchestration language for developers and AI agents. Its identity makes the same promise as the product: decisions are explicit, relationships are readable, and the details stay connected.
- **Clarity in the foreground.** The work comes first; text, code and data each have a clear place.
- **A system you can read.** Shared values, a steady rhythm and deliberate states connect the parts.
- **Precision with warmth.** The structure stays neutral. Gold adds one small, recognizable point of warmth.
This page defines the mark, its gold, the typefaces and the voice. The [Design system](https://master.co/design-system) carries them into the interface: materials, controls, layout and motion.
## Logo
The M mark and the horizontal logotype are the signatures. The mark stands alone in compact places; the logotype introduces Master CSS where the name should be read. Both come from the approved Master brand identity v2 artwork, in one version for light backgrounds and one for dark.
Horizontal logotype: x is the wordmark's x-height; the mark is 1.3x high. Keep one x clear around the complete signature.
| Artwork | SVG canvas | Minimum size | Clear space |
| --- | --- | --- | --- |
| Mark | `216.6 × 120` | 24px high | Half the mark's height |
| Small mark | `216.6 × 120` | 16px to below 24px high | Half the mark's height |
| Horizontal logotype | `1197.53 × 130.26` | 16px high, or 25mm wide in print | One wordmark x-height |
| Dimensional artwork | — | Mark at least 64px high | As its flat version |
Minimum sizes at actual CSS pixels: small mark 16px high, mark 24px high, logotype 16px high.
(o) Use the supplied artwork, keep its proportions and choose the version made for its background.
(x) Do not redraw, stretch, rotate or recolor the artwork, add effects, or let text and edges into its clear space.
## Color
Gold identifies the brand; the interface around it stays neutral. Give each view one gold focus, such as the mark or a single signal beside the action that matters, and let words carry status and readable text.
| Gold | Value |
| --- | --- |
| Mark on light | `#FDE2A7 → #E6B65D` |
| Mark on dark | `#FCDD98 → #E6B65D` |
| Signal | `--color-amber-40` |
Both versions of the mark share a continuous vertical champagne-to-gold gradient with soft wing shading; keep every stop in the supplied SVG. Neutral roles, materials and status colors belong to the [Design system](https://master.co/design-system#foundations), and the complete palette to the [color reference](https://rc.css.master.co/reference/tokens/color).
## Typography
Geist carries the interface and Latin text, Noto Sans TC carries Traditional Chinese, and IBM Plex Mono carries code, identifiers and aligned numbers. Fall back to the system sans-serif or monospace when a family is unavailable.
| Typeface | Use |
| --- | --- |
| Geist | Interface and Latin text |
| Noto Sans TC | Traditional Chinese |
| IBM Plex Mono | Code, identifiers and aligned numbers |
Keep Chinese tracking natural, use tabular figures for values that change or align, and let a long heading wrap instead of shrinking it. The type scale is in the [text reference](https://rc.css.master.co/reference/tokens/text).
## Voice
Write as a thoughtful collaborator. Start with the reader's task, name the thing precisely and explain the result in plain words. Keep claims close to what the product can demonstrate.
| Context | Clear and useful | Avoid |
| --- | --- | --- |
| Introduce the product | Style in markup with class names and design tokens. | The ultimate, revolutionary styling experience. |
| Guide an action | Copy the color variable. | Unlock your palette's full potential. |
| Explain a result | Copied `var(--color-amber-40)`. | Success! Everything is ready to go. |
| Write in Traditional Chinese | 在標記中編寫樣式，使用共用的設計 tokens。 | 透過極致創新的方案，全面賦能設計體驗。 |
Use sentence case for headings and write “Master CSS” in prose. English and Traditional Chinese carry the same meaning; keep API names and class strings as they are. A message says what happened and, when needed, the useful next step.
## Downloads
Use the logotype and mark in articles, videos, documentation and integration pages. Each file is a transparent SVG: choose the version made for its background and keep its proportions.
### Logotype
**Logotype for dark backgrounds**
Light lettering with the champagne-to-gold mark.
[Download Logotype for dark backgrounds (SVG)](https://master.co/images/css-logotype@dark.svg)
**Logotype for light backgrounds**
Dark lettering with the champagne-to-gold mark.
[Download Logotype for light backgrounds (SVG)](https://master.co/images/css-logotype@light.svg)
### Mark
**Mark for dark backgrounds**
Standard flat mark, for heights of 24px and above.
[Download Mark for dark backgrounds (SVG)](https://master.co/brand/v2/logo/mark/master-mark-on-dark.svg)
**Mark for light backgrounds**
Standard flat mark, for heights of 24px and above.
[Download Mark for light backgrounds (SVG)](https://master.co/brand/v2/logo/mark/master-mark-on-light.svg)
**Small mark for dark backgrounds**
Wider gaps for heights from 16px to below 24px.
[Download Small mark for dark backgrounds (SVG)](https://master.co/brand/v2/logo/mark/master-mark-small-on-dark.svg)
**Small mark for light backgrounds**
Wider gaps for heights from 16px to below 24px.
[Download Small mark for light backgrounds (SVG)](https://master.co/brand/v2/logo/mark/master-mark-small-on-light.svg)
The complete kit adds stacked signatures, wordmarks, monochrome and dimensional artwork, PNG exports, icons and social images, with usage notes and a source manifest. Writing tools and AI agents can [read this page as Markdown](https://master.co/brand/master-css.md).
[Download the brand kit (ZIP)](https://master.co/brand/v2/master-css-brand-kit-v2.zip) · [Asset manifest](https://master.co/brand/v2/manifest.json)
## Trademark policy
“Master CSS”, the Master CSS logo and associated marks are trademarks owned by Aoyue Design. They represent the project and its community; please use them as follows.
### You may
- Refer to “Master CSS” in educational content, blog posts, tutorials and open-source tools.
- Say that a project is “built with”, “powered by” or “compatible with” Master CSS.
- Show the logo in blog posts, videos, interface mockups and plugin documentation, or to indicate integration with or support for Master CSS.
- Resize the logo proportionally, keeping its original aspect ratio.
### You may not
- Use “Master CSS” or the logo in the name of your product, domain or company, such as `mastercss-tools.io` or `Master CSS UI`.
- Present your project as official or endorsed unless we have formally partnered.
- Sell goods such as T-shirts or stickers, or place the logo on merchandise, without written consent.
- Modify the logo's color, shape or orientation, or add shadows, gradients or other visual effects.
- Use the logo as part of your own logo or product identity.
### Name usage
Write the name as **Master CSS**, as in “Built with Master CSS” or “Powered by Master CSS”. Do not write it as `mastercss`, `MASTERcss` or `CSSMaster`.