melta UI Showcase — Design System Reference

モード	読むファイル	用途
クイック	CLAUDE.md のみ	単体UIの生成
標準	+ theme.md + 関連 component md	ページ単位の生成
フル	全ファイル	新規プロジェクト構築

Foundation

カラー

レイヤー構造とセマンティック命名で管理するカラーシステム

Primary パレット

Name	Tailwind	Hex
primary-50	bg-primary-50	#eff6ff
primary-100	bg-primary-100	#dbeafe
primary-200	bg-primary-200	#bfdbfe
primary-300	bg-primary-300	#93c5fd
primary-400	bg-primary-400	#60a5fa
primary-500	bg-primary-500	#3b82f6
primary-600	bg-primary-600	#2563eb
primary-700	bg-primary-700	#1d4ed8
primary-800	bg-primary-800	#1e40af
primary-900	bg-primary-900	#1e3a5f
primary-950	bg-primary-950	#172554

ステータスカラー

Success

emerald-600

Warning

amber-600

Error

red-500

Neutral

slate-600

Accent

primary-600

テキスト3階層

Primary 見出し・強調テキスト text-slate-900

Body 本文テキスト #3d4b5f text-body

Tertiary 補助テキスト・メタデータ text-slate-500

セマンティックカラー

用途	Light	Dark	CSS変数
ページ背景	bg-gray-50	bg-slate-900	--bg-page
Surface	bg-white	bg-slate-800	--bg-surface
見出しテキスト	text-slate-900	text-slate-100	--text-heading
本文テキスト	text-body	text-slate-300	--text-default
補助テキスト	text-slate-500	text-slate-400	--text-muted
ボーダー	border-slate-200	border-slate-700	--border-default
フォーカス	ring-primary-500/50	ring-primary-400/50	—

ダークモードプレビュー

html[data-theme="dark"] 適用時のプレビュー

見出しテキスト text-slate-100

本文テキスト text-slate-300

補助テキスト text-slate-400

成功警告エラーアクセント

→ 詳細: foundations/color.md / theme.md

Foundation

タイポグラフィ

デジタル庁準拠のフォントスケール。本文 18px / 行間 200%

タイプスケール

32px

声を張らずに伝わるUI

text-3xl bold
lh 140% / ls 1%

26px

コンテンツを主役にせよ

text-2xl semibold
lh 140% / ls 1%

22px

認知コストを最小化する

text-xl semibold
lh 140% / ls 1%

20px

タイポグラフィで叫ばない

text-lg medium
lh 150% / ls 1%

18px

UIは主役ではなく、コンテンツを支える器である

text-base regular
lh 200% / ls 2%

15px

ふとした瞬間にほっこりする温かさ

text-sm regular
lh 170% / ls 2%

13px

Quiet Precision — 静かだが精密

text-xs medium
lh 140% / ls 2%

フォントファミリー

Sans-serif

Inter, Hiragino Sans, Noto Sans JP, sans-serif

ABCDEFGabcdefg あいうえお漢字表示 0123456789

Monospace

JetBrains Mono, SF Mono, monospace

const config = { color: '#2563eb' };

フォントウェイト

Aa

Regular

400

Aa

Medium

500

Aa

Semibold

600

Aa

Bold

700

→ 詳細: foundations/typography.md

Foundation

スペーシング

4pxベースグリッド。8の倍数を推奨

スペーシングルーラー

p-1

4px

p-2

8px

p-3

12px

p-4

16px

p-5

20px

p-6

24px

p-8

32px

p-10

40px

p-12

48px

p-16

64px

用途コンテキスト

カテゴリ	トークン	用途
Micro	p-1 〜 p-3	アイコン間隔、ラベル
Standard	p-4 〜 p-8	カード内、コンポーネント間
Macro	p-10 〜 p-16	セクション間、ページ余白

→ 詳細: foundations/spacing.md

Foundation

エレベーション・角丸・モーション・Z-index

