{
  "$description": "Design tokens extracted from https://stripe.com by stole.si on 2026-10-11, in the Design Tokens Format Module 2025.10. Values come from the live page's computed styles; color roles and the type, spacing and radius scales are grouped from those measurements. Use for inspiration; respect the owner's trademarks and copyrights.",
  "color": {
    "background": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1.0,
          1.0,
          1.0
        ],
        "hex": "#ffffff"
      },
      "$description": "Page background"
    },
    "surface": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.9294,
          0.9608
        ],
        "hex": "#e5edf5"
      },
      "$description": "Cards, panels and raised sections"
    },
    "text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.0235,
          0.1059,
          0.1922
        ],
        "hex": "#061b31"
      },
      "$description": "Body text and headings"
    },
    "muted": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.3137,
          0.3804,
          0.4784
        ],
        "hex": "#50617a"
      },
      "$description": "Secondary text, captions and metadata"
    },
    "accent": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.3255,
          0.2275,
          0.9922
        ],
        "hex": "#533afd"
      },
      "$description": "Primary buttons, links and highlights"
    },
    "on-accent": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1.0,
          1.0,
          1.0
        ],
        "hex": "#ffffff"
      },
      "$description": "Text and icons on the accent color"
    },
    "accent-2": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.0235,
          0.1059,
          0.1922
        ],
        "hex": "#061b31"
      },
      "$description": "Secondary highlight color"
    },
    "border": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.9294,
          0.9608
        ],
        "hex": "#e5edf5"
      },
      "$description": "Borders, dividers and input outlines"
    },
    "palette": {
      "blue-450": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3922,
            0.4549,
            0.5529
          ],
          "hex": "#64748d"
        }
      },
      "indigo-700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0941,
            0.149,
            0.349
          ],
          "hex": "#182659"
        }
      },
      "indigo-200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.7255,
            0.9765
          ],
          "hex": "#b9b9f9"
        }
      },
      "indigo-350": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.451,
            0.5373,
            1.0
          ],
          "hex": "#7389ff"
        }
      },
      "lime-300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5059,
            0.7216,
            0.102
          ],
          "hex": "#81b81a"
        }
      },
      "blue-350": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4902,
            0.5451,
            0.6431
          ],
          "hex": "#7d8ba4"
        }
      },
      "neutral-950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0,
            0.0,
            0.0
          ],
          "hex": "#000000"
        }
      }
    }
  },
  "font": {
    "family": {
      "body": {
        "$type": "fontFamily",
        "$value": [
          "sohne-var",
          "SF Pro Display",
          "sans-serif"
        ],
        "$description": "sohne-var (web font), weights 300, 400"
      }
    }
  },
  "typography": {
    "4xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 48,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.15,
        "letterSpacing": {
          "value": -0.96,
          "unit": "px"
        }
      },
      "$description": "48px (3rem), used for h1"
    },
    "3xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 32,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.1,
        "letterSpacing": {
          "value": -0.64,
          "unit": "px"
        }
      },
      "$description": "32px (2rem), used for h2"
    },
    "2xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 26,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.12,
        "letterSpacing": {
          "value": -0.26,
          "unit": "px"
        }
      },
      "$description": "26px (1.625rem), used for p, h3"
    },
    "xl": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 22,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.1,
        "letterSpacing": {
          "value": -0.22,
          "unit": "px"
        }
      },
      "$description": "22px (1.375rem), used for h3"
    },
    "lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$description": "18px (1.125rem), used for nav, span"
    },
    "base": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$description": "16px (1rem), used for h4"
    },
    "sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$description": "14px (0.875rem), used for p, link"
    },
    "xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 12,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$description": "12px (0.75rem), used for p, button; line height is the browser default (normal), shown as 1.2"
    },
    "2xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 11,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.45,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$description": "11px (0.6875rem), used for button"
    },
    "3xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 10,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.45,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$description": "10px (0.625rem), used for button"
    },
    "4xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.body}",
        "fontSize": {
          "value": 9,
          "unit": "px"
        },
        "fontWeight": 300,
        "lineHeight": 1.2,
        "letterSpacing": {
          "value": 0,
          "unit": "px"
        }
      },
      "$description": "9px (0.5625rem), used for button"
    }
  },
  "spacing": {
    "0_5": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "1": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "1_5": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "1_75": {
      "$type": "dimension",
      "$value": {
        "value": 7,
        "unit": "px"
      }
    },
    "2": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "2_5": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "3": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "3_5": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "4": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "5": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "6": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "8": {
      "$type": "dimension",
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "10": {
      "$type": "dimension",
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "16": {
      "$type": "dimension",
      "$value": {
        "value": 64,
        "unit": "px"
      }
    }
  },
  "radius": {
    "none": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "full": {
      "$type": "dimension",
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0902,
            0.0902
          ],
          "alpha": 0.06,
          "hex": "#171717"
        },
        "offsetX": {
          "value": 0,
          "unit": "px"
        },
        "offsetY": {
          "value": 3,
          "unit": "px"
        },
        "blur": {
          "value": 6,
          "unit": "px"
        },
        "spread": {
          "value": 0,
          "unit": "px"
        },
        "inset": false
      }
    },
    "md": {
      "$type": "shadow",
      "$value": {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.1961,
            0.1961,
            0.3647
          ],
          "alpha": 0.12,
          "hex": "#32325d"
        },
        "offsetX": {
          "value": 0,
          "unit": "px"
        },
        "offsetY": {
          "value": 16,
          "unit": "px"
        },
        "blur": {
          "value": 32,
          "unit": "px"
        },
        "spread": {
          "value": 0,
          "unit": "px"
        },
        "inset": false
      }
    },
    "lg": {
      "$type": "shadow",
      "$value": {
        "color": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0902,
            0.0902
          ],
          "alpha": 0.08,
          "hex": "#171717"
        },
        "offsetX": {
          "value": 0,
          "unit": "px"
        },
        "offsetY": {
          "value": 15,
          "unit": "px"
        },
        "blur": {
          "value": 35,
          "unit": "px"
        },
        "spread": {
          "value": 0,
          "unit": "px"
        },
        "inset": false
      }
    }
  },
  "breakpoint": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 600,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 640,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 750,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 840,
        "unit": "px"
      }
    },
    "2xl": {
      "$type": "dimension",
      "$value": {
        "value": 940,
        "unit": "px"
      }
    },
    "3xl": {
      "$type": "dimension",
      "$value": {
        "value": 1264,
        "unit": "px"
      }
    },
    "4xl": {
      "$type": "dimension",
      "$value": {
        "value": 1300,
        "unit": "px"
      }
    }
  },
  "size": {
    "container": {
      "$type": "dimension",
      "$value": {
        "value": 1266,
        "unit": "px"
      }
    }
  },
  "$extensions": {
    "si.stole": {
      "format": "dtcg-2025.10",
      "source": "https://stripe.com",
      "scanned": "2026-10-11",
      "theme": "light",
      "components": {
        "button_primary": {
          "background": "#533afd",
          "text": "#ffffff",
          "border": null,
          "border_width": 0,
          "radius": "4px",
          "padding": "15.5px 24px 16.5px 24px",
          "font_size": "16px",
          "font_weight": 400,
          "height": "48px",
          "text_transform": "none",
          "letter_spacing": "0px",
          "shadow": null,
          "count": 7
        },
        "button_secondary": {
          "background": null,
          "text": "#533afd",
          "border": "#b9b9f9",
          "border_width": 1,
          "radius": "4px",
          "padding": "14.5px 24px 15.5px 24px",
          "font_size": "16px",
          "font_weight": 400,
          "height": "48px",
          "text_transform": "none",
          "letter_spacing": "0px",
          "shadow": null,
          "count": 11
        },
        "input": {
          "background": "#ffffff",
          "text": "#000000",
          "border": null,
          "border_width": "0px",
          "radius": "0px",
          "height": "129px",
          "font_size": "16px",
          "padding": "11px 17px"
        },
        "card": {
          "background": null,
          "radius": "0px",
          "border": "#000000",
          "shadow": null,
          "padding": "96px 16px",
          "count": 18
        },
        "link": {
          "color": "#533afd",
          "decoration": "none",
          "weight": 400
        }
      },
      "tech": [
        "Next.js 14.2.32",
        "React",
        "core-js 3.6.5",
        "Node.js",
        "Nginx",
        "Google Tag Manager",
        "Sentry",
        "three.js 178",
        "Webpack"
      ]
    }
  }
}