IGNI7E Design Guidelines

## Color Rules — IGNITE Design System 色は必ずCSS変数を使用してください。カラーコードの直書きは禁止です。 ### 1. Primary（メインカラー） --color-primary: #1855AF（基準色） 段階: --color-primary-50〜--color-primary-900 ホバー: -600 / アクティブ: -700 / 背景薄: -50, -100 ### 2. Dark Navy（テキスト・ダーク背景） --color-dark-navy: #08214D 段階: --color-dark-navy-50〜--color-dark-navy-900 ### 3. Semantic Colors（状態表示） --color-success: #53BF71（成功） --color-warning: #FCB01D（警告） --color-error: #FE4242（エラー） --color-info: #48C0F0（情報） ### 4. Accent Colors（アクセント） --color-accent-blue: #4353FF --color-orange: #FCB01D --color-light-blue: #48C0F0 ### 5. UI Colors（ボーダー・背景） --color-card-border: #D1D8E3 --color-input-border: #D1D8E3 --color-section-divider: #D1D8E3 ### ✅ Do color: var(--color-primary); background: var(--color-primary-50); border-color: var(--color-card-border); ### ❌ Don't color: #1855AF; ← 変数を使え color: blue; ← 未定義色禁止 background: #f0f0f0; ← 変数にない色禁止

## Typography Rules — IGNITE Design System このプロジェクトではデザインシステムで定義済みのフォント・サイズ・クラスのみ使用してください。 独自にfont-family, font-size, font-weight, line-heightをCSSで定義することは禁止です。 --- ### 1. フォント（この2つ以外は使用禁止） --font-heading: system-ui, sans-serif → 見出し・ラベル・ナビ --font-body: system-ui, sans-serif → 本文・説明文・UI ### 2. 見出し — 必ず heading-style-h* クラスを使うこと | クラス | size | weight | line-height | |---|---|---|---| | heading-style-h1 | 64px | 700 | 1.3 | | heading-style-h2 | 48px | 700 | 1.3 | | heading-style-h3 | 40px | 700 | 1.3 | | heading-style-h4 | 32px | 700 | 1.3 | | heading-style-h5 | 24px | 700 | 1.3 | | heading-style-h6 | 20px | 700 | 1.3 | ※ heading-style-h* はスタイルクラスでありHTMLタグとは独立。 <h3 class="heading-style-h5"> のようにタグとサイズを分離して使う。 ### 3. 本文テキスト - 通常本文: font-size 14px〜16px / font-weight 400〜500 / line-height 1.5〜1.8 - カード内 .card-description: 16px / 500 / line-height 1.5 - カード内 .card-title: 18px / 800（固定。変更禁止） ### 4. font-weight 制限 最大値は 800。font-weight: 900 は絶対に使用禁止。 許可されるweight: 400, 500, 600, 700, 800 --- ### ✅ Do（正しい書き方） <h2 class="heading-style-h2">ページタイトル</h2> <h3 class="heading-style-h5">カードの見出し</h3> <p class="card-description">説明文</p> ### ❌ Don't（禁止パターン） <h2 style="font-size:36px;font-weight:900;"> ← インラインスタイル禁止、fw900禁止 <div style="font-family:Inter;"> ← 未許可フォント禁止 .my-title { font-size: 28px; } ← 独自サイズの定義禁止 <h2 class="heading-style-h2" style="font-size:40px;"> ← クラスの上書き禁止

## Shadow & Radius Rules — IGNITE Design System 角丸とシャドウは必ずCSS変数を使用してください。数値の直書きは禁止です。 ### 1. Border Radius | 変数 | 値 | 用途 | |---|---|---| | --radius-tiny | 4px | input, ラベル, 画像 | | --radius-sm | 8px | カード, アコーディオン, icon-box | | --radius-lg | 16px | 大きめのコンテナ | | --radius-md | 24px | 特殊な装飾要素 | | --radius-full | 100px | ステータスラベル, アバター | ### 2. Box Shadow | 変数 | 値 | |---|---| | --shadow-sm | 0 4px 8px rgba(8, 33, 77, 0.06) | | --shadow-md | 0 12px 8px rgba(8, 33, 77, 0.06) | | --shadow-lg | 0 16px 24px rgba(8, 33, 77, 0.1) | | --shadow-xl | 0 24px 32px rgba(8, 33, 77, 0.1) | ※ カードにbox-shadowは使用しない（現在全カードのshadow削除済み） ### ✅ Do border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); ### ❌ Don't border-radius: 12px; ← 変数にない値禁止 border-radius: 10px; ← 変数を使え box-shadow: 0 2px 4px rgba(0,0,0,0.1); ← 変数を使え