4段階のシャドウ・角丸・3段階のモーション・5段階のZ-index

シャドウ

none

shadow-none

sm

shadow-sm

md

shadow-md

xl (overlay)

shadow-xl

角丸

rounded

4px

rounded-lg

8px

rounded-xl

12px

rounded-full

9999px

モーション

Fast duration-150 150ms

Normal duration-200 200ms

Slow duration-300 300ms

Z-index スタック

z-0 — コンテンツ

z-20 — ドロップダウン

z-30 — sticky ヘッダー

z-50 — モーダル (z-40 overlay)

→ 詳細: foundations/elevation.md / radius.md / motion.md / z-index.md

Foundation

アイコン

デュアルソース: Charcoal Icons (207, fill) + Lucide Icons (15, stroke)

Charcoal Icons 2.0

プライマリ — 207個 / fill ベース

fill="currentColor"

assets/icons/{Name}.svg (PascalCase)

Lucide Icons

セカンダリ補完 — 15個 / stroke ベース

stroke="currentColor" fill="none"

assets/icons/lucide/{name}.svg (kebab-case)

代表アイコン

Home

Search

Close

Add

Delete

Pencil

Check

Info

bar-chart-2

clock

shield

trending-up

サイズリファレンス

w-4 h-4

16px

w-5 h-5

20px ★

w-6 h-6

24px

w-8 h-8

32px

名前マッピング（直感的でない名前）

一般名	Charcoal名	備考
ChevronDown	PullDown	太めのV字
ChevronLeft	Prev / Back	Back は 16x16
ChevronRight	Next
Email	Message	封筒アイコン
Lock	LockLock	南京錠
Edit (pencil)	Pencil	24x24。Edit は 32x32

→ 詳細: foundations/icons.md

全222アイコンを見る →

Component

ボタン

アクションを実行するためのコンポーネント。3サイズ × 6バリアント

バリアント

バリアント	プレビュー	主要クラス
Contained		`bg-primary-600 text-white`
Outlined		`bg-white border text-slate-700`
Danger		`bg-red-500 text-white`
Subtle		`bg-primary-50 text-primary-600`
Disabled		`opacity-50 cursor-not-allowed disabled`
Loading		`opacity-75 + inline-spinner`

サイズ

サイズ	プレビュー	主要クラス
Large		`px-5 py-2.5 text-base`
Medium		`px-4 py-2 text-[1rem]`
Small		`px-3 py-1.5 text-[0.875rem]`
Icon		`w-10 h-10 + aria-label`

HTML

<button class="bg-primary-600 text-white px-4 py-2 rounded-lg text-[1rem] font-medium hover:bg-primary-700 transition-colors">
  保存する
</button>

仕様詳細: components/button.md

Component

テキストフィールド

テキスト入力用のフォームコントロール

名前 *

電話番号

数字のみ入力してください

無効フィールド

HTML

<label for="name" class="block text-sm font-medium text-slate-900 mb-1">名前</label>
<input id="name" type="text" placeholder="山田 太郎"
  class="w-full px-3 py-2 text-base border border-slate-300 rounded-lg
  focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
  caret-primary-600 transition-colors">

仕様詳細: components/textfield.md

Component

セレクト

フォーム内の値選択。ネイティブ select 要素

権限

HTML

<div class="relative">
  <select class="w-full appearance-none px-3 py-2 pr-10 text-base
    border border-slate-300 rounded-lg focus:ring-2
    focus:ring-primary-500/50 focus:border-primary-500
    transition-colors bg-white">
    <option value="">選択してください</option>
  </select>
  <svg class="pointer-events-none absolute right-3 top-1/2
    -translate-y-1/2 w-4 h-4 text-slate-500"
    fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round"
      stroke-width="2" d="M19 9l-7 7-7-7"/>
  </svg>
</div>

仕様詳細: components/select.md

Component

Checkbox

複数選択のフォームコントロール。CSS 18px (1.125rem)

