Pi Coffee ▾
Style Variables
Colors
pi-primary
Used by: Buttons, Links, Active tabs
pi-success
Used by: Confirmations, Verified badges
pi-error
Used by: Errors, Disputes, Alerts
pi-warning
Used by: PiDCTP links, Warnings
pi-bg
Used by: Page backgrounds, Cards
Fonts
pi-heading
Pi Coffee Shop
Used by: Page titles, Hero text
pi-body
Fresh roasted, Pi-powered coffee
Used by: Body text, Descriptions
pi-caption
5 Pi per bag · Escrow protected
Used by: Labels, Hints, Captions
Element Styles
Button-primary base: button
pi-primary 14px/600 8px radius 8px 16px
Button-outline base: button
pi-primary border 14px/600 8px radius
Card-default base: group
#f7f7fc 10px radius 10px shadow-sm
Badge-gold base: text
#FFD700 9px/600 4px radius
Live Preview
Pi Coffee Shop
Fresh roasted, Pi-powered coffee with escrow protection.


Gold Seller Silver
Pi AI
"Generate a dark theme for my app"
✅ Created dark theme variables
✅ pi-bg → #1a1a2e, pi-text → #e0e0e0
✅ Updated Card-default to dark surface
✅ Preview updated — Apply changes?