Design layers that ship as source.

A tiered vocabulary — 43 primitives, 25 components, 103 blocks — plus a token contract, a motion layer, a geospatial layer, and 8 page templates: one system, distributed as editable source through a shadcn-schema registry. Install a slice with the CLI, an MCP server, or an AI agent; every value traces back to the token variables, so retheming is one file.

any item works — data-grid, command-palette, behavior-undo…

Lineage: behemouth/birdseye ops platform → Arkad Design System → DezPack. The default theme is Arkad verbatim — neutral oklch grayscale, burnt-vermillion accent, Geist Sans/Mono, hairline borders before shadows. It is one theme, not the contract.

Actions

Button6 variants × 3 sizes

disabled

IconButton3 variants × 3 sizes, aria-label required

Toggle / ToggleGrouppressed-state buttons; group is a segmented control

toggle

group

Forms

Inputaffixes, invalid, mono, disabled

default

mono#

invalid

disabled

Label + Textarea

Delivery notes

Internal memoOptional

Selecttrigger renders labels, not raw values

RadioGroup

Standard routeExpress routeManual dispatch

Forms & pickers

Fieldlabel / description / error wiring around any control

Customer

Shown on invoices

Account code

Code already in use

Combobox / DatePicker

Slider / Progress

slider

Route capacity

progress

Batch upload

Calendarstandalone month grid — the same one DatePicker wraps

August 2026

InputOTP / Breadcrumb

otp

breadcrumb

Data

Cardheader · description · action · flush body

Conversion by channel

Trailing 30 days, all properties

Body content respects the 18px card padding from the token contract.

Flush body

Tables bleed to the edge

Row one

Row two

Badge5 tones, optional dot

tonesneutraloutlineaccentaccent-softsolid

dotLiveIdleArchived

Avatar4 sizes, initials fallback, solid

mhmhmhmhdz

Skeleton / Separator

skeleton

separator

ScrollAreastyled thin scrollbar, y overflow

Ledger line 01 — routine entry

Ledger line 02 — routine entry

Ledger line 03 — routine entry

Ledger line 04 — routine entry

Ledger line 05 — routine entry

Ledger line 06 — routine entry

Ledger line 07 — routine entry

Ledger line 08 — routine entry

Ledger line 09 — routine entry

Ledger line 10 — routine entry

Ledger line 11 — routine entry

Ledger line 12 — routine entry

Ledger line 13 — routine entry

Ledger line 14 — routine entry

Disclosure

Accordiontyped items; single or multiple open

Morning pickups run 7–11am, evening 4–8pm. Same-day requires booking before 10am.

Collapsibleinline disclosure for secondary detail

closed

open

Gate code 4417. Loading dock closes at 6pm sharp.

Feedback

Tooltiphover or focus; optional kbd hint

Spinner / Kbd

spinner

kbdOpen palette ⌘KUndo ⌘Z

EmptyStateicon · title · description · action

No orders yet

Orders appear here the moment a pickup is booked. Connect a channel or create one manually.

Overlays

Dialogtitle · description · body · footer · esc/backdrop close

AlertDialogconfirm/cancel, destructive option

Popover / HoverCard / DropdownMenu / ContextMenu

Right-click me

Drawerright / left / bottom, swipe-to-dismiss

ToastuseToast().add — default and alert tones

CommandPalettecmdk filtering, groups, kbd hints

or press ⌘K

Data tier

Metriccontrol-room KPI row

Revenue

41.2k

+8.1%

Orders

122

−3.4%

On-time

98.2%

flat

DataGrid1,000 rows virtualized · arrows/shift-arrows · type to edit lbs · ⌘Z undo · ⌘C copies TSV

Customer	Service	Lbs	Status
1,000 orders · 26,960 lbs total · edit lbs then ⌘Z

DataTableTanStack engine — search, sort, select, paginate


Rockaway Hotel	Wash & fold	22	processing
Enso Spa	Linen	41	ready
Cowork Bklyn	Wash & fold	9	picked-up

Table / Chipstatic dense table; chips hash value → hue

Customer	Lbs	Status
Rockaway Hotel	22	processing
Enso Spa	41	ready
Cowork Bklyn	9	picked-up

FilterDropdown / SortableList

filter

sortable

1 · Pickup window

2 · Wash & dry

3 · Fold & pack

4 · Deliver

Blocks

CustomerProfileentity header + detail grid + activity — one typed prop surface

Rockaway Hotel

activenet-30

Commercial linen · since Mar 2024

Contact: Dana Reyes
Phone: (718) 555-0144
Account: ACCT-4417
Avg. weekly: 212 lbs

Activity

Order #4417 out for deliverytoday
Invoice INV-0231 paidJul 28
$1,204.00 · autopay
Plan upgraded to twice-weeklyJul 12

OrderDetailsDialogsteps + details + line items + history in one modal — open it

EntityHeader / DetailList

header

Van 3 — Rockaway loop

on-route

Kay Ortiz · 14 stops · departs 8:00 AM

details

Depot: Bushwick 2
Capacity: 420 lbs
Shift: 8 AM – 4 PM

Steps / Timeline

steps

Queued
Washing
Ready
Delivered

timeline

Ready for delivery2:40 PM
Quality check passed2:22 PM
Washing started11:20 AM

LineItemspre-formatted amounts — the app owns currency and locale

Wash & fold 22 lbs @ $2.25/lb	22 lbs	$49.50
Rush fee		$10.00
Subtotal		$59.50
Total		$64.78

RouteManifestops flagship — driver, capacity, numbered stops

Route 7 — Rockaway loop

312 / 420 lbs

koKay OrtizVan 3 · Class C

Stops

