theme-foundation

テーマの基盤

1 つのブランドカラーから、完全なテーマカラーシステムを生成します。プライマリアクセント、セカンダリアクセント（補色）、ニュートラルランプを、すべて数学的に導き出します。

使用する場面

• 「ブランドカラーからテーマを作成して」
• 「ライトモードとダークモードのカラーが必要です」
• 「アプリ用のカラーシステムを生成して」
• 「このカラーで新しいデザインシステムを始めて」

インストール

npx @basiclines/rampa

レシピ

ユーザーのブランドカラーをもとに、3 種類のランプを生成します。

1. プライマリアクセントランプ

メインのブランドカラーを、10 段階のフルスケールに展開します。

rampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=accent

2. セカンダリアクセント（補色）

色相環上で数学的に反対の色です。CTA、ハイライト、セカンダリアクションに最適です。

rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O css

次の 2 つのランプが出力されます。

• base - プライマリアクセント
• complementary-1 - セカンダリアクセント

3. ニュートラルランプ

ブランドカラーをもとに彩度を大きく下げて生成します。ブランドと調和する「暖色系」または「寒色系」のニュートラルカラーになります。

rampa -C "<brand-color>" -L 98:5 -S 5:10 --size=10 -O css --name=neutral

完全な例

ブランドカラーが #3b82f6（青）の場合：

# Primary accent
rampa -C "#3b82f6" -L 95:10 --size=10 -O css --name=accent

# Secondary + Primary together
rampa -C "#3b82f6" --add=complementary -L 95:10 --size=10 -O css

# Neutrals (slightly warm from the blue)
rampa -C "#3b82f6" -L 98:5 -S 5:10 --size=10 -O css --name=neutral

出力構造

:root {
  /* Primary Accent */
  --accent-0: #f0f7ff;
  --accent-1: #dbeafe;
  /* ... */
  --accent-9: #1e3a5f;

  /* Secondary Accent (complementary) */
  --complementary-1-0: #fff7ed;
  --complementary-1-1: #ffedd5;
  /* ... */

  /* Neutrals */
  --neutral-0: #fafafa;
  --neutral-1: #f5f5f5;
  /* ... */
  --neutral-9: #171717;
}

ライトモードとダークモード

同じランプをどちらのモードでも使用できます。モードごとに割り当てを変えてください。

ライトモード：

• 背景：neutral-0 から neutral-2
• テキスト：neutral-8 から neutral-9
• アクセント：accent-5 から accent-7

ダークモード：

• 背景：neutral-9 から neutral-7
• テキスト：neutral-0 から neutral-2
• アクセント：accent-3 から accent-5

ヒント

1. 補色は、プライマリカラーと十分なコントラストが得られるよう数学的に保証されています
2. ニュートラルカラーには、ブランドカラー由来のわずかな暖かみ／冷たさが反映されます
3. より細かく調整するには --size=11 を使用します
4. コントラストを強めたり弱めたりするには、-L の範囲を調整します（例：極端さを抑える場合は -L 90:20）