# ShipAggregator Enterprise Hub — Design Theme

## Fonts
- **Primary:** Inter (300–800) — all body, UI, labels
- **Monospace:** JetBrains Mono (400–700) — AWB codes, transaction IDs, computed values

---

## Color Palette

### Brand / Primary
| Token | Value | Usage |
|---|---|---|
| Primary | `indigo-600` (#4F46E5) | CTAs, active nav, focus rings, badges |
| Primary Hover | `indigo-700` | Button hover states |
| Primary Light | `indigo-50` | Icon backgrounds, info banners |
| Primary Text | `indigo-300/400` | Sidebar accents, sub-labels |

### Sidebar
| Token | Value |
|---|---|
| Sidebar BG | `#0F172A` (slate-900) |
| Sidebar Header/Footer BG | `#0B0F19` |
| Sidebar Border | `slate-800` |
| Nav Text Default | `slate-400` |
| Nav Text Hover | `white` |
| Nav Hover BG | `slate-800/50` |
| Active Nav Item | gradient `from-indigo-600 to-indigo-700`, white text |

### Page Shell
| Token | Value |
|---|---|
| Page BG | `slate-50` |
| Header BG | `white` |
| Header Border | `slate-200` |
| Main Content BG | `slate-50` |

### Semantic Colors
| State | Background | Text | Border |
|---|---|---|---|
| Success / Delivered | `emerald-50` | `emerald-700` | `emerald-200` |
| Warning / Out for Delivery | `amber-50` | `amber-800` | `amber-200` |
| Info / In Transit | `purple-50` | `purple-700` | `purple-200` |
| New / Pending | `blue-50` | `blue-700` | `blue-200` |
| Assigned | `indigo-50` | `indigo-700` | `indigo-200` |
| NDR / Error | `rose-50` | `rose-700` | `rose-200` |
| RTO | `slate-800` | `slate-100` | — |
| COD Badge | `teal-100` | `teal-800` | — |
| Prepaid Badge | `purple-100` | `purple-700` | — |
| Credit / Positive | `emerald-600` | — | — |
| Debit / Negative | `rose-600` | — | — |

---

## Typography Scale

| Role | Size | Weight | Color |
|---|---|---|---|
| Page Title / H1 | `text-base` | `font-extrabold` | `slate-900` |
| Section Heading | `text-xs` | `font-bold uppercase tracking-wider` | `white` (on dark header) |
| Table Header | `text-xs` | `font-bold uppercase tracking-wider` | `slate-500` |
| Table Cell Primary | `text-sm` | `font-extrabold` | `slate-900` |
| Table Cell Secondary | `text-xs` | `font-semibold` | `slate-700` |
| Meta / Timestamp | `text-[11px]` | `font-medium` | `slate-400` |
| Label (form) | `text-[10px]` | `font-bold uppercase tracking-wider` | `slate-500` |
| Micro Label | `text-[10px]` | `font-bold uppercase tracking-widest` | `slate-400` |
| Sidebar Nav | `text-sm` | `font-medium` | `slate-400` |
| Sidebar Sub-nav | `text-xs` | normal | `slate-400` |
| Badge / Pill | `text-[10px]` | `font-bold` | varies |
| Wallet Balance | `text-sm` | `font-bold` | `slate-800` |
| Stat Value (card) | `text-xl` | `font-extrabold` | `slate-900` |

---

## Spacing & Layout

### Shell
- Sidebar width: `w-64` (256px), fixed, hidden on mobile (`hidden md:flex`)
- Header height: `h-16`
- Footer height: `h-14`
- Main content: `flex-1 overflow-hidden`

### Content Padding
- Page sections: `p-6`
- Card inner: `p-5`
- Table cell standard: `py-3.5 px-4`
- Table cell compact: `py-1.5 px-4`
- Form max-width: `max-w-5xl mx-auto`
- Content max-width: `max-w-7xl mx-auto`

### Grid Gaps
- Card grids: `gap-4` or `gap-6`
- Form fields: `gap-4`

---

## Component Patterns

### Cards (Stat / Info)
```
bg-white p-5 rounded-2xl shadow-sm border border-slate-200/80
```
- Icon container: `p-3 bg-{color}-50 text-{color}-600 rounded-xl`
- Value: `text-xl font-extrabold text-slate-900`
- Label: `text-[10px] text-slate-400 font-bold uppercase tracking-wider`

### Form Section Cards
```
bg-white rounded-2xl shadow-sm border border-slate-200/80 overflow-hidden
```
- Section header: `bg-indigo-900 px-5 py-3 text-white`
- Icon in header: `p-1 bg-indigo-500/30 text-indigo-200 rounded`
- Body: `p-5 space-y-4`

### Data Tables
```
w-full text-left border-collapse text-xs
```
- `<thead>`: `bg-slate-50 text-slate-500 font-bold uppercase border-b border-slate-200 sticky top-0 z-10`
- `<tbody>`: `divide-y divide-slate-100`
- Row hover: `hover:bg-slate-50/80 transition-all`
- Selected row: `bg-indigo-50/40`
- Table wrapper: `bg-white rounded-2xl shadow-sm border border-slate-200/80 overflow-hidden`

### Buttons

| Type | Classes |
|---|---|
| Primary CTA | `bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs py-2 px-4 rounded-lg shadow-md shadow-indigo-600/10 transition` |
| Primary (xl radius) | `bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs py-2 px-5 rounded-xl shadow-md transition` |
| Secondary / Ghost | `bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 font-bold text-xs py-2 px-4 rounded-lg shadow-sm transition` |
| Danger / Destructive | `bg-rose-600 hover:bg-rose-700 text-white ...` |
| Icon Button | `p-1.5 bg-white border border-slate-200 rounded-lg text-slate-500 hover:text-slate-800 transition` |
| Inline Text Link | `text-indigo-600 hover:text-indigo-800 font-bold text-xs` |

### Toggle / Segmented Control
```
bg-slate-100 p-1 rounded-xl flex items-center space-x-1
```
- Active segment: `bg-white text-indigo-600 shadow-sm rounded-lg`
- Inactive segment: `text-slate-500 hover:text-slate-800 rounded-lg`

### Status Badges / Pills
```
px-2 py-0.5 rounded-full text-[10px] font-bold tracking-tight uppercase
```
Use semantic color pairs from the color table above.

### Form Inputs
```
w-full text-xs font-semibold p-2.5 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500
```
- Autofilled / read-only: add `bg-slate-50 text-slate-700`
- Required asterisk: `<span class="text-rose-500">*</span>`

### Horizontal Sub-nav Tabs (e.g. Billing)
- Active: `border-b-2 border-indigo-600 text-indigo-600 bg-slate-50 font-bold`
- Inactive: `text-slate-500 hover:text-slate-800 hover:bg-slate-50`
- Container: `bg-white border-b border-slate-200 shadow-sm overflow-x-auto`

### Sidebar Accordion Sub-menu
- Indent: `pl-7 pr-2 py-1 space-y-1 border-l border-slate-800 ml-5 mt-1`
- Items: `block py-1 text-xs text-slate-400 hover:text-white transition`
- Chevron rotates `rotate-180` when open

### Slide-over Drawer
```
absolute inset-y-0 right-0 w-96 bg-white shadow-2xl border-l border-slate-200 z-40 flex flex-col
transform translate-x-full drawer-transition
```
- Open: `translate-x-0`
- Header: `bg-slate-900 text-white`
- Sub-info strip: `bg-indigo-50/60 border-b border-indigo-100`

### Toast Notification
```
fixed bottom-6 right-6 z-50 max-w-sm bg-slate-900 text-white rounded-xl shadow-2xl p-4
flex items-center space-x-3 border border-slate-700
```
- Icon: `bg-emerald-500 rounded-full p-1.5`
- Show: remove `translate-y-20 opacity-0 pointer-events-none`
- Hide: add back above classes

### Modal / Dialog
```
fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 flex items-center justify-center p-4
```
- Box: `bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden`
- Header: `bg-indigo-600 text-white p-5`

### Empty State
- Centered in container with SVG illustration
- Title: `text-base font-bold text-slate-800`
- Body: `text-xs text-slate-400 leading-relaxed`
- CTA buttons below

### Info / Tip Banner
- Tip (teal): `p-3 bg-teal-50 border border-teal-200 rounded-xl text-xs text-teal-800 font-medium`
- Info (indigo): `p-3 bg-indigo-50 border border-indigo-100 rounded-xl text-xs text-indigo-800 font-medium`

### Wallet Widget (Header)
```
bg-slate-50 border border-slate-200 rounded-xl p-1.5 flex items-center space-x-2.5
```

### User Avatar
```
w-8 h-8 rounded-full bg-gradient-to-tr from-indigo-600 to-sky-500 text-white font-bold
flex items-center justify-center text-xs shadow-md shadow-indigo-500/10
```

### Logo Mark
```
bg-gradient-to-tr from-indigo-500 to-sky-400 p-2 rounded-lg text-white shadow-lg shadow-indigo-500/10
```

---

## Scrollbar Styles
```css
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Sidebar (subtle) */
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }
```

---

## Transitions & Animation
- Drawer slide: `transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)` via `.drawer-transition`
- Toast: `transition-all duration-300`
- Modal scale: `transition-all duration-200`
- General hover: `transition` (Tailwind default 150ms)
- Status pulse (Out for Delivery): `animate-pulse`
- Webhook indicator: `animate-pulse` on `bg-emerald-500` dot

---

## Page Structure Template
```
<html class="h-full bg-slate-50">
<body class="h-full overflow-hidden text-slate-800 antialiased flex flex-col">
  <!-- Toast -->
  <div class="flex flex-1 overflow-hidden h-screen">
    <!-- Sidebar: w-64 bg-[#0F172A] -->
    <!-- Main: flex-1 flex flex-col bg-slate-50 overflow-hidden relative -->
      <!-- Header: h-16 bg-white border-b border-slate-200 shadow-sm -->
      <!-- Content Viewport: flex-1 flex flex-col overflow-hidden -->
  </div>
  <!-- Modals (fixed, z-50) -->
</body>
```

---

## Icons
- Library: Heroicons (outline style, stroke-based SVG)
- Default size: `w-4 h-4` (nav, table actions), `w-5 h-5` (header), `w-6 h-6` (stat cards)
- Stroke width: `2` standard, `2.5` for emphasis (logo, CTA icons)