brandfy-design-tokens

デザイントークンの生成

運用プロトコル

• **計画と進捗：**ハーモニースキーム、セマンティックな役割、スケール、コントラスト、生成、テストを計画します。
• **信頼できる情報源：**承認済みのパレット、 circulo-cromatico.md と token-schema.md を読みます。
• スコープと冪等性：.brandfy/palette.json を変更せずに派生ファイルを生成します。
• **検証：**ジェネレーターを実行し、テキスト、コントロール、フォーカス、状態の WCAG コントラストを確認するとともに、primary と accent の色相の角度関係を確認します。
• **最終概要：**ファイル、使用したハーモニースキーム、承認された組み合わせ、却下された組み合わせを記録します。

ワークフロー

1. circulo-cromatico.md に基づいて、ハーモニースキーム（モノクロマティック、類似色、補色、分裂補色、トライアド、またはテトラード）と primary のベース色相を選びます。

2. 各ファミリーの11色を手動で選ぶのではなく、色相環から families.primary と families.accent を生成します。

   node <caminho-da-skill>/scripts/gerar-paleta-cromatica.mjs \
     --hue <matiz-base 0-360> \
     --scheme <esquema> \
     --output .brandfy/palette.json
   

3. .brandfy/palette.json に families.neutral と light／dark モードを追加します。

4. 次を実行します。

   node <caminho-da-skill>/scripts/generate-tokens.mjs \
     --input .brandfy/palette.json \
     --output brand
   

5. brand/global.css、brand/tokens.json、 brand/tailwind-theme.js、brand/accessibility.md を生成し、palette.json に harmony が宣言されている場合は brand/color-harmony.md も生成します。

6. 各ファミリーの数値スケールと、背景、サーフェス、テキスト、セカンダリテキスト、境界線、アクセント、フォーカス、成功、警告、エラー用のセマンティックトークンを維持します。

7. :root と .dark には異なる値を設定します。

8. 使用可能な組み合わせを文書化します。見た目だけから読みやすさを推測しないでください。

$brandfy-tipografia-web が生成した CSS を global.css にインポートし、light モードと dark モードでページを開きます。フォントが見つからない場合は、階層を変えたりテキストを隠したりせず、文書化されたフォールバックを適用します。

専門家の考え方

元の色、スケール、セマンティックな役割を分けます。primary と accent の関係は色相環から導きます。harmony でスキームを宣言することで、その関係を検証可能かつ再現可能にします。 単独の値ではなく、要素間の関係に基づいてトークンを選びます。コントラスト、状態の識別性、フォーカス、色覚特性、印刷、light モードと dark モード間の一貫性を確認します。ブランドカラーはロゴには適していても、テキストやコントロールには不適切な場合があります。