---
version: alpha
name: Square
website: "https://squareup.com"
description: >-
  An inspired interpretation of Square's design language — a commerce-and-payments brand that pairs an editorial serif display (Exact Block at weight 400 with -2.88px tracking) against two sans-serif workhorses (Square Sans Display VF for sub-headings, Cash Sans for marketing body). Square Blue (#006aff) is rationed to just 19 page-wide occurrences as an outline/focus voltage, never a filled CTA fill. Cards stack on a 50px corner radius — almost a softened mini-square — while nav links flip to 10000px pills. The hero anchors on a black-canvas merchant photograph, with a near-white #f7f6f5 cream tint carrying the alternating feature bands beneath.

seo:
  title: "Square Design System for React — Exact Block serif, Square Blue #006aff, 19 components"
  metaDescription: "Square's design system as a DESIGN.md file. Exact Block serif display, Square Blue #006aff, 22 colors, 14 type tokens, 19 components. For React and AI tools."
  tags:
    - "Banking & Payments"
    - "E-commerce & Retail"
  highlights:
    - "Serif-display fintech — Exact Block at 72px/400/-2.88px is the hero headline typeface, where most payment brands run thin geometric sans"
    - "Outline-only blue — Square Blue #006aff appears 19 times page-wide, every instance as text or 1px border, zero filled CTAs"
    - "Dual corner radii — cards 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 photography — the hero crops on a single tradesperson, with thumbnail merchant grids stacked in 8-up rows at 4px corner radius"
  lastUpdated: "2026-05-13"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://squareup.com"
      title: "Square — official site"
      description: "Square's marketing surface for sellers — point-of-sale hardware, payments, and Cash App's sibling commerce platform."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Square's primary brand color and where does it appear?"
      answer: "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."
    - id: "typography"
      title: "What typography does Square use, and what should I substitute if the proprietary families are unavailable?"
      answer: "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."
    - id: "card-radius"
      title: "Why do Square's cards use a 50px corner radius?"
      answer: "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."
    - id: "outline-cta"
      title: "Why does Square not use a filled blue CTA?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React commerce site?"
      answer: "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`."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "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)."

colors:
  primary: "#006aff"
  primary-dark-mode: "#4a95ff"
  ink: "#000000"
  ink-soft: "#1a1a1a"
  ink-medium: "#333333"
  ink-muted: "#707070"
  ink-disabled: "#999999"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  canvas-cream: "#f7f6f5"
  canvas-dark: "#020817"
  surface-night-100: "#1f1f1f"
  surface-light-05: "#f2f2f2"
  hairline: "#cccccc"
  hairline-cool: "#e2e8f0"
  hairline-mid: "#bbbbbb"
  rose: "#c14f70"
  plum: "#a1499c"
  green: "#0bb634"
  red: "#df3320"
  critical: "#cc0023"
  blue-link: "#1379f3"
  border-transparent: "#80808059"

typography:
  display-xxl:
    fontFamily: "Exact Block, Georgia, Times New Roman, serif"
    fontSize: 81px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: "-2.92px"
  display-xl:
    fontFamily: "Exact Block, Georgia, Times New Roman, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: "-2.88px"
  display-lg:
    fontFamily: "Exact Block, Georgia, Times New Roman, serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: "-1.68px"
  display-md:
    fontFamily: "Exact Block, Georgia, Times New Roman, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.125
    letterSpacing: "-0.8px"
  heading-lg:
    fontFamily: "Cash Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: "-1.68px"
  heading-md:
    fontFamily: "Cash Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.24px"
  heading-sm:
    fontFamily: "Square Sans Display VF, Square Sans Display, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "-0.2px"
  body-lg:
    fontFamily: "Cash Sans, Helvetica Neue, helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: "Cash Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-strong:
    fontFamily: "Square Sans Text VF, Square Sans Text, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: "Cash Sans, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.28px"
  nav-link:
    fontFamily: "Cash Sans, Helvetica Neue, helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  input-text:
    fontFamily: "Square Sans Text VF, Square Sans Text, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.14px"
  eyebrow-mono:
    fontFamily: "Cash Sans Mono, ui-monospace, Menlo, monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: "1.4px"

