Stripe

/* Stripe public design reference tokens. */
/* Source: https://stripe.com */
@theme {
  --color-slate-ink: #0a2540;
  --color-cloud: #f6f9fc;
  --color-white: #ffffff;
  --color-violet: #635bff;
  --color-sky: #00d4ff;
  --color-coral: #ff7a59;
  --font-inter: Inter, ui-sans-serif, system-ui, sans-serif;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --radius-default: 8px;
  --radius-controls: 6px;
  --radius-panels: 12px;
  --shadow-elevated: rgba(50,50,93,0.15) 0px 15px 35px, rgba(0,0,0,0.08) 0px 5px 15px;
}

/* Stripe public design reference tokens. */
/* Source: https://stripe.com */
:root {
  --color-slate-ink: #0a2540;
  --color-cloud: #f6f9fc;
  --color-white: #ffffff;
  --color-violet: #635bff;
  --color-sky: #00d4ff;
  --color-coral: #ff7a59;
  --font-inter: Inter, ui-sans-serif, system-ui, sans-serif;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --radius-default: 8px;
  --radius-controls: 6px;
  --radius-panels: 12px;
  --shadow-elevated: rgba(50,50,93,0.15) 0px 15px 35px, rgba(0,0,0,0.08) 0px 5px 15px;
}

{
  "name": "Stripe",
  "id": "stripe",
  "sourceUrl": "https://stripe.com",
  "capturedAt": "2026-04-29T15:05:00.000Z",
  "color": {
    "colorSlateInk": {
      "$type": "color",
      "$value": "#0a2540",
      "$description": "Headings and technical copy.",
      "group": "neutral"
    },
    "colorCloud": {
      "$type": "color",
      "$value": "#f6f9fc",
      "$description": "Secondary page surface.",
      "group": "surface"
    },
    "colorWhite": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Cards and document surfaces.",
      "group": "surface"
    },
    "colorViolet": {
      "$type": "color",
      "$value": "#635bff",
      "$description": "Primary brand action.",
      "group": "brand"
    },
    "colorSky": {
      "$type": "color",
      "$value": "#00d4ff",
      "$description": "Gradient and diagram highlight.",
      "group": "accent"
    },
    "colorCoral": {
      "$type": "color",
      "$value": "#ff7a59",
      "$description": "Warm gradient stop and emphasis.",
      "group": "accent"
    }
  },
  "typography": {
    "fontInter": {
      "$type": "fontFamily",
      "$value": "Inter, ui-sans-serif, system-ui, sans-serif",
      "$description": "Single family for dense product UI, labels, tables, and command surfaces."
    }
  },
  "spacing": {
    "spacing4": {
      "$type": "dimension",
      "$value": "4px"
    },
    "spacing8": {
      "$type": "dimension",
      "$value": "8px"
    },
    "spacing12": {
      "$type": "dimension",
      "$value": "12px"
    },
    "spacing16": {
      "$type": "dimension",
      "$value": "16px"
    },
    "spacing24": {
      "$type": "dimension",
      "$value": "24px"
    },
    "spacing32": {
      "$type": "dimension",
      "$value": "32px"
    },
    "spacing48": {
      "$type": "dimension",
      "$value": "48px"
    },
    "spacing64": {
      "$type": "dimension",
      "$value": "64px"
    }
  },
  "radius": {
    "default": {
      "$type": "dimension",
      "$value": "8px"
    },
    "controls": {
      "$type": "dimension",
      "$value": "6px"
    },
    "panels": {
      "$type": "dimension",
      "$value": "12px"
    }
  },
  "shadow": {
    "shadowElevated": {
      "$type": "shadow",
      "$value": "rgba(50,50,93,0.15) 0px 15px 35px, rgba(0,0,0,0.08) 0px 5px 15px"
    }
  }
}

