Colors
Primitive Colorが基本パレットを、Semantic Colorがテーマ対応の配色を提供する2層構造。CSS変数ベースでフレームワーク非依存です。
Primitive Colors
基礎となるカラーパレット。これらの値はSemantic Tokenから参照されます。
カスタマイズ可能
ブランドに合わせて自由にカスタマイズ可能です。実装時は bg-primary などのSemantic Token経由でご利用ください。
gray
背景、ボーダー、テキストなど、UIの基盤となるニュートラルカラー。ダークモード最適化設計
primary
ブランドカラー。主要なアクション、リンク、強調に使用
secondary
セカンダリアクション、補助的なUI要素に使用
blue
情報、リンク、進行中の状態を表すInfoカラー
green
成功、完了、肯定的な状態を表すSuccessカラー
yellow
警告、注意が必要な状態を表すWarningカラー
red
エラー、削除、危険な操作を表すErrorカラー
Semantic Colors
ライトモードとダークモード間で自動的に適応するテーマ対応カラー。同じCSS変数が各モードで異なる値を持ちます。
トークン形式
Tailwind Class — 開発者がコードで直接使用するクラス
◻️
Background
ページやカードの背景色。4階層で深度を表現
Light
Dark
▢
Border
区切り線、入力フィールドの枠線
Light
Dark
📝
Text
テキストの階層（本文、補足、リンクなど）
Light
Dark
🎯
Primary
主要なアクションボタン、リンク、強調
Light
Dark
◐
Secondary
セカンダリボタン、補助的なUI要素
Light
Dark
●
Status
成功・警告・エラー・情報の状態表示
Light
Dark
Token Mapping
Figma → CSS → Tailwind の3段階マッピング
Background
background.default
bg-background--color-backgroundbackground.paper
bg-background-paper--color-background-paperbackground.elevated
bg-background-elevated--color-background-elevatedbackground.muted
bg-background-muted--color-background-muted| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| background.default | --color-background | bg-background |
| background.paper | --color-background-paper | bg-background-paper |
| background.elevated | --color-background-elevated | bg-background-elevated |
| background.muted | --color-background-muted | bg-background-muted |
AaText
text.default
text-foreground--color-texttext.muted
text-text-muted--color-text-mutedtext.subtle
text-text-subtle--color-text-subtletext.link
text-text-link--color-text-linktext.primary
text-text-primary--color-text-primarytext.info
text-text-info--color-text-infotext.success
text-text-success--color-text-successtext.error
text-text-error--color-text-errortext.warning
text-text-warning--color-text-warning| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| text.default | --color-text | text-foreground |
| text.muted | --color-text-muted | text-text-muted |
| text.subtle | --color-text-subtle | text-text-subtle |
| text.link | --color-text-link | text-text-link |
| text.primary | --color-text-primary | text-text-primary |
| text.info | --color-text-info | text-text-info |
| text.success | --color-text-success | text-text-success |
| text.error | --color-text-error | text-text-error |
| text.warning | --color-text-warning | text-text-warning |
Border
border.default
border-border--color-borderborder.strong
border-border-strong--color-border-strongborder.subtle
border-border-subtle--color-border-subtle| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| border.default | --color-border | border-border |
| border.strong | --color-border-strong | border-border-strong |
| border.subtle | --color-border-subtle | border-border-subtle |
Primary
primary.default
bg-primary--color-primaryprimary.hover
bg-primary-hover--color-primary-hoverprimary.active
bg-primary-active--color-primary-activeprimary.tint
bg-primary-tint--color-primary-tintprimary.text
text-primary-foreground--color-primary-text| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| primary.default | --color-primary | bg-primary |
| primary.hover | --color-primary-hover | bg-primary-hover |
| primary.active | --color-primary-active | bg-primary-active |
| primary.tint | --color-primary-tint | bg-primary-tint |
| primary.text | --color-primary-text | text-primary-foreground |
Secondary
secondary.default
bg-secondary--color-secondarysecondary.hover
bg-secondary-hover--color-secondary-hoversecondary.active
bg-secondary-active--color-secondary-activesecondary.tint
bg-secondary-tint--color-secondary-tintsecondary.text
text-secondary-foreground--color-secondary-text| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| secondary.default | --color-secondary | bg-secondary |
| secondary.hover | --color-secondary-hover | bg-secondary-hover |
| secondary.active | --color-secondary-active | bg-secondary-active |
| secondary.tint | --color-secondary-tint | bg-secondary-tint |
| secondary.text | --color-secondary-text | text-secondary-foreground |
Status (Success / Warning / Error / Info)
success.default
bg-success--color-successsuccess.hover
bg-success-hover--color-success-hoversuccess.active
bg-success-active--color-success-activesuccess.tint
bg-success-tint--color-success-tintsuccess.text
text-success-foreground--color-success-textwarning.default
bg-warning--color-warningwarning.hover
bg-warning-hover--color-warning-hoverwarning.active
bg-warning-active--color-warning-activewarning.tint
bg-warning-tint--color-warning-tintwarning.text
text-warning-foreground--color-warning-texterror.default
bg-error--color-errorerror.hover
bg-error-hover--color-error-hovererror.active
bg-error-active--color-error-activeerror.tint
bg-error-tint--color-error-tinterror.text
text-error-foreground--color-error-texterror.bg
bg-error-bg--color-error-bginfo.default
bg-info--color-infoinfo.hover
bg-info-hover--color-info-hoverinfo.active
bg-info-active--color-info-activeinfo.tint
bg-info-tint--color-info-tintinfo.text
text-info-foreground--color-info-text| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| success.default | --color-success | bg-success |
| success.hover | --color-success-hover | bg-success-hover |
| success.active | --color-success-active | bg-success-active |
| success.tint | --color-success-tint | bg-success-tint |
| success.text | --color-success-text | text-success-foreground |
| warning.default | --color-warning | bg-warning |
| warning.hover | --color-warning-hover | bg-warning-hover |
| warning.active | --color-warning-active | bg-warning-active |
| warning.tint | --color-warning-tint | bg-warning-tint |
| warning.text | --color-warning-text | text-warning-foreground |
| error.default | --color-error | bg-error |
| error.hover | --color-error-hover | bg-error-hover |
| error.active | --color-error-active | bg-error-active |
| error.tint | --color-error-tint | bg-error-tint |
| error.text | --color-error-text | text-error-foreground |
| error.bg | --color-error-bg | bg-error-bg |
| info.default | --color-info | bg-info |
| info.hover | --color-info-hover | bg-info-hover |
| info.active | --color-info-active | bg-info-active |
| info.tint | --color-info-tint | bg-info-tint |
| info.text | --color-info-text | text-info-foreground |
Disabled & Focus
disabled.default
bg-disabled--color-disableddisabled.text
text-disabled-foreground--color-disabled-textfocus.ring
focus-ring--color-focus-ringfocus.ring-error
ring-error--color-focus-ring-error| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| disabled.default | --color-disabled | bg-disabled |
| disabled.text | --color-disabled-text | text-disabled-foreground |
| focus.ring | --color-focus-ring | focus-ring |
| focus.ring-error | --color-focus-ring-error | ring-error |
Chart Colors (Chart-1~5)
chart.1
bg-chart-1--color-chart-1chart.2
bg-chart-2--color-chart-2chart.3
bg-chart-3--color-chart-3chart.4
bg-chart-4--color-chart-4chart.5
bg-chart-5--color-chart-5| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| chart.1 | --color-chart-1 | bg-chart-1 |
| chart.2 | --color-chart-2 | bg-chart-2 |
| chart.3 | --color-chart-3 | bg-chart-3 |
| chart.4 | --color-chart-4 | bg-chart-4 |
| chart.5 | --color-chart-5 | bg-chart-5 |
CSS → Tailwind 命名ルール
--color- を除いた部分がそのままTailwindクラス名になります。
基本
--color-primary → bg-primary
--color-text-*
--color-text-link → text-text-link
CSS × Tailwind 命名変換
同名
text- → text-text-*
CSSプレフィックスとTailwindユーティリティが同名
Tailwind 標準
*-text → *-foreground
Tailwindエコシステムの標準パターンに合わせたエイリアス
shadcn/ui 等が採用する開発者向けの短縮命名とは目的が異なり、Figma → コード 1:1 同期により、デザイナーと開発者が同じトークン名で会話できる命名体系です。