Design System

Vite + React Router v7 + Tailwind v4 + Radix UI で構築された、デュアルモード SaaS 向けデザインシステム

はじめに

AdXpand のデザインシステムは、ダーク（AI ツールの刷新感）とライト（広告ツールの安心感）の 2 つの表情を 1 セットのトークンで実現します。情報密度・静かな信頼感・日本語ファーストを掲げています。

カタログ

Components

Button, Badge, Card, Modal など 40+ コンポーネントの一覧と使用例

Patterns

Dashboard / List / Flow / Chat など SaaS の典型レイアウト集

Behavior

AlertDialog / Toast / インライン確認 の判断ルールと実例

Tokens

色 (bg / fg / accent) と文字サイズ (text-10〜48) のリファレンス

原則

2 つの表情

Dark = AI ツールの純黒。Light = 広告ツールの暖色クリーム。アクセントは主要アクションのみ

高情報密度

コンパクトな間隔・短いコピー。データスロップ禁止

トークン経由

任意値を書かず @theme のトークンだけで色とサイズを指定

ステータス

v0.3Vite 8 + React Router 7.14 + Tailwind v4 + Radix UI