タイポグラフィ
| 変数名 |
値 |
説明 |
プレビュー |
| --wf-font-family |
"Noto Serif JP", serif |
メインフォント（和風の明朝体） |
あいうえお ABC |
| --wf-font-family-sans |
system-ui, sans-serif |
サンセリフフォント |
あいうえお ABC |
| --wf-font-sm |
0.875rem (14px) |
小さいフォントサイズ |
サンプルテキスト |
| --wf-font-md |
1rem (16px) |
標準フォントサイズ |
サンプルテキスト |
| --wf-font-lg |
1.125rem (18px) |
大きいフォントサイズ |
サンプルテキスト |
| --wf-font-xl |
1.25rem (20px) |
特大フォントサイズ |
サンプルテキスト |
| --wf-leading-none |
1 |
行間なし |
行間なし
2行目
|
| --wf-leading-tight |
1.25 |
狭い行間 |
狭い行間
2行目
|
| --wf-leading-normal |
1.5 |
標準行間 |
標準行間
2行目
|
| --wf-leading-relaxed |
1.75 |
広い行間 |
広い行間
2行目
|
カラー
伝統色（基本）
| 変数名 |
値 |
説明 |
プレビュー |
| --wf-koubai |
#f4a7b9 |
紅梅（こうばい） |
|
| --wf-fuji |
#b28fce |
藤（ふじ） |
|
| --wf-sakura |
#fddede |
桜（さくら） |
|
| --wf-shirayuri |
#f8f4e6 |
白百合（しらゆり） |
|
| --wf-sumi |
#2c2c2c |
墨（すみ） |
|
| --wf-hai |
#828282 |
灰（はい） |
|
インク（グレースケール）
| 変数名 |
値 |
用途 |
プレビュー |
| --wf-ink-900 |
#1f1f1f |
メインテキスト |
|
| --wf-ink-700 |
#444444 |
セカンダリテキスト |
|
| --wf-ink-500 |
#666666 |
控えめなテキスト |
|
| --wf-ink-300 |
#999999 |
プレースホルダー |
|
| --wf-ink-100 |
#e5e5e5 |
ボーダー、区切り線 |
|
アクセントカラー（藤紫スケール）
| 変数名 |
値 |
用途 |
プレビュー |
| --wf-accent-50 |
#f0ecf3 |
最も薄い |
|
| --wf-accent-100 |
#e2dcef |
- |
|
| --wf-accent-200 |
#cfc7e3 |
- |
|
| --wf-accent-300 |
#b9afd2 |
- |
|
| --wf-accent-400 |
#9f93bd |
- |
|
| --wf-accent-500 |
#6a5c7c |
ベースカラー |
|
| --wf-accent-600 |
#5e516f |
リンク |
|
| --wf-accent-700 |
#4f4560 |
ボタン、フォーカス |
|
| --wf-accent-800 |
#413a50 |
ホバー |
|
| --wf-accent-900 |
#332f41 |
アクティブ |
|
セマンティックカラー
| 変数名 |
値 |
用途 |
プレビュー |
| --wf-color-text |
var(--wf-ink-900) |
メインテキスト色 |
サンプル |
| --wf-color-muted |
var(--wf-ink-500) |
控えめなテキスト |
サンプル |
| --wf-color-accent |
var(--wf-accent-500) |
アクセントカラー |
|
| --wf-link-color |
var(--wf-accent-600) |
リンク色 |
リンク |
| --wf-color-bg |
#e7ddd4 |
背景色（灰桜） |
|
| --wf-surface-base |
#ffffff |
カード背景 |
|
| --wf-surface-subtle |
#faf7f5 |
控えめな背景 |
|
| --wf-surface-muted |
#f5f2ef |
強調された背景 |
|
ステータスカラー
| 変数名 |
値 |
用途 |
プレビュー |
| --wf-success |
#2e7d32 |
成功メッセージ |
|
| --wf-warning |
#b26a00 |
警告メッセージ |
|
| --wf-danger |
#b00020 |
エラーメッセージ |
|
スペーシング
4pxベースの8pxグリッドシステム
| 変数名 |
値 |
説明 |
プレビュー |
| --wf-space-half |
2px |
0.5倍（半分） |
|
| --wf-space-1 |
4px |
1倍（ベース） |
|
| --wf-space-2 |
8px |
2倍（8pxグリッド） |
|
| --wf-space-3 |
12px |
3倍 |
|
| --wf-space-4 |
16px |
4倍 |
|
| --wf-space-6 |
24px |
6倍 |
|
| --wf-space-8 |
32px |
8倍 |
|
| --wf-space-10 |
40px |
10倍 |
|
| --wf-space-12 |
48px |
12倍 |
|
ボーダーラジウス
| 変数名 |
値 |
用途 |
プレビュー |
| --wf-radius-sm |
4px |
小さい角丸 |
|
| --wf-radius-md |
8px |
標準角丸 |
|
| --wf-radius-lg |
12px |
大きい角丸 |
|
| --wf-radius-full |
9999px |
完全な円形 |
|
シャドウ
| 変数名 |
説明 |
プレビュー |
| --wf-shadow-sm |
小さいシャドウ（微妙な浮き上がり） |
|
| --wf-shadow-md |
標準シャドウ（カード、ボタン） |
|
| --wf-shadow-lg |
大きいシャドウ（ドロップダウン） |
|
| --wf-shadow-xl |
特大シャドウ（モーダル） |
|
ブレークポイント
| 変数名 |
値 |
デバイス |
| --wf-breakpoint-sm |
600px |
タブレット（小） |
| --wf-breakpoint-md |
900px |
タブレット（大） |
| --wf-breakpoint-lg |
1200px |
デスクトップ |
| --wf-breakpoint-xl |
1440px |
大画面デスクトップ |
その他コンポーネント
| 変数名 |
値 |
説明 |
| --wf-stamp-color |
var(--wf-primary-bg) |
判子の色 |
| --wf-stamp-weight |
3px |
判子のボーダー幅 |
| --wf-step-bullet-size |
24px |
ステップ番号のサイズ |
| --wf-icon-sm |
14px |
小さいアイコン |
| --wf-icon-md |
16px |
標準アイコン |
| --wf-icon-lg |
20px |
大きいアイコン |
アニメーション
デュレーション
| 変数名 |
値 |
用途 |
| --wf-duration-fast |
150ms |
高速アニメーション（ホバー、フォーカス） |
| --wf-duration-base |
250ms |
標準アニメーション |
| --wf-duration-slow |
350ms |
低速アニメーション（モーダル） |
| --wf-duration-slower |
500ms |
最も遅いアニメーション |
イージング関数
| 変数名 |
値 |
特徴 |
| --wf-ease-in |
cubic-bezier(0.4, 0, 1, 1) |
ゆっくり始まり速く終わる |
| --wf-ease-out |
cubic-bezier(0, 0, 0.2, 1) |
速く始まりゆっくり終わる |
| --wf-ease-in-out |
cubic-bezier(0.4, 0, 0.2, 1) |
ゆっくり始まりゆっくり終わる |
使い方のヒント
これらのCSS変数は、独自のスタイルをカスタマイズする際に使用できます。例えば、
color: var(--wf-color-accent);
のように記述することで、テーマ変更に自動的に対応します。