What is Square's primary brand color and where does it appear?

Square's primary is Square Blue #006aff — but it is the brand's scarcity color, not its dominant voltage. The hex appears in 13 CSS custom properties (--color-blue, --color-blue-500, --color-blue-text, --action-variant-button-alt-border-color, --accessibility-focus-outline-color, plus a deeper 4a95ff for dark-mode) and only 19 total occurrences across the captured page. Every use is a 1px outline-button border, an outline-button text color, or the focus ring. There is no filled blue CTA in the marketing system. The dominant page voltage is black #000000 — 1216 total uses across body text and 1px hairlines — sitting on either a white #ffffff canvas or the cream-tinted #f7f6f5 feature-band background.

What typography does Square use, and what should I substitute if the proprietary families are unavailable?

Square layers three families. Exact Block (a serif from the Block in-house foundry) carries the display tier at 40–81px / weight 400 with negative tracking from -0.8px at 40px to -2.916px at 81px. Square Sans Display VF (variable sans) takes the 24px sub-heading tier at weight 500 with -0.24px tracking. Cash Sans and Square Sans Text VF share the body tier at 14–18px / weights 400–500. Cash Sans Mono handles uppercase eyebrow labels at 14px with 1.4px positive tracking. If the proprietary families are unavailable, Tiempos Headline or Source Serif Pro at weight 400 substitutes for Exact Block; Inter Variable at weights 400–500 covers the sans tiers; JetBrains Mono Variable handles the eyebrow uppercase role.

Why do Square's cards use a 50px corner radius?

The 50px radius is the system's most distinctive shape choice — it appears 16 times on the page, far outpacing the 20px input radius (13 uses) and the 4px hairline-tag radius (10 uses). The number is deliberate: it's almost a softened square, large enough to read as friendly chrome but tight enough that the card still reads as right-angled. Block's parent design language inherits the Exact Block serif's geometric construction, and the 50px card mirrors that — a literal square with its corners filed off. Buttons break the pattern entirely: nav links use 10000px (full pill) and email-capture inputs use 10px. The 50px corner is reserved for the merchant-thumb grid and the dashboard composite frame.

Why does Square not use a filled blue CTA?

Square's primary button (`button-primary` in our spec) is a black-fill pill with white text — `#000000` background, `#ffffff` text, 10px padding-block, 20px padding-inline, 10000px radius. The blue (`#006aff`) is reserved for the `button-secondary` outline variant on light surfaces and for the `--accessibility-focus-outline-color` ring. This is an inversion of the fintech convention where indigo or blue carries the filled CTA. Square treats the blue as a brand signature you spot rather than the primary call to action — leaning on black-fill for the action and reserving blue for the brand-recognition voltage. The total page count (19 blue occurrences vs. 1216 black ones) is the proof: blue is scarcity, black is the workhorse.

Can I use this DESIGN.md to build my own React commerce site?

Yes. Pipe the file to Claude, Cursor, or GitHub Copilot and the agent will respect Square's tier-strict typography split (serif display, sans sub-heading, sans body), the 50px card geometry, the outline-only blue, and the black-canvas merchant-photo hero. The 19 components map directly onto shadcn/ui primitives: black-pill buttons swap Button radius to 9999px and background to black, the 50px card replaces Card radius, the merchant-thumb grid is a Grid with image children rounded at 4px, and the dual-canvas hero is two Section components stacked. Paste the tokens straight into Tailwind config or CSS variables — every value is a quoted YAML string ready for `theme.extend`.

What's missing from this DESIGN.md spec?

Several areas, captured at the bottom of the file: hover-state colors for the black-pill primary button (the system has a documented `:active` translate-y of 5% but hover background was not reliably extracted), the full sub-brand palette beyond the extracted Plum #a1499c / Rose #c14f70 / Green #0bb634 / Red #df3320 set (Square has separate Afterpay and TIDAL palettes), the dashboard product's authenticated semantic system, motion specs for the merchant-thumb carousel auto-scroll, the dark-mode token map (the page declares both light and dark CSS custom properties but the rendered surface is light-only), and full responsive breakpoints (the spec covers the desktop ≥1440px capture).

Square Design System

Square's design system as a DESIGN.md file.

About Square DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source squareup.com

Banking & Payments
E-commerce & Retail

Square's marketing surface inverts the fintech convention. Where Stripe, Mercury, and Ramp lean on thin geometric sans-serifs for headlines, Square opens with an editorial serif — Exact Block at weight 400, 72px, -2.88px letter-spacing — sitting in white type over a full-bleed black-canvas photograph of a single merchant. The body type underneath runs Cash Sans (the parent Block company's house sans) at 16px / weight 400, with Square Sans Display VF taking the 24–40px sub-heading tier. Three families on one page, each scoped to a tier. The blue that gives Square its wordmark — #006aff — is rationed: 19 total occurrences across the entire page, every one as a 1px outline-button border or a focus-ring outline. Never a filled CTA fill.

This page packages the system into a single DESIGN.md file built on the Google Labs open spec. Inside: 22 colors organized into the brand-blue voltage, structural ink and cream surfaces, neutral text shades, and Block's sub-product accents (Plum, Rose, Green, Red); 14 typography tokens spanning Exact Block serif display, Square Sans Display VF sub-headings, Cash Sans and Square Sans Text VF body, and Cash Sans Mono uppercase eyebrows; 6 corner radii topped by the 50px card geometry and the 10000px nav pill; 8 spacing values clustered around the 17.5px / 20px / 40px / 80px Square rhythm; and 19 components covering buttons, the merchant-thumb grid, dual-canvas hero, cream feature bands, the email-capture input over black, and the dashboard composite.

Feed the file to Claude, Cursor, or GitHub Copilot and the model will reproduce Square's tier-strict typographic split — serif hero, sans display sub-heading, sans body — instead of collapsing everything to one Inter weight. Or paste tokens straight into Tailwind: every hex, font family, radius, and spacing value is a quoted YAML string. Treat the spec as a study in inversion — a payments brand that refuses the thin-sans-and-gradient convention, replaces it with serif headlines on merchant photography, and lets the brand's namesake "square" live in the 50px card corner rather than the logo.

What makes it distinct

Serif-display fintechExact Block at 72px/400/-2.88px is the hero headline typeface, where most payment brands run thin geometric sans
Outline-only blueSquare Blue #006aff appears 19 times page-wide, every instance as text or 1px border, zero filled CTAs
Dual corner radiicards land on 50px (16 occurrences), nav-link buttons on 10000px (full pill), with no rounded-rectangle middle
Cream feature canvas#f7f6f5 carries the alternating feature bands beneath the hero, replacing pure white as the dominant surface
Merchant-square photographythe hero crops on a single tradesperson, with thumbnail merchant grids stacked in 8-up rows at 4px corner radius

Live at squareup.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

squareup.com

Explore Square

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Square design system FAQ

Common questions about Square's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Square — official site

Square's marketing surface for sellers — point-of-sale hardware, payments, and Cash App's sibling commerce platform.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Square in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→