Design System · UI Component Library

1. 🎨 Color Palette

Based on Doc Zam mock screens · blue/teal primary · emerald/violet/amber accents · semantic colors.

1a. Primary (Blue/Teal)

1b. Accent (Emerald · Violet · Amber)

1c. Semantic (Triage + Status)

1d. Neutral (Slate scale)

2. ✍️ Typography

2a. Font Stack

UI:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif
Mono:  "SF Mono", ui-monospace, Menlo, Consolas, monospace
       Used for: IDs (MRN, ENC), code, lab values, dose numbers

2b. Scale

3. 🚦 Triage Color System (CRITICAL)

3-warna triage = canonical sistem keseluruhan. Konsisten di semua module · accessibility-friendly · culturally familiar (traffic light).

{/* Triage badge component */}
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold {triage-class}">
  <span class="w-2 h-2 rounded-full bg-current"></span>
  TRIAGE LEVEL
</span>

4. 🔘 Buttons

{/* Primary */}
<button class="bg-sky-600 text-white hover:bg-sky-700 px-5 py-2.5 rounded-lg font-bold text-sm transition">
  Save Encounter
</button>

{/* Secondary */}
<button class="bg-white border-2 border-slate-300 text-slate-700 hover:bg-slate-50 px-5 py-2.5 rounded-lg font-medium text-sm">
  Cancel
</button>

{/* Danger */}
<button class="bg-red-600 text-white hover:bg-red-700 px-5 py-2.5 rounded-lg font-bold text-sm">
  Block Drug
</button>

{/* Success / HITL Approve */}
<button class="bg-emerald-600 text-white hover:bg-emerald-700 px-5 py-2.5 rounded-lg font-bold text-sm">
  ✓ Approve
</button>

{/* Icon button */}
<button class="p-2 rounded-lg hover:bg-slate-100 text-slate-600">
  <svg class="w-5 h-5" .../>
</button>

