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

{/* 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 Formatting

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.