VH Platform · Design System
Component & Token Library
A unified set of colors, typography, spacing, and UI components for the VH SaaS platform. All values are expressed as CSS custom properties for consistent theming across dashboard panels, iframes, and standalone blocks.
Version 1.2.0
Theme Dark (default)
Base color #1A1D24
Accent Amber #F5A623
Colors
Brand palette, semantic colors, and surface hierarchy
01
Amber — Brand / Accent
50
100
200
400 ★
500
600
800
900
★ Primary brand token — --amber-400: #F5A623
Semantic colors
Teal / Verified
--teal-400: #5BCBA8
Red / Failed
--red-400: #F87171
Blue / Pending
--blue-400: #4A7FA8
Amber / Active
--amber-400: #F5A623
Surface hierarchy
Base / Page
--bg-base: #1A1D24
Surface / Sidebar
--bg-surface: #1E2129
Card
--bg-card: #272B33
Elevated
--bg-elevated: #2E323C
Text colors
Aa
Primary
--text-primary: #F0EED8
Aa
Secondary
--text-secondary: #E2E0D6
Aa
Muted
--text-muted: #9A9890
Aa
Faint
--text-faint: #6B6960
Typography
Type scale, weights, and text styles
02
Font family
Primary typeface · UI & dashboard
Inter
Google Fonts · by R.Andersson
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 & . , : ; ! ? @ # % ( ) / —
--font-sans
'Inter', sans-serif
Used weights in this UI
300 · Light — body, captions, nav items
400 · Regular — labels, table cells
500 · Medium — KPI values, chart nums
600 · Semibold — uppercase headings
Import
@import url(
  'fonts.googleapis.com
  /css2?family=Inter
  :wght@300;400;500;600'
);
Weights in use
Ag
Light 300
font-weight: 300
Body text · nav labels · captions · badge text · table cells · chart axis
Ag
Regular 400
font-weight: 400
Column labels · input values · filter buttons · tooltip text
Ag
Medium 500 ★
font-weight: 500
KPI values · chart numbers · active nav · badge values · shipment counts
Ag
Semibold 600
font-weight: 600
Uppercase section headers · panel titles · column headings · sub-nav active
★ Medium (500) is the primary weight — most interactive and numeric content uses it.
Uppercase pattern
Uppercase is used for section labels, panel headers, and table column names — always with Inter Light or Regular, never Bold.
STATISTICS
11px / 300 / ls 0.12em — page section title
LOGISTICS EXECUTION
11px / 300 / ls 0.12em — panel header
ASSET CLASS · CARGO · REFERENCE
11px / 400 / ls 0.10em — table column
REGISTERED PRODUCTS
10px / 400 / ls 0.10em — KPI card label
ACTIVE SHIPMENTS
11px / 600 / ls 0.08em — active nav group
Type scale specimen
11px / 300
uppercase · ls 0.12em
Section header
Inter Light
STATISTICS  ·  SHIPMENT CONTROL  ·  LOGISTICS EXECUTION
11px / 400
uppercase · ls 0.10em
Table column
Inter Regular
ASSET CLASS  ·  CARGO  ·  ASSIGNED AGENT  ·  LAST CHECKPOINT  ·  REFERENCE
10px / 400
uppercase · ls 0.10em
KPI card label
Inter Regular
REGISTERED PRODUCTS  ·  VERIFIED PRODUCTS  ·  ACTIVE NETWORK NODES
28px / 500
KPI value
Inter Medium
2.841   2.330   148   300
13px / 300
Nav item · body
Inter Light
Shipment control  ·  Last Mile Tracking  ·  Deviation Alerts  ·  ETA Predictions
13px / 300
Table cell
Inter Light
Dry Van Load  ·  LCL  ·  ISO Tank  ·  FCL  ·  [Agent_ID_Title]  ·  [check_point_lat]
12px / 500
Reference ID
Inter Medium
72F259S75  ·  25S0216U7  ·  DP3961825  ·  3876G78Q0
11px / 500
Badge / tag
Inter Medium
+ 30% - 5% stable + 15%
11px / 600
uppercase · active nav
Inter Semibold
ACTIVE SHIPMENTS  ·  MILESTONE VISIBILITY  ·  NETWORK NODES
11px / 300
Chart legend
Inter Light
Registered Verified Pending Returned
/* Font import */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); /* Font family token */ --font-sans: 'Inter', sans-serif; --font-mono: 'Cascadia Code', 'Fira Code', Consolas, monospace; /* Weights in use */ --weight-light: 300; /* body, nav, captions, table cells */ --weight-regular: 400; /* column labels, filter buttons */ --weight-medium: 500; /* KPI values, reference IDs ★ primary */ --weight-semibold: 600; /* uppercase headers, active nav group */ /* Uppercase pattern */ --label-style: uppercase; /* text-transform for all section/column labels */ --label-spacing-lg: 0.12em; /* page headers, panel titles */ --label-spacing-md: 0.10em; /* table columns, KPI labels */ --label-spacing-sm: 0.08em; /* active nav groups, badges */ /* Type scale */ --text-xs: 10px; /* KPI card labels (uppercase) */ --text-sm: 11px; /* section headers, column labels, badges */ --text-base: 12px; /* reference IDs, sub-labels */ --text-md: 13px; /* nav items, table cells, body */ --text-lg: 14px; /* chart labels, card content */ --text-kpi: 28px; /* KPI values (medium weight) */
Spacing & Radius
8pt grid system and corner radius tokens
03
Spacing scale (8pt grid)
4px--space-1 · micro gap
8px--space-2 · icon gap
12px--space-3 · inline gap
16px--space-4 · component gap
20px--space-5 · card padding (sm)
24px--space-6 · card padding
28px--space-7 · section padding
48px--space-12 · page padding
56px--space-14 · main gutter
Border radius
4px--radius-xs
6px--radius-sm
10px--radius-md
14px--radius-lg
20px--radius-xl
99px--radius-pill
Shadows & Borders
Elevation system and border tokens
04
--shadow-sm
0 2px 8px rgba(0,0,0,0.25)
--shadow-md
0 4px 20px rgba(0,0,0,0.40)
--shadow-lg
0 8px 40px rgba(0,0,0,0.55)
Border tokens
Subtle
rgba(255,255,255, 0.07)
Default
rgba(255,255,255, 0.12)
Strong
rgba(255,255,255, 0.22)
Accent
rgba(245,166,35, 0.45)
All borders use 0.5px stroke weight for a refined, subtle appearance.
Buttons
Variants, sizes, and states
05
Variants
Sizes
Segmented control — used for chart time filters
  
