{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Stripi-Inspired",
  "meta": {
    "name": "Stripi-Inspired",
    "description": "An inspired interpretation of Stripi's design language — a financial-infrastructure brand built on a deep navy ink, an electric indigo primary, and a recurring atmospheric gradient mesh that occupies the upper third of nearly every marketing page. The system pairs the proprietary Sohne family at thin (300) weights with negative letter-spacing for editorial-density display headlines, and uses tabular-figure body type where money and numerics matter. Buttons are tight-radius pills, cards live on near-white surfaces, and the dashboard track flips polarity to a familiar dark-app shell.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#533afd",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-deep": {
      "$value": "#4434d4",
      "$type": "color",
      "$description": "Use for the primary deep role."
    },
    "primary-press": {
      "$value": "#2e2b8c",
      "$type": "color",
      "$description": "Use for the primary press role."
    },
    "primary-soft": {
      "$value": "#665efd",
      "$type": "color",
      "$description": "Use for the primary soft role."
    },
    "primary-bg-subdued-hover": {
      "$value": "#b9b9f9",
      "$type": "color",
      "$description": "Use for the primary bg subdued hover role."
    },
    "brand-dark-900": {
      "$value": "#1c1e54",
      "$type": "color",
      "$description": "Use for the brand dark 900 role."
    },
    "ink": {
      "$value": "#0d253d",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-secondary": {
      "$value": "#273951",
      "$type": "color",
      "$description": "Use for the ink secondary role."
    },
    "ink-mute": {
      "$value": "#64748d",
      "$type": "color",
      "$description": "Use for the ink mute role."
    },
    "ink-mute-2": {
      "$value": "#61718a",
      "$type": "color",
      "$description": "Use for the ink mute 2 role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "canvas-soft": {
      "$value": "#f6f9fc",
      "$type": "color",
      "$description": "Use for the canvas soft role."
    },
    "canvas-cream": {
      "$value": "#f5e9d4",
      "$type": "color",
      "$description": "Use for the canvas cream role."
    },
    "hairline": {
      "$value": "#e3e8ee",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-input": {
      "$value": "#a8c3de",
      "$type": "color",
      "$description": "Use for the hairline input role."
    },
    "ruby": {
      "$value": "#ea2261",
      "$type": "color",
      "$description": "Use for the ruby role."
    },
    "magenta": {
      "$value": "#f96bee",
      "$type": "color",
      "$description": "Use for the magenta role."
    },
    "lemon": {
      "$value": "#9b6829",
      "$type": "color",
      "$description": "Use for the lemon role."
    },
    "shadow-blue": {
      "$value": "#003770",
      "$type": "color",
      "$description": "Use for the shadow blue role."
    }
  },
  "typography": {
    "display-xxl": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "56px",
        "fontWeight": 300,
        "lineHeight": 1.03,
        "letterSpacing": "-1.4px"
      },
      "$type": "typography",
      "$description": "Typography style for display xxl."
    },
    "display-xl": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "48px",
        "fontWeight": 300,
        "lineHeight": 1.15,
        "letterSpacing": "-0.96px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "32px",
        "fontWeight": 300,
        "lineHeight": 1.1,
        "letterSpacing": "-0.64px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "26px",
        "fontWeight": 300,
        "lineHeight": 1.12,
        "letterSpacing": "-0.26px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "22px",
        "fontWeight": 300,
        "lineHeight": 1.1,
        "letterSpacing": "-0.22px"
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "20px",
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": "-0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "heading-sm": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "18px",
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading sm."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "16px",
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "15px",
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-tabular": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "14px",
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": "-0.42px"
      },
      "$type": "typography",
      "$description": "Typography style for body tabular."
    },
    "button-md": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "button-sm": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": "-0.39px"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "micro": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "11px",
        "fontWeight": 300,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for micro."
    },
    "micro-cap": {
      "$value": {
        "fontFamily": "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif",
        "fontSize": "10px",
        "fontWeight": 400,
        "lineHeight": 1.15,
        "letterSpacing": "0.1px"
      },
      "$type": "typography",
      "$description": "Typography style for micro cap."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "huge": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step huge."
    }
  },
  "radius": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "pill": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius pill."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://stripe.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}