通知設定

メール通知

プッシュ通知

SMS通知（準備中）

HTML

<fieldset>
  <legend class="text-sm font-medium text-slate-900 mb-2">通知設定</legend>
  <div class="leading-normal space-y-3">
    <div class="flex items-center gap-2">
      <input id="cb1" type="checkbox" checked
        class="rounded border-slate-300 text-primary-600 focus:ring-primary-500/50"
        style="width:1.125rem;height:1.125rem;">
      <label for="cb1" class="text-sm text-body">メール通知</label>
    </div>
  </div>
</fieldset>

仕様詳細: components/checkbox.md

Component

Radio

排他選択のフォームコントロール。CSS 18px (1.125rem)

表示モード

リスト表示

グリッド表示

HTML

<fieldset>
  <legend class="text-sm font-medium text-slate-900 mb-2">表示モード</legend>
  <div class="leading-normal space-y-3">
    <div class="flex items-center gap-2">
      <input id="rd1" name="display" type="radio" checked
        class="border-slate-300 text-primary-600 focus:ring-primary-500/50"
        style="width:1.125rem;height:1.125rem;">
      <label for="rd1" class="text-sm text-body">リスト表示</label>
    </div>
    <div class="flex items-center gap-2">
      <input id="rd2" name="display" type="radio"
        class="border-slate-300 text-primary-600 focus:ring-primary-500/50"
        style="width:1.125rem;height:1.125rem;">
      <label for="rd2" class="text-sm text-body">グリッド表示</label>
    </div>
  </div>
</fieldset>

仕様詳細: components/radio.md

Component

Toggle

ON/OFF の二値切り替え

メール通知

新着メールの通知を受け取る

ダークモード

画面の配色を暗くします

HTML

<div class="leading-normal flex items-center justify-between">
  <div>
    <p class="text-sm font-medium text-slate-900">メール通知</p>
    <p class="text-sm text-slate-500">新着メールの通知を受け取る</p>
  </div>
  <button role="switch" aria-checked="false" aria-label="メール通知"
    class="relative w-11 h-6 bg-slate-200 rounded-full transition-colors">
    <span class="absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full shadow-sm transition-transform"></span>
  </button>
</div>

仕様詳細: components/toggle.md

Component

Date Picker

カレンダーポップアップによる日付選択。キーボード完全対応

インタラクティブデモ

日付

矢印キーで日付移動 / Enter で選択 / Escape で閉じる / PageUp/Down で月送り

HTML

<div class="relative" id="dp-wrapper">
  <label class="block text-sm font-medium text-slate-900 mb-1">日付</label>
  <button role="combobox" aria-haspopup="dialog" aria-expanded="false"
    class="w-full flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-base">
    <svg class="w-5 h-5 text-slate-500" fill="currentColor" viewBox="0 0 24 24">...</svg>
    <span class="flex-1 text-left">日付を選択</span>
    <svg class="w-4 h-4 text-slate-500" fill="currentColor" viewBox="0 0 24 24">...</svg>
  </button>
  <input type="hidden" name="date">
  <div role="dialog" aria-label="カレンダー"
    class="absolute mt-1 w-[320px] bg-white rounded-xl border border-slate-200 shadow-md z-20 p-4">
    <!-- Month Header + Day Grid + Today Button -->
  </div>
</div>

仕様詳細: components/datepicker.md

Component

カード

コンテンツをグループ化する汎用コンテナ

基本カード

カードの基本的なバリアント。bg-white / rounded-xl / border / p-6 / shadow-sm

総ユーザー数

12,345

+12.5%

東京プロジェクト

2026年度の都市計画レポート

HTML

<div class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
  <h3 class="text-lg font-semibold text-slate-900">カードタイトル</h3>
  <p class="mt-2 text-sm text-body">カード本文</p>
</div>

仕様詳細: components/card.md

Component

テーブル

構造化データの一覧表示

