22 Design System

22. Design System & Glassmorphism UI Engine

Technical specification for the PACT OS design tokens, glassmorphism aesthetics, color palette, and component guidelines.

---

🎨 Design Philosophy & Tokens

PACT OS uses a high-performance Obsidian Dark & Metallic Gold design system implemented via Tailwind CSS v4 and CSS design tokens in src/app/globals.css:

:root {
  --background: #050505;              /* Obsidian Deep Dark */
  --foreground: #f4f4f5;              /* Zinc 100 Text */
  --accent-gold: #d4af37;             /* PACT Metallic Gold */
  --accent-gold-glow: rgba(212,175,55,0.15);
  --glass-border: rgba(255,255,255,0.08);
  --glass-bg: rgba(18,18,23,0.85);
}

---

💎 Color Palette Matrix

Token Name	Hex / Class	Primary Usage
Obsidian Dark	#050505 (bg-[#050505])	Root application background
Glass Card	rgba(18,18,23,0.85)	Modal backdrops, widget containers, and cards
PACT Gold	#d4af37 (text-[#d4af37])	Primary CTAs, active focus indicators, and key metrics
Glass Border	border-white/[0.08]	Subdued container dividers and border highlights
Urgent Red	bg-red-500/20 text-red-300	Deadline breach alerts and urgent priority badges
Emerald Green	bg-emerald-500/20 text-emerald-300	Completed tasks, positive cashflow, and habit streaks

---

🧩 Component Architecture (src/components/ui/)

Shared design system components located in src/components/ui/:

• Button: Supports primary (Gold), secondary, ghost, and danger variants with loading states.
• Modal: Glassmorphic modal dialogs with backdrop blur (backdrop-blur-md), keyboard traps, and Esc dismissal.
• Card: Standardized container card with rounded 2XL corners (rounded-2xl border border-white/[0.06] bg-zinc-950/40).
• Badge: Pill badges for priority levels (low, medium, high, urgent) and category tags.

---

♿ Accessibility Standards (a11y)

1. Visible Focus Rings: All interactive buttons enforce visible focus rings: focus:outline-none focus:ring-2 focus:ring-[#d4af37]/50 focus:ring-offset-1
2. ARIA Attributes: Icon-only buttons bind explicit aria-label and title attributes.
3. Contrast Compliance: Text vs. background ratios comply with WCAG AA on dark backgrounds.