Deployment Guide

生成されたアセットのフロントエンド・フレームワークへの統合手順

0

Foundation with Palette Builder

プロジェクトの開始時は Palette Builder を使用します。ブランドのメインカラーを入力し、背景（70%）とアクセント（5%）の黄金比パレットを算出します。

1

Review & Consensus

算出したパレットのURLをチームに共有し、デザインの妥当性を確認してください。URLを共有するだけで全く同じ画面が再現されます。

2

Vector Logic の抽出

Asset Generator を使用して、既存コンポーネントを新しいブランドカラーに適合させ、Delta値を抽出します。

3

Tailwind CSS への適用

Tailwindモードで出力されたコードを `tailwind.config.js` の `extend` に貼り付けます。

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#...', 
      }
    }
  }
}
4

CSS Variables (shadcn/ui) への適用

`globals.css` の `:root` に変数を定義します。Palette Builder の Base Light を `--background` に適用するのが定石です。

:root {
  --background: 210 40% 98%;
  --primary: 221.2 83.2% 53.3%;
}
Important: 色相シフト適用後は、必ずアクセシビリティ（WCAG 2.1）のコントラスト比を確認してください。