Tokens

デザイントークンを、触れる形に。

システムの形を決める全変数。スウォッチをクリックすれば値をコピーできます。人と AI の両方に向けた完全な仕様は DESIGN.mdに記載されています。

Colors

ブランド（群青・媚茶）、ニュートラル、セマンティック、HSL スウォッチ。

見る

Typography

フォントファミリー（Inter、Shippori Mincho）、スケール、ウェイト。

見る

Spacing

余白・パディング・ギャップのスケール。

見る

Shadows

shadow-sm から shadow-2xl までのエレベーショントークン。

見る

Radius

角丸のスケール。

見る

Animation

トランジションの時間・イージングのトークン。

見る

固定 URL の配布ファイル：ビルド不要の純 CSS

このサイトのトークン実値は、固定 URL のスタンドアロンファイルとしても配信しています。@gunjo/ui と同じ SSOT から生成しているため、値がパッケージとずれることはありません。

npm やビルドツールが使えない環境では「npm なしで使う」を参照してください。

主要トークンの実値（抜粋）

SSOT からの静的な抜粋です。全量は tokens.css で配信しています。

:root {
  --background: 0 0% 100%;
  --foreground: 240 20% 6%;
  --primary: 220 62% 49%;
  --primary-foreground: 210 40% 98%;
  --info: 217 91% 60%;
  --success: 142 71% 45%;
  --warning: 45 93% 47%;
  --destructive: 0 72% 51%;
  --border: 214 32% 91%;
  --muted-foreground: 215 20% 40%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 218 68% 63%;
  --primary-foreground: 220 60% 8%;
  --info: 213 94% 68%;
  --success: 142 69% 58%;
  --warning: 43 96% 56%;
  --destructive: 0 72% 51%;
  --border: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
}

DESIGN.md：canonical な仕様書

DESIGN.md はデザインシステム全体を機械可読な Markdown でドキュメント化しており、AI ツール（v0 / Cursor / Claude / Figma Make）がそのまま消費できます。ブランドストーリー、hex/HSL カラーパレット、タイポグラフィ規則、コンポーネント単位の用法。これが真実の唯一の源泉です。

完全な仕様を読む