Radix Themes · Tailwind v4（radix-themes-tw）

スタイルガイド

Material 3 的な多段ロールは使わず、Radix Themes の CSS 変数（--gray-*・--accent-* 等）と Tailwind ユーティリティで整えます。効き色は 1 系統（data-accent-color="blue"）、データ系列は別スケール。

1. カラーパレット

コアトークン: @radix-ui/themes（radix-themes-tw 経由）。

ニュートラル

--color-background

ページ背景

--color-panel-solid

カード・パネル

--gray-2

わずかに浮いた面・ツールバー

--gray-3

ホバー行

--gray-6

区切り線（弱）

--gray-7

入力枠など

--gray-12

本文

--gray-11

補助

--gray-10

プレースホルダ

効き色（1 系統 · Blue 11 主軸）

操作の主導線のみ。--accent-11 を基準とし、グラフ塗りには --accent-9（透過あり）を使用。装飾の多色化はしない。

--accent-11

効き色（主軸: bg-bz-accent / text-bz-accent）

--accent-12

ホバー・押下状態

--accent-9

Solid 背景（棒グラフ塗り・明るいチップ）

--accent-6

グリッド線・薄い境界

--accent-a3

薄い背景（選択・バッジ）

Gray スケール（1〜12）

data-gray-color の設定に連動してライブ変化する。 --gray-1〜--gray-12 は各ステップに固有の役割がある。

1 App background

2 Subtle background

3 UI element background

4 Hovered UI element bg

5 Active / Selected bg

6 Subtle borders

7 UI element borders

8 Hovered borders

9 Solid backgrounds

10 Hovered solid bg

11 Low-contrast text

12 High-contrast text

--gray-6 Subtle borders

--gray-7 UI element borders

--gray-8 Hovered borders

--gray-11 Low-contrast text

--gray-12 High-contrast text

データ系列・カテゴリ（カラフル）

このページの見本のみで Radix Colors のライトテーマ sRGB（@radix-ui/colors@3.0.0）を使用。

実装の優先順位：まずこのスタイルガイドに載っている色（上記 Neutral・効き色・下表の 8 系列）だけで表現する。識別や意味づけのためそれ以上の色相が必要なときだけ、表にない Radix スケール（例: cyan、indigo など）を追加で使う。

チップ・バッジ（ソリッド） → スケールの 9（*-9）
チャートの系列塗り（円・棒）→ 8（*-8）
行・帯の薄い背景（マインド・カテゴリ・TODO 等のジャンル行）→ 4（*-4）

データ系列用スケール（ライト sRGB、step 1〜12）

Red

red

Pink

pink

Violet

violet

Blue

blue

Green

green

Gold

gold

Orange

orange

Amber

amber

3 / 6 / 9 のクイック参照とチップ見本

Red

3 / 6 / 9

Pink

3 / 6 / 9

Violet

3 / 6 / 9

Blue

3 / 6 / 9

Green

3 / 6 / 9

Gold

3 / 6 / 9

Orange

3 / 6 / 9

Amber

3 / 6 / 9

系列 1（Red）系列 2（Pink）系列 3（Violet）系列 4（Blue）系列 5（Green）系列 6（Gold）系列 7（Orange）系列 8（Amber）

マインド（−2〜+2）— 見本

静的サンプル。行の背景は Radix スケールの 4（−2 red / −1 pink / 0 blue / +1 orange / +2 amber）。 バッジは同系の 9（白文字）。

行ハイライト相当の色の連続（左：低め → 右：高め）

← −2−10+1+2 →

振り返り（日次）の一行イメージ

4/2（水）

HIGH

LOW

MEMO

マインド

マインド値ごとのバッジ色（−2〜+2）

−2 −1 0 +1 +2

作業ログ（マインド色モード）の一覧イメージ

日付	内容	マインド
4/2（水）	機能実装・リリース準備	+2
4/1（火）	仕様整理・ドキュメント	+1
3/31（月）	定例・メール対応	0
3/30（日）	細かい修正・確認	−1
3/29（土）	障害調査	−2

作業カテゴリ — 見本

行の背景＝ Radix 4、チップ＝同スケールの 9。

タグ・凡例のイメージ

天職適職やりがいニーズ移動雑務

一覧の行（カテゴリ色モード）

