Design Tokens

デザイントークンとは

デザイントークンは、デザインシステムにおける最小単位の設計値です。色、フォントサイズ、スペーシングなど、UI を構成する基本的な値を一元管理します。

なぜトークンが必要か

• 一貫性: アプリケーション全体でデザインの統一を保証
• メンテナンス性: 値の変更が一箇所で完結
• コミュニケーション: デザイナーとエンジニア間の共通言語

MUI テーマでのトークン実装

このプロジェクトでは MUI の createTheme を使用してトークンをテーマオブジェクトとして定義しています。

tokens/theme.ts

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  palette: {
    primary: {
      main: "#2563eb",
      light: "#60a5fa",
      dark: "#1e40af",
    },
    success: { main: "#16a34a" },
    warning: { main: "#d97706" },
    error: { main: "#dc2626" },
  },
  typography: {
    fontFamily: "'Inter', sans-serif",
  },
  spacing: 4, // base 4px
  shape: { borderRadius: 6 },
});

MUI テーマオブジェクトは ThemeProvider 経由で全コンポーネントに自動的に提供されます。

トークンのカテゴリ

カテゴリ	MUI テーマフィールド	例
Colors	palette	primary, grey, success, warning, error
Spacing	spacing	4px ベース (spacing(1)=4px, spacing(2)=8px…)
Typography	typography	fontFamily, fontWeight
Shape	shape	borderRadius
Component Overrides	components	MuiButton の styleOverrides