Badges & Tags
Status indicators and labels
06
Directional badges — KPI cards
↑ 30% vs last period ↓ 5% vs last period → Stable ↑ 18% vs last period
Status dots — inline use
Verified Failed Inactive Pending
Tags — metadata, filters
CNH5390X3 Type B Last 7 days East Asia In transit
Inputs & Controls
Form elements, toggles, and selects
07
This field is required
Product ID verified
Toggles
Core Product Attribute — ON
Condition Monitoring — OFF
Attribute variants selector
Cards & KPIs
Surface containers and metric blocks
08
KPI cards — with colored left accent
Registered products
2,841
↑ 30% vs last period
✔
Verified products
2,330
↑ 18% vs last period
Shipments in transit
374
↓ 5% vs last period
Card variants
Default card
background: --bg-card
border: 0.5px --border-subtle
radius: --radius-lg
Accent card
border-left: 3px solid --amber-400
Used for highlighted sections
Focused / hover card
border: 0.5px --border-accent
On hover state
Tables
Data tables for product and shipment lists
10
Product ID Status Region Shipments Verified
CNH5390X3 Verified East Asia67197%
DLV6390d8 Pending Europe51882%
SLP2047S2 Failed South Asia38968%
PQM4710R8 Verified North America34293%
WON2955Q4 Verified Middle East20388%
Chart block patterns
Anatomy and usage rules for dashboard charts
11
Chart card anatomy
Chart title ← 14px / 500
Subtitle / data description ← 12px muted
canvas area
Registered Verified Pending
Chart color assignments
Registered / Primary metric
#F5A623 · rgba(245,166,35,0.85)
Verified / Delivered / Success
#5BCBA8 · rgba(91,203,168,0.8)
Pending / Returned / Info
#4A7FA8 · rgba(74,127,168,0.8)
Failed / Delayed / Danger
#F87171 · rgba(248,113,113,0.8)
Chart axis styles
/* Shared Chart.js config */ scales: { x: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { color: '#9a9890', font: { size: 11 } } }, y: { grid: { color: 'rgba(255,255,255,0.06)' }, ticks: { color: '#9a9890', font: { size: 11 } }, border: { dash: [3, 3] } } }
CSS tokens — full reference
Copy into your :root to use across all blocks
12
/* ── VH Platform Design System v1.0 ── */ :root { /* Brand */ --amber-400: #F5A623; --amber-500: #E8920E; --amber-600: #C57D0A; /* Semantic */ --teal-400: #5BCBA8; /* verified / success */ --red-400: #F87171; /* failed / danger */ --blue-400: #4A7FA8; /* pending / info */ /* Surfaces */ --bg-base: #1A1D24; --bg-surface: #1E2129; --bg-card: #272B33; --bg-elevated: #2E323C; --bg-hover: rgba(255,255,255,0.04); --bg-active: rgba(245,166,35,0.10); /* Borders */ --border-subtle: rgba(255,255,255,0.07); --border-default: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.22); --border-accent: rgba(245,166,35,0.45); /* Text */ --text-primary: #F0EED8; --text-secondary: #E2E0D6; --text-muted: #9A9890; --text-faint: #6B6960; --text-accent: #F5A623; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 99px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.25); --shadow-md: 0 4px 20px rgba(0,0,0,0.40); --shadow-lg: 0 8px 40px rgba(0,0,0,0.55); /* Typography */ --font-sans: 'Inter', sans-serif; --font-mono: 'Cascadia Code', 'Fira Code', Consolas, monospace; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.20s ease; --transition-slow: 0.35s ease; }