Square (Block) · Design system breakdown
Fintech design system for sellers — the reference for small-business commerce surfaces.
Market is Square's design system, public since the late 2010s, powering Square's seller-facing surfaces (POS, Dashboard, Online Store builder, Square Banking) and developer-facing surfaces (Sandbox, API docs). After Square became Block, the system continues to power the Square seller portfolio while sister brands like Cash App run their own.
Square's central design-systems team owns Market; component implementations are open-source on GitHub with documented contribution guidelines. The system ships across Web Components and React, with Figma libraries for design ecosystem.
| Token | Value | Role |
|---|---|---|
| color-text-primary | #000000 | Default body text |
| color-bg-page | #ffffff | Default page surface |
| color-success | #008060 | Successful transactions |
| color-warning | #cc4b00 | Pending state, requires attention |
| color-critical | #c01a1f | Failed payments, destructive actions |
| spacing-base | 8px | Base spacing increment |
Token names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
If you're evaluating this system
Study Market if you're building POS, retail, SMB commerce, or fintech for sellers. The money-handling and printing patterns are the reference. Don't pick it for enterprise B2B or pure-consumer surfaces.
Compare more systems