mai
/
posimai-root
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
posimai-root/docs/design-system.md

3.4 KiB
Raw Blame History

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 を既存アプリに適用する手順

<!-- <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>

デザインカラートークン

--bg: #0D0D0D          /* 背景 */
--surface: #1A1A1A     /* カード面 */
--surface2: #252525    /* ネスト面 */
--border: #2D2D2D      /* ボーダー */
--text: #F3F4F6        /* 主テキスト */
--text2: #9CA3AF       /* 副テキスト */
--text3: #6B7280       /* 弱テキスト */
--accent: #6EE7B7      /* アクセント（Posimai Teal）← デフォルト */
--radius: 12px         /* 角丸 */

デザイン・実装ルール

  • フォント: Geist（300/400/500/600）— Google Fonts CDN から配信
  • アイコン: 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 に変更
posimai-dev #A78BFA Violet #7C3AED 開発ポータル — コード・AI・ターミナルの融合。Atlas と差別化
ponshu-room #D4A574 琥珀（Amber） #D4A574 Posimai デザインシステム適用外。独自テーマ（和紙×墨×琥珀）を使用