# Posimai Design System
**このドキュメントは `posimai-project` の全アプリで共有される UI コンポーネントおよびデザインルールのリファレンスです。**
## 共有デザインシステム（posimai-ui）
- URL: `https://posimai-ui.vercel.app/v1/base.css` / `https://posimai-ui.vercel.app/v1/base.js`
- リポジトリ: `posimai-ui/`（GitHub: `posimai/posimai-ui` private）
- **全静的アプリが `` と `
```
## デザインカラートークン
```css
--bg: #0D0D0D /* 背景 */
--surface: #1A1A1A /* カード面 */
--surface2: #252525 /* ネスト面 */
--border: #2D2D2D /* ボーダー */
--text: #F3F4F6 /* 主テキスト */
--text2: #9CA3AF /* 副テキスト */
--text3: #6B7280 /* 弱テキスト */
--accent: #6EE7B7 /* アクセント（Posimai Teal）← デフォルト */
--radius: 12px /* 角丸 */
```
## デザイン・実装ルール
- **フォント**: Inter（300/400/500/600）
- **アイコン**: Lucide（stroke 1.5〜2.0、`@0.344.0` 固定）
- **トランジション**: `0.12s〜0.3s` の範囲、標準イージング `cubic-bezier(0.2, 0.9, 0.2, 1)`
- **空状態 (Empty State)**: 必ずアイコン + 説明テキストを実装する（空コンテナ禁止）
- **絵文字 (Emoji)**: **使用禁止**（コード・UI・コメントすべて）
- **ボトムパディング**: `padding-bottom: max(Xpx, env(safe-area-inset-bottom))` で iPhone ホームインジケーター対応
- **外部リンク**: `target="_blank" rel="noopener"` を必ずセットで付ける
## アプリ別アクセントカラー（特例）
原則はデフォルトの Teal (`#6EE7B7`) を使用しますが、カテゴリや意味合いに応じて以下の特例が存在します。（意図的に変える場合は実装前にここに追記すること）
| アプリ | ダーク accent | ライト accent | 理由 |
|--------|-------------|-------------|------|
| 全般（デフォルト） | `#6EE7B7` Teal | `#059669` | Posimai ブランドカラー |
| posimai-journal | `#80CAEE` Sky-Blue | `#0284C7` | CMS 系・静かで知的な印象 |
| posimai-site | `#80CAEE` Sky-Blue | `#0284C7` | journal と同系統の公開サイト |
| posimai-atlas | `#22D3EE` Cyan | `#0891B2` | インフラ/ネットワーク管理 — ターミナル・サイバー感。背景も `#0C1221` navy に変更 |
| ponshu-room | `#D4A574` 琥珀（Amber） | `#D4A574` | **Posimai デザインシステム適用外**。独自テーマ（和紙×墨×琥珀）を使用 |