Merchant platform: white canvas, Square blue #006aff, large forest-green rounded blocks, regular-weight Square Sans display, and pill + 6px form buttons.
Browse Square in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: squareup.com (live DOM, computed styles + color census), 2026-07-06; motion/effects/responsive pass 2026-07-07. Coverage: marketing site. Product (Dashboard / POS): needs-dashboard (login required).
Clean, commerce-confident design built for merchants: a white canvas with near-black text and the bold Square blue as the interactive accent. The signature device is a large forest-green rounded feature block (24px radius, white text) holding photos of Square hardware or checkout screens. Type is Square's own humanist sans at regular weight — size, not weight, makes the hierarchy — with pill CTAs and soft 16–24px rounded cards. Elevation is mostly flat, with separation via white / gray-50 / forest-green blocks rather than shadows; nothing flashy — confidence over spectacle. Feels: trustworthy, practical, friendly-professional.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #1a1a1a | Primary text |
| ink-black | #030303 | Headings (near-black) |
| black | #000000 | Text on light, pill-button label |
| gray-600 | #333333 | Strong body |
| gray-500 | #737373 | Secondary text |
| gray-400 | #888888 | Muted / captions, placeholders |
| white | #ffffff | Page bg, cards, text on color |
| Token | Hex | Role / usage |
|---|---|---|
| blue | #006aff | Signature Square blue — CTAs, links, accents |
| blue-bright | #1379f3 | Form buttons / hovers |
| blue-light | #4a95ff | Light accent, links on dark |
| green | #005a44 | Forest-green feature blocks (signature section bg) |
| red | #df3320 | Minor accent / energy |
| Token | Hex | Role / usage |
|---|---|---|
| gray-100 | #f4f4f4 | Light surface |
| gray-50 | #f2f2f2 | Alternating section bg |
Rule: white canvas + near-black text; Square blue #006aff is the interactive accent (buttons, links). Large forest-green #005a44 rounded blocks are the signature section device (white text on them). Red is a rare punch.
Font stack: "Square Sans Text VF" (Square Sans, variable), Helvetica, Arial, sans-serif — Square's proprietary humanist sans.
| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 64 / 74 | 400 | -0.5px |
| Section (h2) | 54 | 400 | +0.1px |
| Subhead | 24 | 400 | 0 |
| Body | 16–18 / 27 (18px measured on live homepage 2026-07-07) | 400 | 0 |
| UI / button | 16–18 | 500 | 0 |
| Caption | 13–14 | 400 | 0 |
Patterns: body 16–18px / 400 / #1a1a1a. Display is REGULAR weight (400) — Square uses size, not weight, for hierarchy; tracking near-neutral, slight negative tracking only on the biggest size. Headlines are never bold; buttons step up to 500. Calm, legible, commerce-friendly.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.