1Rockaway Hotel9–11adone
2Enso SpaGate code 441711–1parrived
3Cowork Bklyn1–3ppending

InvoiceCardcommerce flagship

INV-0231overdue

Customer: Rockaway Hotel
Issued: Jul 1
Due: Jul 31

Linen program — July 4 wk $1,204.00

Balance due$1,204.00

CustomerHealthCardCRM flagship — signals + verdict

Cowork Bklyn

Wash & fold · weekly

Weekly lbs

−32%

NPS

Tickets

BalanceSummaryfinance flagship — aging buckets

Balance

Receivable

8,204$

Collected (30d)

12,940$

+9%

Current$5,000

1–30$2,000

90+$1,204

TeamRosterPanelpeople flagship

Team

koKay OrtizDriver · Route 7active
rcR. ChenFacilitiesaway
jaJ. AlvarezRoute supervisoractive

TicketPanelsupport flagship — SLA + reply thread

#2201 — Missing bag on Route 7

highopenRespond1h 40m

drDana ReyesRockaway Hotel

drDana9:12 AM
One bag short on today's delivery.
wdYou
Checking Van 3 now — 10 min.
delivered

KpiOverviewanalytics flagship

Overview

Revenue

41.2k

+8.1%

Orders

122

−3.4%

On-time

98.2%

flat

vs Jul 1 – Jul 31

DangerZonechrome flagship — typed-confirm gates

Danger zone

Delete workspaceAll routes, orders, and history are removed permanently.

BookingPanelscheduling flagship — pick a slot

Pick a time

Tue Aug 5

Wed Aug 6

IncidentCarddev-ops flagship

RespondersmhMatt HeimIC

Updates

Carrier confirmed filtering; reroute live11:20 AM
Elevated failure rate detected10:42 AM

All 102 blocksevery block installs as source — grab any of them

Motion — @mfgdezpack/motion

Duration tokensthe only timing values components may use — click to replay

Easing tokensclick to replay — watch the curves differ

usePresenceexit animation before unmount — interruptible both ways

state: entered — exit animates before unmount

Staggerindex → capped delay via --stagger-delay

PickupWashDryFoldPackDeliver

FLIPlist reorders glide instead of teleporting

Route 3Route 7Route 9Route 12

Geospatial

The map tier, matyard lineage: token ramps (--geo-*), DOM chrome below, and engine items — MapLibre surfaces over any PMTiles archive, deck.gl density/marker/waypoint layers — that install as source and mount in the MapView template.

Map pinnumber / initials / dot · status beats tone beats hue · selection ring

hues

route stops12345

statesAKO

Map legendthe ramp swatch is the same tokens the layers draw

Place density4,182

FewerMore

Grid

FewerMore

Pins

Pickup
Delivery
Driver

Clusters

Bubble size = stores in that area. Click a bubble — or zoom in — for individual pins.

Hints + attributionrung hints announce politely; the OSM credit is ODbL-required

hints

Showing clusters — click one or zoom in for individual stores

Zoom in a little more to reveal store names

Map layers panelwaypoint sets are first-class toggleable layers

Map layers

Pickup
Delivery
Needs action

Live

Shift trailsToday's breadcrumbs for everyone on the clock · 4 on map

HandledThe day's completed stops, as check pins

Waypoints

US metrosThe 20 largest US metro areas, labeled at their city centers. · 20 on map

US landmarksNational monuments, parks, and icons.

NYC landmarksStreet-scale demo set: recognizable Manhattan-area landmarks. · 10 on map

Map filter railsearch · view segments · category toggles (— on the density rung) · camera jump

The Map

4,182 places in view · 312 clusters

Zoomed-out view

Templates — @mfgdezpack/templates

TableViewsticky header, row selection, render columns

Customer	Service	Lbs	Status
Rockaway Hotel	Wash & fold	22	processing
Enso Spa	Linen	41	ready
Cowork Bklyn	Wash & fold	9	picked-up

KanbanViewdnd-kit drag between columns — try it

Queue

Rockaway Hotel — 22 lbs

Enso Spa — 41 lbs

Washing

Cowork Bklyn — 9 lbs

Done

No items

SplitViewresizable list/detail split

Route list

Select a route — drag the divider to resize

LogViewdate-grouped activity feed

Saturday, Aug 1

9:12 AMinfoRoute 7 departed depot

9:48 AMinfoRockaway Hotel pickup complete — 22 lbs

10:02 AMwarnEnso Spa gate code rejected

Friday, Jul 31

4:40 PMinfoRoute 7 returned to depot

3:05 PMinfoCowork Bklyn dropoff complete

StatusGridViewgrouped status cards — the control-room wall

Washers

Washer 1running

Washer 2running

Washer 3idle

Dryers

Dryer 1running

Dryer 2fault

Dryer 3idle

Presses

Press 1idle

Press 2running

CardGridresponsive card layout; any card component

Revenue

41.2k

+8.1%

Orders

122

−3.4%

On-time

98.2%

flat

MapViewmap engine mounts as children; controls float

Map component

Route 7 — live4 stops left

Design layers that ship as source.

Actions

Forms

Forms & pickers

Data

Conversion by channel

Flush body

Navigation

Disclosure

Pickup windows

How pricing works

Service area

Feedback

Overlays

Data tier

Blocks

Rockaway Hotel

Activity

Van 3 — Rockaway loop

Route 7 — Rockaway loop

Stops

Cowork Bklyn

Balance

Team

#2201 — Missing bag on Route 7

Overview

Danger zone

Pick a time

Updates

Motion — @mfgdezpack/motion

Geospatial

Map layers

The Map

Templates — @mfgdezpack/templates

Washers

Dryers

Presses