W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Square
Square, a Block, Inc. brand, is the seller-side commerce and payments platform that put a card reader in the hand of every small merchant. The brand is named after its mark: a literal black square, geometric and exact. The visual identity is disciplined and merchant-facing — Square Black for the mark and wordmark, Square Blue (#006AFF) for interactive elements, and a warm light canvas that frames the seller dashboard. The voice is plain and operator-oriented: "Sell anywhere. Diversify revenue streams. Streamline operations."
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/square/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/square/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Square
Square, a Block, Inc. brand, is the seller-side commerce and payments platform that put a card reader in the hand of every small merchant. The brand is named after its mark: a literal black square, geometric and exact. The visual identity is disciplined and merchant-facing — Square Black for the mark and wordmark, Square Blue (#006AFF) for interactive elements, and a warm light canvas that frames the seller dashboard. The voice is plain and operator-oriented: "Sell anywhere. Diversify revenue streams. Streamline operations."
Tags: fintech, payments, square, block, merchant, light-first
Atoms
Palette
Square · [email protected] · Proprietary — All Rights Reserved
Square (a Block, Inc. brand) corporate palette. The brand identity is anchored on Square Black — the literal square mark — paired with the saturated Square Blue (#006AFF) used as the primary interactive color and merchant accent. The canvas leans light-first for the seller dashboard and marketing, with the black mark and blue CTAs reading as the signature elements.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
square-blue |
Square Blue | #006AFF |
square-blue-hover |
Square Blue Hover | #0058D6 |
square-black |
Square Black | #000000 |
square-near-black |
Square Near-Black | #1A1A1A |
square-ink |
Square Ink | #212121 |
square-graphite |
Square Graphite | #4F4F4F |
square-gray |
Square Gray | #7B7B7B |
square-divider |
Square Divider | #E5E5E5 |
square-white |
Square White | #FFFFFF |
square-fog |
Square Fog | #F7F7F7 |
square-surface-dark |
Square Surface Dark | #2B2B2B |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
square-white |
#FFFFFF |
surface |
square-fog |
#F7F7F7 |
surface-elevated |
square-white |
#FFFFFF |
text-primary |
square-ink |
#212121 |
text-secondary |
square-graphite |
#4F4F4F |
text-tertiary |
square-gray |
#7B7B7B |
primary |
square-blue |
#006AFF |
primary-hover |
square-blue-hover |
#0058D6 |
accent |
square-blue |
#006AFF |
accent-hover |
square-blue-hover |
#0058D6 |
warning |
square-blue-hover |
#0058D6 |
warning-hover |
square-blue |
#006AFF |
error |
square-black |
#000000 |
success |
square-blue |
#006AFF |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
square-near-black |
#1A1A1A |
surface |
square-surface-dark |
#2B2B2B |
surface-elevated |
square-surface-dark |
#2B2B2B |
text-primary |
square-white |
#FFFFFF |
text-secondary |
square-gray |
#7B7B7B |
text-tertiary |
square-graphite |
#4F4F4F |
primary |
square-blue |
#006AFF |
primary-hover |
square-blue-hover |
#0058D6 |
accent |
square-blue |
#006AFF |
accent-hover |
square-blue-hover |
#0058D6 |
warning |
square-blue-hover |
#0058D6 |
warning-hover |
square-blue |
#006AFF |
error |
square-white |
#FFFFFF |
success |
square-blue |
#006AFF |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
square-black |
#000000 |
on-identity |
square-white |
#FFFFFF |
primary |
square-blue |
#006AFF |
primary-hover |
square-blue-hover |
#0058D6 |
accent |
square-blue |
#006AFF |
accent-hover |
square-blue-hover |
#0058D6 |
mark |
square-black |
#000000 |
text-primary-light |
square-ink |
#212121 |
text-primary-dark |
square-white |
#FFFFFF |
text-secondary-light |
square-graphite |
#4F4F4F |
background-light |
square-white |
#FFFFFF |
background-dark |
square-near-black |
#1A1A1A |
surface-light |
square-fog |
#F7F7F7 |
surface-dark |
square-surface-dark |
#2B2B2B |
divider |
square-divider |
#E5E5E5 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.mark.fill
- allowed: square-black, square-white
- forbidden: square-blue, square-blue-hover, square-ink, square-graphite
The Square mark renders only in solid black (on light surfaces) or reversed white (on dark surfaces). Blue is the interactive color for CTAs and links — not a mark fill. Recoloring the square into off-brand hues violates Square's brand-use guidance.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant
The Square mark is a literal geometric square — its identity depends on exact proportions and a flat solid fill. Stretching, rotating beyond 0°, recoloring, or applying drop-shadows breaks the most essential brand cue.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Square Ink (#212121) on Square White (#FFFFFF) gives ~16:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Square Blue (#006AFF) on white reaches ~5.6:1 — clears AA for normal text. Buttons using the blue fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas.
contextRestriction → roles.colors.mark
- forbiddenContexts: body-text, secondary-link
Square Black is reserved for the mark, the wordmark, and primary headlines. Using solid #000000 for body text or secondary links muddles the mark/text hierarchy the brand depends on; use Square Ink (#212121) for body instead.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Square's seller-facing surfaces have an elevated trust requirement; AA is the floor on any new role pairing.
⚠️ warning (2)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Square's marketing surfaces use Sharp Sans in Medium (500), Semibold (600), and Bold (700) for headlines. Lighter cuts read as body weight and compromise the confident merchant-facing voice; heavier cuts are outside the standard corporate kit.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Square's marketing hero typography runs materially larger than body copy. A 1.5× minimum size ratio preserves the display-to- prose hierarchy the seller-facing voice depends on.
Provenance
- Source: https://squareup.com/us/en/about/press
- License:
Proprietary — All Rights Reserved - Attribution: Block, Inc. / Square — Square, the Square wordmark, and the Square mark are registered trademarks of Block, Inc. The signature Square Blue (#006AFF) is documented across Square's press kit and visible in the deployed squareup.com marketing surfaces. Sharp Sans is the proprietary corporate typeface historically used across Square; Inter is referenced here as the open-source fallback.
- Imported:
2026-05-18 - Notes: Square's parent rebranded to Block in 2021. The Square seller brand retained its identity. Sharp Sans (proprietary) is not publicly distributed; this atom references Inter for both heading and body roles and notes Sharp Sans in provenance. The Square mark is rendered in solid black on light surfaces or in reversed white on dark; "recolored" treatments are forbidden.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Square
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Square
A clear hierarchy in Square's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ square-blue #006AFF accent-hover
→ square-blue-hover #0058D6 background-dark
→ square-near-black #1A1A1A background-light
→ square-white #FFFFFF divider
→ square-divider #E5E5E5 identity
→ square-black #000000 mark
→ square-black #000000 on-identity
→ square-white #FFFFFF primary
→ square-blue #006AFF primary-hover
→ square-blue-hover #0058D6 surface-dark
→ square-surface-dark #2B2B2B surface-light
→ square-fog #F7F7F7 text-primary-dark
→ square-white #FFFFFF text-primary-light
→ square-ink #212121 text-secondary-light
→ square-graphite #4F4F4F Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from square)
Light mode (14 roles)
accent
→ square-blue accent-hover
→ square-blue-hover background
→ square-white error
→ square-black primary
→ square-blue primary-hover
→ square-blue-hover success
→ square-blue surface
→ square-fog surface-elevated
→ square-white text-primary
→ square-ink text-secondary
→ square-graphite text-tertiary
→ square-gray warning
→ square-blue-hover warning-hover
→ square-blue Dark mode (14 roles)
accent
→ square-blue accent-hover
→ square-blue-hover background
→ square-near-black error
→ square-white primary
→ square-blue primary-hover
→ square-blue-hover success
→ square-blue surface
→ square-surface-dark surface-elevated
→ square-surface-dark text-primary
→ square-white text-secondary
→ square-gray text-tertiary
→ square-graphite warning
→ square-blue-hover warning-hover
→ square-blue Rules (8 typed constraints)
error · 6 rules
colorChoice logo.mark.fill allowed square-black, square-white forbidden square-blue, square-blue-hover, square-ink, square-graphite The Square mark renders only in solid black (on light surfaces) or reversed white (on dark surfaces). Blue is the interactive color for CTAs and links — not a mark fill. Recoloring the square into off-brand hues violates Square's brand-use guidance.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, inverted-without-variant The Square mark is a literal geometric square — its identity depends on exact proportions and a flat solid fill. Stretching, rotating beyond 0°, recoloring, or applying drop-shadows breaks the most essential brand cue.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Square Ink (#212121) on Square White (#FFFFFF) gives ~16:1 — well above WCAG 2.1 Level AA. This rule guards the floor for any new foreground/background pairing.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Square Blue (#006AFF) on white reaches ~5.6:1 — clears AA for normal text. Buttons using the blue fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas.
contextRestriction roles.colors.mark forbiddenContexts body-text, secondary-link Square Black is reserved for the mark, the wordmark, and primary headlines. Using solid #000000 for body text or secondary links muddles the mark/text hierarchy the brand depends on; use Square Ink (#212121) for body instead.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Square's seller-facing surfaces have an elevated trust requirement; AA is the floor on any new role pairing.
warning · 2 rules
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Square's marketing surfaces use Sharp Sans in Medium (500), Semibold (600), and Bold (700) for headlines. Lighter cuts read as body weight and compromise the confident merchant-facing voice; heavier cuts are outside the standard corporate kit.
fontPairing typography.heading requires body minSizeRatio 1.5 Square's marketing hero typography runs materially larger than body copy. A 1.5× minimum size ratio preserves the display-to- prose hierarchy the seller-facing voice depends on.
Provenance
- Source
- https://squareup.com/us/en/about/press
- License
Proprietary — All Rights Reserved- Attribution
- Block, Inc. / Square — Square, the Square wordmark, and the Square mark are registered trademarks of Block, Inc. The signature Square Blue (#006AFF) is documented across Square's press kit and visible in the deployed squareup.com marketing surfaces. Sharp Sans is the proprietary corporate typeface historically used across Square; Inter is referenced here as the open-source fallback.
- Imported
2026-05-18- Notes
- Square's parent rebranded to Block in 2021. The Square seller brand retained its identity. Sharp Sans (proprietary) is not publicly distributed; this atom references Inter for both heading and body roles and notes Sharp Sans in provenance. The Square mark is rendered in solid black on light surfaces or in reversed white on dark; "recolored" treatments are forbidden.