design.md

Preview

# squareup.com Design Tokens

> Generated by UI Archive — https://ui-archive.com/squareup.com
> Snapshot: 2026-11-15
> Format: W3C DTCG compatible — suitable for Cursor, Lovable, Claude Code, and other AI coding agents

## Colors

| Token | Value | Description |
|-------|-------|-------------|
| --color-blue | #006aff | Defined in :root as --color-blue |
| --color-blue-dark | #0055cc | Defined in :root as --color-blue-dark |
| --color-blue-light | #cee7f3 | Defined in :root as --color-blue-light |
| --color-blue-color-mode-dark | #1379f3 | Defined in :root as --color-blue-color-mode-dark |
| --color-red | #df3320 | Defined in :root as --color-red |
| --color-green | #0bb634 | Defined in :root as --color-green |
| --color-plum | #a1499c | Defined in :root as --color-plum |
| --color-rose | #c14f70 | Defined in :root as --color-rose |
| --color-gray-30 | #bbbbbb | Defined in :root as --color-gray-30 |
| --color-gray-55 | #707070 | Defined in :root as --color-gray-55 |
| --color-gray-75 | #333333 | Defined in :root as --color-gray-75 |
| --color-gray-93 | #000000 | Defined in :root as --color-gray-93 |
| --color-transparent | rgba(0, 0, 0, 0) | Defined in :root as --color-transparent |
| --color-border-transparent | rgba(128, 128, 128, .35) | Defined in :root as --color-border-transparent |
| --color-accent-transparent | rgba(0, 0, 0, .06) | Defined in :root as --color-accent-transparent |
| --color-drop-shadow | rgba(0, 0, 0, .16) | Defined in :root as --color-drop-shadow |
| --color-drop-shadow-theme | rgba(0, 0, 0, .32) | Defined in :root as --color-drop-shadow-theme |
| --color-accessibility-focus-outline-color | rgba(0, 106, 255, .8) | Defined in :root as --accessibility-focus-outline-color |
| --color-blue-400 | #4a95ff | Defined in :root as --color-blue-400 |

…

All Tokens