日付	カテゴリ	内容
4/1（例）	天職	提案資料のブラッシュアップ
4/2（例）	適職	要件ヒアリング
4/3（例）	やりがい	プロトタイプ検証
4/4（例）	ニーズ	問い合わせ対応
4/5（例）	移動	移動・待機
4/6（例）	雑務	事務・整理

TODO ステータス — 見本

作業カテゴリ見本と同じルール：行の背景＝ Radix 4、凡例バッジ＝同系のソリッド（色相は 9、グレーの終了のみ白文字のコントラスト用に 11）。 TODO 一覧のステータス select も同じソリッド色・ピル形状（実テーブルは行背景は白のまま、セル内チップのみ着色）。

タグ・凡例のイメージ

進めたすぐやる次やる返事待ちいつかやる終了

一覧の行（ステータス色モード）

タスク	ステータス	期限
仕様レビュー・フィードバック反映	進めた	2026-04-08
リリース前の最終確認	すぐやる	2026-04-05
次スプリントで着手する調査	次やる	2026-04-09
見積もり返信のフォロー	返事待ち	2026-04-12
依存タスク完了後に再開	いつかやる	—
ドキュメント更新	終了	2026-04-01

2. 線の色と太さ

境界・区切りは太さ（多くは 1px）と --gray-6 / --gray-7 / --accent-9 等で統一。

通常

カード・リストの枠、テーブル区切り

1px + var(--gray-6)

強調

入力枠、クリック可能な境界

1px + var(--gray-7)

アクセント

フォーカスリング・選択状態の下線など

2px + var(--accent-9)

危険

エラー枠・バリデーション（必要時のみ）

1px + var(--red-9)

色の実体は --gray-6 / --gray-7。

3. 背景の色（層）

ページ下地・パネル・ホバーは --color-background・--color-panel-solid・--gray-2・--gray-3 などで切り替え。

--color-background

ページ全体の下地

--color-panel-solid

カード・モーダル・ヘッダー白面

--gray-2

わずかに浮いた面・ツールバー背景

--gray-3

行ホバー・リストホバー

--accent-a3

アクセントの薄い塗り

--red-2

エラー通知の背景

--green-2

成功・完了の薄い背景

4. アイコン

Material Symbols Outlined（Google Fonts）を前提。装飾より機能表現。

変数 / クラス	内容
font-size: 1.125rem	sm: 18px 相当
font-size: 1.25rem	md: 20px 相当（既定）
font-size: 1.5rem	lg: 24px 相当
--gray-11	既定アイコン色（補助テキストに近いニュートラル）
--gray-12 / --accent-9	本文寄り・リンク・主ボタン上
FILL 0 wght 300	Outlined 線画（既定）
FILL 1 wght 300	ナビ現在地など必要なときのみ（Filled）

プレビュー

search sm

add md（既定）

folder_open lg

settings strong

open_in_new accent

check 主ボタン内

dashboard filled + accent

5. フォントとタイプスケール

Radix Themes の --font-size-1〜--font-size-9 を radix-themes-tw が text-1〜text-9 として Tailwind ユーティリティに変換。 data-scaling の値（既定 100%）と連動してスケールが変化する。

ユーティリティ	変数	px（scaling 100%）	プレビュー
text-1	--font-size-1	12px	補助ラベル・キャプション
text-2	--font-size-2	14px	小さめ本文・バッジ
text-3	--font-size-3	16px	ベース本文
text-4	--font-size-4	18px	強調本文 / h3
text-5	--font-size-5	20px	サブ見出し
text-6	--font-size-6	24px	セクション h2
text-7	--font-size-7	28px	ページタイトル h1
text-8	--font-size-8	35px	大見出し / Hero
text-9	--font-size-9	60px	ディスプレイ

見出しプレビュー（Tailwind ユーティリティ）

text-7 / h1

ページタイトル

text-6 / h2

セクション見出し

text-4 / h3

サブ見出し

text-3 / body

本文テキスト。情報密度を調節するには data-scaling を変更します。

text-3 / muted

補助テキスト・説明文。text-bz-muted で表示。

text-1 / label

ラベル・キャプション

6. レイアウトと余白

Radix の --space-1〜--space-9（4px×scaling 基準）。 Tailwind では p-[var(--space-3)] などの arbitrary value で参照可能。

--space-1

4px × scaling

--space-2