melta-app.example.com/users

名前	メール	ステータス
YT 山田太郎	taro@example.com	アクティブ
SH 鈴木花子	hanako@example.com	保留中
TN 田中次郎	jiro@example.com	無効

HTML

<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
  <table class="w-full">
    <thead><tr class="border-b border-slate-200 bg-gray-50">
      <th scope="col" class="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">名前</th>
      <th scope="col" class="text-left px-6 py-3 text-xs font-medium text-slate-500 uppercase tracking-wider">ステータス</th>
    </tr></thead>
    <tbody class="divide-y divide-slate-200">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-slate-900">山田 太郎</td>
        <td class="px-6 py-4"><span class="inline-flex items-center bg-emerald-50 text-emerald-700 px-3 py-1 rounded-full text-xs font-medium">アクティブ</span></td>
      </tr>
    </tbody>
  </table>
</div>

仕様詳細: components/table.md

Component

<div class="bg-white rounded-xl border border-slate-200 shadow-sm divide-y divide-slate-200">
  <div class="flex items-center gap-3 px-6 py-4 hover:bg-gray-50 transition-colors">
    <div class="w-10 h-10 rounded-full bg-primary-50 text-primary-600 font-medium inline-flex items-center justify-center text-sm">YT</div>
    <div class="flex-1 min-w-0">
      <p class="text-sm font-medium text-slate-900">山田 太郎</p>
      <p class="text-sm text-slate-500 truncate">taro@example.com</p>
    </div>
    <span class="inline-flex items-center bg-emerald-50 text-emerald-700 px-3 py-1 rounded-full text-xs font-medium">アクティブ</span>
  </div>
</div>

仕様詳細: components/list.md

Component

バッジ

ステータスやカテゴリを示す小さなラベル

完了保留中エラー下書き新着

HTML

<span class="inline-flex items-center bg-emerald-50 text-emerald-700
  px-3 py-1 rounded-full text-xs font-medium">完了</span>

仕様詳細: components/badge.md

Component

タグ / チップ

ユーザーが管理するメタデータ。削除可能タグとフィルターチップの2パターン

Basic Tag（削除可能）

デザインアーカイブ完了済み優先緊急

Filter Chip（トグル選択）

タグ入力フィールド

スキルタグ

JavaScript React

HTML

<!-- Basic Tag -->
<span role="listitem" class="inline-flex items-center gap-1 px-3 py-1
  rounded-full text-xs font-medium bg-primary-50 text-primary-700">
  デザイン
  <button type="button" aria-label="デザインを削除"
    class="ml-0.5 -mr-1 p-0.5 flex items-center justify-center rounded-full
    text-primary-400 hover:text-primary-600 hover:bg-primary-100
    focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-colors">
    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M6 18L18 6M6 6l12 12"/></svg>
  </button>
</span>

<!-- Filter Chip (Active) -->
<button type="button" role="option" aria-selected="true"
  class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm
  font-medium border bg-primary-50 border-primary-200 text-primary-700
  focus:outline-none focus:ring-2 focus:ring-primary-500/50 transition-colors">
  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
      d="M5 13l4 4L19 7"/></svg>
  フロントエンド
</button>

仕様詳細: components/tag.md

Component

Avatar

ユーザーアイコン。写真・イニシャル・サイズバリエーション

写真

イニシャル

YT

SH

TN

サイズ

YT

w-8

w-10

w-12

HTML

<!-- 写真 -->
<img src="avatar.jpg" alt="山田太郎"
  class="w-10 h-10 rounded-full object-cover"
  role="img" aria-label="山田太郎">

<!-- イニシャル -->
<div class="w-10 h-10 rounded-full bg-primary-50 text-primary-600
  font-medium inline-flex items-center justify-center text-sm"
  role="img" aria-label="山田太郎">YT</div>

仕様詳細: components/avatar.md

Component

Divider

セクション間やコンテンツ間の視覚的な区切り

