@k8o/arte-odyssey 4.0.0 → 4.2.0

package/dist/components/icons/base.d.mts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from "react";
 
 //#region src/components/icons/base.d.ts
 type BaseIconProps = {
-  size: 'sm' | 'md' | 'lg';
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 };
 declare const BaseIcon: FC<BaseIconProps & {
   renderItem: (arg: {

package/dist/components/icons/base.mjs

@@ -1,7 +1,16 @@
 import { cn } from "../../helpers/cn.mjs";
 //#region src/components/icons/base.tsx
+const sizeClass = {
+	xs: "size-3",
+	sm: "size-4",
+	md: "size-6",
+	lg: "size-8",
+	xl: "size-10",
+	"2xl": "size-12",
+	"3xl": "size-14"
+};
 const BaseIcon = ({ size, renderItem }) => {
-	return renderItem({ className: cn(size === "sm" && "size-4", size === "md" && "size-6", size === "lg" && "size-8") });
+	return renderItem({ className: cn(sizeClass[size]) });
 };
 //#endregion
 export { BaseIcon };

package/dist/components/index.d.mts

@@ -52,5 +52,4 @@ import { Popover } from "./overlays/popover/popover.mjs";
 import { Tooltip } from "./overlays/tooltip/tooltip.mjs";
 import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
-import { ErrorBoundary } from "./utility/error-boundary/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ErrorBoundary, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/components/index.mjs

@@ -52,5 +52,4 @@ import { Popover } from "./overlays/popover/popover.mjs";
 import { DropdownMenu } from "./overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./overlays/list-box/list-box.mjs";
 import { Tooltip } from "./overlays/tooltip/tooltip.mjs";
-import { ErrorBoundary } from "./utility/error-boundary/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ErrorBoundary, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/index.d.mts

@@ -53,7 +53,6 @@ import { Popover } from "./components/overlays/popover/popover.mjs";
 import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
 import { ArteOdysseyProvider } from "./components/providers/arte-odyssey-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./components/providers/portal-root.mjs";
-import { ErrorBoundary } from "./components/utility/error-boundary/index.mjs";
 import { cn } from "./helpers/cn.mjs";
 import { findAllColors } from "./helpers/color/find-all-colors.mjs";
 import { isInternalRoute } from "./helpers/is-internal-route.mjs";
@@ -74,4 +73,4 @@ import { useStep } from "./hooks/step/index.mjs";
 import { useTimeout } from "./hooks/timeout/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Direction, Drawer, DropdownMenu, EasyIcon, ErrorBoundary, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Option, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useClickAway, useClient, useClipboard, useHash, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useStep, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Direction, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Option, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Status, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useClickAway, useClient, useClipboard, useHash, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useStep, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };

package/dist/index.mjs

@@ -62,7 +62,6 @@ import { Popover } from "./components/overlays/popover/popover.mjs";
 import { DropdownMenu } from "./components/overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./components/overlays/list-box/list-box.mjs";
 import { Tooltip } from "./components/overlays/tooltip/tooltip.mjs";
-import { ErrorBoundary } from "./components/utility/error-boundary/index.mjs";
 import { useClient } from "./hooks/client/index.mjs";
 import { useClipboard } from "./hooks/clipboard/index.mjs";
 import { useHash } from "./hooks/hash/index.mjs";
@@ -73,4 +72,4 @@ import { useScrollDirection } from "./hooks/scroll-direction/index.mjs";
 import { useStep } from "./hooks/step/index.mjs";
 import { useWindowResize } from "./hooks/window-resize/index.mjs";
 import { useWindowSize } from "./hooks/window-size/index.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ErrorBoundary, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useClickAway, useClient, useClipboard, useHash, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useStep, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, IconLink, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkButton, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, between, cast, cn, commalize, findAllColors, isInternalRoute, toPrecision, useClickAway, useClient, useClipboard, useHash, useInterval, useLocalStorage, useOpenContext, usePortalRoot, useResize, useScrollDirection, useStep, useTimeout, useToast, useWindowResize, useWindowSize, uuidV4 };

package/docs/GUIDE.md

@@ -0,0 +1,232 @@
+# ArteOdyssey Design Guide
+
+`@k8o/arte-odyssey` デザインシステムを使って UI を作るためのガイド。
+
+## セットアップ
+
+```bash
+npm install @k8o/arte-odyssey
+```
+
+```tsx
+// 1. スタイルシートを読み込む（エントリポイントで1回）
+import '@k8o/arte-odyssey/styles.css';
+
+// 2. Provider でアプリを囲む
+import { ArteOdysseyProvider } from '@k8o/arte-odyssey/providers';
+
+function App() {
+  return (
+    <ArteOdysseyProvider>
+      <YourApp />
+    </ArteOdysseyProvider>
+  );
+}
+
+// 3. コンポーネントを使う
+import { Button } from '@k8o/arte-odyssey/button';
+import { Card } from '@k8o/arte-odyssey/card';
+```
+
+### Tailwind CSS の設定
+
+`@k8o/arte-odyssey` は Tailwind CSS 4 以上が必要。プロジェクトの CSS で以下を追加：
+
+```css
+@import 'tailwindcss';
+@import '@k8o/arte-odyssey/styles.css';
+```
+
+## デザインの方向性
+
+### コアコンセプト
+
+**「静謐で落ち着いた、余白を活かしたUI」**
+
+- **引き算の美学**: 装飾は最小限。必要なものだけ残す
+- **余白で語る**: 詰め込まず、空間にゆとりを持たせる
+- **静かな変化**: アニメーションは控えめに、繊細なフィードバック
+- **穏やかな色**: 目に優しいトーン、グレー系を活かす
+
+### トーン
+
+「図書館の読書スペース」のような空気感。静かで集中できる、心地よい緊張感。
+
+## 美学ガイドライン
+
+### タイポグラフィ
+
+**DO:**
+
+- 日本語フォント（Noto Sans JP, M PLUS 2）を使う
+- フォントウェイトは 3種類まで（`font-normal`, `font-medium`, `font-bold`）
+- `font-medium` が 450（一般的な 500 より軽い）であることを活かした繊細な強調
+
+**DON'T:**
+
+- Inter / Roboto / Open Sans を使う
+- 4種類以上のフォントサイズを1画面で使う
+- テキストにグラデーションをかける
+
+> [タイポグラフィ詳細](references/typography.md)
+
+### カラー
+
+**DO:**
+
+- 60-30-10 ルール（ニュートラル60%, サポート30%, アクセント10%）
+- セマンティックカラートークンを使う（`bg-bg-subtle`, `text-fg-mute` 等）
+- ダークモードを独立したトーンで設計する
+
+**DON'T:**
+
+- グラデーション背景
+- ホバーに `bg-primary-bg` — `bg-bg-mute` を使う
+- 透明度(`/90`)で状態表現 — 専用トークンを使う
+- 生のカラー値（`bg-teal-500`）— セマンティックトークン（`bg-primary-bg`）を使う
+
+> [カラー詳細](references/color.md)
+
+### スペーシング
+
+**DO:**
+
+- `p-6` を標準パディングとする
+- 余白の差で関連度を表す（`mt-2` 近い、`mt-4` 標準、`mt-8` セクション間）
+- Separator でセクションを区切る
+
+**DON'T:**
+
+- すべてを Card に入れる
+- Card を入れ子にする（Card in Card）
+- `gap-1` のような極端に狭いスペーシング
+
+> [スペーシング詳細](references/spatial-design.md)
+
+### インタラクション
+
+**DO:**
+
+- `transition-colors` を基本にする
+- `focus-visible:ring-2 focus-visible:ring-border-info` でフォーカス表現
+- `hover:bg-bg-mute` で穏やかなホバー
+
+**DON'T:**
+
+- bounce / spring 系のイージング
+- 300ms を超えるアニメーション
+- ホバーに強い原色を使う
+
+> [インタラクション詳細](references/interaction-design.md)
+
+## コンポーネント使用の原則
+
+### Button / LinkButton
+
+`color` と `variant` で統一されたスタイル。
+
+```tsx
+import { Button } from '@k8o/arte-odyssey/button';
+import { LinkButton } from '@k8o/arte-odyssey/link-button';
+
+// プライマリアクション
+<Button color="primary" variant="contained">保存する</Button>
+
+// セカンダリアクション
+<Button color="gray" variant="outlined">キャンセル</Button>
+
+// テキストのみ
+<Button variant="skeleton">詳細を見る</Button>
+
+// リンクボタン（同じ props）
+<LinkButton href="/settings" color="gray">設定へ</LinkButton>
+```
+
+### IconButton / IconLink
+
+`bg` prop でスタイルを制御（`variant` ではない）。
+
+```tsx
+import { IconButton } from '@k8o/arte-odyssey/icon-button';
+import { IconLink } from '@k8o/arte-odyssey/icon-link';
+
+<IconButton bg="transparent" label="コピー"><CopyIcon /></IconButton>
+<IconButton bg="primary" label="送信"><SendIcon /></IconButton>
+<IconLink href="/home" bg="base" label="ホーム"><HomeIcon /></IconLink>
+```
+
+### Card / InteractiveCard
+
+`appearance` prop でシャドウかボーダーかを選択。
+
+```tsx
+import { Card, InteractiveCard } from '@k8o/arte-odyssey/card';
+
+// 静的カード
+<Card title="設定" appearance="bordered">
+  <p>カードのコンテンツ</p>
+</Card>
+
+// クリック可能なカード（ホバーでスケールアップ）
+<InteractiveCard title="記事" appearance="shadow">
+  <p>コンテンツ</p>
+</InteractiveCard>
+```
+
+### フォーム
+
+```tsx
+import { TextField } from '@k8o/arte-odyssey/text-field';
+import { Select } from '@k8o/arte-odyssey/select';
+import { FileField } from '@k8o/arte-odyssey/file-field';
+
+<TextField id="email" placeholder="example@mail.com" />
+
+<Select
+  label="カテゴリ"
+  options={[{ value: '1', label: 'オプション1' }]}
+  value={value}
+  onChange={onChange}
+/>
+
+<FileField.Root accept="image/*" multiple>
+  <FileField.Trigger>ファイルを選択</FileField.Trigger>
+  <FileField.ItemList />
+</FileField.Root>
+```
+
+## アンチパターン: 「AI スロップ」を避ける
+
+AI が生成したと一目でわかるUIの特徴を避ける。
+
+| アンチパターン                 | ArteOdyssey での代替                               |
+| ------------------------------ | -------------------------------------------------- |
+| パープルグラデーション         | Teal/Cyan のフラットカラー                         |
+| Card in Card（入れ子カード）   | Separator + 余白で区切り                           |
+| グレー背景にグレーテキスト     | `text-fg-base` / `text-fg-mute` のコントラスト確保 |
+| すべてに `rounded-2xl`         | `rounded-lg` を基本、用途で使い分け                |
+| bounce / spring アニメーション | `transition-colors duration-150 ease-out`          |
+| Inter フォント                 | Noto Sans JP / M PLUS 2                            |
+| 過剰な glassmorphism           | border + subtle な背景色                           |
+| 装飾的な絵文字やアイコン       | lucide-react の線画アイコンを控えめに              |
+| 情報の詰め込み                 | 余白を活かした疎な配置                             |
+
+### AI スロップテスト
+
+> このUIを誰かに見せて「AIが作った」と言ったら、すぐに信じるだろうか？
+> もし「はい」なら、それが問題だ。
+
+## 実装の原則
+
+- **既存コンポーネントを使う**: カスタムUIの前にまず ArteOdyssey コンポーネントを探す
+- **セマンティックトークンを使う**: 生のカラー値（`bg-teal-500`）ではなくトークン（`bg-primary-bg`）
+- **ダークモードを忘れない**: セマンティックトークンを使えば自動対応
+- **アクセシビリティ**: `aria-label`, キーボードナビゲーション, カラーだけに頼らない状態表現
+
+## 詳細リファレンス
+
+- タイポグラフィ: [references/typography.md](references/typography.md)
+- カラーシステム: [references/color.md](references/color.md)
+- スペーシング・レイアウト: [references/spatial-design.md](references/spatial-design.md)
+- インタラクション: [references/interaction-design.md](references/interaction-design.md)
+- コンポーネント一覧: [references/components.md](references/components.md)

package/docs/references/color.md

@@ -0,0 +1,86 @@
+# カラーシステム
+
+ArteOdyssey のカラーは「穏やかさ」を第一に設計されている。
+
+## 設計思想
+
+- **60-30-10 ルール**: 60% ニュートラル（グレー系）、30% サポート（bg-subtle 等）、10% アクセント（primary/secondary）
+- Primary に Teal、Secondary に Cyan を使用
+- ダークモードは「ライトモードの反転」ではなく、独立したトーンで設計
+- セマンティックトークンを使えばダークモードは自動対応
+
+## セマンティックカラー（前景）
+
+| Tailwind クラス   | Light      | Dark       | 用途             |
+| ----------------- | ---------- | ---------- | ---------------- |
+| `text-fg-base`    | gray-900   | gray-50    | 基本テキスト     |
+| `text-fg-subtle`  | gray-400   | gray-500   | プレースホルダー |
+| `text-fg-mute`    | gray-700   | gray-300   | 補足テキスト     |
+| `text-fg-inverse` | gray-50    | gray-900   | 反転テキスト     |
+| `text-fg-info`    | blue-700   | blue-300   | 情報             |
+| `text-fg-success` | green-700  | green-300  | 成功             |
+| `text-fg-warning` | yellow-700 | yellow-300 | 警告             |
+| `text-fg-error`   | red-700    | red-300    | エラー           |
+
+## セマンティックカラー（背景）
+
+| Tailwind クラス   | Light    | Dark     | 用途             |
+| ----------------- | -------- | -------- | ---------------- |
+| `bg-bg-base`      | white    | gray-900 | 基本背景         |
+| `bg-bg-subtle`    | gray-100 | gray-800 | 控えめな背景     |
+| `bg-bg-mute`      | gray-200 | gray-700 | ホバー状態用     |
+| `bg-bg-emphasize` | gray-300 | gray-600 | アクティブ状態用 |
+| `bg-bg-inverse`   | gray-900 | white    | 反転背景         |
+
+## セマンティックカラー（ボーダー）
+
+| Tailwind クラス           | Light    | Dark     | 用途           |
+| ------------------------- | -------- | -------- | -------------- |
+| `border-border-base`      | gray-400 | gray-600 | 標準ボーダー   |
+| `border-border-subtle`    | gray-100 | gray-900 | 薄いボーダー   |
+| `border-border-mute`      | gray-200 | gray-800 | 控えめボーダー |
+| `border-border-emphasize` | gray-500 | gray-500 | 強調ボーダー   |
+
+## ブランドカラー（Primary: Teal）
+
+| Tailwind クラス         | Light    | Dark     | 用途                |
+| ----------------------- | -------- | -------- | ------------------- |
+| `text-primary-fg`       | teal-700 | teal-300 | Primary テキスト    |
+| `bg-primary-bg`         | teal-300 | teal-700 | Primary 背景        |
+| `bg-primary-bg-subtle`  | teal-100 | teal-900 | 薄い Primary 背景   |
+| `bg-primary-bg-mute`    | teal-200 | teal-800 | 控えめ Primary 背景 |
+| `border-primary-border` | teal-600 | teal-600 | Primary ボーダー    |
+
+## ブランドカラー（Secondary: Cyan）
+
+| Tailwind クラス           | Light    | Dark     | 用途                |
+| ------------------------- | -------- | -------- | ------------------- |
+| `text-secondary-fg`       | cyan-700 | cyan-300 | Secondary テキスト  |
+| `bg-secondary-bg`         | cyan-300 | cyan-700 | Secondary 背景      |
+| `bg-secondary-bg-subtle`  | cyan-100 | cyan-900 | 薄い Secondary 背景 |
+| `border-secondary-border` | cyan-600 | cyan-600 | Secondary ボーダー  |
+
+## 使い方の例
+
+```tsx
+// 基本的なカード風レイアウト
+<div className="bg-bg-base border border-border-mute rounded-lg p-6">
+  <h2 className="text-fg-base font-bold">タイトル</h2>
+  <p className="text-fg-mute mt-2">補足テキスト</p>
+  <span className="text-primary-fg">アクセントテキスト</span>
+</div>
+
+// ホバー状態
+<button className="bg-bg-base hover:bg-bg-mute transition-colors">
+  ボタン
+</button>
+```
+
+## やってはいけないこと
+
+- グラデーション背景（`bg-gradient-to-*`）
+- 彩度の高い色の広範囲使用（アクセントは小面積で）
+- 透明度による状態表現（`/90`, `/80` など）— 専用のセマンティックカラーを使う
+- ホバーに `bg-primary-bg` を使う — `bg-bg-mute` を優先
+- 生のカラー値（`bg-teal-500`）— セマンティックトークンを使う
+- ダークモードで単純にカラーを反転させる