Primitive（基本値）
色見本、余白段階、文字サイズ、角丸、時間など、再利用する基本値です。
devs Tools / Design System 1.0.0
Design Token Studio：色・文字・余白を6形式へ変換
色、文字、余白、角丸、影、モーションを意味付きのデザイントークンとして管理し、light・darkを検証してCSS、Tailwind、WordPress theme.jsonなど6形式へ変換します。
devs Design Token Studioは、色・文字・余白・角丸・影・モーションを意味付きのdesign token（デザイントークン）として管理し、light・darkを検証してCSS、Tailwind、WordPress theme.jsonなどへ変換する無料ツールです。
- Projectデータはこのブラウザ内で処理・保存
- 116の参照トークンとlight・darkの2モード
- 同じProjectから6形式を決定論的に出力
ブラウザ内のデザインシステム編集画面を準備しています…
Why tokens
1つの決定を変え、すべての実装へ反映する
design tokenは、色や大きさなどのデザイン上の決定に再利用できる名前を付けたものです。各コンポーネントが色コードを直接持たず意味名を参照するため、ブランド変更やダークモード対応でも一括して更新できます。
Semantic（意味）
本文色、画面背景、主要ボタンなど、用途を表す名前です。
Component（部品）
主要ボタンの背景など、部品と状態に限定した契約です。
Resolver
参照を壊さずlight・darkを切り替える
light用の参照元から意味トークンを解決し、どの値へたどり着いたかを全経路で表示します。
名前は変えずにdark用の値を解決し、上書きがない場合はbaseへのfallback（代替元）も示します。
参照切れ、循環参照、型不一致、名前衝突、コントラスト不足、変換損失を固定ルールIDで検出します。
Platform exports
同じProjectから出力する6形式
| 形式 | 主な用途 | 出力方針 |
|---|---|---|
| DTCG JSON | 交換用の正本 | aliasと対応extensionを保持します。 |
| CSS Variables | Web・WordPress | :rootとdark用上書きを出力します。 |
| SCSS | Sass project | 安定した変数名でlight解決値を出力します。 |
| Tailwind CSS | Tailwind v4 | @themeの基本値とsemantic CSSを分離します。 |
| WordPress theme.json | Gutenberg・Block theme | version 3を生成し、標準で表せない値をlossとして報告します。 |
| Style Dictionary | Build pipeline | 再現可能なv4向け設定例を生成します。 |
Loss report（変換損失レポート）は、出力先で完全に表せない値の一覧です。対応できない値を黙って捨てず、fallback・近似・手動作業の必要性を示します。
WordPress
生成したtheme.jsonをWordPressで使う手順
- 1
現在のテーマをバックアップ
既存のtheme.jsonとCSSを保存し、元へ戻せる状態にします。
- 2
公開paletteとlossを確認
編集画面へ公開する色だけを確認し、motionやcomponent tokenはCSS側へ分けます。
- 3
対象バージョンに合わせて統合
WordPress 6.6以降のversion 3を基準に統合し、キャッシュ削除後にサイトエディターを確認します。
Glossary
画面に出てくる英語の意味
- Design token（デザイントークン）
- 色、大きさ、動きの時間などに名前を付け、複数箇所で再利用できるようにしたデータです。
- Alias（エイリアス／参照）
- 別のtokenを参照する値です。同じ色コードを重複して持たず、意味の関係を保ちます。
- Resolver（リゾルバー／値の解決処理）
- 参照とモード別の値を順にたどり、現在使う値と参照経路を確定する処理です。
- DTCG
- Design Tokens Community Groupが定める交換形式です。このツールでは2025.10形式を基準にします。
- Contrast ratio（コントラスト比）
- 文字や操作部品と背景の明るさの差を数値で表したものです。通常文字は4.5:1以上を基準にします。
- Mode（モード）
- light・darkのような利用状況です。同じtoken名を保ったまま異なる値へ切り替えます。
Limits
このバージョンで対応しないこと
- アカウント、クラウド同期、共同編集、サーバーへのProject保存は行いません。
- Figmaとの双方向同期や、任意の外部URLからのCSS取得には対応しません。
- 検証通過はブランド品質や全画面のアクセシビリティを保証するものではありません。
FAQ
利用前によくある質問
入力したProjectはサーバーへ送信されますか？
送りません。編集、値解決、検証、出力はブラウザ内で行い、保存も利用中のブラウザ内だけです。
CSSだけ使うこともできますか？
できます。CSS Variablesはlight・darkの上書きを含む単独ファイルとして利用できます。
WordPress出力にlossが表示されるのはなぜですか？
theme.jsonの標準presetではmotionや複合値をすべて表せないためです。消去せず、必要なCSS作業として明示します。