{/* Sizes: xs · sm (default) · base · lg */}
.btn-xs { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

5. 🃏 Cards

{/* Standard card */}
<div class="bg-white border border-slate-200 rounded-xl p-6 shadow-sm hover:shadow-md transition">
  <h3 class="text-lg font-bold text-slate-900 mb-2">Title</h3>
  <p class="text-sm text-slate-600">Content</p>
</div>

{/* Stats card (KPI dashboard) */}
<div class="bg-white border border-slate-200 rounded-xl p-4">
  <div class="text-xs text-slate-500 uppercase tracking-widest">Pesakit Hari Ni</div>
  <div class="text-3xl font-bold mono text-slate-900 mt-1">24</div>
  <div class="text-xs text-emerald-600 mt-1">↑ 12% vs semalam</div>
</div>

{/* Citation card (M9 hallucination guard) */}
<div class="bg-sky-50 border border-sky-200 rounded-lg p-3 text-xs">
  <div class="font-bold text-sky-900">📚 Citation</div>
  <div class="text-slate-700 mt-1">MOH Headache CPG 2018, p. 23</div>
</div>

{/* HITL approval card */}
<div class="bg-amber-50 border-2 border-amber-300 rounded-xl p-4">
  <div class="flex items-center gap-2">
    <span class="text-amber-600">⚠️</span>
    <span class="font-bold text-amber-900">Approval Required</span>
  </div>
  <p class="text-sm text-slate-700 mt-2">{action description}</p>
  <div class="flex gap-2 mt-3">
    <button class="bg-emerald-600...">Approve</button>
    <button class="bg-red-600...">Reject</button>
    <button class="bg-slate-200...">Modify</button>
  </div>
</div>

6. 📋 Tables

<table class="w-full border-collapse text-sm">
  <thead>
    <tr>
      <th class="bg-slate-900 text-white text-left px-3 py-2 font-bold text-xs uppercase tracking-widest">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-slate-200 hover:bg-slate-50">
      <td class="px-3 py-2">Cell</td>
    </tr>
  </tbody>
</table>

{/* Patient queue table per Doc Zam mock */}
<tr class="border-t cursor-pointer hover:bg-emerald-50">
  <td class="px-3 py-2">
    <div class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center font-bold">A</div>
      <div>
        <div class="font-semibold">Pak Mat Bin Ali</div>
        <div class="text-xs text-slate-500">Waiting</div>
      </div>
    </div>
  </td>
  <td class="px-3 py-2 text-right mono">10:30</td>
</tr>

7. 📝 Forms

{/* Input field per Doc Zam mock */}
<div class="mb-4">
  <label class="block text-sm font-semibold text-slate-700 mb-1">
    Medical Record Number <span class="text-red-500">*</span>
  </label>
  <input
    type="text"
    placeholder="MRN-2026-001245"
    class="w-full px-3 py-2 border border-slate-300 rounded-lg
           focus:border-sky-500 focus:ring-2 focus:ring-sky-200 outline-none"
  />
  <div class="text-xs text-slate-500 mt-1">Format: YYYY-NNNNNN</div>
</div>

{/* Select */}
<select class="w-full px-3 py-2 border border-slate-300 rounded-lg
               focus:border-sky-500 focus:ring-2 focus:ring-sky-200 outline-none bg-white">
  <option>Pilih...</option>
  <option>Lelaki</option>
  <option>Perempuan</option>
</select>

{/* Checkbox + label */}
<label class="flex items-start gap-2 cursor-pointer">
  <input type="checkbox" class="mt-1 w-4 h-4 text-sky-600 rounded border-slate-300"/>
  <span class="text-sm text-slate-700">
    Saya bersetuju treatment ini · <a href="#" class="text-sky-600 underline">Terma</a>
  </span>
</label>

{/* Validation states */}
.input-error { border-color: #dc2626; ring: 2px ring-red-200; }
.input-success { border-color: #059669; ring: 2px ring-emerald-200; }

8. 🚨 Alerts

{/* Info */}
<div class="bg-sky-50 border border-sky-200 rounded-lg p-3 text-sm">
  <div class="flex gap-2">
    <span class="text-sky-600">ℹ️</span>
    <p class="text-sky-900">Briefing packet has been refreshed.</p>
  </div>
</div>

{/* Success */}
<div class="bg-emerald-50 border border-emerald-200 rounded-lg p-3 text-sm">
  <p class="text-emerald-900 font-semibold">✓ Encounter signed-off successfully</p>
</div>

{/* Warning */}
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm">
  <p class="text-amber-900 font-semibold">⚠️ DDI MAJOR detected · pharmacist review required</p>
</div>

{/* Danger / Red flag */}
<div class="bg-red-50 border-2 border-red-300 rounded-lg p-4 text-sm">
  <div class="flex items-center gap-2 mb-2">
    <span class="text-red-600 text-2xl">⚠️</span>
    <p class="text-red-900 font-bold text-lg">RED FLAG · Possible cardiac event</p>
  </div>
  <p class="text-red-800">Telefon 999 SEKARANG. Jangan pandu sendiri.</p>
  <div class="flex gap-2 mt-3">
    <a href="tel:999" class="bg-red-600 text-white px-4 py-2 rounded-lg font-bold">📞 Call 999</a>
  </div>
</div>

9. 🏷️ Triage Badge

<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold
             bg-emerald-100 text-emerald-800 border border-emerald-200">
  <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
  HIJAU
</span>

<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold
             bg-yellow-100 text-yellow-800 border border-yellow-200">
  <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
  KUNING
</span>

<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold
             bg-red-100 text-red-800 border border-red-200 animate-pulse">
  <span class="w-2 h-2 rounded-full bg-red-500"></span>
  MERAH
</span>

10. 💬 Chat Bubbles (Patient PA)

{/* AI message (left) */}
<div class="flex gap-2 mb-3">
  <div class="w-8 h-8 rounded-full bg-emerald-600 text-white flex items-center justify-center text-sm flex-shrink-0">🤖</div>
  <div class="bg-white rounded-2xl rounded-tl-sm px-3 py-2 max-w-[75%] shadow text-sm">
    Hai! Boleh ko ceritakan simptom?
  </div>
</div>

{/* Patient message (right) */}
<div class="flex gap-2 justify-end mb-3">
  <div class="bg-sky-600 text-white rounded-2xl rounded-tr-sm px-3 py-2 max-w-[75%] shadow text-sm">
    Sakit kepala 3 hari
  </div>
  <div class="w-8 h-8 rounded-full bg-slate-600 text-white flex items-center justify-center text-sm flex-shrink-0">👤</div>
</div>

{/* Citation meta */}
<div class="ml-10 text-[11px] text-slate-500 italic mt-1">
  📚 MOH Headache CPG 2018
</div>

11. 🎛️ Filament 3 Theme Customization

// app/Providers/Filament/AdminPanelProvider.php
public function panel(Panel $panel): Panel
{
    return $panel
        ->id('admin')
        ->path('/admin')
        ->login()
        ->colors([
            'primary' => Color::Sky,        // sky-600 #0284c7
            'success' => Color::Emerald,
            'warning' => Color::Amber,
            'danger'  => Color::Red,
            'info'    => Color::Indigo,
            'gray'    => Color::Slate,
        ])
        ->font('Inter')
        ->brandName('MediEco · Admin')
        ->brandLogo(asset('images/logo.svg'))
        ->darkMode(false)  // Phase 1: light only · dark Phase 3
        ->sidebarCollapsibleOnDesktop()
        ->maxContentWidth('full')
        ->widgets([...])
        ->pages([...])
        ->resources([...]);
}

12. 📱 Mobile / PWA

• Mobile-first breakpoints: 360 → 768 → 1024 → 1440 → 1920
• Tap target ≥44×44px (Apple HIG · Material guideline)
• Bottom navigation pattern untuk Patient PWA (4 tabs: Home · Symptom · History · Profile)
• Pull-to-refresh native (PWA + Service Worker)
• Push notification opt-in pada onboarding
• "Add to Home Screen" prompt selepas 3 sessions
• Offline indicator banner (orange) · queue actions for sync
• Reduced motion respect (prefers-reduced-motion)

{/* manifest.json */}
{
  "name": "MediEco Patient",
  "short_name": "MediEco",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0284c7",
  "background_color": "#f8fafc",
  "icons": [...]
}

13. ♿ Accessibility (WCAG 2.1 AA)

• Color contrast ≥4.5:1 normal text · ≥3:1 large text · verified axe-core
• Keyboard navigation full · Tab order logical · focus rings visible
• Screen reader labels: aria-label · aria-live · aria-describedby
• Triage colors NEVER sole indicator — always paired with icon + text
• Form errors: aria-invalid · descriptive error message · non-color marker (icon)
• Alt text untuk semua images (clinical · UI)
• Skip-to-content link · semantic HTML (nav/main/article)
• Respect prefers-color-scheme · prefers-reduced-motion

14. 🧱 Layout Patterns (per Doc Zam mock)

14a. 6-Tab Quick Access (M4 Doctor)

┌───────────────────────────────────────────────────┐
│ Encounter ID: ENC-2026-0425-001                  │
├──────────┬────────────────────────────────────────┤
│ 6 tabs   │ Active tab content                    │
│          │                                       │
│ 1.Profile│ {Patient Profile / History / RX /...} │
│ 2.History│                                       │
│ 3.Rx     │                                       │
│ 4.Lab    │                                       │
│ 5.Image  │                                       │
│ 6.Bill   │                                       │
└──────────┴────────────────────────────────────────┘

14b. 3-Column Operations View (M7 Admin)

┌─────────────┬─────────────┬─────────────┐
│ Reception   │ Doctor      │ Pharmacy    │
│ ACTIVE      │ ACTIVE      │ ACTIVE      │
│             │             │             │
│ • Search    │ • Chief     │ • Verify    │
│ • Demo      │ • Vitals    │ • Stock     │
│ • Insurance │ • Diagnosis │ • Dispense  │
│             │             │             │
│ Today: 12   │ 24/15/9     │ 8 ready     │
└─────────────┴─────────────┴─────────────┘

14c. Patient Profile Form (11 sections grid)

┌──────┬──────┬──────┐
│  1   │  4   │  8   │
│ Mast │ PCP  │ Med  │
├──────┼──────┼──────┤
│  2   │  5   │  9   │
│ Cont │ Ins  │ Vit  │
├──────┼──────┼──────┤
│  3   │  6   │ 10   │
│ Emer │ Snap │ Hist │
│      ├──────┼──────┤
│      │  7   │ 11   │
│      │ Allg │ Care │
└──────┴──────┴──────┘
3-column responsive grid · sections collapsible · highlight on focus