Deployment Guide

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

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

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

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

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

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

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

:root {
  --background: 210 40% 98%;
  --primary: 221.2 83.2% 53.3%;
}

Important: 色相シフトを適用した後は、必ずアクセシビリティ（WCAG 2.1）のコントラスト比を確認してください。極端な色相回転は視認性に影響を与える可能性があります。

疲れづらいトラックボールマウス。コピペも瞬間に。

疲れているならココロとカラダをリフレッシュ。