---
version: alpha
name: Square
description: Confident commerce minimalism — Square Sans geometric type on a stark white canvas, near-black ink, and a single saturated Square Blue accent. Generous whitespace, square-cornered buttons softened to small radii, and product photography that does the heavy lifting.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f7f7"
  surface-fill: "#f0f0f0"
  ink: "#1c1c1c"
  ink-pure: "#000000"

  # Square Blue accent
  primary: "#006aff"
  primary-hover: "#0058d6"
  primary-tint: "#e6f0ff"

  # Secondary brand accents
  accent-green: "#33b865"
  accent-coral: "#ff5b3a"

  # Neutral scale
  gray-900: "#1c1c1c"
  gray-700: "#3d3d3d"
  gray-600: "#5e5e5e"
  gray-500: "#7b7b7b"
  gray-400: "#9b9b9b"
  gray-200: "#d9d9d9"
  gray-100: "#ebebeb"
  gray-50: "#f7f7f7"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

  # Interactive
  link-blue: "#006aff"
  focus-blue: "#006aff"
  border: "#d9d9d9"
  divider: "#ebebeb"

  # Badge
  badge-bg: "#e6f0ff"
  badge-text: "#0058d6"

typography:
  display-hero:
    fontFamily: "Square Sans, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.27
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.53
    letterSpacing: 0px
  body-small:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0px
  body-medium:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.47
    letterSpacing: 0px
  button-ui:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  caption:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0.2px
  micro-badge:
    fontFamily: "Square Sans, Inter, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.gray-700}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 24px

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 24px
  button-accent-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 14px 24px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.divider}"

  card-soft:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.lg}"
    padding: 24px

  card-metric:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.divider}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.focus-blue}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 24px
    borderColor: "{colors.divider}"
---

# Square Design System

## Overview

Square's marketing site reads like the hardware it sells — clean, square-edged, and quietly confident. The canvas is pure white (`{colors.background}`) with near-black ink (`{colors.ink}`), letting full-bleed product photography and a single saturated Square Blue (`{colors.primary}`) carry the brand energy. Where many fintech sites lean on gradients and glassy depth, Square keeps the chrome flat and the geometry honest. The interface gets out of the way so the merchant story stays front and center.

Typography is the system's backbone. Square Sans is a geometric, slightly humanist sans with generous proportions and a confident weight range. Headlines run heavy (600) with mild negative tracking that tightens the display sizes without the aggressive compression of a developer brand. Body copy sits at a comfortable 17px in regular weight, prioritizing legibility for a broad small-business audience rather than typographic flourish.

Color is disciplined. The neutral spine runs from `{colors.ink}` to white through a soft gray scale, and Square Blue is the one accent that earns saturation — used for links, focus states, and the occasional high-intent CTA. Secondary accents (a fresh green, a warm coral) appear sparingly in illustration and category art, never in core UI chrome. The result is an achromatic frame that makes the blue pop exactly where attention should go.

**Key Characteristics:**
- Square Sans geometric type — heavy 600 headings, readable 17px body
- Pure-white canvas with near-black `{colors.ink}` text, gallery-like whitespace
- Single saturated Square Blue (`{colors.primary}`) accent, used functionally not decoratively
- Small, square-leaning radii (4–12px) — buttons and cards feel built, not pillowy
- Flat chrome: borders and dividers from a soft gray scale, no heavy shadows
- Dark (`{colors.ink}`) primary CTA with a blue accent CTA for high-intent actions
- Product photography as the primary visual surface

## Colors

### Primary
- **Square Ink** (`{colors.ink}`): Primary text, headings, dark CTA fill. Near-black, not pure.
- **Pure White** (`{colors.background}`): Page background, card surfaces, button text on dark/blue.
- **Square Blue** (`{colors.primary}`): The signature accent — links, focus, high-intent CTAs.

### Brand Accents
- **Square Blue Hover** (`{colors.primary-hover}`): Darker blue for hover/active.
- **Square Blue Tint** (`{colors.primary-tint}`): Soft blue surface for badges and highlights.
- **Accent Green** (`{colors.accent-green}`): Illustration / category art only.
- **Accent Coral** (`{colors.accent-coral}`): Illustration / category art only.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text equivalent to ink.
- **Gray 700** (`{colors.gray-700}`): Strong secondary text, dark CTA hover.
- **Gray 600** (`{colors.gray-600}`): Secondary body copy.
- **Gray 500** (`{colors.gray-500}`): Tertiary, muted captions.
- **Gray 400** (`{colors.gray-400}`): Placeholder, disabled text.
- **Gray 200** (`{colors.gray-200}`): Input/button borders.
- **Gray 100** (`{colors.gray-100}`): Dividers, card outlines.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Interactive & Surface
- **Link Blue** (`{colors.link-blue}`): Inline links.
- **Focus Blue** (`{colors.focus-blue}`): Keyboard focus ring.
- **Border** (`{colors.border}`): Standard control border.
- **Divider** (`{colors.divider}`): Section and card dividers.
- **Badge Bg / Text** (`{colors.badge-bg}` / `{colors.badge-text}`): Tinted pill badges.

## Typography

