# Square — Marketing Site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Core
| 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 |

### Brand
| 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 |

### Surfaces
| 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.

## 3. Typography Rules

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.

## 4. Component Stylings

### Buttons
- Marketing pill: bg `#006aff`, black or white text, full pill, ~41px tall, 18px/500, padding `10px 20px`. Secondary pill: white/transparent with border.
- Form button: bg `#006aff` / `#1379f3`, white text, radius 6, height 50px, 16px/500, padding `13px 16px`.
- Ghost / link: transparent, ink or blue text, pill; blue text-links with arrows.

### Inputs
- White bg, 1px gray border, radius 6, ink text, gray `#888888` placeholder. Focus: blue border.

### Cards / panels
- Radius 16 (feature cards) → 24 (large blocks). White or gray-50; forest-green `#005a44` blocks with white text hold product/POS imagery. Soft or no shadow.

### Feature block (signature)
- Large 24px-radius forest-green panel, white headline + copy + a light/white pill CTA, paired with a photo of Square hardware (register, terminal) or a checkout screen.

### Nav
- White, wordmark left, mega-menu links, right: ghost log-in + blue pill "Get started".

## 5. Layout Principles

- Spacing: 4px grid; generous, roomy sections. Wide centered content, generous whitespace.
- Nav: ~72px, white.
- Hero: 64px/400 near-black headline + subhead + blue pill CTA, with hardware/checkout imagery.
- Body rhythm: alternating white / gray-50 sections and full 24px-radius forest-green blocks; card grids at radius 16; benefit rows with icons; logo wall.

## 6. Depth & Elevation

- Radii: form buttons/inputs `6px`, small `4px`, cards `16px`, large feature blocks `24px`, marketing CTAs full pill (`10000px`), avatars 100%.
- Control heights: marketing pill ~`41px`; form button `50px`. Button padding: pills `10px 20px`; form buttons `13px 16px`.
- Elevation: mostly flat; separation via white / gray-50 / forest-green rounded blocks. Cards use soft rounding, light or no shadow — soft rounding over shadows.

## 7. Motion

- Practical and smooth: micro-transitions in the 150–300ms range — `background-color 0.15s cubic-bezier(0.4,…)`, `opacity 0.25s ease`, `color/opacity 0.15s`, `opacity/visibility 0.3s`, `box-shadow/background/opacity 0.15s`; pill buttons lift subtly. Nothing flashy — confidence over spectacle.
- Entrances: 300ms directional fade-in-slide (from-top / from-left, Svelte-scoped) on section entry; product imagery and cards fade/slide in on scroll.
- Link hover: underline-grow via `background-size` transition (`color/border-color/background-size 0.3s`).
- Observed keyframes: fadeIn/Out, shake-dialog, slide-forward/down, pulse, spin, blink, scroll-x marquee, blueCustomGradient (animated blue gradient).
- Media: click-to-play demo videos (380px) + one small 198px loop. No animation library detected (no GSAP/Three/Lottie).

## 8. Backgrounds, Effects & WebGL

- No canvas/WebGL. Nearly flat white surfaces.
- Gradients minimal: solid Square-blue `rgb(0,106,255)` fills expressed as gradients; one white-fade sheen band (white → transparent repeating — skeleton/sheen shimmer); animated `blueCustomGradient` keyframe.
- Glass: `backdrop-filter: blur(16px)` / `blur(20px)` on nav/menus.

## 9. Do's and Don'ts

### Do
- Keep a white canvas with near-black text (`#1a1a1a` / `#030303`); use Square blue `#006aff` as the interactive accent for buttons and links.
- Use large forest-green `#005a44` 24px-radius blocks with white text as the signature section device, holding POS/checkout or hardware imagery.
- Set display type at REGULAR weight 400 — make hierarchy with size, not weight; apply slight -0.5px tracking only at hero size.
- Step buttons up to weight 500; keep two button shapes: full-pill marketing CTAs (~41px) and radius-6 form buttons (50px tall).
- Keep elevation flat: separate sections with white / gray-50 / forest-green blocks and soft rounding rather than shadows.
- Use red `#df3320` only as a rare punch.
- Keep motion practical and smooth at 150–300ms ease; enter sections with 300ms directional fade-in-slides.
- Hover links with an underline that grows via background-size.
- Use backdrop-filter blur (16–20px) glass on nav/menus.

### Don't
- Don't use bold headlines — display is never bold; weight stays at 400.
- Don't rely on shadows for separation — the system is flat, with soft rounding over shadows.
- Don't make motion flashy — confidence over spectacle.
- Don't use red as more than a rare accent.
- Don't add canvas/WebGL or heavy background effects — surfaces stay nearly flat white with only minimal blue-gradient fills and a sheen band.

## 10. Responsive Behavior

- Breakpoints (from live media queries): 374, 740, 1024, 1280, 1680 (max-width variants 373 / 739 / 1023).
- Adaptations beyond breakpoints (mobile nav pattern, type scale-down): not captured.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Text `#1a1a1a` (headings `#030303`) · Muted `#737373` / `#888888` · Surface `#f2f2f2` · Accent `#006aff` (form `#1379f3`) · Signature block `#005a44`
- Font: "Square Sans Text VF", Helvetica, Arial, sans-serif · Body: 18px · Radius: 6 (controls) / 16 (cards) / 24 (feature blocks) / pill (CTAs) · Control height: 41px pill, 50px form
- Focus: blue border (inputs) · Hover fill: `#1379f3` (buttons)

<square_design_language>
Use the Square design language: flat white canvas with near-black text #1a1a1a / #030303 (grays #737373, #888) and Square blue #006aff as the interactive accent (form/hover #1379f3) — flat white + blue is the character. The signature section device is a large forest-green #005a44 rounded block (radius 24) with white text holding POS/checkout imagery; red #df3320 is a rare punch. Font is Square Sans (humanist), 18px body, display REGULAR weight 400 — size makes the hierarchy (64px hero, -0.5px tracking); buttons step to 500. Two button shapes: marketing full-PILL blue (18px/500) and form buttons radius 6, 50px tall. Cards radius 16, inputs 6. No shadows or WebGL — separation via white / gray-50 / green blocks. Motion 150–300ms with 300ms slide-fade entrances and underline-grow link hovers. Feels: trustworthy, practical, friendly-pro commerce. Avoid: bold headlines, shadow-based separation, flashy motion, overusing red.
</square_design_language>