Master CSS brand
The Master CSS mark, gold, typefaces and voice, with the original artwork and the rules for using it.
On this page
#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 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
| 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 · 16pxMark · 24pxLogotype · 16pxUse the supplied artwork, keep its proportions and choose the version made for its background.
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.
#FDE2A7 → #E6B65D#FCDD98 → #E6B65D--color-amber-40Both 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, and the complete palette to the color reference.
#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.
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.
#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.
Logotype for light backgrounds
Dark lettering with the champagne-to-gold mark.
#Mark
Mark for dark backgrounds
Standard flat mark, for heights of 24px and above.
Mark for light backgrounds
Standard flat mark, for heights of 24px and above.
Small mark for dark backgrounds
Wider gaps for heights from 16px to below 24px.
Small mark for light backgrounds
Wider gaps for heights from 16px to below 24px.
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.
Download the brand kit (ZIP)Asset manifest
#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.ioorMaster 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.