{
  "id": "stripe",
  "name": "Stripe",
  "theme": "light",
  "industry": "payments",
  "summary": "Clean technical canvas with gradient accents, product screenshots, and developer-first hierarchy.",
  "technicalSummary": "A high-polish technical marketing system with white surfaces, cool slate type, gradient accents, and code/product proof blocks. Useful for API products, agent SDKs, and developer onboarding.",
  "source": {
    "name": "Public source",
    "url": "https://stripe.com",
    "kind": "public-design-reference"
  },
  "sourceName": "Public source",
  "sourceUrl": "https://stripe.com",
  "originalSiteUrl": "https://stripe.com",
  "capturedAt": "2026-04-29T15:05:00.000Z",
  "licenseNote": "Publicly visible design reference metadata. Use as inspiration and token guidance, not as copied brand assets.",
  "tags": [
    "payments",
    "light",
    "developer",
    "gradient",
    "api"
  ],
  "tokenCount": 19,
  "colors": [
    {
      "name": "Slate Ink",
      "value": "#0a2540",
      "token": "--color-slate-ink",
      "group": "neutral",
      "role": "Headings and technical copy."
    },
    {
      "name": "Cloud",
      "value": "#f6f9fc",
      "token": "--color-cloud",
      "group": "surface",
      "role": "Secondary page surface."
    },
    {
      "name": "White",
      "value": "#ffffff",
      "token": "--color-white",
      "group": "surface",
      "role": "Cards and document surfaces."
    },
    {
      "name": "Violet",
      "value": "#635bff",
      "token": "--color-violet",
      "group": "brand",
      "role": "Primary brand action."
    },
    {
      "name": "Sky",
      "value": "#00d4ff",
      "token": "--color-sky",
      "group": "accent",
      "role": "Gradient and diagram highlight."
    },
    {
      "name": "Coral",
      "value": "#ff7a59",
      "token": "--color-coral",
      "group": "accent",
      "role": "Warm gradient stop and emphasis."
    }
  ],
  "typography": [
    {
      "name": "Inter",
      "token": "--font-inter",
      "family": "Inter, ui-sans-serif, system-ui, sans-serif",
      "role": "Single family for dense product UI, labels, tables, and command surfaces.",
      "weights": [
        "400",
        "500",
        "600"
      ],
      "sizes": [
        "12px",
        "13px",
        "14px",
        "16px",
        "20px",
        "40px"
      ],
      "lineHeights": [
        "1.2",
        "1.4",
        "1.5"
      ]
    }
  ],
  "spacing": {
    "baseUnit": "4px",
    "density": "comfortable",
    "scale": [
      {
        "name": "4",
        "value": "4px",
        "token": "--spacing-4"
      },
      {
        "name": "8",
        "value": "8px",
        "token": "--spacing-8"
      },
      {
        "name": "12",
        "value": "12px",
        "token": "--spacing-12"
      },
      {
        "name": "16",
        "value": "16px",
        "token": "--spacing-16"
      },
      {
        "name": "24",
        "value": "24px",
        "token": "--spacing-24"
      },
      {
        "name": "32",
        "value": "32px",
        "token": "--spacing-32"
      },
      {
        "name": "48",
        "value": "48px",
        "token": "--spacing-48"
      },
      {
        "name": "64",
        "value": "64px",
        "token": "--spacing-64"
      }
    ]
  },
  "radius": {
    "default": "8px",
    "controls": "6px",
    "panels": "12px"
  },
  "shadows": [
    {
      "name": "elevated",
      "value": "rgba(50,50,93,0.15) 0px 15px 35px, rgba(0,0,0,0.08) 0px 5px 15px",
      "token": "--shadow-elevated"
    }
  ],
  "components": [
    {
      "name": "API proof card",
      "role": "Content",
      "technicalNotes": [
        "Code block paired with product UI",
        "cool slate text",
        "gradient accent edge"
      ]
    },
    {
      "name": "CTA group",
      "role": "Action",
      "technicalNotes": [
        "Primary filled button",
        "secondary link",
        "compact inline arrow"
      ]
    }
  ],
  "guidelines": {
    "do": [
      "Pair benefits with technical proof.",
      "Use gradients as accents, not backgrounds for every panel.",
      "Keep code snippets readable."
    ],
    "dont": [
      "Do not flatten all surfaces.",
      "Do not use brand gradients without structure.",
      "Do not bury developer proof below the fold."
    ]
  },
  "exports": {
    "htmlUrl": "https://memoire.cv/references/stripe",
    "jsonUrl": "https://memoire.cv/references/stripe.json",
    "designMdUrl": "https://memoire.cv/references/stripe/design.md",
    "tokensJsonUrl": "https://memoire.cv/references/stripe/tokens.json",
    "tailwindV4Url": "https://memoire.cv/references/stripe/tailwind-v4.css"
  }
}