2026-03-29 13:16:29 +00:00
|
|
|
|
# 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）
|
|
|
|
|
|
- **全静的アプリが `<link>` と `<script defer>` で参照する。インラインに CSS/JS を書かない**
|
|
|
|
|
|
- バージョン方針: `/v1/` = 後方互換パッチのみ。破壊的変更は `/v2/` に切り上げ（全アプリのタグ更新が必要）
|
|
|
|
|
|
- アプリ側の必須設定: `<html data-app-id="posimai-[app-name]">` でアプリ固有のローカルストレージキーを指定
|
|
|
|
|
|
|
|
|
|
|
|
### posimai-ui を既存アプリに適用する手順
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!-- <head> 内: インライン <style> の大半を削除し、以下に置き換える -->
|
|
|
|
|
|
<link rel="stylesheet" href="https://posimai-ui.vercel.app/v1/base.css">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- </body> 直前: インライン <script> の共通部分を削除し、以下に置き換える -->
|
|
|
|
|
|
<script src="https://posimai-ui.vercel.app/v1/base.js" defer></script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## デザインカラートークン
|
|
|
|
|
|
|
|
|
|
|
|
```css
|
|
|
|
|
|
--bg: #0D0D0D /* 背景 */
|
|
|
|
|
|
--surface: #1A1A1A /* カード面 */
|
|
|
|
|
|
--surface2: #252525 /* ネスト面 */
|
|
|
|
|
|
--border: #2D2D2D /* ボーダー */
|
|
|
|
|
|
--text: #F3F4F6 /* 主テキスト */
|
|
|
|
|
|
--text2: #9CA3AF /* 副テキスト */
|
|
|
|
|
|
--text3: #6B7280 /* 弱テキスト */
|
|
|
|
|
|
--accent: #6EE7B7 /* アクセント（Posimai Teal）← デフォルト */
|
|
|
|
|
|
--radius: 12px /* 角丸 */
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## デザイン・実装ルール
|
2026-04-09 23:13:04 +00:00
|
|
|
|
- **フォント**: Geist（300/400/500/600）— Google Fonts CDN から配信
|
2026-03-29 13:16:29 +00:00
|
|
|
|
- **アイコン**: 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 に変更 |
|
2026-03-30 14:23:28 +00:00
|
|
|
|
| posimai-dev | `#A78BFA` Violet | `#7C3AED` | 開発ポータル — コード・AI・ターミナルの融合。Atlas と差別化 |
|
2026-03-29 13:16:29 +00:00
|
|
|
|
| ponshu-room | `#D4A574` 琥珀（Amber） | `#D4A574` | **Posimai デザインシステム適用外**。独自テーマ（和紙×墨×琥珀）を使用 |
|
2026-04-10 12:34:44 +00:00
|
|
|
|
| posimai-analytics | TailwindCSS + ライトテーマ | — | **Posimai デザインシステム適用外**。Kintone 向け BtoBダッシュボード。TailwindCSS / React / light theme で構築。絵文字禁止・Lucide @0.344.0 固定は適用 |
|
2026-04-19 16:40:48 +00:00
|
|
|
|
| posimai-sc | `#818CF8` Indigo | `#6366F1` | セキュリティ学習アプリ — 信頼感のあるクールトーン（簿記アプリのネイビー背景と整合） |
|
