Market

# Market — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Square (Block). "Market" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Market
**Owner:** Square (Block)
**Official documentation:** https://design.squareup.com/
**Visual character:** Point-of-sale monochrome: black-button decisiveness, payment-grade semantic states, and money-input patterns polished by real registers.

---

## Summary

Fintech design system for sellers — the reference for small-business commerce surfaces.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Black / Primary | `#000000` | `--market-color-action-primary` | Primary actions (monochrome core) |
| Text | `#191919` | `--market-color-text` | Primary text |
| Text Subtle | `#71767a` | `--market-color-text-subtle` | Secondary text |
| White | `#ffffff` | `--market-color-surface` | Surfaces |
| Fill 30 | `#f5f6f7` | `--market-color-fill-30` | Subtle background |
| Border | `#dedede` | `--market-color-border` | Borders |
| Success | `#008060` | `--market-color-success` | Successful transactions |
| Warning | `#cc4b00` | `--market-color-warning` | Pending states |
| Critical | `#c01a1f` | `--market-color-critical` | Failed payments, destructive actions |
| Blue Accent | `#006aff` | `--market-color-emphasis` | Links and informational emphasis |

## Typography

- **Body:** Square Sans / Market — weights 400, 500, 700 — `'Square Sans Text', -apple-system, 'Helvetica Neue', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display-20 | `36px` | `44px` |
| heading-30 | `25px` | `32px` |
| heading-20 | `19px` | `26px` |
| paragraph-30 | `16px` | `24px` |
| paragraph-20 | `14px` | `22px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px` · `40px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `6px` |
| large | `12px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 2px 8px rgba(0,0,0,0.1)` |

## Motion

| Name | Value |
| --- | --- |
| default | `200ms cubic-bezier(0.4, 0, 0.2, 1)` |

## Quick start (CSS)

```css
/* Market — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://design.squareup.com/ */

:root {
  /* Color */
  --market-color-action-primary: #000000; /* Primary actions (monochrome core) */
  --market-color-text: #191919; /* Primary text */
  --market-color-text-subtle: #71767a; /* Secondary text */
  --market-color-surface: #ffffff; /* Surfaces */
  --market-color-fill-30: #f5f6f7; /* Subtle background */
  --market-color-border: #dedede; /* Borders */
  --market-color-success: #008060; /* Successful transactions */
  --market-color-warning: #cc4b00; /* Pending states */
  --market-color-critical: #c01a1f; /* Failed payments, destructive actions */
  --market-color-emphasis: #006aff; /* Links and informational emphasis */

  /* Typography */
  --font-body: 'Square Sans Text', -apple-system, 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-display-20: 36px /* line-height 44px */;
  --text-heading-30: 25px /* line-height 32px */;
  --text-heading-20: 19px /* line-height 26px */;
  --text-paragraph-30: 16px /* line-height 24px */;
  --text-paragraph-20: 14px /* line-height 22px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* Radius */
  --radius-default: 6px;
  --radius-large: 12px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.1);

  /* Motion */
  --motion-default: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

## Origin

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.

## Governance

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.

## Known for

- Money-handling input patterns — currency-aware inputs, transaction-row patterns, ledger-style data tables tuned for retail SMB use.
- Receipt and printing patterns — Square's POS produces physical receipts and the design system codifies the print and export formats.
- Cross-form-factor consistency — the same patterns translate from POS hardware (touch, large targets) to Dashboard (mouse, dense data) without forking.

## Underrated

- The empty-state catalog for first-run sellers (no items yet, no orders yet, no team yet) is a reference for SMB onboarding — assumes users with no prior product knowledge.
- The product-listing patterns from Square Online (catalog management, bulk pricing, variant editor) cover real e-commerce edge cases most systems duck.

## Watch out for

- Patterns assume retail SMB context — small staff, real-world transactions, mixed digital literacy. Lifting them onto enterprise B2B imports those assumptions.
- Visual identity is Square-flavored — black and white with restrained accents; consumer brands will need warmth.

## Components worth studying

- **MoneyInput** — Currency-aware input with locale formatting, decimal-place enforcement, and inline conversion — the canonical money-input pattern.
- **Item Variant Editor** — Product catalog editor for variants (size, color, SKU) with bulk pricing and inline image handling — real e-commerce depth.
- **Print Layout** — Receipt and report print layouts with explicit page sizing, margins, and font handling for thermal printers and PDF export.

## When to choose Market

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.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Market by Square (Block) — Fintech design system for sellers — the reference for small-business commerce surfaces. Character: Point-of-sale monochrome: black-button decisiveness, payment-grade semantic states, and money-input patterns polished by real registers. Use a primary colour near #000000, the typeface "Square Sans / Market" (or a close equivalent), corner radius around 6px, a spacing rhythm on a 8px base. Lean into what it's known for: Money-handling input patterns — currency-aware inputs, transaction-row patterns, ledger-style data tables tuned for retail SMB use. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Square Design](https://design.squareup.com/)
- [Market on GitHub](https://github.com/square/market)
- [Square brand](https://squareup.com/us/en/branding-guidelines)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/square-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._