i-Willink
Design SystemDocs
ドキュメントメニュー

デザイントークン

デザイントークンは DS のすべての見た目を支える名前付きの値です。color / motion / radius / shadow / typography を意味（semantic）と原子値（primitive）の 2 層で定義し、4 つの配布サーフェスから React・Tailwind・素の CSS・JS ツーリングへ同一の値を供給します（ADR-0009、ADR-0020）。

トークン分類（taxonomy）

トークンは次のカテゴリに整理されています。spacing は DS 固有のブロックを持たず、Tailwind 既定のスケールをそのまま使います。

  • color（76 トークン） — neutral 11 / brand 11 / semantic role / text-emphasis 5 / accent 3 / feedback 3 / surface 5 / gradient 5。マスターノブは --color-brand 1 つです（ブランドとテーマ 参照）。
  • motion / duration — primitive は fast 150ms / base 250ms / slow 400ms、semantic role は 9。
  • easing — standard cubic-bezier(0.2,0,0,1) / emphasized cubic-bezier(0.3,0,0,1.1)、semantic role は 3。
  • radius — sm 0.25rem / md 0.5rem / lg 0.75rem / xl 1rem / full 9999px。
  • shadow — soft / md / glow（+ dark variant）。
  • typography — --font-sans / --font-mono。

motion / easing の semantic role の使い分けは モーション を参照してください。

4 つの配布サーフェス

同じトークン値を、consumer のスタックに合わせた 4 形態で配布します。npm group（tokens / css-tokens / tailwind-preset / react）は lockstep で同一バージョン（現在 1.7.0）に揃います。

パッケージconsumerimport 方法得られるもの
@willink-labs/tokensJS ツーリング / Style Dictionaryimport { … }from "@willink-labs/tokens"DTCG-format JSON（semantic.json + primitive.json）。これが source of truth。
@willink-labs/css-tokens非 Tailwind（WordPress / Astro / Vue / Svelte）@import "@willink-labs/css-tokens/tokens.css";素の CSS 変数（tokens.semantic.css / tokens.dark.css / tokens.primitives.css）。
@willink-labs/tailwind-presetTailwind v4@import "@willink-labs/tailwind-preset/preset.css";@theme ブロックから 自動生成されるユーティリティ（text-brand-600、duration-accordion、ease-enter、rounded-md、shadow-soft）。
@willink-labs/reactReact アプリimport { Button }from "@willink-labs/react"semantic ユーティリティを消費する 25 個の既製コンポーネント。

JSON が単一の source of truth

@willink-labs/tokens の JSON が唯一の正であり、css-tokens と tailwind-preset はそこから 生成・同期されます。consumer はどのサーフェスを使っても同じ値に追従します。

tsx
import { color, duration, easing } from "@willink-labs/tokens";
// DTCG-format JSON（semantic.json + primitive.json）
css
/* 非 Tailwind consumer の globals.css 等 */
@import "@willink-labs/css-tokens/tokens.css";
/* 個別読み込みも可:
   tokens.semantic.css / tokens.dark.css / tokens.primitives.css */
css
/* Tailwind v4 consumer の globals.css */
@import "@willink-labs/tailwind-preset/preset.css";
/* → text-brand-600 / duration-accordion / ease-enter / rounded-md / shadow-soft が自動生成 */

バージョニング

新しい semantic キーの追加は後方互換のため MINOR バンプとして扱います（ADR-0010）。既存キーの削除・リネーム・意味変更のみが MAJOR です。lockstep のため 4 パッケージは常に同一バージョンで公開されます。

次は インストール で各サーフェスを導入する、 または モーション で duration / easing トークンの使い方を確認する。