MarketSquare — Design System

Foundations · Components · Patterns — light & dark, handed off to engineering
Version 1.0
iOS · 8pt grid
01 — Color · WCAG AA
Brand Purple
Base · 500 — #9D52FF
hsl(266 · 100% · 66%) — single-hue scale
50100200300400500600700800900
Purple 50 → 900 — every step a tint or shade of #9D52FF
Neutral ramp — Ink 900 → Surface 0
Ink on Background15.1:1 · AAA
Purple 800 text on White10.3:1 · AAA
AWhite on Purple 5004.1:1 · AA
02 — Type
Aa
Display
800 · 42
Sell with clarity
Title · 700 · 27
Section heading
600 · 18
Body copy for listings, flows and detail views.
400 · 15
Label · Metadata
Mono · 12
03 — Components
List an item Save Cancel
Search MarketSquare
AllWatchesArtJewelrySneakers
04 — Listing pattern
♥
✓ID Verified Seller
Vintage Omega Seamaster
$2,450
2.1 mi away · AI-tagged · Escrow
Dark
Light
05 — Spacing & radius
8pt scale — 8 / 16 / 24 / 32 / 48
Radius — sm 8 · md 13 · pill
06 — Navigation
A fixed dock with a single elevated action — calm chrome, one obvious next tap.
MFA ✓ID Verified Pay to talk