{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Pinterest",
  "meta": {
    "name": "Pinterest",
    "description": "A photography-first discovery system organized around the Pinterest Red CTA, the masonry pin grid, and a soft warm-cream chrome that gets out of the imagery's way. The home page is a content-discovery tool wearing the chrome of a magazine publisher: 70px display headlines, friendly Pin Sans typography, fully-rounded pill buttons (16px) on a cream-tinted neutral palette, and a sticky red \"Sign up\" CTA that anchors every viewport. Pin imagery is the system's load-bearing visual element — square, portrait, and landscape pins tile in a column-based masonry grid where each tile is a fully-rounded 16px-radius card, separated by tight 8px gutters. The chrome is otherwise quiet: warm grays, true whites, and a single saturated red — no decorative gradients, no atmospheric backgrounds, no shadows beyond a soft modal scrim.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#e60023",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "primary-pressed": {
      "$value": "#cc001f",
      "$type": "color",
      "$description": "Use for the primary pressed role."
    },
    "ink": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-soft": {
      "$value": "#211922",
      "$type": "color",
      "$description": "Use for the ink soft role."
    },
    "body": {
      "$value": "#33332e",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "charcoal": {
      "$value": "#262622",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "mute": {
      "$value": "#62625b",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "ash": {
      "$value": "#91918c",
      "$type": "color",
      "$description": "Use for the ash role."
    },
    "stone": {
      "$value": "#c8c8c1",
      "$type": "color",
      "$description": "Use for the stone role."
    },
    "hairline": {
      "$value": "#dadad3",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-soft": {
      "$value": "#e5e5e0",
      "$type": "color",
      "$description": "Use for the hairline soft role."
    },
    "on-secondary": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the on secondary role."
    },
    "secondary-bg": {
      "$value": "#e5e5e0",
      "$type": "color",
      "$description": "Use for the secondary bg role."
    },
    "secondary-pressed": {
      "$value": "#c8c8c1",
      "$type": "color",
      "$description": "Use for the secondary pressed role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-soft": {
      "$value": "#fbfbf9",
      "$type": "color",
      "$description": "Use for the surface soft role."
    },
    "surface-card": {
      "$value": "#f6f6f3",
      "$type": "color",
      "$description": "Use for the surface card role."
    },
    "surface-elevated": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the surface elevated role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "on-dark-mute": {
      "$value": "rgba(255,255,255,0.7)",
      "$type": "color",
      "$description": "Use for the on dark mute role."
    },
    "surface-dark": {
      "$value": "#262622",
      "$type": "color",
      "$description": "Use for the surface dark role."
    },
    "focus-outer": {
      "$value": "#435ee5",
      "$type": "color",
      "$description": "Use for the focus outer role."
    },
    "focus-inner": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the focus inner role."
    },
    "accent-pressed-blue": {
      "$value": "#617bff",
      "$type": "color",
      "$description": "Use for the accent pressed blue role."
    },
    "accent-purple": {
      "$value": "#7e238b",
      "$type": "color",
      "$description": "Use for the accent purple role."
    },
    "accent-purple-deep": {
      "$value": "#6845ab",
      "$type": "color",
      "$description": "Use for the accent purple deep role."
    },
    "success-deep": {
      "$value": "#103c25",
      "$type": "color",
      "$description": "Use for the success deep role."
    },
    "success-pale": {
      "$value": "#c7f0da",
      "$type": "color",
      "$description": "Use for the success pale role."
    },
    "error": {
      "$value": "#9e0a0a",
      "$type": "color",
      "$description": "Use for the error role."
    },
    "error-deep": {
      "$value": "#cc001f",
      "$type": "color",
      "$description": "Use for the error deep role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "70px",
        "fontWeight": 600,
        "lineHeight": 1.1,
        "letterSpacing": "-1.2px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "44px",
        "fontWeight": 700,
        "lineHeight": 1.15,
        "letterSpacing": "-0.8px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "heading-xl": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "28px",
        "fontWeight": 700,
        "lineHeight": 1.2,
        "letterSpacing": "-1.2px"
      },
      "$type": "typography",
      "$description": "Typography style for heading xl."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "22px",
        "fontWeight": 600,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "18px",
        "fontWeight": 600,
        "lineHeight": 1.3,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-strong": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body strong."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "body-sm-strong": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "14px",
        "fontWeight": 700,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm strong."
    },
    "caption-md": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption md."
    },
    "caption-sm": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption sm."
    },
    "link-md": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for link md."
    },
    "button-md": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "14px",
        "fontWeight": 700,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "button-sm": {
      "$value": {
        "fontFamily": "Pin Sans",
        "fontSize": "12px",
        "fontWeight": 700,
        "lineHeight": 1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button sm."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "6px",
      "$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."
    },
    "section": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.pinterest.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}