Komorebi Design System

gpt-mcp-server 全ツール共通のデザインガイドライン

Copied!
01 / Color Palette
カラーパレット
Primary
#6E87B6
CTA·リンク·アクセント
Primary Dark
#5A74A3
ホバー·プレス
Primary Light
#9BB0D0
背景アクセント·ハイライト
Accent
#C4A55A
CTA·バッジ·ハイライト
Accent Dark
#B0923E
ホバー·プレス
Accent Light
#E0D5A8
背景アクセント·バッジ背景
Success
#5CB85C
成功·完了
Warning
#F0AD4E
警告·注意
Danger
#D9534F
エラー·削除
Text Primary
#333333
本文テキスト
Text Secondary
#666666
補足·ラベル
Text Disabled
#AAAAAA
無効状態
Border
#E0E0E0
区切り線·枠線
Background
#F7F7F7
ページ背景
Surface
#FFFFFF
カード·モーダル
Chart Colors (PPTX / データ可視化用)
#6E87B6
#5A74A3
#9BB0D0
#333
#999
#D9534F
#5CB85C
#E8EDF5
#666
#D0DAE8
#AAA
#F7F7F7
02 / Typography
タイポグラフィ
size / weight / line-height / letter-spacing
Title-XL
48px / 700 / 1.3 / 0.05em
コモレビの光
Title-L
32px / 700 / 1.4 / 0.05em
デザインシステム Design System
Title-M
24px / 700 / 1.4 / 0.05em
セクション見出し Section Heading
Paragraph-L
16px / 400 / 1.6 / 0.05em.05em
本文テキストです。Plus Jakarta Sans と Noto Sans JP の組み合わせで、日本語と英語のバランスを取ります。Body text with Plus Jakarta Sans font for Latin characters.
Paragraph-M
12px / 400 / 1.6 / 0.05em.05em
補足テキスト·注釈。Caption and small text for secondary information.
font-family:
"Plus Jakarta Sans", "Noto Sans JP", sans-serif

monospace:
"SFMono-Regular", "Consolas", "Menlo", monospace

letter-spacing:
全体: 0.05em (見出し·本文共通)

line-height:
本文: 1.6 / 見出し: 1.3~1.4 / 長文: 1.7 まで可
03 / Components
コンポーネント
Buttons
border-radius: 6px · padding: 12px 24px · font-weight: 700
Button States
Default
Hover
Disabled
Loading
Inputs
height: 44px · border-radius: 6px · focus: #6E87B6
Cards

カードタイトル

カードコンポーネントの例です。白背景に軽い影とボーダーで浮き上がります。

border-radius: 8px · shadow: 0 1px 3px rgba(0,0,0,0.08)
Table
項目
Primary #6E87B6
Font Plus Jakarta Sans
Radius 6px
04 / Iconography
Material Icons

アイコンは Google Material Icons を使用。絵文字は使用禁止。

よく使うアイコン
homehome
searchsearch
settingssettings
deletedelete
editedit
addadd
closeclose
checkcheck
infoinfo
warningwarning
errorerror
helphelp
visibilityvisibility
visibility_offvisibility_off
file_downloadfile_download
file_uploadfile_upload
content_copycontent_copy
open_in_newopen_in_new
chevron_rightchevron_right
expand_moreexpand_more
menumenu
personperson
mailmail
notificationsnotifications
サイズ規定
settings 16px
settings 20px
settings 24px (標準)
settings 32px
settings 48px
使い方:
<span class="material-icons">icon_name</span>

CDN:
fonts.googleapis.com/icon?family=Material+Icons
05 / Motion & Transition
アニメーション

ホバーで各トランジションを確認できます。

Fast
150ms ease-out
ツールチップ、トグル、マイクロ操作
Normal
300ms cubic-bezier(0.4,0.4,0,1)
ボタン、カード、ホバー、フォーカス
Fade
200ms ease-in-out
表示/非表示、トースト、オーバーレイ
Expressive
500ms cubic-bezier(0.34,1.56,0.64,1)
成功フィードバック、強調演出
Do
  • UI フィードバックは 300ms 以下で完了させる
  • ease-out を基本に、操作の「結果」を素早く見せる
  • prefers-reduced-motion に対応する
Don't
  • 500ms を超えるトランジションを日常操作に使わない
  • linear イージングをUIに使わない (機械的に見える)
  • 同時に複数のアニメーションを重ねない
06 / Spacing
スペーシング
XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
64px
padding-top : L 24px L 24px カードタイトル M 16px 本文テキストが入ります。 コンテンツの説明文が続きます。 L 24px Primary S 8px Secondary padding-bottom : L 24px padding gap (要素間) inline gap (横並び)
07 / Depth & Elevation
シャドウ
Level 0
none
Level 1
0 1px 3px
rgba(0,0,0,0.08)
Level 2
0 4px 12px
rgba(0,0,0,0.1)
Level 3
0 8px 24px
rgba(0,0,0,0.12)
08 / Responsive
レスポンシブ
Mobile
Tablet
Desktop
区分 カラム 余白
Mobile ≤ 480px 1カラム 16px
Tablet 481 - 768px 1 - 2カラム 24px
Desktop > 768px 2カラム 24px
max-width: 1280px
タッチターゲット最小サイズ: 44px × 44px (WCAG基準)
09 / Dark Mode
ダークモード

カラートークン

#7B94C0
#D4BA6E
#E05550
#65C465

コンポーネント例

Primary
#7B94C0
Primary Light
#9AAFD5
Accent
#D4BA6E
Text
#E8E8F0
Text Secondary
#A0A0C0
Text Disabled
#606080
Background
#1A1A2E
Surface
#25253E
Border
#3A3A5C
Danger
#E05550
Warning
#F5BD5A
Success
#65C465
10 / Guidelines
Do's & Don'ts
Do
  • フォントは "Plus Jakarta Sans", "Noto Sans JP", sans-serif のフォールバックチェーンを指定
  • 本文の line-height / letter-spacing は Typography 規定に従う
  • 色のコントラスト比は WCAG AA 以上
  • 角丸は 6~8px で統一
  • ブランドカラーは水彩ブルー #6E87B6 を基調に
  • アイコンは Material Icons を使用する
Don't
  • font-family に和文フォント1つだけ指定しない
  • 日本語本文に line-height: 1.5 以下を使わない
  • テキストに純粋な #000000 を使わない (#333333 を使う)
  • Primary カラーをエラーの意味で使わない
  • border-radius: 50% のような極端な値にしない
  • 絵文字をUIに使わない (Material Icons を使う)
11 / JP Formatting
日本語テキスト整形ルール

全てのテキスト出力 (会話·ドキュメント·メール·レポート·スライド等) に適用する約物ルール。

対象 Before After
中黒 新機能・改善点 新機能·改善点
スラッシュ A/B A / B
括弧 報告(2026年) 報告 (2026年)
コロン ステータス:完了 ステータス : 完了
ダブルクォート 結果は"良好"です 結果は "良好" です
句点 完了です。次に進みます。 完了です。
次に進みます。
変換例:

新機能・改善点/バグ修正についての報告(2026年4月)ステータス:完了。結果は"良好"です。

新機能·改善点 / バグ修正についての報告 (2026年4月) ステータス : 完了。
結果は "良好" です。