水平（デフォルト）

セクション A のコンテンツ

セクション B のコンテンツ

テキスト付き

または

垂直

メニュー A

メニュー B

メニュー C

濃い線

濃い区切りが必要な場合

標準（slate-200）との使い分け

HTML

<!-- 水平 -->
<hr class="border-t border-slate-200 my-6">

<!-- テキスト付き -->
<div role="separator" class="flex items-center gap-4 my-6">
  <div class="flex-1 border-t border-slate-200"></div>
  <span class="text-sm text-slate-500">または</span>
  <div class="flex-1 border-t border-slate-200"></div>
</div>

<!-- 垂直 -->
<div role="separator" aria-orientation="vertical"
  class="border-l border-slate-200 self-stretch"></div>

仕様詳細: components/divider.md

Component

タブ

コンテンツをカテゴリで切り替えるナビゲーション

melta-app.example.com/settings

概要タブのコンテンツ。アクティブタブは primary-600 のボーダーとテキスト。非アクティブは slate-500 + transparent ボーダーで、hover 時に slate-700 へ遷移します。タブラベルが長い場合でも、flex gap-6 により均等な間隔が保たれます。

HTML

<div role="tablist" class="flex gap-6 border-b border-slate-200">
  <button role="tab" aria-selected="true"
    class="text-sm font-semibold text-primary-600 border-b-2 border-primary-600 pb-3">概要</button>
  <button role="tab" aria-selected="false"
    class="text-sm font-medium text-slate-500 border-b-2 border-transparent pb-3">詳細</button>
</div>

仕様詳細: components/tabs.md

Component

Breadcrumb

パンくずリスト — 現在位置を階層で表示

HTML

<nav aria-label="パンくずリスト">
  <ol class="flex items-center gap-2 text-sm">
    <li><a href="#" class="text-slate-500 hover:text-slate-700">ホーム</a></li>
    <li class="text-slate-400">/</li>
    <li><a href="#" class="text-slate-500 hover:text-slate-700">設定</a></li>
    <li class="text-slate-400">/</li>
    <li><span class="text-slate-900 font-medium">プロフィール</span></li>
  </ol>
</nav>

仕様詳細: components/breadcrumb.md

Component

Pagination

ページ送りナビゲーション

HTML

<nav aria-label="ページネーション" class="flex items-center justify-center gap-2">
  <button aria-label="前のページ" disabled
    class="w-10 h-10 rounded-lg bg-white border border-slate-200 inline-flex items-center justify-center text-slate-400 cursor-not-allowed">
    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
  </button>
  <button aria-current="page" class="w-10 h-10 rounded-lg bg-primary-600 text-white font-medium text-sm">1</button>
  <button class="w-10 h-10 rounded-lg bg-white border border-slate-200 text-slate-700 font-medium text-sm hover:bg-gray-50">2</button>
  <button aria-label="次のページ"
    class="w-10 h-10 rounded-lg bg-white border border-slate-200 inline-flex items-center justify-center text-slate-700 hover:bg-gray-50">
    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
  </button>
</nav>

仕様詳細: components/pagination.md

Component

サイドバー

アプリケーションのメインナビゲーション。標準（w-64）とコンパクト（w-16）の2バリアント

バリアント比較

Standard (w-64)

w-16

HTML — 標準サイドバーナビアイテム

<aside class="w-64 bg-white border-r border-slate-200 flex-shrink-0 flex flex-col h-screen">
  <!-- Header -->
  <div class="px-6 py-4 border-b border-slate-200">
    <span class="text-lg font-bold text-slate-900">App Name</span>
  </div>

  <!-- Navigation -->
  <nav class="flex-1 overflow-y-auto px-4 py-4 space-y-1" aria-label="メインナビゲーション">
    <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-primary-600 bg-primary-50 rounded-lg" aria-current="page">
      <!-- Icon --> ダッシュボード
    </a>
    <a href="#" class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-body hover:bg-gray-50 rounded-lg transition-colors">
      <!-- Icon --> プロジェクト
    </a>
  </nav>

  <!-- Footer -->
  <div class="px-4 py-4 border-t border-slate-200 mt-auto">
    <div class="flex items-center gap-3">
      <div class="w-8 h-8 bg-primary-50 text-primary-600 rounded-full flex items-center justify-center text-sm font-medium">T</div>
      <span class="text-sm text-slate-700">Taro Yamada</span>
    </div>
  </div>
