共通UI/UXプリンシパル: 汎用モダン・ライトクリーン

1. カラーシステム (Light Mode Base)

• Background: Pure White (#FFFFFF) または極めて薄い Gray (#F9FAFB) をベースにする。
• Primary: 信頼感のある Blue (#3B82F6) またはブランドカラー1色に絞る。
• Text: – メイン: #111827 (Almost Black)
  • サブ: #6B7280 (Muted Gray)
• Border: #E5E7EB (薄いグレー) で、シャドウよりもラインで境界を表現する。

2. タイポグラフィ (Universal Sans)

• Font Family: システム標準フォントを優先（Inter, system-ui, sans-serif）。
• Hierarchy: – Title: Bold, 1.25rem以上
  • Body: Normal, 0.875rem ~ 1rem
  • Line Height: 1.5 ~ 1.6 で可読性を確保。

3. アイコン・コンポーネント (Universal Design)

• Library: Lucide React または Heroicons を使用（線が細く、クリーンなもの）。
• Radius: 角丸は 8px (rounded-lg) を基本とし、柔らかすぎず硬すぎない印象にする。
• Clickable: ボタンやリスト項目は、モバイルでの操作性を考慮し最小 44x44px のタップ領域を確保する。

4. コーディング制約

• Framework: React / Next.js / Tailwind CSS を前提とする。
• Consistency: 新しいコンポーネントを作成する際は、既存の shadcn/ui 等のパーツとデザイントークンを統一すること。
• Accessibility: 常に aria-label や適切なセマンティックHTML（nav, main, section）を使用する。

dps.oms.lecien.com

スーパーアプリの切り替え（ヘッダー）

dps-aura.lecien.com

dps-wms.lecien.com

dps-mes.lecien.com

dps-oms.lecien.com

oms内での組織の選択、切り替え（ヘッダー）

インナーウェア事業部 NB or PB

ハンドメイド事業部

レース事業部 アトリエ or アミュレット

権限

全権保有者

承認者

入力者