Kawaii Green Design System
CSS カスタムプロパティによるデザイントークン集。
design-tokens.css
で定義。
カラー
--bg
#f5f7fa
--surface
#f8fafb
--border
#e5e7eb
--accent-light
#dcfce7
--accent
#22c55e
--accent-hover
#16a34a
--muted
#6b7280
--text
#111827
--error
#dc2626
--error-bg
#fee2e2
サーフェス
--bg
ページ背景
--surface
パネル・ハイライト
--card
カード
タイポグラフィ
2rem / 700
見出し大
1.5rem / 700
見出し中
1.1rem / 600
見出し小
1rem / 400
本文テキスト — 桜の花びらが風に舞い散る春の午後
0.875rem / muted
補助テキスト — サブキャプションや注釈に使用
link
リンクテキストのサンプル
mono
const token = "var(--accent)";
ボタン
バリアント
Primary
Outline
Muted
Danger
サイズ
Small
Default
Large
インタラクティブ（ホバーしてみて）
Toast を表示
Toast (Outline)
Toast (Error)
フォーム要素
テキスト入力
エラー状態
セレクト
オプション 1
オプション 2
オプション 3
テキストエリア
無効
バッジ
Green
Outline
Dark
Error
Muted
シャドウ
--shadow-sm
0 1px 4px rgba(34,197,94,.08)
--shadow
0 4px 12px rgba(34,197,94,.12)
--shadow-lg
0 8px 24px rgba(34,197,94,.18)
角丸
sm
6px
md
12px
lg
16px
pill
9999px
カードのバリエーション
標準カード
コンテンツタイトル
白背景・緑のグロー影。ページの主要なコンテンツを収めるコンテナ。
Surface カード
ハイライト領域
--surface 背景。ヒント・サブ情報・強調ゾーンに。
トークン一覧
変数名
値
用途