</aside>

フルデモを見る

仕様詳細: components/sidebar.md

Component

Stepper

マルチステッププロセスの進捗表示。3状態: Completed / Active / Upcoming

水平

アカウント

2

プロフィール

3

確認

垂直（ラベル + 説明付き）

アカウント作成

メールアドレスとパスワードを設定しました

2

プロフィール設定

名前とアバターを設定してください

3

完了

設定内容を確認して完了します

HTML

<div role="list" class="flex items-center">
  <!-- Completed -->
  <div role="listitem">
    <div class="w-8 h-8 rounded-full bg-primary-600 text-white inline-flex items-center justify-center">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
      </svg>
    </div>
  </div>
  <div class="flex-1 h-0.5 mx-3 bg-primary-600"></div>
  <!-- Active -->
  <div role="listitem">
    <div class="w-8 h-8 rounded-full border-2 border-primary-600 bg-white text-primary-600 font-semibold inline-flex items-center justify-center" aria-current="step">2</div>
  </div>
  <div class="flex-1 h-0.5 mx-3 bg-slate-200"></div>
  <!-- Upcoming -->
  <div role="listitem">
    <div class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 font-medium inline-flex items-center justify-center">3</div>
  </div>
</div>

仕様詳細: components/stepper.md

Component

Accordion

コンテンツの展開/折りたたみ。クリックでトグル

Claude Code でのヴァイブコーディングに最適化されたデザインシステムです。

HTML

<div class="bg-white rounded-xl border border-slate-200 shadow-sm divide-y divide-slate-200">
  <div>
    <button class="w-full flex items-center justify-between py-4 px-6 text-left text-base font-medium text-slate-900" aria-expanded="false">
      セクションタイトル
      <svg class="w-5 h-5 text-slate-500" fill="currentColor" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>
    </button>
    <div class="hidden px-6 pb-4">
      <p class="text-base text-body">コンテンツ</p>
    </div>
  </div>
</div>

仕様詳細: components/accordion.md

Component

Alert

重要な情報をユーザーに伝えるインラインメッセージ

お知らせ

システムメンテナンスを予定しています。

エラー

処理中にエラーが発生しました。

警告

ストレージ容量が残りわずかです。

成功

設定が保存されました。

HTML

<div role="status" class="bg-primary-50 border border-primary-200 text-primary-800 rounded-lg p-4 flex items-start gap-3">
  <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 24 24">...</svg>
  <div><p class="font-medium">お知らせ</p></div>
</div>

仕様詳細: components/alert.md

Component

モーダル

ユーザーの操作を一時中断し、確認・入力を求めるダイアログ

インタラクティブデモ

ESC キーまたはオーバーレイクリックで閉じる（アラートモーダルはボタン操作のみ）

HTML

<div class="fixed inset-0 bg-black/50 z-40"></div>
<div role="dialog" aria-modal="true" aria-labelledby="modal-title"
  class="fixed inset-0 flex items-center justify-center z-50 p-4">
  <div class="bg-white rounded-xl shadow-xl w-full max-w-sm">
    <!-- Header / Body / Footer -->
  </div>
</div>

仕様詳細: components/modal.md

Component

Dropdown Menu

アクション実行のためのメニュー。キーボードナビ対応（↑↓/Home/End/Esc）

HTML

