> ## Documentation Index
> Fetch the complete documentation index at: https://dhanurgo.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Design System

> Complete color palette, typography, spacing, and icon reference for HostMetrics

# Design System

HostMetrics uses a muted, elegant aesthetic. This page is the definitive reference for all visual design values. **Always use the exact hex values listed here — never use generic Tailwind color classes like `red-500` or `blue-600`.**

## Brand Colors

The primary brand color is a sage green used throughout the app for active states, success indicators, and brand accents.

| Token          | Hex       | Usage                                                              |
| -------------- | --------- | ------------------------------------------------------------------ |
| Primary        | `#6b7c5c` | Active sidebar items, primary buttons, success text, brand accents |
| Primary Light  | `#f0f5ed` | Success backgrounds, active item backgrounds                       |
| Primary Border | `#d5e0d0` | Success state borders                                              |
| Primary Hover  | `#5a6b4d` | Primary button hover state                                         |

## Semantic Colors

### Success / Positive

Used for completed states, matched items, positive currency values, active status.

| Property   | Value     |
| ---------- | --------- |
| Text       | `#6b7c5c` |
| Background | `#f0f5ed` |
| Border     | `#d5e0d0` |

### Error / Negative

Used for failures, overdue items, negative currency values, critical alerts.

| Property   | Value     |
| ---------- | --------- |
| Text       | `#b45454` |
| Background | `#fef2f2` |
| Border     | `#f5d5d5` |

### Warning / Pending

Used for pending states, in-progress items, expiring documents.

| Property   | Value     |
| ---------- | --------- |
| Text       | `#8b7355` |
| Background | `#f5f0e6` |
| Border     | `#e5dcd0` |

### Neutral / Info

Used for inactive states, informational content, default badges.

| Property   | Value     |
| ---------- | --------- |
| Text       | `#8c8c8c` |
| Background | `#fafaf8` |
| Border     | `#e8e6e1` |

## Text Colors

| Token     | Hex       | CSS Class        | Usage                                 |
| --------- | --------- | ---------------- | ------------------------------------- |
| Primary   | `#1a1a1a` | `text-[#1a1a1a]` | Headings, important values, titles    |
| Secondary | `#4a4a4a` | `text-[#4a4a4a]` | Body text, table cell content         |
| Muted     | `#8c8c8c` | `text-[#8c8c8c]` | Labels, captions, placeholders, icons |

## Background Colors

| Token        | Hex       | CSS Class            | Usage                         |
| ------------ | --------- | -------------------- | ----------------------------- |
| Page         | `#fafaf8` | `bg-[#fafaf8]`       | Main page background          |
| Card         | `white`   | `bg-white`           | Cards, widgets, modals        |
| Table Header | `#fafaf8` | `bg-[#fafaf8]`       | Table header rows             |
| Hover        | `#f0efe9` | `hover:bg-[#f0efe9]` | Table row hover, button hover |

## Border Colors

| Token   | Hex       | CSS Class          | Usage                                 |
| ------- | --------- | ------------------ | ------------------------------------- |
| Default | `#e8e6e1` | `border-[#e8e6e1]` | Card borders, dividers, input borders |
| Divider | `#e8e6e1` | `divide-[#e8e6e1]` | Table row separators, list dividers   |

## Typography

HostMetrics uses the system default font stack — no custom fonts are loaded.

### Text Styles

| Style        | Classes                                          | Example Usage                  |
| ------------ | ------------------------------------------------ | ------------------------------ |
| Page heading | `text-xl font-semibold text-[#1a1a1a]`           | Page titles                    |
| Card heading | `font-semibold text-[#1a1a1a]`                   | Card/widget titles             |
| Body text    | `text-sm text-[#4a4a4a]`                         | Table cells, descriptions      |
| Label        | `text-xs text-[#8c8c8c] uppercase tracking-wide` | Column headers, form labels    |
| Caption      | `text-xs text-[#8c8c8c]`                         | Subtitles, helper text         |
| Monospace    | `font-mono text-xs`                              | IDs, reservation codes, hashes |

### Usage Examples

```tsx theme={null}
{/* Page heading */}
<h1 className="text-xl font-semibold text-[#1a1a1a]">Dashboard</h1>

{/* Card heading with subtitle */}
<h3 className="font-semibold text-[#1a1a1a]">Fleet Overview</h3>
<p className="text-xs text-[#8c8c8c]">Last 30 days</p>

{/* Body text */}
<p className="text-sm text-[#4a4a4a]">Your fleet earned $12,500 this month.</p>

{/* Label */}
<span className="text-xs text-[#8c8c8c] uppercase tracking-wide">Vehicle</span>

{/* Monospace for IDs */}
<span className="font-mono text-xs text-[#8c8c8c]">RES-48291034</span>
```

## Spacing

### Standard Spacing Values

| Context             | Value                          | Class              |
| ------------------- | ------------------------------ | ------------------ |
| Card padding        | 20px                           | `p-5`              |
| Card header padding | 20px horizontal, 16px vertical | `px-5 py-4`        |
| Table cell padding  | 16px horizontal, 12px vertical | `px-4 py-3`        |
| Section gap         | 24px                           | `space-y-6`        |
| Item gap            | 12-16px                        | `gap-3` or `gap-4` |
| Form field gap      | 6px                            | `space-y-1.5`      |

### Border Radius

| Context           | Class          |
| ----------------- | -------------- |
| Cards and widgets | `rounded-xl`   |
| Buttons           | `rounded-lg`   |
| Badges            | `rounded-full` |
| Inputs            | `rounded-md`   |

## Icons

HostMetrics uses **Lucide React** for all icons.

```tsx theme={null}
import { FileText, ChevronRight, Plus } from "lucide-react";
```

### Sizing

| Context                  | Classes     | Pixel Size |
| ------------------------ | ----------- | ---------- |
| Inline with text         | `w-4 h-4`   | 16px       |
| Standalone / buttons     | `w-5 h-5`   | 20px       |
| Empty state illustration | `w-10 h-10` | 40px       |

### Color

* Default / muted: `text-[#8c8c8c]`
* Inherit from parent: no explicit color class
* Brand accent: `text-[#6b7c5c]`

## Currency Formatting

Currency values always use `tabular-nums` for proper column alignment:

```tsx theme={null}
{/* Positive */}
<span className="text-[#6b7c5c] tabular-nums">+$1,250.00</span>

{/* Negative */}
<span className="text-[#b45454] tabular-nums">-$85.50</span>

{/* Neutral */}
<span className="text-[#4a4a4a] tabular-nums">$500.00</span>
```

## Rules

<Warning>
  **Never use generic Tailwind colors.** Do not use classes like `text-red-500`, `bg-blue-100`, `border-green-600`, etc. Always use the exact hex values defined on this page. This ensures the muted, elegant aesthetic remains consistent across the entire application.
</Warning>