リソース

Master CSSのブランド

Master CSSのマーク、金色、書体、言葉づかい。元のアートワークと使用規則を紹介します。

このページの内容

マークの周囲には、その高さの半分の余白を確保します。

#アイデンティティ

Master CSS は、開発者と AI エージェントのための、マークアップ駆動の CSS オーケストレーション言語です。アイデンティティも製品と同じ約束を示します。判断は明確に、関係は読み取れる形にし、細部をつなぎます。

明快さを前面に。 作業が主役です。文字、コード、データには、それぞれ明確な居場所を設けます。
読めるシステム。 共通の値、一定のリズム、意図した状態で各部をつなぎます。
精密さに温かさを。 構造はニュートラルに保ち、金色を小さく識別しやすい温かさとして添えます。

このページではマーク、金色、書体、言葉づかいを定義します。デザインシステムは、それらを素材、操作部品、レイアウト、動きとしてインターフェースへ展開します。

#ロゴ

M のマークと横組みロゴタイプがシグネチャーです。狭い場所ではマーク単独を使い、名前を読んでもらう場所ではロゴタイプで Master CSS を紹介します。いずれも承認済みの Master ブランドアイデンティティ v2 のアートワークを使い、明るい背景用と暗い背景用を用意しています。

横組みロゴタイプ

x はワードマークの x ハイトで、マークの高さは1.3xです。シグネチャー全体の周囲に1xの余白を残します。

アートワーク	SVG キャンバス	最小サイズ	クリアスペース
マーク	`216.6 × 120`	高さ24px	マークの高さの半分
小型マーク	`216.6 × 120`	高さ16px以上24px未満	マークの高さの半分
横組みロゴタイプ	`1197.53 × 130.26`	高さ16px、印刷では幅25mm	ワードマークのxハイト1つ分
立体アートワーク	—	マークの高さ64px以上	フラット版と同じ

最小サイズ

実際の CSS ピクセルで表示

小型マーク · 16px

マーク · 24px

ロゴタイプ · 16px

実際に使うサイズでアートワークを確認してください。

提供されたアートワークを使い、比率を保ち、背景に合うバージョンを選びます。

描き直し、引き伸ばし、回転、色の変更、効果の追加を行わず、文字や端をクリアスペースに入れないでください。

#色

金色でブランドを示し、周囲のインターフェースはニュートラルに保ちます。各画面に金色の焦点を1つ設けます。マークや重要な操作の隣の小さなシグナルなどです。状態の意味と読みやすさは言葉で伝えます。

明るい背景のマーク#FDE2A7 → #E6B65D

暗い背景のマーク#FCDD98 → #E6B65D

シグナル--color-amber-40

マークのグラデーションはアートワークの一部です。インターフェースの金色にはプリセットの amber ファミリーを使います。

両バージョンのマークは、シャンパン色から金色への連続した縦方向のグラデーションと、柔らかな翼状の陰影を共有します。提供された SVG のすべての停止点を保ってください。ニュートラルな役割、素材、状態色はデザインシステム、完全なパレットは色のリファレンスが管理します。

#タイポグラフィ

インターフェースとラテン文字には Geist、繁体字中国語には Noto Sans TC、コード、識別子、桁をそろえる数字には IBM Plex Mono を使います。書体が使えない場合はシステムの sans-serif または monospace にフォールバックします。

Geistインターフェースとラテン文字

Noto Sans TC繁体字中国語

IBM Plex Monoコード、識別子、桁をそろえる数字

中国語の字間は自然に保ち、変化したり桁をそろえたりする値には等幅数字を使います。長い見出しは縮小せず折り返します。文字サイズのスケールはテキストのリファレンスにあります。

#言葉づかい

思慮深い協力者として書きます。読者のタスクから始め、対象を正確に名付け、結果を平易な言葉で説明します。主張は製品が実証できる範囲に保ちます。

場面	明快で役に立つ表現	避ける表現
製品の紹介	class 名とデザイントークンでマークアップにスタイルを書く。	究極で革命的なスタイリング体験。
操作の案内	色の変数をコピーします。	パレットの可能性を最大限に解き放つ。
結果の説明	`var(--color-amber-40)` をコピーしました。	成功！すべて準備完了です。
繁体字中国語での記述	在標記中編寫樣式，使用共用的設計 tokens。	透過極致創新的方案，全面賦能設計體驗。

見出しは文頭だけを大文字にする sentence case を使い、本文では「Master CSS」と表記します。英語と繁体字中国語は同じ意味を伝え、API 名と class 文字列は変更しません。メッセージには起きたことと、必要に応じて次の有用な操作を示します。

#ダウンロード

記事、動画、ドキュメント、インテグレーションのページでロゴタイプとマークを使えます。各ファイルは背景が透明な SVG です。背景に合うバージョンを選び、比率を保ってください。

#ロゴタイプ

暗い背景用ロゴタイプ

明るい文字とシャンパン色から金色へ変化するマーク。

SVGSVG をダウンロード

明るい背景用ロゴタイプ

暗い文字とシャンパン色から金色へ変化するマーク。

SVGSVG をダウンロード

#マーク

暗い背景用マーク

高さ24px以上向けの標準フラットマーク。

SVGSVG をダウンロード

明るい背景用マーク

高さ24px以上向けの標準フラットマーク。

SVGSVG をダウンロード

暗い背景用小型マーク

高さ16px以上24px未満向けに隙間を広げたマーク。

SVGSVG をダウンロード

明るい背景用小型マーク

高さ16px以上24px未満向けに隙間を広げたマーク。

SVGSVG をダウンロード

完全なキットには縦組みシグネチャー、ワードマーク、単色・立体アートワーク、PNG 出力、アイコン、ソーシャル画像、使用上の注意、ソースマニフェストを含みます。執筆ツールと AI エージェントはこのページを Markdown として読めます。

ブランドキットをダウンロード（ZIP）アセットのマニフェスト

#商標ポリシー

「Master CSS」、Master CSS ロゴ、関連するマークは Aoyue Design が所有する商標です。これらはプロジェクトとコミュニティを表します。以下に従って使用してください。

#許可されること

教育コンテンツ、ブログ記事、チュートリアル、オープンソースツールで「Master CSS」に言及する。
プロジェクトを「built with Master CSS」「powered by Master CSS」「compatible with Master CSS」と説明する。
ブログ記事、動画、インターフェースのモックアップ、プラグインのドキュメントにロゴを表示する、または Master CSS との統合や対応を示すために表示する。
元の縦横比を保ってロゴを拡大・縮小する。

#許可されないこと

mastercss-tools.io や Master CSS UI のように、製品名、ドメイン名、会社名へ「Master CSS」やロゴを使う。
正式な提携がないのに、プロジェクトを公式または公認として示す。
書面による同意なく、Tシャツやステッカーなどを販売したり、商品にロゴを付けたりする。
ロゴの色、形、向きを変更したり、影、グラデーション、その他の視覚効果を加えたりする。
自身のロゴや製品アイデンティティの一部として使う。

#名前の表記

名前は Master CSS と書き、「Built with Master CSS」「Powered by Master CSS」のように使います。mastercss、MASTERcss、CSSMaster とは表記しないでください。