TypeScript Tokens

Preview

/**
 * Generated by UI Archive — ui-archive.com
 * Domain: squareup.com
 * Snapshot: 2026-11-15
 * Format: W3C DTCG compatible
 * Token names preserve original CSS variable names
 */

export const tokens = {
  "color": {
    "blue": "#006aff",
    "blue-dark": "#0055cc",
    "blue-light": "#cee7f3",
    "blue-color-mode-dark": "#1379f3",
    "red": "#df3320",
    "green": "#0bb634",
    "plum": "#a1499c",
    "rose": "#c14f70",
    "gray-30": "#bbbbbb",
    "gray-55": "#707070",
    "gray-75": "#333333",
    "gray-93": "#000000",
    "transparent": "rgba(0, 0, 0, 0)",
    "border-transparent": "rgba(128, 128, 128, .35)",
    "accent-transparent": "rgba(0, 0, 0, .06)",
    "drop-shadow": "rgba(0, 0, 0, .16)",
    "drop-shadow-theme": "rgba(0, 0, 0, .32)",
    "accessibility-focus-outline-color": "rgba(0, 106, 255, .8)",
    "blue-400": "#4a95ff"
  },
  "fontSize": {
    "menlo": "90%",
    "square-sans-display-vf": "2.2rem",
    "square-sans-text-vf": "12px",
    "square-sans-text-vf-2": "16px",
    "square-sans-text-vf-4": "20px",
    "square-sans-text-vf-5": "14px",
    "monaco": ".9em",
    "square-sans-display-vf-28px-500": "28px",
    "square-market-24px-700": "24px"
…

All Tokens