🎨 デザインシステム

「バスケしようよ！」のデザイントークン（色、タイポグラフィ、スペーシング等）の定義です。

ブランドアイデンティティ

コンセプト

●スポーティ: バスケットボールの躍動感
●アクティブ: 行動を促すデザイン
●親しみやすい: 初心者でも気軽に参加できる雰囲気
●信頼感: 安心してコミュニティに参加できる

ブランドカラー由来

オレンジ: バスケットボールの色、エネルギー、情熱
ブルー: 信頼感、コート、チームワーク

カラーパレット

Primary（メインカラー）- オレンジ系

primary-50

#FFF7ED

背景（薄い）

primary-100

#FFEDD5

ホバー状態の背景

primary-200

#FED7AA

ボーダー

primary-300

#FDBA74

アイコン（非アクティブ）

primary-400

#FB923C

アイコン

primary-500

#F97316

メインカラー

primary-600

#EA580C

ホバー状態

primary-700

#C2410C

アクティブ状態

primary-800

#9A3412

テキスト（強調）

primary-900

#7C2D12

テキスト（最強調）

Secondary（補助カラー）- ブルー系

secondary-50

#EFF6FF

情報背景

secondary-100

#DBEAFE

タグ背景

secondary-200

#BFDBFE

ボーダー

secondary-300

#93C5FD

アイコン（非アクティブ）

secondary-400

#60A5FA

アイコン

secondary-500

#3B82F6

リンク

secondary-600

#2563EB

リンクホバー

secondary-700

#1D4ED8

アクティブ

secondary-800

#1E40AF

テキスト（強調）

secondary-900

#1E3A8A

テキスト（最強調）

Neutral（グレースケール）

gray-50

#F9FAFB

ページ背景

gray-100

#F3F4F6

カード背景

gray-200

#E5E7EB

ボーダー

gray-300

#D1D5DB

プレースホルダー

gray-400

#9CA3AF

補足テキスト

gray-500

#6B7280

セカンダリテキスト

gray-600

#4B5563

ボディテキスト

gray-700

#374151

見出し

gray-800

#1F2937

強調テキスト

gray-900

#111827

最強調テキスト

Status（ステータスカラー）- カスタム定義

success-50

#ECFDF5

成功背景

success-100

#D1FAE5

成功背景（強調）

success-500

#22C55E

成功

success-600

#16A34A

成功ホバー

success-700

#15803D

成功テキスト

warning-50

#FFFBEB

警告背景

warning-100

#FEF3C7

警告背景（強調）

warning-500

#F59E0B

警告

warning-600

#D97706

警告ホバー

warning-700

#B45309

警告テキスト

error-50

#FEF2F2

エラー背景

error-100

#FEE2E2

エラー背景（強調）

error-500

#EF4444

エラー

error-600

#DC2626

エラーホバー

error-700

#B91C1C

エラーテキスト

カラー適用ルール

Primary カラーの使い分けを統一し、ブランドの一貫性を保つためのガイドラインです。

Primary（オレンジ）の用途

用途	シェード	例
CTA ボタン	primary-500	「参加を申請する」「募集作成」
CTA ホバー	primary-600	ボタンホバー時
テキストリンク	primary-600	「すべて表示 →」等のリンク
アクティブタブ	primary-500	BottomNav の選択中アイコン
バッジ背景	primary-50 / 100	レベルタグ、カテゴリタグ
バッジテキスト	primary-700	タグ内テキスト
選択状態ボーダー	primary-500	レベル選択の選択中ボタン
強調背景	primary-50	ハイライトカード、通知未読

避けるべきパターン

✗Primary をテキスト本文に使わない（リンク・強調のみ）

✗同一画面で primary-500 と primary-400 のボタンを混在させない

✗Ghost ボタンに primary 背景を使わない（テキストカラーのみ）

✗ステータス表示（成功・エラー等）に Primary を使わない → Status カラーを使用

Feedback（画面内フィードバック）- Tailwindデフォルト

デザインプレビューでは、上記のカスタムステータスカラーに加えて、以下のTailwindデフォルトカラーもインラインで使用しています。

red-*

削除、エラー表示、危険操作

green-*

オンライン状態、アクティブ表示

blue-*

情報バナー、リンク

yellow-*

注意、警告バナー

タイポグラフィ

フォントファミリー

font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;

フォントサイズ

xs (12px)キャプション、補足テキスト

sm (14px)補助テキスト、ラベル

base (16px)本文（デフォルト）

lg (18px)リード文

xl (20px)小見出し（h4）

2xl (24px)中見出し（h3）

3xl (30px)大見出し（h2）

4xl (36px)ページタイトル（h1）

フォントウェイト

normal (400) - 本文

medium (500) - 強調テキスト、ラベル

semibold (600) - 小見出し、ボタン

bold (700) - 見出し

スペーシング

4pxを基準単位（rem換算で0.25rem）

4px

テキスト間

8px

アイコンとテキストの間

12px

要素内パディング（小）

16px

要素内パディング（標準）

20px

カード内パディング

24px

セクション間

32px

大きなセクション間

40px

ページ上下余白

48px

大きな余白

64px

ヒーローセクション

角丸・シャドウ

Border Radius

sm (4px)

タグ、バッジ

md (8px)

ボタン、入力

lg (12px)

カード

xl (16px)

モーダル

full (9999px)

アバター、ピル

Shadow

小さい要素

DEFAULT

カード

ホバー状態

モーダル

ドロップダウン

ブレークポイント

モバイルファースト: デフォルトはモバイル向け、上記で上書き

名前	幅	用途
sm	640px	大きめのモバイル
md	768px	タブレット
lg	1024px	小さいデスクトップ
xl	1280px	デスクトップ
2xl	1536px	大きいデスクトップ

アイコン

使用アイコンセット: Lucide Icons または Heroicons

📅

Calendar

日付

📍

MapPin

場所

👥

Users

人数

⭐

Star

レベル

💰

Coins

参加費

💬

Message

メッセージ

🔍

検索

➕

Plus

追加/作成

→

ChevronRight

詳細へ

👤

User

プロフィール

🏠

Home

ホーム

🔔

Bell

通知