### Font Family
- **Primary**: `Square Sans`, with fallbacks: `Inter, Helvetica Neue, Arial, sans-serif`
- Square Sans is a proprietary geometric sans; Inter is the closest open substitute for rendering.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero — billboard headline |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Feature cards |
| `body-large` | Introductions, lead paragraphs |
| `body` | Standard reading text (17px) |
| `body-small` | Compact UI text |
| `body-medium` | Navigation, emphasized labels |
| `button-ui` | Buttons |
| `caption` | Metadata, badges |
| `micro-badge` | Tiny uppercase badges |

### Principles
- **Confident weight**: Headings run 600 with mild negative tracking — assertive, not compressed.
- **Legibility first**: 17px body in regular weight serves a broad small-business audience.
- **Two weights carry the load**: 400 (reading), 500 (UI/nav), 600 (headings). Heavy weight only on headlines and micro-badges.
- **Geometric calm**: Square Sans's even proportions keep large blocks of marketing copy quiet.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px micro step. The scale opens up fast above 24px (`{spacing.xl}` → `{spacing.2xl}` 40px → `{spacing.3xl}` 64px) to create generous section rhythm.

### Grid & Container
- Max content width: approximately 1200px
- Hero: left-aligned or centered single column with large top padding
- Feature sections: 2–3 column card grids
- Full-bleed photography breaking the container on alternating sections

### Whitespace Philosophy
- **Room to breathe**: Large vertical padding between sections (`{spacing.3xl}`–`{spacing.4xl}`).
- **Flat separation**: Sections divide via whitespace and `{colors.divider}` lines, not shadows.
- **Photography as texture**: Product imagery supplies visual richness so the chrome can stay minimal.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Bordered (Level 1) | `1px solid {colors.divider}` | Cards, inputs |
| Soft Lift (Level 2) | `0 2px 8px rgba(0,0,0,0.06)` | Hover cards, popovers |
| Focus | `2px solid {colors.focus-blue}` outline | Keyboard focus |

**Shadow Philosophy**: Square stays flat. Depth comes from borders, surface tints (`{colors.surface-soft}`), and photography rather than stacked shadows. When lift is needed it is whisper-soft.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed media edges |
| `xs` | 4px | Small chips, inline controls |
| `sm` | 6px | Buttons |
| `md` | 8px | Inputs, list items |
| `lg` | 12px | Cards |
| `xl` | 16px | Large feature cards, media frames |
| `pill` | 9999px | Badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Square Ink fill, white text, `{rounded.sm}`. The default dark CTA.
- **`button-accent`** — Square Blue fill for high-intent actions.
- **`button-secondary`** — White surface with `{colors.border}` outline.

### Pills & Badges
- **`badge`** — Blue-tinted surface, blue text, full pill, weight 500.

### Cards
- **`card`** — White, `1px solid {colors.divider}`, `{rounded.lg}`.
- **`card-soft`** — Tinted `{colors.surface-soft}` surface, borderless.
- **`card-metric`** — Large display number over description.

### Inputs
- **`input`** — White surface, `{colors.border}` outline, `{rounded.md}`. Focus switches border to `{colors.focus-blue}`.

### Navigation
- **`nav-bar`** — White sticky header, weight-500 links, blue/ink CTA right, `{colors.divider}` bottom line.

## Do's and Don'ts

### Do
- Use Square Sans (Inter fallback) with 600 headings and mild negative tracking
- Keep the canvas white and the chrome flat
- Reserve Square Blue (`{colors.primary}`) for links, focus, and high-intent CTAs
- Use small, square-leaning radii (4–12px) on controls and cards
- Let product photography carry visual richness
- Use `{colors.ink}` (near-black) for primary text, not pure black

### Don't
- Don't use gradients or heavy shadows in core UI chrome
- Don't apply Square Blue decoratively — it is a functional accent
- Don't pillow buttons with large pill radii (pills are for badges)
- Don't drop body text below 15px
- Don't introduce the green/coral accents into UI chrome — illustration only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked CTAs |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1200px | Standard desktop layout |
| Large Desktop | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero: 56px → scales down, maintains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Full-bleed photography: maintains edge-to-edge treatment, crops on mobile
- Section spacing: 64px+ → 40px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Square Ink `{colors.ink}` (or Square Blue `{colors.primary}` for high-intent)
- Background: Pure White `{colors.background}`
- Heading text: Square Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Border: `{colors.border}` / divider `{colors.divider}`
- Link / Focus: Square Blue `{colors.primary}`

### Example Component Prompts
- "Create a hero on white. Headline 56px Square Sans weight 600, line-height 1.05, letter-spacing -1.5px, color `{colors.ink}`. Subtitle 20px weight 400, `{colors.gray-600}`. Dark CTA (`{colors.ink}`, 6px radius, 14px 24px padding) plus outline button (white, `{colors.border}`)."
- "Design a card: white, `1px solid {colors.divider}`, 12px radius, 24px padding. Title 22px weight 600, letter-spacing -0.4px. Body 17px weight 400 in `{colors.gray-600}`."
- "Build a blue accent CTA: `{colors.primary}` fill, white text, 6px radius, weight 500, hover `{colors.primary-hover}`."

### Iteration Guide
1. Keep it flat — borders and surface tints, not shadows
2. Square Blue is the only saturated color in chrome; everything else is neutral
3. Small radii (4–12px) — Square geometry stays square
4. Two-to-three weights: 400 read, 500 interact, 600 announce
5. Let photography, not gradients, supply richness

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Square. Brand names and trademarks belong to their respective owners.