{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Mastercard",
  "meta": {
    "name": "Mastercard",
    "description": "Mastercard's experience reads like a warm, editorial magazine built from soft stone and signal orange. The canvas is a muted putty-cream (`#F3F0EE`) — not white, not gray, but a color that feels like the paper of a premium annual report. On top of that canvas, everything that matters is shaped like a stadium, a pill, or a perfect circle. The dominant visual gesture is the **oversized radius**: heroes carry 40-point corners, cards go fully pill-shaped, service images are cropped into circular orbits, and buttons either complete the pill or fit snugly at 20 points. There are almost no sharp corners anywhere on the page.",
    "theme": "light"
  },
  "color": {
    "color-1": {
      "$value": "#F3F0EE",
      "$type": "color",
      "$description": "Use for the color 1 role."
    },
    "warm-cream-canvas-f3f0ee-replaces-traditional-white-every-surface-is-tinted-never-sterile-extreme-border-radius-as-design-language-40px-99px-1000px-dominate-anything-square-is-a-cookie-banner-third-party-circular-image-portraits-with-attached-white-satellite-ctas-and-traced-orange-orbital-paths-ghost-watermark-headlines-cream-on-cream-text-at-heading-scale-layered-behind-circle-portraits-black-primary-ctas-with-20px-radius-in-the-body-the-cookie-banner-orange-is-kept-to-consent-flows-floating-pill-shaped-navigation-that-docks-below-the-viewport-top-with-rounded-shoulders-eyebrow-labels-with-a-tiny-accent-dot-uppercase-bold-tracking-used-as-the-section-category-signal-dark-warm-black-footer-141413-with-four-column-link-layout-and-large-conversational-headline-2-color-palette-roles-primary": {
      "$value": "#EB001B",
      "$type": "color",
      "$description": "Use for the warm cream canvas f3f0ee replaces traditional white every surface is tinted never sterile extreme border radius as design language 40px 99px 1000px dominate anything square is a cookie banner third party circular image portraits with attached white satellite ctas and traced orange orbital paths ghost watermark headlines cream on cream text at heading scale layered behind circle portraits black primary ctas with 20px radius in the body the cookie banner orange is kept to consent flows floating pill shaped navigation that docks below the viewport top with rounded shoulders eyebrow labels with a tiny accent dot uppercase bold tracking used as the section category signal dark warm black footer 141413 with four column link layout and large conversational headline 2 color palette roles primary role."
    },
    "mastercard-yellow": {
      "$value": "#F79E1B",
      "$type": "color",
      "$description": "Use for the mastercard yellow role."
    },
    "ink-black": {
      "$value": "#141413",
      "$type": "color",
      "$description": "Use for the ink black role."
    },
    "signal-orange": {
      "$value": "#CF4500",
      "$type": "color",
      "$description": "Use for the signal orange role."
    },
    "light-signal-orange": {
      "$value": "#F37338",
      "$type": "color",
      "$description": "Use for the light signal orange role."
    },
    "clay-brown": {
      "$value": "#9A3A0A",
      "$type": "color",
      "$description": "Use for the clay brown role."
    },
    "lifted-cream": {
      "$value": "#FCFBFA",
      "$type": "color",
      "$description": "Use for the lifted cream role."
    },
    "white": {
      "$value": "#FFFFFF",
      "$type": "color",
      "$description": "Use for the white role."
    },
    "soft-bone": {
      "$value": "#F4F4F4",
      "$type": "color",
      "$description": "Use for the soft bone role."
    },
    "charcoal": {
      "$value": "#262627",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "slate-gray": {
      "$value": "#696969",
      "$type": "color",
      "$description": "Use for the slate gray role."
    },
    "granite": {
      "$value": "#555555",
      "$type": "color",
      "$description": "Use for the granite role."
    },
    "graphite": {
      "$value": "#565656",
      "$type": "color",
      "$description": "Use for the graphite role."
    },
    "dust-taupe": {
      "$value": "#D1CDC7",
      "$type": "color",
      "$description": "Use for the dust taupe role."
    },
    "link-blue": {
      "$value": "#3860BE",
      "$type": "color",
      "$description": "Use for the link blue role."
    },
    "color-17": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the color 17 role."
    },
    "color-18": {
      "$value": "#2B2B2B",
      "$type": "color",
      "$description": "Use for the color 18 role."
    },
    "color-19": {
      "$value": "#E8E2DA",
      "$type": "color",
      "$description": "Use for the color 19 role."
    },
    "color-20": {
      "$value": "rgba(255,255,255,0.4)",
      "$type": "color",
      "$description": "Use for the color 20 role."
    }
  },
  "typography": {
    "h1-hero": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "64px",
        "fontWeight": 500,
        "lineHeight": "64px",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for h1 hero."
    },
    "h2-section": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "36px",
        "fontWeight": 500,
        "lineHeight": "44px",
        "letterSpacing": "44px"
      },
      "$type": "typography",
      "$description": "Typography style for h2 section."
    },
    "h3-card-title": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "24px",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for h3 card title."
    },
    "h4-subhead": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 700,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for h4 subhead."
    },
    "eyebrow-h5": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 700,
        "lineHeight": "14px",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for eyebrow h5."
    },
    "body-paragraph": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 450,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body paragraph."
    },
    "nav-link-button-label": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": "16px",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for nav link button label."
    },
    "footer-link": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 450,
        "lineHeight": 1.5,
        "letterSpacing": "~20px"
      },
      "$type": "typography",
      "$description": "Typography style for footer link."
    },
    "footer-column-header": {
      "$value": {
        "fontFamily": "Inter, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "12–14px"
      },
      "$type": "typography",
      "$description": "Typography style for footer column header."
    },
    "20px": {
      "$value": {
        "fontFamily": "Primary and secondary body CTAs (the signature button radius)",
        "fontSize": "20px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for 20px."
    },
    "24px": {
      "$value": {
        "fontFamily": "Consent/orange pill buttons, modal inner chips",
        "fontSize": "24px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for 24px."
    },
    "40px": {
      "$value": {
        "fontFamily": "Hero media frames, large section container corners, H2 pill labels",
        "fontSize": "40px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for 40px."
    }
  },
  "spacing": {
    "4": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step 4."
    },
    "8": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step 8."
    },
    "12": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step 12."
    },
    "16": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step 16."
    },
    "20": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing step 20."
    },
    "24": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step 24."
    },
    "32": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step 32."
    },
    "40": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing step 40."
    },
    "48": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 48."
    },
    "64": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step 64."
    },
    "80": {
      "$value": "80px",
      "$type": "dimension",
      "$description": "Spacing step 80."
    },
    "128": {
      "$value": "128px",
      "$type": "dimension",
      "$description": "Spacing step 128."
    }
  },
  "radius": {
    "sm": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "9px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "pill": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius pill."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.mastercard.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}