---
title: "Square design system"
variant: extended
source: https://squareup.com/us/en
captured_at: 2026-10-12
theme: dark
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/squareup-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Square · Design System

> A cinematic storefront for local business.

**Theme:** dark · **Industry:** fintech · **Source:** https://squareup.com/us/en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Square opens with a full-bleed, muted street-level video image, overlaid by a large editorial headline and restrained calls to action. A transparent-feeling navigation and customer-logo strip keep the focus on the real-world scene and Square’s business-led brand story.

## North star

Let an atmospheric real-world business image carry the page, and keep typography, navigation, and actions crisp and restrained.

## Overview

The first viewport is built around an atmospheric, full-bleed photograph or video frame of a sidewalk utility fixture. Its subdued olive, stone, and charcoal tones come from the imagery, not the measured brand palette; the brand system itself is stark black and white, with Signal Blue (#006aff) reserved for emphasis. White navigation and headline text sit directly over the image, creating contrast without enclosing the content in panels. Exact Block supplies the oversized, tightly tracked editorial serif headline, while Cash Sans and Square Sans Text VF keep navigation and actions crisp and practical. The headline is centered over the central image, with compact pill-shaped CTAs beneath it. A narrow customer-logo strip anchors the bottom edge. Spacing feels open and deliberate: the hero gets the canvas, and supporting elements remain visually subordinate. Hairlines and muted grays are secondary interface details rather than prominent decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | White headline and navigation text over the hero image; also the inverse surface and light CTA fill. |
| Canvas Black | `#000000` | `--color-canvas-black` | neutral | Measured dark canvas and text color; provides the underlying monochrome brand contrast. |
| Signal Blue | `#006aff` | `--color-signal-blue` | accent | Primary blue CTA fill and focus accent; use sparingly for the most important action. |
| Divider Charcoal | `#2d2d2d` | `--color-divider-charcoal` | neutral | Subtle hairlines and footer separators, not a dominant hero color. |
| Soft Rule | `#cccccc` | `--color-soft-rule` | neutral | Secondary border tone in measured interface details; keep it quiet. |
| Muted Gray | `#707070` | `--color-muted-gray` | semantic | Muted text and secondary headings in supporting interface areas. |
| Pale Link Gray | `#bbbbbb` | `--color-pale-link-gray` | semantic | Secondary link text; the measured page’s logo marks and image tones are not this color token. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Canvas Black) · `--color-text-subtle` → `#707070` (Muted Gray) · `--color-border` → `#2d2d2d` (Divider Charcoal) · `--color-accent` → `#006aff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#707070` | `#000000` | 4.24:1 | AA-large |
| `#707070` | `#ffffff` | 4.95:1 | AA |
| `#006aff` | `#000000` | 4.51:1 | AA |
| `#006aff` | `#ffffff` | 4.66:1 | AA |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0))`
- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))`
- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Cash Sans | `--font-body` | webfont | 400, 500 | Body copy, links, and selected headings | Inter |
| Square Sans Text VF | `--font-square-sans-text-vf` | webfont | 500, 400 | Navigation labels and button text | Inter |
| Exact Block | `--font-display` | webfont | 400, 500 | Display and large editorial headings | Bodoni Moda |
| Cash Sans Mono | `--font-mono` | webfont | 500 | Eyebrow labels and code-like text | Roboto Mono |

- **Cash Sans:** Use clean sans-serif forms with modestly open tracking; measured weights are 400 and 500.
- **Square Sans Text VF:** Compact, legible interface text; primarily regular or medium, with no forced uppercase.
- **Exact Block:** High-contrast serif display style; measured headings use tight negative tracking and regular weight.
- **Cash Sans Mono:** Monospaced uppercase labels with generous tracking; use sparingly for metadata.