<div class="relative inline-block">
  <button type="button" aria-haspopup="true" aria-expanded="false"
    class="inline-flex items-center gap-2 bg-white text-slate-700 border border-slate-200 px-4 py-2 rounded-lg text-[1rem] font-medium hover:bg-gray-50">
    オプション
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
  </button>
  <div role="menu" class="absolute top-full left-0 mt-1 w-48 bg-white rounded-lg border border-slate-200 shadow-md z-20 py-1">
    <button role="menuitem" tabindex="-1" class="w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-gray-50">編集</button>
    <button role="menuitem" tabindex="-1" class="w-full text-left px-3 py-2 text-sm text-slate-700 hover:bg-gray-50">複製</button>
    <div role="separator" class="border-t border-slate-200 my-1"></div>
    <button role="menuitem" tabindex="-1" class="w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50">削除</button>
  </div>
</div>

仕様詳細: components/dropdown.md

Component

Toast / Notification

操作結果のフィードバック。右上にスライドイン、Success/Info は5秒で自動消去

トリガーデモ

HTML

<div role="status" aria-live="polite"
  class="flex items-center gap-3 p-4 bg-emerald-50 border border-emerald-200 rounded-lg shadow-sm">
  <svg class="w-6 h-6 text-emerald-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">...</svg>
  <p class="flex-1 text-sm font-medium text-emerald-800">保存しました</p>
  <button aria-label="閉じる" class="text-emerald-400 hover:text-emerald-600">...</button>
</div>

仕様詳細: components/toast.md

Component

Tooltip

ホバーで表示される補足情報

HTML

<div class="relative group inline-block">
  <button class="...">ホバー</button>
  <div role="tooltip" class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2
    bg-slate-600 text-white text-sm rounded-lg shadow-sm px-3 py-2
    opacity-0 group-hover:opacity-100 transition-opacity duration-200">
    ツールチップ
  </div>
</div>

仕様詳細: components/tooltip.md

Component

Skeleton

Loading中のコンテンツ占有領域を予告するプレースホルダー

カードスケルトン

リストスケルトン

テーブルスケルトン

インラインスピナー

ドットローダー

読み込み中...

コード例（カードスケルトン）

<div aria-busy="true" role="status" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm space-y-4">
  <span class="sr-only">読み込み中</span>
  <div class="flex items-center gap-3">
    <div class="w-10 h-10 rounded-full bg-slate-200 skeleton-pulse"></div>
    <div class="flex-1 space-y-2">
      <div class="h-4 bg-slate-200 rounded-md w-3/4 skeleton-pulse"></div>
      <div class="h-3 bg-slate-200 rounded-md w-1/2 skeleton-pulse"></div>
    </div>
  </div>
  <div class="space-y-2">
    <div class="h-3 bg-slate-200 rounded-md w-full skeleton-pulse"></div>
    <div class="h-3 bg-slate-200 rounded-md w-5/6 skeleton-pulse"></div>
  </div>
</div>

仕様詳細: components/skeleton.md

Component

Progress

進捗を示すバー。アニメーション付き

アップロード 72%

処理完了 100%

HTML

<div class="flex items-center justify-between mb-1">
  <span class="text-sm font-medium text-slate-900">アップロード</span>
  <span class="text-sm text-slate-500">72%</span>
</div>
<div class="bg-slate-200 rounded-full h-2" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
  <div class="bg-primary-600 rounded-full h-2 transition-all duration-500" style="width:72%"></div>
</div>

仕様詳細: components/progress.md

Pattern

レイアウトパターン

Sidebar + Main の2列構成。コンテンツ幅リファレンス

Sidebar (w-64)

Main (max-w-7xl mx-auto px-8 py-12)

コンテンツ幅

Narrowmax-w-2xl672px — フォーム、設定

Mediummax-w-5xl1024px — 記事、ドキュメント

Widemax-w-7xl1280px — ダッシュボード

Fullw-fullテーブル、データ一覧

→ 詳細: patterns/layout.md

Pattern

フォームパターン

