SOW Design System
Sense of Wonder 調香学校の設計システム
システム情報
バージョン
1.0.0
現在のテーマ
default
利用可能テーマ
default, corporate, seasonal
カラーパレット
プライマリ
Primary
var(--color-primary)
Primary Light
var(--color-primary-light)
Primary Dark
var(--color-primary-dark)
アクセント
Accent
var(--color-accent)
Accent Light
var(--color-accent-light)
Accent Dark
var(--color-accent-dark)
グレー
Gray 50
bg-gray-50
Gray 100
bg-gray-100
Gray 200
bg-gray-200
Gray 300
bg-gray-300
Gray 400
bg-gray-400
Gray 500
bg-gray-500
Gray 600
bg-gray-600
Gray 700
bg-gray-700
Gray 800
bg-gray-800
Gray 900
bg-gray-900
ステータス
Success
bg-green-500
Warning
bg-yellow-500
Error
bg-red-500
タイポグラフィ
見出し1 (text-4xl)
font-display, font-bold
見出し2 (text-3xl)
font-display, font-bold
見出し3 (text-2xl)
font-sans, font-semibold
見出し4 (text-xl)
font-sans, font-semibold
本文 (text-lg)
font-sans, font-normal
本文 (text-base)
font-sans, font-normal
小さいテキスト (text-sm)
font-sans, font-normal
ユーティリティクラス
エフェクト
ガラス効果 (.glass-effect)
グラデーションテキスト (.gradient-text)
アニメーション
フェードイン (.animate-fade-in)
コンポーネント
ボタン
カード
カードタイトル
カードの内容がここに表示されます。