### Type scale — Augmented Fourth (ratio ≈ 1.421, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 81px | 400 | 1 | -0.036em | — | Exact Block | Oversized hero headline, centered over the image. |
| h1 | 72px | 400 | 1 | -0.04em | — | Exact Block | Primary page headline in the hero. |
| h2 | 56px | 500 | 1 | -0.03em | — | Exact Block | Major section headings on supporting page content. |
| h3 | 40px | 400 | 1.13 | -0.02em | — | Exact Block | Secondary section or feature headings. |
| h4 | 24px | 500 | 1.2 | -0.01em | — | Cash Sans | Compact feature titles and subsection labels. |
| body | 14px | 400 | 1.5 | 0.02em | — | Cash Sans | Explanatory copy in supporting content. |
| button | 14px | 500 | normal | 0 | — | Square Sans Text VF | Primary and secondary CTA labels. |
| nav | 14px | 500 | 1.5 | 0 | — | Square Sans Text VF | Top-level site navigation. |
| link | 14px | 400 | 1.5 | 0.02em | — | Cash Sans | Inline and supporting navigation links. |
| eyebrow | 14px | 500 | 1.5 | 0.1em | uppercase | Cash Sans Mono | Uppercase, tracked section kicker or label. |
| code | 14px | 500 | 1.5 | 0.1em | uppercase | Cash Sans Mono | Monospaced uppercase technical or metadata text. |

