UI style guide
PPA-34 — Design system & app shell
Shared tokens, components, and the responsive app shell used across the customer flow and the staff fulfillment panel. This page exists only to verify the system looks right — real screens land in later tickets.
Color tokens
Primary
#0F7A5F
Success
#16A34A
Warning
#F59E0B
Danger
#EF4444
Muted
#6B7280
Background
#F8FAFC
Typography
Heading 1
Heading 2
Heading 3
Body text, regular weight.
Muted supporting text.
Font familyInter, sans-serif / Source Serif 4
H132px / 400 (serif)
H224px / 400 (serif)
H318px / 500
Body16px / 400
Muted14px / 400
Buttons
Status badges
NewIn reviewPrintedAwaiting paymentCancelled
Form & order card
Mailing address
Shown on the remote-order checkout path.
Enter a valid email address
Order #1042
2 photos · remote order