8px × scaling

--space-3

12px × scaling

--space-4

16px × scaling

--space-6

32px × scaling

--space-8

48px × scaling

影トークンは影（Radix Themes）を参照。

影（Shadows）

Radix Themes のコンポーネント影は 6 段階のスケール。カスタム UI も同じ CSS 変数でテーマと揃えられる。 Radix Themes · Shadows ・ shadow.css（実値）

Tailwind では shadow-[var(--shadow-2)] のように arbitrary value で指定。このページのパネルカードは枠線ベースだが、ポップオーバーやモーダルでは --shadow-4〜--shadow-6 を使う想定。

プレビュー（--gray-3 の上に載せたパネル）

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

shadow-6

変数	用途（Radix 公式の整理）	Tailwind 例
--shadow-1	インセット（くぼみ・内側の影）	shadow-[var(--shadow-1)]
--shadow-2	クラシックなパネル・Card（控えめ）	shadow-[var(--shadow-2)]
--shadow-3	クラシックなパネル・Card（やや強い）	shadow-[var(--shadow-3)]
--shadow-4	小さめのオーバーレイ（Hover Card / Popover 等）	shadow-[var(--shadow-4)]
--shadow-5	小さめオーバーレイ（より手前）	shadow-[var(--shadow-5)]
--shadow-6	大きめのオーバーレイ（Dialog 等）	shadow-[var(--shadow-6)]

--shadow-1 はインセット（公式ドキュメントのとおり）。
--shadow-2 / --shadow-3 は variant="classic" のパネル・Card 向け。
--shadow-4 / --shadow-5 は Hover Card・Popover など小さめオーバーレイ。
--shadow-6 は Dialog など大きめオーバーレイ。

角丸スケール

Radix Themes の --radius-1〜--radius-6 および --radius-full。

HTML ルートに data-radius="none | small | medium | large | full" を設定すると 全コンポーネントの角丸が一括変更される。px 値は medium（デフォルト）時の目安。

半径の比較（ライブ変化・実 CSS 変数使用）

radius-1 3px

radius-2 4px

radius-3 6px

radius-4 8px

radius-5 12px

radius-6 16px

radius-full 9999px

変数	px (medium)	Tailwind	用途
--radius-1	3px	rounded-[var(--radius-1)]	極小・ドット・細かい角
--radius-2	4px	rounded-[var(--radius-2)]	バッジ・タグ・チップ
--radius-3	6px	rounded-[var(--radius-3)]	ボタン・入力フィールド（標準）
--radius-4	8px	rounded-[var(--radius-4)]	カード・パネル（標準）
--radius-5	12px	rounded-[var(--radius-5)]	モーダル・ダイアログ
--radius-6	16px	rounded-[var(--radius-6)]	シート・大きな容器
--radius-full	9999px	rounded-[var(--radius-full)]	ピル・アバター・円形ボタン

data-radius の切り替えイメージ（ボタン × カード）

カード

none

カード

small

カード

medium

カード

large

カード

full

7. コンポーネント（Radix Themes 調）

7-1 ボタン

7-2 カード / リスト

KPI

¥842,000

今期累計（ダミー）

ねぎデ株式会社 3 件
サンプル商事 1 件
テスト工房 —

7-3 入力 / セレクト

ラベル

セレクト

7-4 フィルター / ソート

ソート

+ 条件

実装時は Radix DropdownMenu / Select と組み合わせ、見た目は同じトークンに揃える。

8. チャート（円・棒・線）

円グラフ・棒グラフの系列塗りは Radix Colors の各スケール 8（*-8）。線グラフの見本は Green の 6。チップとジャンル行の背景は §1 の 9 / 4 と役割を分ける。

円グラフ（ドーナツ）

conic-gradient + 中央ホール

製品 A 35% 製品 B 28% 製品 C 22% その他 15%

棒グラフ

縦棒・下基準線は --gray-6

4月 5月 6月 7月 8月 9月

線グラフ

グリッド・塗りつぶしはニュートラル、線は系列色

売上推移（ダミー）

サンプル画面

上記トークンと Tailwind ユーティリティだけで組んだミニダッシュボード。

Overview

ダッシュボード

売上

¥842,000

案件

作業

32h

案件	区分	金額
サイト改修	開発	¥450,000
月次保守	運用	¥80,000