## Button & Label Rules — IGNITE Design System ボタンとラベルは既存のクラスのみ使用してください。独自のボタンスタイルを定義しないでください。 ### 1. ボタン種類 | クラス | 用途 | |---|---| | .btn.btn-primary-default | メインCTA（青ベタ白文字） | | .btn.btn-secondary-default | サブCTA（ダークネイビー白文字） | | .btn.btn-outline-default | 控えめなCTA（青ボーダー透明背景） | | .btn.btn-send-default | フォーム送信専用 | | .btn.btn-text | テキストリンク（下線付き） | ### 2. ボタン構造 <a class="btn btn-primary-default" href="#">テキスト <i data-lucide="arrow-right"></i></a> - gapは8px（.btnに定義済み） - アイコンはLucide 16x16px - テキスト矢印（→）は使用禁止。必ずLucideアイコンを使う ### 3. Button Group（複数ボタンの配置） <div class="button-group is-left">...</div> 左寄せ <div class="button-group is-center">...</div> センター <div class="button-group is-right">...</div> 右寄せ ### 4. ラベル | クラス | 用途 | 角丸 | |---|---|---| | .label-tag.label-primary | ステータス（情報） | full（丸ピル） | | .label-tag.label-success | ステータス（成功） | full | | .label-tag.label-warning | ステータス（警告） | full | | .label-tag.label-error | ステータス（エラー） | full | | .label-tag.label-category | カテゴリ表示 | tiny（4px） | | .label-tag.label-category.is-dark | カテゴリ（黒） | tiny | | .label-tag.label-outline | アウトライン（青） | tiny | | .label-tag.label-outline.is-dark | アウトライン（黒） | tiny | ### 5. ラベル構造 <span class="label-tag label-category">SEO</span> <span class="label-tag label-category"><i data-lucide="search" style="width:14px;height:14px;"></i> SEO</span> ### ❌ Don't .my-button { background: blue; } ← 独自ボタン定義禁止 <button style="background:red;"> ← インラインスタイル禁止 テキスト → ← テキスト矢印禁止。Lucideアイコンを使え

## Card & Layout Rules — IGNITE Design System カードとレイアウトは既存のクラスのみ使用してください。 ### 1. カードベース .card のデフォルト: padding 20px / gap 8px / border-radius 8px / border 1px solid / background #FDFDFD ### 2. カードサイズ | クラス | padding | title | description | |---|---|---|---| | .card.is-small | 16px | 16px | 14px | | .card（デフォルト） | 20px | 18px | 16px | | .card.is-medium | 24px | 20px | 16px | | .card.is-large | 24px | 24px | 16px | ### 3. カードバリエーション <div class="card"> — デフォルト（縦並び） <div class="card is-horizontal"> — 横並び（icon-box + テキスト） <div class="card blog-card"> — ブログカード（padding 4px、画像付き） <div class="card case-study-card"> — 事例カード（ボーダーなし、背景透明） ### 4. カード内パーツ - .card-title: 18px / 800 / line-height 1.45（固定。変更禁止） - .card-description: 16px / 500 / line-height 1.5 - .icon-box: 48pxデフォルト。is-xxsmall〜is-large、is-ghostで展開 - .card-image: 横並び用 120x80px / .card-image.is-full: 縦並び用 100% 3:2比率 ### 5. レイアウトグリッド <div class="grid-2col"> — 2カラム（gap 16px） <div class="grid-3col"> — 3カラム（gap 16px） <div class="grid-4col"> — 4カラム（gap 16px） ### 6. セクション構造（必須） <section> <div class="padding-global"> <div class="container-large"> <div class="padding-section-large"> コンテンツ </div> </div> </div> </section> ### ✅ Do <div class="card"> <div class="card-title">タイトル</div> <div class="card-description">説明文</div> </div> <div class="card is-horizontal"> <div class="icon-box"><i data-lucide="globe"></i></div> <div class="icon-card-text"> <div class="card-title">タイトル</div> <div class="card-description">説明文</div> </div> </div> ### ❌ Don't <div class="my-card" style="padding:30px;border-radius:12px;"> ← 独自カード禁止 .card { padding: 32px; } ← .cardの上書き禁止 <div class="card" style="gap:24px;"> ← インラインでの上書き禁止