EchoPM ブランドガイドライン
マーケティング、製品、パートナー資料のためのロゴ、色、タイポグラフィ、および使用ルール。アセットを直接ダウンロードするか、コード内の共有デザイントークンを参照してください。
ブランドキットデザイン：Anymark · 2026年6月
概要
EchoPM のビジュアルアイデンティティは、落ち着いた緑のパレット、Figtree タイポグラフィ、およびコンパスワードマークに中心を置いています。これらのガイドラインを使用して、プレゼンテーション、キャンペーン、および共同ブランド資料を echopm.app の製品体験と一貫性を持たせてください。
色
プライマリートークンはほとんどの表面をカバーする必要があります。拡張シェードはホバーステート、ティント、および強調をサポートします。
プライマリートークン
プライマリー (#3D7C62) は CTA、アクティブステート、および重要なブランドの瞬間に使用されます。ダーク (#1F2937) は本文テキストと強い UI クロームに使用されます。ホワイト (#FFFFFF) は背景とネガティブスペースに使用されます。
Primary
#3D7C62
primary
Dark
#1F2937
dark
White
#FFFFFF
white
Use with dark text
拡張パレット
100 (最も明るいティント) から 800 (最も暗い) までのシェードは、ホバーステート、区切り線、バッジ、および微妙な表面をサポートし、オフブランドの色合いを導入することなく使用できます。
800
#193329
color800
700
#2A5544
color700
600
#3B785F
color600
500
#3D7C62
color500
400
#65B393
color400
300
#87C4AB
color300
Use with dark text
200
#AAD5C3
color200
Use with dark text
100
#CCE6DB
color100
Use with dark text
テキスト/背景のペアリングを出荷する前に、WCAG AA コントラスト (4.5:1) を確認してください。プライマリグリーンは機能的なアクセントのために予約し、装飾的なフィルには使用しないでください。
タイポグラフィ
Figtree はマーケティングと製品全体での主要なフォントです - EchoPM ワードマークと一致します。Geist Mono はコードと技術ラベル用に予約されています。
サン / UI
賃貸をシンプルかつ効率的に
Figtree — 本文、ナビゲーション、フォーム、および一般的な UI。
ディスプレイ / 見出し
プロパティオペレーション、整列
Figtree via font-serif — セクション見出しとマーケティングディスプレイタイプ。
モノスペース
ECHOPM_BRAND.primary · #3D7C62
Geist Mono — コードスニペット、トークン、および技術メタデータ。
やるべきこととやるべきでないこと
やるべきこと
- ターゲットがベクターグラフィックスをサポートしている場合は、SVGロゴを使用してください。
- 暗いまたは写真の背景には白いロゴを使用してください。
- ロゴの周りにアイコンの高さと同じかそれ以上のクリアスペースを確保してください。
- CTA、アクティブな状態、意図的なブランドの瞬間にはプライマリーグリーンを使用してください。
- 拡張パレットの色合いを組み合わせる際はコントラストを確認してください。
やるべきでないこと
- ロゴを回転、引き伸ばし、つぶしたり、歪めたりしないでください。
- ロゴにグラデーション、影、アウトライン、またはストロークを追加しないでください。
- このパレットの外でロゴの色を変更しないでください。
- 低コントラストまたは混雑した背景にロゴを配置しないでください。
- プライマリーグリーンを装飾的に使用しないでください。これは機能的なアクセントです。
ダウンロード
echopm.appから提供される本番用ファイル。右クリックまたは上のダウンロードボタンを使用してローカルに保存してください。
