# Thara Group MIS Design System

## Visual Theme: Light, Clean, Professional (Strictly Light Theme)

### Colour Palette
- **Page background:** Pure white (#FFFFFF)
- **Surface / card background:** White (#FFFFFF) with very subtle shadow
- **Secondary surface (sidebar, subtle sections):** Light grey (#F8FAFC)
- **Tertiary surface (hover states, table stripes):** Very light grey (#F1F5F9)
- **Primary brand colour:** Calm corporate blue (#2563EB)
- **Primary hover:** Slightly darker blue (#1D4ED8)
- **Secondary accent:** Soft teal (#0EA5E9)
- **Success / Positive:** Fresh green (#10B981)
- **Warning:** Warm amber (#F59E0B)
- **Danger / Negative:** Soft red (#EF4444)
- **Border / divider:** Light grey (#E2E8F0)
- **Primary text:** Near-black (#0F172A)
- **Secondary text:** Medium grey (#475569)
- **Muted / helper text:** Lighter grey (#94A3B8)

### Typography (Inter)
- **H1:** 24px, weight 600, #0F172A
- **H2:** 18px, weight 600, #0F172A
- **Card titles:** 14px, weight 500, #475569, uppercase letter-spacing
- **KPI values:** 28px, weight 700, #0F172A
- **Body text:** 14px, weight 400, line-height 1.5
- **Helper / caption text:** 12px, weight 400, #94A3B8
- **Table headers:** 12px, weight 600, uppercase, #475569
- **Table body:** 14px, weight 400

### Spacing & Layout
- **Base unit:** 8px
- **Card padding:** 24px
- **Card border-radius:** 12px
- **Button border-radius:** 8px
- **Input border-radius:** 8px
- **Card shadow:** 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04)
- **Card border:** 1px solid #E2E8F0

### Overall Layout Structure
- **Left sidebar (240px):** #F8FAFC, logo at top, vertical nav with icons + labels.
- **Top bar (64px):** White, 1px bottom border. Company selector, period selector, search, notifications, user avatar.
- **Main content:** White background, 32px padding, scrollable.
- **Navigation:** Dashboard, Finance, Cash Flow, Receivables, Payables, Inventory, Sales, HR, Compliance, Uploads, Settings. Active item: #EFF6FF background, blue left-border, blue text.

### Component Rules
- **KPI Card:** Label (uppercase), Large Value, Delta Pill (green/red), Sparkline.
- **Data Tables:** Zebra-striped (#F8FAFC), hover (#F1F5F9), 48px row height, sort indicators.
- **Buttons:** Primary (Blue/White), Secondary (White/Bordered), Tertiary (Text only).
- **Form inputs:** 1px #E2E8F0 border, focus blue ring.
- **Charts:** Clean, minimal, brand palette, rounded bars, smooth lines, faint gridlines.
- **Status pills:** Green (On Track), Amber (Watch), Red (Critical), Grey (Pending).
- **Icons:** Lucide (1.5px stroke, 20px default).

### Content Standards
- **Currency:** Indian Rupees (₹).
- **Number Formatting:** Crores (Cr) and Lakhs (L).
- **Dates:** DD-MMM-YY (e.g., 19-Apr-26).

## Page Inventory

All reference mockups live in `pages/`:

| Page | File |
| --- | --- |
| Login | `pages/login.html` |
| Group Dashboard (Consolidated) | `pages/dashboard-group.html` |
| Company Dashboard (Thara FMCG) | `pages/dashboard-company.html` |
| Finance — P&L Statement | `pages/finance-pnl.html` |
| Finance — Balance Sheet | `pages/finance-balance-sheet.html` |
| Cash Flow Management | `pages/cash-flow.html` |
| Receivables Ageing | `pages/receivables.html` |
| Payables Ageing | `pages/payables.html` |
| Inventory & Stock Analytics | `pages/inventory.html` |
| Sales & Business Performance | `pages/sales.html` |
| HR & Payroll Insights | `pages/hr.html` |
| Compliance Tracker | `pages/compliance.html` |
| Data Upload Center | `pages/uploads.html` |
| Admin Settings | `pages/settings.html` |

Open `index.html` at the repo root for a navigable gallery of all screens.