> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # デザインシステムの中身とDESIGN.md > 生成されたデザインシステムに含まれるもの — トークン、色、タイポグラフィ、コンポーネント — と、DESIGN.mdがそれをプロジェクト内でどう表現するかを解説します。 ## デザインシステムの中身 生成されたデザインシステムには以下が含まれます： * **トークン** — システムの他の部分が参照する、名前付きの値（色、間隔、角丸など） * **色** — 役割（プライマリ、サーフェス、アクセントなど）を持つパレット * **タイポグラフィ** — フォントファミリー、サイズ、ウェイト * **サンプルコンポーネント** — システムの使用例を示す2〜3個の構築済みコンポーネント * **ロゴとブランドアセット** — 明確に提供した場合に含まれます フォーカスモードで生きたスタイルガイドとして表示されたAPEX X1 Design System。色、フォント、レイアウト、コンポーネントのサイドバー、コアパレット、タイプスケール、サンプルコンポーネントが表示されている ## 保存のされ方 生成されたシステムは、**生きたスタイルガイド**としてプロジェクト内に存在します：`tokens.json`のトークンが、あなたのコンポーネントが使用するCSS変数（例：`src/index.css`）に反映されます。`DESIGN.md`はそれをドキュメントとして表現したもので、あなたが読むことも、Agentが利用することもできます。 ## DESIGN.mdをソースとして使う 既存の`DESIGN.md`は新しいデザインシステムの種にできます。[作成する](/ja/design/create-a-design-system)ときに、Figma URL、Webサイト、コード、参考画像などの他のソースと並べてそれを指定してください。