rounded:
  none: "0px"
  xs: "4px"
  sm: "5px"
  md: "10px"
  lg: "20px"
  card: "50px"
  pill: "10000px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "10px"
  md: "17.5px"
  base: "20px"
  lg: "40px"
  xl: "60px"
  xxl: "80px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
    height: 41px
  button-primary-active:
    backgroundColor: "{colors.ink-soft}"
    textColor: "{colors.on-primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body-strong}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
    border: "1px solid #006aff"
  button-on-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
  text-input-on-dark:
    backgroundColor: "{colors.canvas-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.input-text}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
    height: 45px
    border: "1px solid #ffffff"
  email-capture-input:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.input-text}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
  card-feature:
    backgroundColor: "{colors.canvas-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
    padding: "40px"
  card-hero-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.card}"
    padding: "80px 60px"
  card-merchant-thumb:
    backgroundColor: "{colors.canvas-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "0"
  card-dashboard-composite:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
    padding: "40px"
    border: "1px solid #cccccc"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "0"
    padding: "20px 40px"
    height: 72px
  hero-headline-serif:
    backgroundColor: "transparent"
    textColor: "{colors.on-primary}"
    typography: "{typography.display-xl}"
    rounded: "0"
    padding: "0 0 20px"
  section-heading-serif:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    rounded: "0"
    padding: "0"
  eyebrow-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.eyebrow-mono}"
    rounded: "0"
    padding: "0 0 17.5px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "0"
    padding: "0"
  pill-tag:
    backgroundColor: "{colors.canvas-cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.pill}"
    padding: "4px 10px"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "0"
    padding: "80px 40px"
---

## Overview

