Brand & Design
Plangers
Brand & Design Guideline
Apple風ライト基調 ＋ 隣接色配色（Teal → Indigo → Purple）。 白を基調にしたクリーンなニュートラル＋ティールがコーポレートのメイン。 派手さより一貫性で、AI Native の知的さを表現する。
正本: ~/company/00_ceo/30_cbo/brand-colors.md
本ページは正本のビジュアル化。差異がある場合は正本に従う。
01 — Foundation
基本思想
透明性・モダン感・知的さ・一貫性。スタートアップのニュアンスを Apple 風の落ち着きで表現する。
| 白を基調 | 情報の透明性・ニュートラル・モダン感を担保。背景の95%は white / surface。 |
| ティールがメインカラー | Plangers Teal #39B1B1 は唯一無二の識別色。コーポレート＋Odyssey と共有。 |
| 隣接色配色 | Teal (180°) → Indigo (240°) → Purple (270°) の色相環隣接で知的・テック・統一感。 |
| 派手さより一貫性 | Stripe / Linear / Vercel 路線。アクセントは抑制的に、機能色は別レイヤー。 |
02 — Color Palette
カラーパレット
3軸のブランドカラー＋ニュートラル＋機能色＋プロダクト独立色の4階層。
Primary（メインカラー）
Accent（プロダクト2軸）
Neutral（基調色）
Slate（Neutral 拡張・ブルーグレー）
Functional（機能色・別レイヤー）
Product（独立色・該当プロダクト紹介時のみ）
03 — Tone Matrix
背景トーン × 文字色マトリクス
背景色のトーンによって文字色を必ず対応させる。濃色背景に黒字・淡色背景に白字 等の組み合わせは禁止。
| 背景トーン | 該当背景 | 見出し | 本文 | プライマリボタン | セカンダリボタン |
|---|---|---|---|---|---|
| ライト基調 （基本） |
white / surface / hero-gradient-* |
text-primary |
text-secondary |
bg-accent + text-white |
border-main/20 + text-main |
| アクセント基調 （局所） |
bg-accent / -bf / -nanimono |
text-white |
text-white/80 |
bg-white + text-accent |
border-white/30 + text-white |
| 暗色基調 （限定） |
slate-dark / Footer |
text-white |
text-white/70 |
bg-accent + text-white |
border-white/20 + text-white |
04 — Typography
タイポグラフィ
Apple のシステムフォントを起点に、和文との合成で読みやすさを確保。
| Font Family | -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif |
| h1 | clamp(2rem, 6vw, 4.5rem) / weight 600 / letter-spacing -0.03em / line-height 1.08 |
| h2 | clamp(1.3rem, 3vw, 2.2rem) / weight 600 / letter-spacing -0.02em |
| h3 | 0.95rem / weight 600 |
| 本文 | 0.9rem / weight 400 / line-height 1.85 |
| Eyebrow | 10px / letter-spacing 0.18em / uppercase / muted |
05 — Slide-style Rules
スライド風 カラー使用ルール
原則: 本文はモノトーン基調。強調・対比・状況のみブランド色／機能色を使う。
4軸の役割分担
| 軸 | 色 | 役割 | 主な用途 |
|---|---|---|---|
| 主役 | Plangers Teal | コーポレート最重要 | コア数字 · メインメッセージ · Odyssey |
| 副次 | Brainforce Indigo | AI・技術レイヤー | BF関連 · 技術トピック |
| 第三 | Nanimono Purple | プロダクト第3軸 | Nanimono · ユーザー体験 |
| 状況 | Emerald / Sky / Amber / Red | 達成 / 計画 / 警告 / 否定 | KPI · ステータスバッジ |
使用量の目安
06 — Components
提供 utility class
shared.css で定義済み。各ピッチの HTML で class="..." として直接使える。
KPI · 大きな数字の強調
Callout · スライド風の強調ブロック
主役（accent）: メインメッセージ・コア主張。.callout-accent
副次（bf）: Brainforce・技術レイヤーの説明。.callout-bf
第三（nanimono）: Nanimono関連の主張。.callout-nanimono
データ・実績: 達成済の根拠を示す。.callout-data
計画・Future: 今後の予定や仮説。.callout-future
注意・リスク: 警告すべきこと。.callout-warning
Tag · ステータス・分類バッジ
Eyebrow · セクション小見出し
01 — Coverage
主役色のEyebrow
02 — Architecture
BFアクセントのEyebrow
03 — Experience
Nanimonoアクセントのeyebrow
Inline · 見出し内の重要語強調
100億人の「なぜ」を知る会社を作っている。
Brainforceで経営の言葉を直接プロダクトに。
Nanimonoは自分すら知らなかった自分を返す。
07 — Patterns
推奨パターン
3軸プロダクト比較（同時使用 OK）
Odyssey
個人理解基盤
全プロダクト共通のAI知能基盤
Brainforce
AI開発基盤
経営の言葉を直接プロダクトに
Nanimono
自己発見SNS
「自分すら知らなかった自分」を返す
ステータス + 数字（Live/Future の対比）
v1.8.3
Brainforce 融資デモMVP完成。BYOK対応済み。
v2.0
Stripe決済 + GitHub App Token移行 + Firebase BYOK実運用。
08 — Don'ts
禁止事項
逆効果になりがちなパターン。これだけは避ける。
- 暗色グラデーション（純黒・濃紺）背景にコーポレートテキストを乗せる。投資家ピッチや Slate Dark の意図的なプレミアム表現以外では使わない。
- アクセント色（Teal/Indigo/Purple）を3色同時に多用する。比較・対比文脈以外で並べると視覚ノイズになる。
- 機能色（Emerald/Sky/Amber/Red）を装飾目的で使う。意味（Live・計画・警告・否定）が崩れる。
- 濃色背景に黒字、淡色背景に白字。トーンマトリクスを必ず守る。
- プロダクト独立色（E2Estate/Lewing/Anacity）を該当プロダクト紹介以外で使う。
- ロゴカラー（Brand Main
#535353）を本文テキスト色に使う。本文は#1D1D1F。 - Tailwind の素
blue-*/purple-*/teal-*クラスを使う。必ずbrand-accent/brand-accent-bf/brand-accent-nanimono経由で。
Theme System
Brainforce Phase A との連動
Brainforce の機能拡張ロードマップ Phase A（v2.0・デザインカスタマイズ）では、ユーザー指定のテーマカラーと画像から自動でプロダクトを構成する機能を提供する。本ガイドラインの**カラー設計思想とトーン定義は、その実装の規範**として機能する。
| Brainforce Phase A 機能 | 本ガイドラインとの連動 |
|---|---|
| テーマカラー指定 | ユーザー HEX 入力 → 補色 / 明度バリエーション自動生成。本ガイドラインの「メイン + アクセント 2 色」構造を踏襲し、Plangers 自身のブランド体系を「再現可能な設計」として外販する。 |
| 画像アセット連動 | ロゴ / Hero 画像のアップ → 自動配置。本ガイドラインの「角丸スクエア + 中央シンボル」のロゴフォーマットをデフォルトテンプレに採用。 |
| デザイントーンプリセット | Apple風 / Linear風 / Stripe風 等のプリセット選択。本ガイドラインの「Apple風ライト基調」を「Plangers プリセット」として 1 つに含める。 |
| トーンマトリクス強制 | 背景 × 文字色の自動チェック。本ガイドライン 3-3 トーンマトリクス をルール DB 化し、生成プロダクトに自動適用。 |
意義: Plangers のブランド構築過程が、そのまま Brainforce 顧客への提供価値になる。「Plangers が自社で実証したデザインシステムを、ユーザーがコマンド 1 つで再現できる」状態を作る。
09 — Logos
ロゴマーク
4 ブランドのマーク。角丸スクエア + 中央シンボルのフォーマットで統一。各シンボルがプロダクトのコア概念を象徴する。
サイズ展開・余白
| 最小サイズ | 16×16px（Favicon）まで縮小可。シンプル設計のため小サイズでも識別可能 |
| セーフエリア | マーク周囲にマーク 1/8 以上の余白を確保 |
| 背景色 | 白 or BG Soft（#F5F5F7）が基本。マーク色の上にロゴを重ねない |
| テキスト併用 | マーク + テキスト（プロダクト名）の組み合わせ可。テキストフォントは SF Pro Display Bold / weight 700-800 |
ロゴ表示テキスト例（Mark + Text）
Plangers
Brainforce
Odyssey
Nanimono
暫定運用: BF / Odyssey / Nanimono の3マークは v1 で内部 SVG で暫定実装。プロデザイナー外注時の brief（方向性参照）として機能する。本格採用前に CEO + CBO の最終承認を経る。
10 — Reference
実装ファイル
| 正本（Markdown） | ~/company/00_ceo/30_cbo/brand-colors.md | カラー定義の唯一の真実。変更時は CBO 起案 → CEO 承認 |
| コーポレートサイト | ~/corporate-site/src/app/globals.css | Next.js Tailwind brand-* 変数定義 |
| Docs / ピッチ | ~/corporate-site/pitch/shared.css | 本ガイドラインの実装。--accent / --accent-bf / --accent-nanimono + utility |
| 本ガイドライン | ~/corporate-site/pitch/pitches/plangers-brand-design-2026-05/ | 正本のビジュアル化。仕様書ではなく適用例 |