@dupagelabs/uiDesign System
Preview
Brand
Overview
About
Color
Typography
Spacing
Button
Checkbox
Switch
Radio
Input
TextArea
Alert
Badge
Chip
Tooltip
Divider
Avatar
Empty State
Tabs
Dropdown
Dropdown Menu
Search Field
Pagination
Progress Tracker
Breadcrumb
Accordion
File Upload
Date & Time
Data Table
Text
Card
Dialog
Sheet
Brands
Client brands
Company tokens
FOUNDATIONSSpacingSpacing scale used by layout primitives (YStack / XStack gaps) and component padding.
Why this mattersConsistent spacing tokens keep denser forms and airy marketing layouts on the same rhythm.
$2
~8px
$3
~12px
$4
~16px
$5
~20px
$6
~24px
$7
~28px
$8
~32px
Live gap demoNested stacks using gap="$2" through gap="$6".
gap=$2
gap=$3
gap=$4
gap=$5
gap=$6