Square's marketing surface opens on an inversion. Where most payment-platform brands lead with a thin geometric sans-serif (Stripe's Sohne at weight 300, Mercury's Söhne at 400, Ramp's Söhne at 350) over a tinted-canvas gradient mesh, Square instead frames a single merchant — a tradesperson photographed from behind — at full bleed against pure black `{colors.ink}` (#000000), with the hero headline set in a **serif** (Exact Block at 72px / weight 400 / -2.88px tracking). The serif-on-photo treatment reads like a Vogue editorial spread, not a fintech pitch.

**Cornered geometry**: the brand's name lives in its corner radius. Cards land on `{rounded.card}` (50px) — 16 occurrences page-wide, the dominant non-zero radius — almost a softened mini-square, large enough to read as friendly chrome but tight enough that the rectangle still reads as right-angled. Buttons skip the rounded-rectangle middle entirely and snap to `{rounded.pill}` (10000px), and tiny merchant-thumbnail tiles use `{rounded.xs}` (4px). There is no 8/12/16px middle radius. The 50px card is the brand's literal "square with its corners filed off."

**Outline-only blue**: Square Blue (`{colors.primary}` — #006aff) is the wordmark color and the brand-recognition voltage, but it never fills a CTA. It appears 19 times across the captured page — every instance as a 1px border, text-link color, or focus-ring outline — against 1216 occurrences of pure black, which carries the body text and every 1px hairline. The filled CTA shape is `button-primary`: a black-fill pill with white text and 10px / 20px padding. Blue is scarcity; black is the workhorse.

Type sits in three strict tiers. **Exact Block** (serif, Block in-house foundry) carries the hero and h2 display tier at 40–81px / weight 400 with proportional negative tracking. **Square Sans Display VF** and **Cash Sans** (both sans-serif workhorses inherited from the Block parent / Cash App sibling) split the 16–24px sub-heading and body tier. **Cash Sans Mono** at 14px with 1.4px positive tracking handles all-caps eyebrow labels above each feature band. Unlike the fintech convention of one variable-font superfamily across every tier, Square scopes each family to a specific role — and the serif-in-the-hero is the audible silence in the room.

**Key Characteristics:**
- Serif display at the hero — Exact Block at 72px / weight 400 / -2.88px tracking is the headline typeface, against a pure-black canvas with white type
- Outline-only Square Blue (#006aff) — 19 page-wide occurrences as border, text, or focus ring, never as a filled CTA background
- 50px card geometry — `{rounded.card}` is the dominant non-zero radius, with no middle-step rounded-rectangle (no 8/12/16/24px option)
- Pill nav-links and CTAs — `{rounded.pill}` (10000px) for every actionable button, including the top-nav "Get started" call
- Cream `{colors.canvas-cream}` (#f7f6f5) — the alternating feature-band fill that replaces pure white as the dominant under-fold surface
- Three-family typographic split — Exact Block serif (display), Square Sans Display VF and Cash Sans (sub-heading/body), Cash Sans Mono (eyebrow labels)
- Merchant-photography squares — 8-up thumbnail grids of real sellers fill the band between the hero and the first feature card, each thumb at `{rounded.xs}` (4px)

## Colors

> **Source pages:** home (`/us/en`), captured at desktop 1440×4500.

### Brand & Accent
- **Square Blue** (`{colors.primary}` — #006aff): frequency 19. Used as text (9) and border (10), shadow (0), bg (0). The brand's wordmark voltage and outline-button border / focus-ring color. Never a filled CTA fill.
- **Square Blue Dark-Mode** (`{colors.primary-dark-mode}` — #4a95ff): frequency 0 on the captured surface. Declared on `--color-blue-400` / `--color-blue-text-color-mode-dark` for the dashboard's dark theme; surfaces as the brand voltage when the canvas inverts to night.
- **Rose** (`{colors.rose}` — #c14f70): frequency 0 on the home capture. Declared on `--color-rose` — Square's Afterpay-adjacent accent reserved for sub-product chrome.
- **Plum** (`{colors.plum}` — #a1499c): frequency 0 on the home capture. Declared on `--color-plum` — sub-brand accent for Square Loans / Capital surfaces.
- **Green** (`{colors.green}` — #0bb634): frequency 0 on the home capture. Declared on `--color-green` / `--color-success` — success-state and balance-positive indicator.

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): frequency 477. Used as text-on-dark (230), border (230), bg (11). The default page background and the dominant text color on the black hero canvas.
- **Canvas Cream** (`{colors.canvas-cream}` — #f7f6f5): declared on `--color-gray-5` / `--color-background-accent`. The alternating feature-band fill — the system's quiet warm-off-white that replaces pure white as the under-fold canvas.
- **Canvas Dark** (`{colors.canvas-dark}` — #020817): frequency 7. Used as text (6), border (1). The deep-navy fill of the email-capture form sitting beneath the dashboard composite.
- **Surface Night 100** (`{colors.surface-night-100}` — #1f1f1f): declared on `--color-neutral-100` / `--color-background-accent-color-mode-dark`. Dark-canvas elevated surface.
- **Surface Light 05** (`{colors.surface-light-05}` — #f2f2f2): declared on `--color-gray-05`. The lightest-gray surface above the cream tier.

### Ink (Text)
- **Ink** (`{colors.ink}` — #000000): frequency 1216. Used as text (592), border (587), bg (12), gradient (23), shadow (2). The workhorse — body text, every 1px hairline, dark CTA fills, and the hero canvas. The brand's true dominant voltage despite the blue wordmark.
- **Ink Soft** (`{colors.ink-soft}` — #1a1a1a): frequency 2. Pressed state for the black-pill primary button and the dashboard chrome accent.
- **Ink Medium** (`{colors.ink-medium}` — #333333): declared on `--color-gray-80` / `--color-neutral-200`. Secondary text on dark canvases.
- **Ink Muted** (`{colors.ink-muted}` — #707070): frequency 186. Used as text (93), border (92), shadow (1). Helper text, footer copy, eyebrow label color, and form-field default border.
- **Ink Disabled** (`{colors.ink-disabled}` — #999999): frequency 8. Used as text (3), bg (2), border (3). Placeholder text and disabled form-field background.

### Hairline
- **Hairline** (`{colors.hairline}` — #cccccc): frequency 2. Used as border (2). The default 1px card border and form-field default-state stroke.
- **Hairline Cool** (`{colors.hairline-cool}` — #e2e8f0): frequency 4. Used as border (4). Cool-tinted secondary hairline declared on `--color-neutral-800` — paired with the cream canvas where the default warm hairline reads too dark.
- **Hairline Mid** (`{colors.hairline-mid}` — #bbbbbb): frequency 4. Used as border (2), text (2). Mid-gray placeholder and dropdown-option chrome.

### Semantic
- **Critical** (`{colors.critical}` — #cc0023): declared on `--color-critical`. Error-state text and border.
- **Red** (`{colors.red}` — #df3320): declared on `--color-red`. Destructive-state alternative.
- **Blue Link** (`{colors.blue-link}` — #1379f3): declared on `--color-blue-color-mode-dark`. Brighter blue used for inline links on dark surfaces.

## Typography

### Font Family

Square layers three proprietary families plus a system mono fallback. **Exact Block** is a serif designed by the Block in-house foundry — a geometric serif with a slight slab feel, used exclusively at display sizes (40–81px). **Square Sans Display VF** is a variable sans for the 18–24px sub-heading tier. **Cash Sans** (inherited from the Cash App sibling brand) carries the 14–18px body and marketing-paragraph tier; **Square Sans Text VF** is its workhorse twin for form inputs and footer copy. **Cash Sans Mono** is the all-caps eyebrow type at 14px / 1.4px tracking / uppercase transform.

When the proprietary families are unavailable, **Tiempos Headline** or **Source Serif 4** at weight 400 are the closest open-source substitutes for Exact Block. **Inter Variable** at weights 400–500 covers Cash Sans and the Square Sans families. **JetBrains Mono Variable** at weight 500 with positive tracking substitutes for Cash Sans Mono in eyebrow roles.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|---|
| `{typography.display-xxl}` | Exact Block (serif) | 81px | 400 | 1.0 | -2.92px | Stat-card numeric headline |
| `{typography.display-xl}` | Exact Block (serif) | 72px | 400 | 1.0 | -2.88px | Hero headline over photograph |
| `{typography.display-lg}` | Exact Block (serif) | 56px | 500 | 1.0 | -1.68px | Section opener |
| `{typography.display-md}` | Exact Block (serif) | 40px | 400 | 1.125 | -0.8px | H2 feature-band headline |
| `{typography.heading-lg}` | Cash Sans | 56px | 500 | 1.0 | -1.68px | Sans-tier section opener (alternate to display-lg) |
| `{typography.heading-md}` | Cash Sans | 24px | 500 | 1.2 | -0.24px | Compact h2 / dashboard composite title |
| `{typography.heading-sm}` | Square Sans Display VF | 20px | 500 | 1.2 | -0.2px | H3 sub-heading |
| `{typography.body-lg}` | Cash Sans | 18px | 500 | 1.5 | 0 | Lead paragraph |
| `{typography.body-md}` | Cash Sans | 16px | 400 | 1.5 | 0 | Default marketing body |
| `{typography.body-strong}` | Square Sans Text VF | 16px | 500 | 1.5 | 0 | Bold inline emphasis |
| `{typography.body-sm}` | Cash Sans | 14px | 400 | 1.5 | 0.28px | Helper, footer, fine print |
| `{typography.nav-link}` | Cash Sans | 18px | 500 | 1.5 | 0 | Nav button label, primary CTA label |
| `{typography.input-text}` | Square Sans Text VF | 14px | 400 | 1.5 | 0.14px | Form-field input |
| `{typography.eyebrow-mono}` | Cash Sans Mono | 14px | 500 | 1.5 | 1.4px (UPPERCASE) | Section eyebrow label |

### Principles

- **Serif at the top, sans below.** Exact Block sits at display sizes (40–81px); below 40px the type flips to a sans tier (Cash Sans or Square Sans). Setting body in Exact Block, or display in Cash Sans, breaks the brand's tier discipline.
- **Negative tracking scales proportionally on Exact Block.** -2.92px at 81px down to -0.8px at 40px. The tracking gives the serif a tighter editorial density at scale.
- **Monospace is the eyebrow voice.** Cash Sans Mono with 1.4px positive tracking + uppercase is the only role that uses mono — section eyebrow labels above each feature band. Code blocks, where they appear, use the same family.
- **Body weight is 400, not 500.** Cash Sans at 16px / 400 is the marketing-paragraph default. The 500-weight body-strong is reserved for inline emphasis.

### Note on Font Substitutes

Exact Block, Square Sans Display VF, Square Sans Text VF, and Cash Sans are all proprietary to the Block family of products. The closest open-source substitutes: **Source Serif 4** at weight 400 for Exact Block (matching the slab/geometric serif feel), **Inter Variable** at weights 400–500 for the Square Sans and Cash Sans roles, and **JetBrains Mono Variable** at weight 500 for the Cash Sans Mono eyebrow role. Avoid Helvetica Neue or system-ui defaults — they're too neutral to carry the brand's editorial voice at the display tier, and they lose the serif/sans contrast that anchors the system.

## Layout

### Spacing System

- **Base unit**: 20px (with 2 / 4 / 10 / 17.5 sub-tokens for fine work and 40 / 60 / 80 multiples for section padding).
- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 10px · `{spacing.md}` 17.5px · `{spacing.base}` 20px · `{spacing.lg}` 40px · `{spacing.xl}` 60px · `{spacing.xxl}` 80px.
- **Section padding**: 80–120px on marketing feature bands; 40–60px on the cream-canvas mid-bands; 20–40px on the dashboard composite interior.
- **Card internal padding**: 40px on feature cards; 80px / 60px on the hero-dark card; 17.5px on the email-capture row.

### Grid & Container

- Marketing pages center on a 1200px max-width container (`--container-width-large: 1200px`), with the hero photograph extending edge-to-edge above.
- Feature cards collapse 3-up → 2-up → 1-up at 1024 / 768 breakpoints.
- Merchant-thumbnail grids run 8-up at desktop, stepping down to 4-up / 2-up at narrower widths.

### Whitespace Philosophy

The black-canvas hero occupies the upper third of the page, with 80px+ vertical space between the headline and the first feature band beneath. Cream feature bands (`{colors.canvas-cream}` — #f7f6f5) alternate with white canvas sections, each taking 80–120px of vertical breathing room. The dashboard composite sits inside a 40px-padded `{rounded.card}` (50px) frame on a white-tinted background — the section uses tighter 40px gaps because users are reading product UI, not scanning a hero.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| 0 | Flat | Default surface — every card on the cream canvas |
| 1 | `box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2)` | Tooltip popover (declared on `--tooltip-popover-box-shadow-primary`) |
| 2 | `box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.32)` | Drop-shadow theme (declared on `--color-drop-shadow-theme`) |
| 3 | Full-bleed black-canvas photograph | The hero's primary depth medium — atmospheric photography rather than literal box-shadow |

### Decorative Depth

The merchant photograph IS the depth system. Square's hero composites a single high-resolution tradesperson photograph at full bleed against the black canvas, with the serif headline floating above as white type. Below the hero, depth collapses to a flat surface ladder — cream feature band, white feature band, cream feature band — with no literal shadow under any card. The dashboard composite sits inside a hairline-bordered frame rather than a shadow lift. Where the rest of fintech leans on layered box-shadows for hierarchy, Square uses canvas polarity and serif type weight to do that work.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Hero headline frame, top-nav band |
| `{rounded.xs}` | 4px | Merchant-thumbnail tiles (10 occurrences) |
| `{rounded.sm}` | 5px | Focus outline border (declared on `--accessibility-focus-outline-border-radius`) |
| `{rounded.md}` | 10px | Email-capture input, textarea |
| `{rounded.lg}` | 20px | Form-input default radius (13 occurrences) |
| `{rounded.card}` | 50px | Feature cards, hero dark card, dashboard composite frame (16 occurrences) |
| `{rounded.pill}` | 10000px | All buttons and nav links |

### Photography Geometry

Photography fills the hero as a full-bleed rectangle (0px radius) and the merchant-thumb grids as 4px-rounded squares. Mid-tier cards do not contain photography — they hold product-UI composites and icon-illustration sets inside the 50px-rounded frame. The hero photo never sits inside a rounded container — it bleeds the full width of the viewport.

## Components

### Buttons

**`button-primary`** — the dominant CTA system-wide.
- Background `{colors.ink}` (#000000), text `{colors.on-primary}` (#ffffff), type `{typography.nav-link}` (Cash Sans 18px/500), padding `{spacing.sm} {spacing.base}` (10px 20px), rounded `{rounded.pill}` (10000px).
- Pressed state `button-primary-active` shifts background to `{colors.ink-soft}` (#1a1a1a) with a 5% translate-y lift.

**`button-secondary`** — outline alternative on light surfaces.
- Background `{colors.canvas}` (#ffffff), text `{colors.primary}` (#006aff), 1px #006aff border stroke, same pill geometry, type `{typography.body-strong}` (Square Sans Text 16px/500).

**`button-on-dark`** — inverted pill for dark canvases.
- Background `{colors.canvas}` (#ffffff), text `{colors.ink}` (#000000), same pill geometry. The default CTA on the black hero canvas.

### Cards & Containers

**`card-feature`** — alternating cream-band feature card.
- Background `{colors.canvas-cream}` (#f7f6f5), text `{colors.ink}` (#000000), padding `{spacing.lg}` (40px), rounded `{rounded.card}` (50px). The brand's distinctive 50px corner radius lives here.

**`card-hero-dark`** — the full-bleed hero card.
- Background `{colors.ink}` (#000000), text `{colors.on-primary}` (#ffffff), padding `{spacing.xxl} {spacing.xl}` (80px 60px), rounded `{rounded.card}` (50px). Contains the serif hero headline and the merchant photograph composited as a layered background image.

**`card-merchant-thumb`** — tile in the merchant-photo grid.
- Background `{colors.canvas-cream}` (#f7f6f5), text `{colors.ink}`, type `{typography.body-sm}`, padding 0, rounded `{rounded.xs}` (4px). Photography fills the tile edge-to-edge.

**`card-dashboard-composite`** — the product-UI mockup frame.
- Background `{colors.canvas}` (#ffffff), padding `{spacing.lg}` (40px), rounded `{rounded.card}` (50px), 1px `{colors.hairline}` (#cccccc) border. Contains rendered dashboard panels, table previews, and inventory thumbnails.

### Inputs & Forms

**`text-input-on-dark`** — form field on the black canvas.
- Background `{colors.canvas-dark}` (#020817), text `{colors.on-primary}` (#ffffff), type `{typography.input-text}` (Square Sans Text 14px/400), padding 12px 16px, rounded `{rounded.md}` (10px), 1px white border stroke.

**`email-capture-input`** — the email row beneath the dashboard composite.
- Background `{colors.ink}` (#000000), text `{colors.on-primary}` (#ffffff), 10px radius, 12px / 16px padding. Pairs with the `button-on-dark` pill submit.

### Navigation

**`top-nav`** — site-wide header.
- Background `{colors.canvas}` (#ffffff), text `{colors.ink}` (#000000), 72px height (`--nav-height`), padding `{spacing.base} {spacing.lg}` (20px 40px). Logo wordmark left, primary nav center, "Sign in" link + filled `button-primary` pill right.

**`nav-link`** — top-nav link button.
- Transparent background, text `{colors.ink}`, type `{typography.nav-link}` (Cash Sans 18px/500), padding 10px 20px, rounded `{rounded.pill}` (10000px). Hover shifts text to `{colors.primary}` (#006aff).

### Pills, Tags, and Labels

**`pill-tag`** — small contextual tag on cream surfaces.
- Background `{colors.canvas-cream}` (#f7f6f5), text `{colors.ink}`, type `{typography.body-sm}`, padding 4px 10px, rounded `{rounded.pill}` (10000px).

**`eyebrow-label`** — section eyebrow above each feature band.
- Transparent background, text `{colors.ink-muted}` (#707070), type `{typography.eyebrow-mono}` (Cash Sans Mono 14px/500/1.4px tracking/UPPERCASE), padding-bottom 17.5px. Sits above each `{typography.display-md}` h2.

### Signature Components

**Hero Headline Serif** — the brand's loudest typographic move: Exact Block at 72px / weight 400 / -2.88px tracking, white on black canvas, padding-bottom 20px. Where the rest of fintech runs thin sans, Square sets its headline in serif.

**Merchant-Thumbnail Grid** — 8-up rows of 4px-rounded photographic squares of real Square sellers, each tile filling the cream-canvas band between the hero and the first feature card.

**Section Heading Serif** (`section-heading-serif`) — Exact Block at 40px / weight 400 / -0.8px tracking. The h2 inside each feature band, paired with the eyebrow-mono label above.

**`body-paragraph`** — Cash Sans at 16px / 400 / line-height 1.5. The marketing-paragraph default beneath every h2.

**`footer`** — site-wide footer on black canvas.
- Background `{colors.ink}` (#000000), text `{colors.on-primary}`, type `{typography.body-sm}`, padding `{spacing.xxl} {spacing.lg}` (80px 40px). Holds 4–6 columns of link groups, social icons, and the Block parent-company legal row.

## Do's and Don'ts

### Do

- Open every marketing surface with a full-bleed merchant photograph against `{colors.ink}` (#000000) — bare-canvas heroes lose the brand's editorial register.
- Set the hero headline in Exact Block (serif) at 72px / weight 400 / -2.88px tracking — the serif at display is the brand's loudest signal.
- Reserve `{colors.primary}` (#006aff) for 1px outline borders, text-link emphasis, and focus rings — never as a filled CTA background.
- Land every feature card on `{rounded.card}` (50px) — the geometric square-with-corners-filed-off is the brand's namesake.
- Alternate cream `{colors.canvas-cream}` (#f7f6f5) feature bands with white canvas — the warm-off-white carries the dominant under-fold surface, not pure white.
- Apply Cash Sans Mono with 1.4px positive tracking + UPPERCASE for every section eyebrow label — it's the brand's only mono role.
- Use `{rounded.pill}` (10000px) for every button and nav link — the full pill is the brand's only actionable shape.

### Don't

- Don't fill a CTA with `{colors.primary}` (#006aff) — the blue is an outline-only voltage across all 19 page-wide occurrences. For a filled primary, use black-fill `button-primary` instead.
- Don't set the hero headline in a sans-serif — replacing Exact Block with Cash Sans at 72px collapses the brand's most-distinguishing typographic decision.
- Don't insert an 8px, 12px, 16px, or 24px corner radius between `{rounded.lg}` (20px) and `{rounded.card}` (50px) — the system deliberately skips that range to keep cards reading as softened squares.
- Don't use `{colors.canvas-cream}` (#f7f6f5) as a text color — it's declared on `--color-gray-5` / `--color-background-accent`, and every use is a background fill or hairline-tinted surface.
- Don't render serif type below 40px — Exact Block's negative tracking (-0.8px at 40px scaling to -2.88px at 72px) loses its editorial density at smaller sizes; flip to Cash Sans at 24px and below.
- Don't apply `box-shadow` to feature cards — the system's depth is the canvas-polarity ladder and the hero photograph, not literal shadow.
- Don't use `Helvetica Neue` as a fallback for Cash Sans without first trying `Inter Variable` at weight 400 — the system's `--font-family-body` fallback chain reaches Helvetica only as a last resort.

## Known Gaps

- **Hover-state colors:** only the press state (`button-primary-active` → #1a1a1a with 5% translate-y) is documented. Hover styling for marketing CTAs was not reliably captured.
- **Sub-brand palettes:** Square's Afterpay, TIDAL, and Cash App sibling brands carry separate accent palettes layered on top of the core black + blue system — not captured here. The extracted Plum (#a1499c), Rose (#c14f70), Green (#0bb634), and Red (#df3320) hints suggest a Block-family secondary palette that the home capture does not deploy.
- **Dashboard product semantic system:** error / success / warning states inside the authenticated Square Dashboard product (`squareup.com/dashboard`) are not part of this marketing-system spec.
- **Dark-mode token map:** the page declares both `--color-text-color-mode-light` and `--color-text-color-mode-dark` custom properties (641 CSS vars on `:root`), but the rendered home surface is light-mode only. The dark-mode mapping is not exercised in the visible spec.
- **Motion specs:** the merchant-thumbnail grid auto-scrolls horizontally; precise easing tokens (`--easing-standard: cubic-bezier(.4, 0, .2, 1)`, `--easing-decelerate`, `--easing-accelerate`) are declared, but duration mappings to specific components are not captured.
- **Responsive breakpoints:** the spec covers the desktop 1440×4500 capture. The system declares `--breakpoint-base-min-width`, `--breakpoint-small-min-width: 46.25rem`, `--breakpoint-extra-large-max-width`, but the responsive collapse behavior for the merchant-thumbnail grid and the 50px card geometry is not fully documented.