統合デザインシステム
デザイントークンは、デザインシステムの基礎となる定数値です。カラー、タイポグラフィ、スペーシング、シャドウなどの視覚的属性を統一し、一貫性のあるデザインを実現します。
このページでは、複数のWebサイトから抽出したデザイントークンを、Tailwind CSSクラスとして使用できる形で提供しています。
| トークン名 | プレビュー | HEX | Tailwindクラス | 用途 |
|---|---|---|---|---|
| coral-50 | #FFF6EE | bg-coral-50 | 極薄背景 | |
| coral-100 | #FFEADB | bg-coral-100 | 薄い背景 | |
| coral-200 | #FFEEDE | bg-coral-200 | アクティブ状態 | |
| coral-300 | #FFDCC1 | bg-coral-300 | ホバー状態 | |
| coral-500 | #FFB894 | bg-coral-500 | プライマリ | |
| coral-700 | #E6A680 | bg-coral-700 | ダーク |
| トークン名 | プレビュー | HEX | Tailwindクラス | 用途 |
|---|---|---|---|---|
| accent-blue-50 | #E7F7F6 | bg-accent-blue-50 | 極薄背景 | |
| accent-blue-100 | #C9EFED | bg-accent-blue-100 | 薄い背景 | |
| accent-blue-500 | #52B7B5 | bg-accent-blue-500 | リンク、CTA | |
| accent-blue-700 | #2F716F | bg-accent-blue-700 | ホバー | |
| accent-blue-800 | #225452 | bg-accent-blue-800 | ダークホバー |
見出し・本文用（Murecho優先）
Murecho フォント - あいうえお 123
font-ds-heading / font-ds-body 見出し・本文用（Noto Sans JP優先）
Noto Sans JP フォント - あいうえお 123
font-jp-heading / font-jp-body
ブランド基調に合わせて、Murecho（ラウンド気味のモダンゴシック）と Noto Sans JP（汎用性の高いUDフォント）のいずれも選択できます。Tailwindのユーティリティクラスで
font-ds-* または
font-jp-* を切り替えてください。
H1 - ページタイトル
text-5xl font-bold H2 - セクション見出し
text-4xl font-ds-heading font-bold H3 - サブ見出し
text-3xl font-ds-heading font-semibold Body Large - リード文
これは大きめの本文テキストです。
text-lg Body - 本文
これは標準の本文テキストです。
text-base Body Small - キャプション
これは小さめの本文テキストです。
text-sm 基本グリッド: 8px
| トークン | サイズ | プレビュー | Tailwindクラス | 用途 |
|---|---|---|---|---|
| xs | 4px | p-1 / m-1 | 極小 | |
| sm | 8px | p-2 / m-2 | 小 | |
| md | 16px | p-4 / m-4 | 中（デフォルト） | |
| lg | 24px | p-6 / m-6 | 大 | |
| xl | 32px | p-8 / m-8 | 特大 | |
| 2xl | 48px | p-12 / m-12 | セクション間 | |
| 3xl | 64px | p-16 / m-16 | ページ区切り |
none (0px)
rounded-none default (8px)
rounded lg (16px)
rounded-lg full (円形)
rounded-full shadow-sm
shadow-sm shadow
shadow shadow-md
shadow-md shadow-lg
shadow-lg shadow-xl
shadow-xl FAQ Active
shadow-faq-active duration-150 duration-200 duration-300 transition-all duration-200 ease-in-out