{
  "id": "stripe",
  "version": "1.0.0",
  "name": "Stripe",
  "description": "Stripe is a financial-infrastructure platform for the internet — payments, billing, treasury, identity, and capital APIs used by millions of businesses worldwide. The brand voice is engineer- facing, plain-spoken, and unusually polished for the fintech category. Visually, Stripe is anchored on a single signature Stripe Purple (#635BFF) against deep-navy Slate text, near-white Fog canvases, and the brand's characteristic light-source gradient surfaces. Typography is Söhne (Klim Type Foundry), used across stripe.com and Stripe Press as the proprietary brand face.\n",
  "provenance": {
    "source": "https://stripe.com/newsroom/brand-assets",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "Stripe, Inc. — visual identity captured from the deployed stylesheet on stripe.com and the Stripe Newsroom brand assets page. All Stripe marks, logos, and brand elements are subject to Stripe's Marks Usage Agreement at stripe.com/marks/legal.\n",
    "importedDate": "2026-05-17",
    "notes": "Stripe's brand font is Söhne (sohne-var on stripe.com), licensed from Klim Type Foundry — not \"Stripe Sans\" as sometimes reported by third-party trackers. Söhne is a commercial proprietary face; this atom references Inter@1 as the open-source rendering substitute and notes the proprietary primary in this provenance block.\n"
  },
  "tags": [
    "stripe",
    "fintech",
    "payments",
    "developer-tools",
    "brand"
  ],
  "palette": {
    "ref": "stripe@1.0.0",
    "swatches": [
      {
        "id": "stripe-purple",
        "name": "Stripe Purple",
        "value": "#635BFF",
        "description": "The signature brand color. Primary buttons, links, gradient anchors.",
        "aliases": []
      },
      {
        "id": "stripe-purple-pressed",
        "name": "Stripe Purple Pressed",
        "value": "#533AFD",
        "description": "Active / pressed state of the primary purple.",
        "aliases": []
      },
      {
        "id": "stripe-purple-soft",
        "name": "Stripe Purple Soft",
        "value": "#E8E9FF",
        "description": "Tinted backgrounds, badges, on-brand call-out cards.",
        "aliases": []
      },
      {
        "id": "stripe-slate-100",
        "name": "Stripe Slate 100",
        "value": "#061B31",
        "description": "Deepest slate — large headings on light surfaces.",
        "aliases": []
      },
      {
        "id": "stripe-slate-90",
        "name": "Stripe Slate 90",
        "value": "#0A2540",
        "description": "Standard heading slate, dark module backgrounds.",
        "aliases": []
      },
      {
        "id": "stripe-slate-70",
        "name": "Stripe Slate 70",
        "value": "#3C4F69",
        "description": "Secondary heading / large body text.",
        "aliases": []
      },
      {
        "id": "stripe-slate-50",
        "name": "Stripe Slate 50",
        "value": "#425466",
        "description": "Default body-text gray-blue.",
        "aliases": []
      },
      {
        "id": "stripe-slate-30",
        "name": "Stripe Slate 30",
        "value": "#667691",
        "description": "Muted text and tertiary labels.",
        "aliases": []
      },
      {
        "id": "stripe-white",
        "name": "Stripe White",
        "value": "#FFFFFF",
        "description": "Pure white surface.",
        "aliases": []
      },
      {
        "id": "stripe-fog-0",
        "name": "Stripe Fog 0 (canvas)",
        "value": "#F6F9FC",
        "description": "Page canvas — the off-white Stripe uses behind content.",
        "aliases": []
      },
      {
        "id": "stripe-fog-1",
        "name": "Stripe Fog 1",
        "value": "#E5EDF5",
        "description": "Subtle dividers and elevated-surface tints.",
        "aliases": []
      },
      {
        "id": "stripe-fog-2",
        "name": "Stripe Fog 2",
        "value": "#CFD7DF",
        "description": "Border / hairline.",
        "aliases": []
      },
      {
        "id": "stripe-green",
        "name": "Stripe Green",
        "value": "#2CA25E",
        "description": "Success / confirmation green.",
        "aliases": []
      },
      {
        "id": "stripe-orange",
        "name": "Stripe Orange",
        "value": "#E17A38",
        "description": "Warm accent used in gradient surfaces.",
        "aliases": []
      },
      {
        "id": "stripe-magenta",
        "name": "Stripe Magenta",
        "value": "#F44BCC",
        "description": "Hot accent — appears in Stripe's brand gradients.",
        "aliases": []
      },
      {
        "id": "stripe-pink",
        "name": "Stripe Pink",
        "value": "#FF5996",
        "description": "Light pink accent used in illustration.",
        "aliases": []
      },
      {
        "id": "stripe-red",
        "name": "Stripe Red",
        "value": "#EA2261",
        "description": "Error / destructive action.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "stripe-fog-0",
          "surface": "stripe-white",
          "surface-elevated": "stripe-white",
          "text-primary": "stripe-slate-90",
          "text-secondary": "stripe-slate-50",
          "text-tertiary": "stripe-slate-30",
          "primary": "stripe-purple",
          "primary-hover": "stripe-purple-pressed",
          "accent": "stripe-purple",
          "accent-hover": "stripe-purple-pressed",
          "warning": "stripe-orange",
          "warning-hover": "stripe-orange",
          "error": "stripe-red",
          "success": "stripe-green",
          "border": "stripe-fog-2"
        }
      },
      "dark": {
        "roles": {
          "background": "stripe-slate-100",
          "surface": "stripe-slate-90",
          "surface-elevated": "stripe-slate-70",
          "text-primary": "stripe-white",
          "text-secondary": "stripe-fog-1",
          "text-tertiary": "stripe-slate-30",
          "primary": "stripe-purple",
          "primary-hover": "stripe-purple-soft",
          "accent": "stripe-purple",
          "accent-hover": "stripe-purple-soft",
          "warning": "stripe-orange",
          "warning-hover": "stripe-orange",
          "error": "stripe-pink",
          "success": "stripe-green",
          "border": "stripe-slate-70"
        }
      }
    }
  },
  "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": {
      "primary": "stripe-purple",
      "primary-hover": "stripe-purple-pressed",
      "accent": "stripe-purple",
      "accent-hover": "stripe-purple-pressed",
      "success": "stripe-green",
      "warning": "stripe-orange",
      "error": "stripe-red",
      "text-primary-light": "stripe-slate-90",
      "text-primary-dark": "stripe-white",
      "background-light": "stripe-fog-0",
      "background-dark": "stripe-slate-100",
      "surface-light": "stripe-white",
      "surface-dark": "stripe-slate-90"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "Stripe Slate 90 (#0A2540) on Fog 0 (#F6F9FC) is ~14:1; well above AA. White on Slate 100 (#061B31) is ~15:1. Both directions clear AA with substantial margin.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "colorChoice",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Stripe Purple (#635BFF) is the signature brand color and the only token that may carry \"primary action\" semantics. stripe-purple-soft is a tinted-background variant; magenta and pink appear in illustration gradients only and must not be used as primary buttons or links.\n",
      "allowed": [
        "stripe-purple",
        "stripe-purple-pressed"
      ],
      "forbidden": [
        "stripe-purple-soft",
        "stripe-magenta",
        "stripe-pink"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "Stripe's Marks Usage Agreement forbids modifying or altering the Stripe word mark \"in any way\" and prohibits use that implies endorsement. Apply the official monochrome variants on appropriate light/dark surfaces; do not derive new treatments.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "outlined",
        "on-busy-photo"
      ]
    },
    {
      "type": "enumMembership",
      "target": "typography.heading.fontWeight",
      "severity": "warning",
      "rationale": "Stripe's marketing surfaces use Söhne Book / Regular (400), Medium (500), and Semibold (600). Heavier weights appear in brand wordmarks only, not in body or display headings.\n",
      "allowed": [
        "400",
        "500",
        "600"
      ]
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.accent",
      "severity": "error",
      "rationale": "Stripe Purple is the brand identity color, not an alert color. Destructive states use stripe-red; warnings use stripe-orange. Reusing the brand purple for destruction breaks the established semantic mapping.\n",
      "forbiddenContexts": [
        "error-state",
        "destructive-action"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Stripe Purple (#635BFF) on Fog 0 reaches ~4.6:1 — at the AA threshold for normal text. Buttons using the purple as a 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": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "The brand pairs purple with neutrals (white, fog, slate). Magenta and pink are reserved for illustration / gradient surfaces and clash with the purple in adjacent UI placements.\n",
      "pairsWith": [
        "stripe-white",
        "stripe-fog-0",
        "stripe-slate-100"
      ],
      "doesNotPairWith": [
        "stripe-magenta",
        "stripe-pink"
      ]
    }
  ]
}