v0.1.0 · Design System

The Radar Core style guide

A working catalogue of every component the admin console uses today, plus the primitives we'll need next. Built on the same restrained aesthetic as the Parcel Radar landing — inline-styled, framer-motion driven, with a single ink-on-paper accent palette.

01

Foundation

The token palette every other component pulls from. Edit once, propagate everywhere.

Color Tokens
Ink
ink
#0D0D12
ink-2
#272835
ink-3
#666D80
ink-4
#818898
ink-5
#C1C7D0
Surfaces & Lines
bg
#FFFFFF
surface
#F8F9FA
surface-2
#F6F8FA
line
#ECEFF3
line-2
#DFE1E7
Status
success
#22C55E
info
#3B82F6
warn
#F59E0B
danger
#EF4444
02

Typography

A 9-step scale tuned for dense data UIs. The display step is reserved for marketing/heroes; admin pages start at H2.

Type Scale
Display
56/700
Logistics that runs itself
Heading 1
40/700
Logistics that runs itself
Heading 2
32/700
Logistics that runs itself
Heading 3
24/600
Logistics that runs itself
Heading 4
18/600
Logistics that runs itself
Body Large
17/400
Logistics that runs itself
Body
15/400
Logistics that runs itself
Caption
12/500
Logistics that runs itself
Overline
11/600
Logistics that runs itself
03

Buttons

Five variants × three sizes. Primary is the only ink-filled action per view; everything else stays quiet.

Variants
Sizes
With Icons
States
04

Form Inputs

42px height across the board. Labels live above the input for scannability in dense forms.

Text & Search
Format: PXL-XXXXX
Must be a valid email address
Select & Textarea
Date Picker
Defaults to today; carriers cut off at 16:00.
Toggles
05

Badges & Pills

Status communication for tables, cards, and inline annotations.

Tones
NeutralDeliveredIn TransitPendingException
06

Cards

Stat tiles, shipment summaries, and the building blocks of every dashboard view.

Stat Cards
Active Shipments
248↑ 12%
On-Time Rate
98.2%↑ 0.4%
Exceptions
3↓ 2
Revenue (THB)
2.41M↑ 8.1%
Shipment Card
PXL-2026-00482
Created 2h ago
In Transit
From
Guangzhou, CN
To
Bangkok, TH
2.5 kg · 30×20×15 cm฿1,240
07

Data Tables

Dense, scannable, with built-in filter, export, and pagination patterns.

Recent Shipments
1–5 of 1,248 entries
Tracking #OriginDestinationWeightStatusETA
PXL-00482GuangzhouBangkok2.5 kgIn TransitApr 8
PXL-00481YiwuChiang Mai12 kgDeliveredApr 6
PXL-00480ShenzhenPhuket0.8 kgExceptionApr 9
PXL-00479ShanghaiBangkok5.2 kgPendingApr 10
PXL-00478ChenghaiPattaya1.1 kgDeliveredApr 5
Rows per page
Page 1 of 250
08

Alerts

In-flow messaging — distinct from toasts (transient) and modals (blocking).

New carrier integration available
DPD Thailand is now ready to enable in your account settings.
Shipment dispatched
PXL-2026-00482 has been picked up by the carrier.
Customs documents required
3 shipments are awaiting Form E to clear export.
Carrier API offline
DHL Express webhook stopped responding 14 minutes ago. Retrying…
09

Shipment Timeline

The single most-used component in shipment detail views. Active step pulses.

Apr 6, 14:32
Out for delivery
Bangkok hub → Sukhumvit
Apr 6, 08:15
Arrived at destination hub
Bangkok, TH
Apr 5, 22:40
Departed origin port
Laem Chabang
Apr 3, 11:08
Customs cleared
Documents accepted
Apr 1, 09:00
Picked up
Guangzhou warehouse
10

Navigation

Sidebar, tabs, and breadcrumbs — everything you need to wire up the admin shell.

Sidebar
R
Radar Core
Operations
Shipments248
Carriers12
Warehouses5
Customers1842
Notifications3
Settings
Tabs
Content for the overview tab.
Breadcrumbs
Operations/Shipments/PXL-2026-00482
11

Feedback & Loading

Skeletons, spinners, progress bars, empty states — the connective tissue that hides latency.

Skeletons
Spinners & Progress
Sync progress72%
Delivered today42%
Empty State
No shipments yet
Start by importing a CSV or creating a manual entry.
Avatars
AL
T
OP
JN
TR
12

Overlays

Modals and tooltips. Use sparingly — every overlay competes for attention.