Brand

ビジュアルアイデンティティの基準。世界観・ロゴ・色・書体・余白の使い方

理念

1 つの製品で 2 つの表情を持つデュアルモードブランド

広告運用の深夜の集中作業と日中の長時間業務、その両方に最適な佇まいを ライト/ダークそれぞれで実装します。

Dark — AI ツールの刷新感

純黒の背景にネオングリーンを差し色に置く、Cursor / Vercel / Linear 系統。 AI ツールらしい鋭さと、夜間の集中作業に適した深いコントラスト。

Light — 広告ツールの安心感

紙のような暖色寄りのオフホワイトに、落ち着いた green-600 アクセント。 日中の長時間作業に耐える可読性と、業務ツールとしての信頼感。

  • 両モード共通 — 装飾より情報密度を優先、視覚的ノイズを排除
  • 静かな信頼感 — アニメーションは控えめ、無音で破壊操作はしない
  • 日本語ファースト — 日本語 SaaS として読みやすい組版
  • 派手なグラデーション・ドロップシャドウ・絵文字は使わない

カラー

ブランドアクセントは「主要アクション + 活性状態」だけに使う

Aa
bg-accentライム塗り（Btn primary, Switch on, Badge accent）
Aa
text-accent-textアクセント文字/線（ライト時オリーブに自動切替）
Aa
bg-bg-0ページ背景
Aa
bg-bg-1カード/Input

アクセント抑制

ネオングリーンは 1 画面につきプライマリボタン 1 つを原則とします。 多用するとブランドの「静けさ」が壊れます。詳細トークンは Tokens。

タイポグラフィ

本文は Noto Sans JP、コードと数値は JetBrains Mono

Noto Sans JP — UI 全般

広告運用を、もっと自由に。

日本語 SaaS として、可読性と情報密度を両立させる和文ゴシック。タイトルから本文まで全てこの書体で組みます。

JetBrains Mono — コード/数値/識別子

deploy.id = 7f3a9b · ¥4,800 / month · 99.98%

アイコン

lucide-react に統一。線で描かれた均質なセット

14
16
20
  • • 標準サイズは 14px（ボタン / リスト / バッジ）
  • • stroke-width はライブラリ既定（1.5）から変更しない
  • • カラーは text-fg-2 / text-fg-3 が既定。意味があるとき限り status トークン
  • • 絵文字 🎉 や独自 SVG アイコンは混在禁止

スペーシング

すべて 4px の倍数。任意のピクセル指定は禁止

p-14px
p-28px
p-312px
p-416px
p-624px
p-832px
className="p-3"
className="p-[13px]"