# DESIGN.md — MOSH > MOSH（https://mosh.jp/）のデザイン仕様書。 > クリエイター向けサービス販売プラットフォーム。 > 実サイトの computed style と CSS Custom Properties（Tailwind CSS v4 + shadcn 系トークン）に基づく。 --- ## 1. Visual Theme & Atmosphere - **デザイン方針**: コーラルレッドのブランドアクセント＋ニュートラルなグレースケールで、温かさと現代的な明るさを両立。情熱（"情熱がめぐる経済をつくる"）をテーマにしたクリエイターエコノミー文脈 - **密度**: ゆとりのあるヒーロー領域。本文・ナビは Tailwind 標準スケール（16px / line-height 1.5）でコンパクト - **キーワード**: 温かい、軽やか、IBM Plex JP の整った字面、コーラルレッドのアクセント、SaaS らしいクリーンさ - **特徴**: - 大数字（`90,000`、ステータス表示）に欧文ディスプレイ書体 **degular** を `font-weight: 100〜200`（hairline / extralight）で使い、軽やかで未来的な印象 - 見出しに `font-weight: 400`（regular）を使うことが多く、太字ベタ塗りの強い見出しは避ける - CTA は黒に近いグレー（`gray-900` ≒ `#111827`）の primaryButton。コーラルは"装飾としての色"として使い、押しは黒 - ダークモード非対応（実測時点では `prefers-color-scheme: dark` の切替なし） --- ## 2. Color Palette & Roles > CSS Custom Properties（`--token-*`, `--hue-*`）実測値。oklch は近似 hex を併記。 ### Primary（ブランドカラー） - **Brand 400** (`#fa6f78`): メインのコーラルレッド。`--hue-brand-400` / `--token-text-brand` / `--token-bg-brand` / `--token-border-brand` - **Brand Deep** (`#f2414c`): ヒーロー H2/H3 で使われる強めのレッド。`text-[#F2414C]` として直接指定（"集客の流れをつくる", "AI搭載のオールインワンプロダクト"） ### CTA（プライマリボタンは黒系） - **Primary Button** (`#111827` ≒ `oklch(21% .034 264.665)` = `gray-900`): `--token-bg-primaryButton` / `--token-bg-button-enabled` - **Primary Button Hover** (`#374151` ≒ `gray-700`): `--token-bg-primaryButton-hover` - **Secondary Button** (`#ffffff`): `--token-bg-secondaryButton` - **Secondary Button Hover** (`#f3f4f6` ≒ `gray-100`): `--token-bg-secondaryButton-hover` ### Link - **Link Default** (`#2559eb`): `--hue-link-blue-600` / `--token-text-link` - **Link Hover** (`#6088fa`): `--hue-link-blue-400` / `--token-text-link-hover` ### Semantic（意味的な色） - **Info** (`#0369a1`): `--hue-info-blue-700` / `--token-text-info` - **Success** (`#15803d`): `--hue-success-green-700` / `--token-text-success` - **Warning** (`#ae4f0f`): `--hue-warning-yellow-700` / `--token-text-warning` - **Danger** (`#d92500`): `--hue-danger-orange-700` / `--token-text-danger` ### Neutral — Gray Scale（Tailwind v4 `gray-*`） | Token | oklch | 近似 hex | 役割 | |-------|-------|----------|------| | gray-100 | `oklch(96.7% .003 264.542)` | `#f3f4f6` | 薄い面 | | gray-200 | `oklch(92.8% .006 264.531)` | `#e5e7eb` | `--token-border-default` | | gray-300 | `oklch(87.2% .01 258.338)` | `#d1d5db` | `--token-text-disabled` | | gray-400 | `oklch(70.7% .022 261.325)` | `#9ca3af` | `--token-text-placeholder` | | gray-600 | `oklch(44.6% .03 256.802)` | `#4b5563` | `--token-text-helper` | | gray-700 | `oklch(37.3% .034 259.733)` | `#374151` | primaryButton-hover | | gray-900 | `oklch(21% .034 264.665)` | `#111827` | `--token-text-primary` / `--token-border-focused` / primaryButton | ### Text - **Text Primary** (`#111827` = gray-900): 本文・見出しのデフォルト - **Body Text** (`#09090b` = zinc-950): `

` などで実測される濃いグレー（Tailwind の `text-foreground` 既定相当） - **Text Helper** (`#4b5563`): 補足テキスト - **Text Placeholder** (`#9ca3af`): プレースホルダー - **Text Disabled** (`#d1d5db`): 無効状態 - **Text Invert** (`#ffffff`): 暗背景上の白テキスト - **Text Brand** (`#fa6f78`): コーラル文字 ### Surface & Borders - **BG UI** (`#ffffff`): `--token-bg-ui`、ページ／ヘッダ／カード背景 - **BG Surface** (`#1118270a`): `--token-bg-surface` = `gray-900` の 4% 透過。チップやサーフェス用の薄いグレー面 - **BG Brand** (`#fa6f78`): コーラル面（バッジ、強調帯） - **Border Default** (`#e5e7eb`): 標準ボーダー - **Border Brand** (`#fa6f78`): ブランド色ボーダー - **Border Focused** (`#111827`): フォーカスリング（黒に近いグレー） --- ## 3. Typography Rules ### 3.1 和文フォント - **本文・見出し**: **IBM Plex Sans JP**（Web フォント、`