TextField + Select + Checkbox + Radio + Toggle + Button の完全フォーム

名前 *

メールアドレス

権限

通知設定

メール通知

プッシュ通知

表示モード

リスト表示

グリッド表示

ダークモード

画面の配色を暗くします

→ 詳細: patterns/form.md

Pattern

ナビゲーションパターン

サイドバーナビ例 — active/default 状態

→ 詳細: patterns/navigation.md

State

インタラクション状態

Loading / Empty / Error / Complete — 4つの画面状態

読み込み中...

→ 詳細: patterns/interaction-states.md

State

Empty State

データ0件・検索結果なし・初回利用 — 3つのバリエーション

データがありません

まだ項目が登録されていません。最初のデータを追加してみましょう。

→ 詳細: patterns/interaction-states.md

State

Emotional Feedback

「機能的な黒子であり、たまに微笑む」— 状態別アニメーションデモ

Success

scale 400ms

Error

shake 200ms x2

Warning

fadeIn 200ms

Info

fadeIn 200ms

→ 詳細: foundations/emotional-feedback.md

Reference

禁止パターン Do / Don't

主要な禁止パターンのビフォー / アフター

DON'T

text-black

純黒 — コントラストが強すぎて目が疲れる

DO

text-slate-900

青みがかった黒 — 長時間利用でも目に優しい

DON'T

shadow-lg カード

影が強すぎてノイズになる

DO

shadow-sm カード

控えめな影で軽い浮遊感

DON'T

rounded-none

角丸なし — UIの統一感を損なう

DO

rounded-xl

12px角丸 — カードの標準

DON'T

色だけで情報伝達 — 色覚多様性に非対応

DO

完了エラー

アイコン + テキストを併用

全71項目: prohibited.md

境界を溶かすUI

人間にも、AIにも、読めるデザインシステム。

for Human

for Both

for AI

段階的読み込み — AIのコンテキストを浪費しない

Layered

Contrast

Semantic

Minimal

Grid

読み込みモード

カラー#

Primary パレット

ステータスカラー

テキスト3階層

セマンティックカラー

ダークモードプレビュー

タイポグラフィ#

タイプスケール

フォントファミリー

フォントウェイト

スペーシング#

スペーシングルーラー

用途コンテキスト

エレベーション・角丸・モーション・Z-index#

シャドウ

角丸

モーション

Z-index スタック

アイコン#

Charcoal Icons 2.0

Lucide Icons

代表アイコン

サイズリファレンス

名前マッピング（直感的でない名前）

ボタン#

バリアント

サイズ

テキストフィールド#

セレクト#

Checkbox#

Radio#

Toggle#

Date Picker#

インタラクティブデモ

カード#

基本カード

東京プロジェクト

テーブル#

リスト#

バッジ#

タグ / チップ#

Basic Tag（削除可能）

Filter Chip（トグル選択）

タグ入力フィールド

Avatar#

写真

イニシャル

サイズ

Divider#

水平（デフォルト）

テキスト付き

垂直

濃い線

タブ#

Breadcrumb#

Pagination#

サイドバー#

バリアント比較

Stepper#

水平

垂直（ラベル + 説明付き）

Accordion#

Alert#

モーダル#

インタラクティブデモ

Dropdown Menu#

Toast / Notification#

トリガーデモ

カラー

タイポグラフィ

スペーシング

エレベーション・角丸・モーション・Z-index

アイコン

ボタン

テキストフィールド

セレクト

Checkbox

Radio

Toggle

Date Picker

カード

テーブル

リスト

バッジ

タグ / チップ

Avatar

Divider

タブ

Breadcrumb

Pagination

サイドバー

Stepper

Accordion

Alert

モーダル

Dropdown Menu

Toast / Notification

Tooltip

Skeleton

Progress

レイアウトパターン

フォームパターン

ナビゲーションパターン

インタラクション状態

Empty State

Emotional Feedback

禁止パターン Do / Don't