OpenType features in use: `"calt", "clig", "dlig", "hlig", "liga"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 4, 10, 18, 20, 30, 40, 60, 80, 120 px.
- Section rhythm 80px · element gap 20px · card padding — · max content width —.

The viewport prioritizes one edge-to-edge hero image, with a slim navigation row overlaid along the top. Center the main headline over the scene and place paired CTAs directly beneath it; keep the customer logos in a low horizontal strip near the bottom. The layout is intentionally sparse, with no visible card grid or boxed text panels. Measured spacing suggests a comfortable rhythm, but no page maximum width is established by the data. Let the hero occupy most of the first viewport and keep secondary UI compact.

## Shape & elevation

- Radius: button `4px` · input `10px` · badge `5px` · nav `4px` · link `9999px` · xs `4px` · sm `5px` · pill `9999px`
- Shadow `inset` (input): `rgb(112, 112, 112) 0px 0px 0px 1px inset`
- Shadow `md` (button): `rgba(0, 0, 0, 0.15) 0px 4px 12px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px`
- Motion: standard transition `0.1s linear` on interactive elements.

The hero is largely flat: navigation and copy overlay the image without card containers. Measured borders are restrained and belong mostly to footer or secondary details. Buttons may use subtle depth, but avoid prominent shadows, stacked panels, or decorative elevation that competes with the photography.

## Imagery

Use a full-bleed, cinematic real-world business or street scene, framed close enough to feel tactile and recognizable. The screenshot’s muted green-gray pavement and fixture colors are photographic content, not brand palette tokens. Keep imagery subdued and slightly atmospheric so white text remains readable; place customer wordmarks in a thin overlay strip rather than building a separate card gallery.

## Components

### Overlay navigation

A compact top row with the Square mark, business/product links, and account, support, search, and cart actions; white labels sit over the hero image.

### Hero headline

Large centered Exact Block serif text in white, arranged across two lines over the central photographic subject.

### Primary CTA

A compact rounded action with white fill and blue text, visually distinct from the blue-filled secondary action.

### Secondary CTA

Signal Blue (#006aff) pill-shaped action with white text, placed immediately beside the primary CTA.

### Customer logo strip

A low horizontal row of white customer wordmarks over the image, reinforcing social proof without enclosing each logo.

### Measured component styles

- **Primary button** (“Skip to Content”): transparent background · text #1a1a1a · border 2px solid #006aff · radius 5px · padding 10px · 500 16px Square Sans Text VF
- **Link** (“Shop deals”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Square Sans Text VF
- **Input**: transparent background · text #ffffff · radius 10px · padding 12px 16px · 400 14px Square Sans Text VF · shadow rgb(112, 112, 112) 0px 0px 0px 1px inset
- **Badge** (“BEST VALUE”): background #1f1f1f · text #ffffff · radius 5px · padding 5px 10px · 500 14px Cash Sans Mono · uppercase
- **Navigation item** (“Skip to Content Square Business types Pr”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Square Sans Text VF

## Do

- Use a full-bleed real-world business image as the hero canvas.
- Set the main headline in a high-contrast editorial serif.
- Keep navigation and hero copy white over darkened imagery.
- Reserve Signal Blue (#006aff) for a prominent action or focus state.
- Center the hero message and keep the CTA pair close beneath it.
- Treat customer marks as a restrained horizontal strip.

## Don't

- Do not turn the hero into a boxed card or panel.
- Do not treat photographic olive and stone colors as brand tokens.
- Do not introduce gradients as a dominant visual signature.
- Do not crowd the hero with dense copy or extra controls.
- Do not use heavy shadows or layered card stacks.
- Do not replace the editorial serif headline with generic bold sans-serif.

## Agent prompt

Build a new Square-style page with a cinematic, full-bleed real-world business image as its visual anchor. Use Gallery White (#ffffff) for overlaid navigation and headline text, Canvas Black (#000000) for the underlying monochrome system, and Signal Blue (#006aff) sparingly for the primary action or focus state. Set the central headline in a high-contrast editorial serif similar to Exact Block, with tight tracking; use a clean sans-serif like Cash Sans for body copy and a compact sans-serif for navigation and buttons. Keep the top navigation slim, center the hero message, and place a compact pair of rounded CTAs beneath it. If social proof is needed, use an unboxed horizontal logo strip. Avoid cards, heavy shadows, and treating image colors as brand colors.

## Source CSS custom properties (selected)

```css
--text-font-weight-medium: 500;
--onetrust-bg-color: #FFFF;
--onetrust-focus-outline-color: #006AFF;
--onetrust-primary-text-color: rgba(0, 0, 0, 0.9);
--onetrust-secondary-text-color: rgba(0, 0, 0, 0.9);
--onetrust-primary-button-bg-color: #006AFF;
--onetrust-primary-button-hover-color: #005FE5;
--onetrust-primary-button-pressed-color: #0055CC;
--onetrust-primary-button-text-color: #FFFF;
--onetrust-secondary-button-bg-color: rgba(0, 0, 0, 0.05);
--onetrust-secondary-button-hover-color: #E5F0FF;
--onetrust-secondary-button-pressed-color: #CCE1FF;
--onetrust-secondary-button-text-color: #005AD9;
--onetrust-hyperlink-color: #005AD9;
--onetrust-toggle-on-color: #006AFF;
--onetrust-toggle-on-knob-color: #FFFF;
--onetrust-toggle-on-bg-color: #006AFF;
--onetrust-toggle-on-border-color: #006AFF;
--onetrust-toggle-on-hover-color: #005FE5;
--onetrust-toggle-on-hover-border-color: #005FE5;
--onetrust-toggle-on-hover-bg-color: #005FE5;
--onetust-toggle-on-pressed-color: #0055CC;
--onetrust-toggle-on-pressed-border-color: #0055CC;
--onetrust-toggle-on-pressed-bg-color: #0055CC;
--onetrust-toggle-off-color: rgba(0, 0, 0, 0.3);
--onetrust-toggle-off-bg-color: #FFFF;
--onetrust-toggle-off-knob-color: rgba(0, 0, 0, 0.3);
--onetrust-toggle-off-border-color: rgba(0, 0, 0, 0.3);
--onetrust-toggle-off-hover-color: #006AFF;
--onetrust-toggle-off-hover-border-color: #006AFF;
--onetrust-toggle-off-hover-knob-color: #006AFF;
--onetrust-toggle-off-pressed-color: #0055CC;
--onetrust-toggle-off-pressed-border-color: #0055CC;
--onetrust-toggle-off-pressed-knob-color: #0055CC;
--onetrust-accordian-hover-color: #005AD9;
--onetrust-accordian-bg-color: #FFFF;
--onetrust-accordian-divider-color: rgba(0, 0, 0, 0.05);
--onetrust-layout-border-color: #e9e9e9;
--onetrust-font-family: "Square Sans Text VF", "Square Sans Text", helvetica, arial, sans-serif;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/squareup-com