Everything below renders from @popashoppe/tokens —
the single source of truth shared by this site and the mobile app.
Restyle the tokens, and all of this (and the app) re-skins wholesale.
Foundations
Color
Components never touch the raw palette — they use semantic roles.
The mapping lives in one file (semantic.ts); changing it restyles every surface.
Semantic roles
background
Page / screen background
foreground
Default text
fgMuted
De-emphasized text
surface
Raised cards on background
surfaceMuted
Disabled fills
primary
Main CTAs, brand mark
primaryFg
Text on primary
contrast
Dark buttons, header bars
contrastFg
Text on contrast
accent
Celebration, secondary actions
accentFg
Text on accent
info
Stat cards, summaries
infoFg
Text on info
infoAccent
Highlights on info surfaces
danger
Eyebrows, destructive accents
spare
Reserved
border
All borders (always ink)
shadow
Hard offset shadows
Raw palette (default theme reference)
cream
#f6eedc
creamFg
#180f09
ink
#120c07
orange
#f3680f
rust
#b93004
navy
#0a345a
teal
#118186
mustard
#e3ae28
card
#fbf4e8
muted
#e4ddcf
mutedFg
#50453d
white
#ffffff
Foundations
Typography
Three voices, set per theme: a display face for headlines and buttons, a body face for sentences, and a mono face for labels, receipts, and badges. Switch the design system above and watch them change.
display-xl · hero · 96px
Get paid
display-lg · 40px
A three-star day
display-md · 28px
Name your Shoppe
body · 16px
No EINs. No business plan. No catalog homework. Open the app, type a number, get paid.
mono-label · 12px
Step 1 of 3 · Receipt no. 0008
mono-micro · 10px
No account. No forms. Promise.
Foundations
Spacing
Named steps only — never raw numbers.
Foundations
Borders & Shadows
Depth is mechanical: full-strength ink borders and hard offset shadows with zero blur. Nothing glows, nothing fades.
shadow-sm
shadow-md
shadow-lg
shadow-xl
default · 2px
thick · 3px
hairline · 1px
Foundations
Motion
Snappy and physical. Buttons translate into their shadow on press (90ms); screens slide in (180ms); celebrations get one decisive pop (420ms). Try the button:
tap
90ms
fast
140ms
base
180ms
celebrate
420ms
Components
Chips & Badges
Components
Cards
Accept payments now
Skip the storefront. Take your first dollar in under 30 seconds.
Today so far
$42.85
7 sales · ⭐⭐⭐ day
Milestone unlocked
🔥 5-Day Market Streak!
Recent sales
Components
Inputs
UnderlineInput — the one-question form
BoxInput — wizard fields
Components
Stats & Ratings
Total
$142.85
Sales
23
Principles
Voice
Say
- "That's the whole form. No, really."
- "Building your catalog, the lazy way"
- "Heck yeah →"
- "Nah, it was a one-off"
Never say
- "Complete your merchant profile"
- "Configure your product catalog"
- "Transaction processed successfully"
- "Submit"
Tokens: packages/popa-tokens · Site: packages/popashoppe-site · App: packages/payments-mobile