Shadcn × Bootstrap 2

レトロでかわいい、
でも使いやすいUI。

Shadcn の構造に、Bootstrap 2 の“ぷくっとした”光沢・ベベルを少しだけ。インディゴ基調の、レトロでかわいいデザインシステムです。トークンとコンポーネントをコピーして、別プロジェクトでもそのまま使えます。

原則

レトロな質感は“やりすぎない”。使いやすさを最優先に、ほんの少しの遊び心を足します。

① やわらかい立体感

上明→下暗の微グラデ＋上端ハイライト＋やわらか影で「ぷくっと」。ギラつかせず、上品に。

② 色非依存のグロー

光沢は白/黒のオーバーレイで表現。塗り色（インディゴ・赤・緑…）に依存せず同じレシピで効きます。

③ 使いやすさ最優先

フォーカスリング常時表示、コントラスト 4.5:1 以上、prefers-reduced-motion 尊重。

④ インディゴが主役

アクセントは #4f46e5 に統一。リンク・主要操作・アクティブ状態の“主役色”。

カラー

主役はインディゴ。セマンティック色（成功/警告/危険/情報）とニュートラルで構成します。

Primary#4f46e5

Primary strong#4338ca

Primary soft#eceaff

Success#3f9e42

Warning#f2b134

Danger#c0392b

Ink#14141f

Muted#6b6b7b

Surface#f4f4f8

立体感・光沢

このシステムの“かわいさ”の核。共通の --gloss オーバーレイ＋ベベル＋影を、どの要素にも同じ値で使います。

トークン	値	用途
`--gloss`	`linear-gradient(to bottom, rgba(255,255,255,.24), rgba(255,255,255,0) 45%, rgba(0,0,0,.18))`	塗りの上に重ねる光沢
`--bevel-top`	`inset 0 1px 0 0 rgba(255,255,255,.6)`	上端ハイライト
`--inset-well`	`inset 0 2px 5px rgba(40,40,80,.07)`	へこみ（well）
`--shadow-card`	`0 1px 2px …, 0 6px 18px -8px …`	カードのやわらか影

/* 塗り色は background-color、光沢は background-image で重ねる（shorthand は使わない） */
.btn-primary {
  background-color: var(--primary);
  background-image: var(--gloss);
  box-shadow: var(--bevel-top), 0 1px 2px rgba(0,0,0,.18);
}

コンポーネント

そのままコピーして使えます。すべて自己完結（外部依存なし）。

ボタン

<button class="btn btn-primary">保存する</button>
<button class="btn btn-outline">キャンセル</button>

パネル / カード

サイトの公開設定

上端ハイライト付きのグラデヘッダ＋やわらか影。情報のまとまりに。

well（補助パネル）

二次的な情報（補足・APIキー・メモ等）を、へこんだ枠でそっと区別します。

バッジ / ピル

Pro 公開中下書き会社ドメイン認証

アラート

ℹ️ 情報メッセージ。補足やヒントに。

✅ 成功メッセージ。完了の合図に。

⚠️ 警告メッセージ。注意喚起に。

⛔ エラーメッセージ。失敗の通知に。

フォーム

公開ドメイン

フォーカスでインディゴのグローが出ます。

タブ

テーブル（ゼブラ）

サイト	状態	認証方式	閲覧
pitch-deck	公開中	会社ドメイン	128
lp-draft	下書き	パスワード	0
demo	公開中	公開	42

使い方

他プロジェクトへ持ち込む手順とルール。

トークンをコピー：:root の CSS 変数（カラー・--gloss・--bevel-top・--inset-well・影）をそのまま貼り付け。
コンポーネントをコピー：.btn / .panel / .well / .pill / .alert / .input / .tabs / table.ds を使用。
shorthand に注意：塗りは必ず background-color。background ショートハンドは background-image の光沢を消すので使わない。
主役はインディゴ：主要操作・リンク・アクティブ状態に --primary。テキストは黒系のまま。
アクセシビリティ：フォーカスリングを残し、テキストのコントラストは 4.5:1 以上を確認。

レスポンシブ：2カラムのグリッドは @media (max-width: 680px) で1カラムに。テーブルは横スクロール or カード化で。

レトロでかわいい、でも使いやすいUI。

原則

カラー