{
  "id": "square",
  "version": "1.0.0",
  "name": "Square",
  "description": "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.\"\n",
  "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.\n",
    "importedDate": "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.\n"
  },
  "tags": [
    "fintech",
    "payments",
    "square",
    "block",
    "merchant",
    "light-first"
  ],
  "palette": {
    "ref": "square@1.0.0",
    "swatches": [
      {
        "id": "square-blue",
        "name": "Square Blue",
        "value": "#006AFF",
        "description": "Primary brand blue — the Square interactive color, primary CTAs, and merchant accents.",
        "aliases": []
      },
      {
        "id": "square-blue-hover",
        "name": "Square Blue Hover",
        "value": "#0058D6",
        "description": "Authored darker blue for hover/pressed states on the primary action.",
        "aliases": []
      },
      {
        "id": "square-black",
        "name": "Square Black",
        "value": "#000000",
        "description": "The Square mark itself — solid black on light canvas. Also the wordmark color.",
        "aliases": []
      },
      {
        "id": "square-near-black",
        "name": "Square Near-Black",
        "value": "#1A1A1A",
        "description": "Authored dark canvas — slightly lifted from pure black for dark-mode comfort.",
        "aliases": []
      },
      {
        "id": "square-ink",
        "name": "Square Ink",
        "value": "#212121",
        "description": "Body text on light surfaces.",
        "aliases": []
      },
      {
        "id": "square-graphite",
        "name": "Square Graphite",
        "value": "#4F4F4F",
        "description": "Secondary text on light backgrounds.",
        "aliases": []
      },
      {
        "id": "square-gray",
        "name": "Square Gray",
        "value": "#7B7B7B",
        "description": "Tertiary text and metadata.",
        "aliases": []
      },
      {
        "id": "square-divider",
        "name": "Square Divider",
        "value": "#E5E5E5",
        "description": "Authored hairline divider tone.",
        "aliases": []
      },
      {
        "id": "square-white",
        "name": "Square White",
        "value": "#FFFFFF",
        "description": "Canonical light canvas.",
        "aliases": []
      },
      {
        "id": "square-fog",
        "name": "Square Fog",
        "value": "#F7F7F7",
        "description": "Authored surface tone for cards and panels.",
        "aliases": []
      },
      {
        "id": "square-surface-dark",
        "name": "Square Surface Dark",
        "value": "#2B2B2B",
        "description": "Authored elevated surface on dark mode.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "square-white",
          "surface": "square-fog",
          "surface-elevated": "square-white",
          "text-primary": "square-ink",
          "text-secondary": "square-graphite",
          "text-tertiary": "square-gray",
          "primary": "square-blue",
          "primary-hover": "square-blue-hover",
          "accent": "square-blue",
          "accent-hover": "square-blue-hover",
          "warning": "square-blue-hover",
          "warning-hover": "square-blue",
          "error": "square-black",
          "success": "square-blue"
        }
      },
      "dark": {
        "roles": {
          "background": "square-near-black",
          "surface": "square-surface-dark",
          "surface-elevated": "square-surface-dark",
          "text-primary": "square-white",
          "text-secondary": "square-gray",
          "text-tertiary": "square-graphite",
          "primary": "square-blue",
          "primary-hover": "square-blue-hover",
          "accent": "square-blue",
          "accent-hover": "square-blue-hover",
          "warning": "square-blue-hover",
          "warning-hover": "square-blue",
          "error": "square-white",
          "success": "square-blue"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "body",
      "ref": "inter@1.0.0",
      "family": "Inter",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Inter",
        "url": "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "square-black",
      "on-identity": "square-white",
      "primary": "square-blue",
      "primary-hover": "square-blue-hover",
      "accent": "square-blue",
      "accent-hover": "square-blue-hover",
      "mark": "square-black",
      "text-primary-light": "square-ink",
      "text-primary-dark": "square-white",
      "text-secondary-light": "square-graphite",
      "background-light": "square-white",
      "background-dark": "square-near-black",
      "surface-light": "square-fog",
      "surface-dark": "square-surface-dark",
      "divider": "square-divider"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.mark.fill",
      "severity": "error",
      "rationale": "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.\n",
      "allowed": [
        "square-black",
        "square-white"
      ],
      "forbidden": [
        "square-blue",
        "square-blue-hover",
        "square-ink",
        "square-graphite"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "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.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "gradient-fill",
        "on-busy-photo",
        "inverted-without-variant"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "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.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "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.\n",
      "allowed": [
        "500",
        "600",
        "700"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.mark",
      "severity": "error",
      "rationale": "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.\n",
      "forbiddenContexts": [
        "body-text",
        "secondary-link"
      ]
    },
    {
      "type": "accessibilityRequirement",
      "target": "*",
      "severity": "error",
      "rationale": "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.\n",
      "standard": "WCAG-AA",
      "criterion": "1.4.3"
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "warning",
      "rationale": "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.\n",
      "requires": "body",
      "minSizeRatio": 1.5
    }
  ]
}