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
{/* 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.
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 values always use tabular-nums for proper column alignment:
{/* 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
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.
