Typography
Type scale, weights, and text styles
02
Font family
Primary typeface · UI & dashboard
Inter
Google Fonts
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; /* 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) */