{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Kraken",
  "meta": {
    "name": "Kraken",
    "description": "Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.",
    "theme": "light"
  },
  "color": {
    "color-1": {
      "$value": "#7132f5",
      "$type": "color",
      "$description": "Use for the color 1 role."
    },
    "color-2": {
      "$value": "#5741d8",
      "$type": "color",
      "$description": "Use for the color 2 role."
    },
    "color-3": {
      "$value": "#5b1ecf",
      "$type": "color",
      "$description": "Use for the color 3 role."
    },
    "purple-subtle": {
      "$value": "rgba(133,91,251,0.16)",
      "$type": "color",
      "$description": "Use for the purple subtle role."
    },
    "near-black": {
      "$value": "#101114",
      "$type": "color",
      "$description": "Use for the near black role."
    },
    "cool-gray": {
      "$value": "#686b82",
      "$type": "color",
      "$description": "Use for the cool gray role."
    },
    "silver-blue": {
      "$value": "#9497a9",
      "$type": "color",
      "$description": "Use for the silver blue role."
    },
    "white": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the white role."
    },
    "border-gray": {
      "$value": "#dedee5",
      "$type": "color",
      "$description": "Use for the border gray role."
    },
    "green": {
      "$value": "#149e61",
      "$type": "color",
      "$description": "Use for the green role."
    },
    "green-dark": {
      "$value": "#026b3f",
      "$type": "color",
      "$description": "Use for the green dark role."
    },
    "color-12": {
      "$value": "rgba(148,151,169,0.08)",
      "$type": "color",
      "$description": "Use for the color 12 role."
    },
    "color-13": {
      "$value": "rgba(20,158,97,0.16)",
      "$type": "color",
      "$description": "Use for the color 13 role."
    },
    "color-14": {
      "$value": "rgba(104,107,130,0.12)",
      "$type": "color",
      "$description": "Use for the color 14 role."
    },
    "color-15": {
      "$value": "#484b5e",
      "$type": "color",
      "$description": "Use for the color 15 role."
    }
  },
  "typography": {
    "display-hero": {
      "$value": {
        "fontFamily": "Kraken-Brand",
        "fontSize": "48px",
        "fontWeight": 700,
        "lineHeight": "1.17",
        "letterSpacing": "-1px"
      },
      "$type": "typography",
      "$description": "Typography style for display hero."
    },
    "section-heading": {
      "$value": {
        "fontFamily": "Kraken-Brand",
        "fontSize": "36px",
        "fontWeight": 700,
        "lineHeight": "1.22",
        "letterSpacing": "-0.5px"
      },
      "$type": "typography",
      "$description": "Typography style for section heading."
    },
    "sub-heading": {
      "$value": {
        "fontFamily": "Kraken-Brand",
        "fontSize": "28px",
        "fontWeight": 700,
        "lineHeight": "1.29",
        "letterSpacing": "-0.5px"
      },
      "$type": "typography",
      "$description": "Typography style for sub heading."
    },
    "feature-title": {
      "$value": {
        "fontFamily": "Kraken-Product",
        "fontSize": "22px",
        "fontWeight": 600,
        "lineHeight": "1.20",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for feature title."
    },
    "body": {
      "$value": {
        "fontFamily": "Kraken-Product",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": "1.38",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body."
    },
    "body-medium": {
      "$value": {
        "fontFamily": "Kraken-Product",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": "1.38",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body medium."
    },
    "button": {
      "$value": {
        "fontFamily": "Kraken-Product",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": "1.38",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button."
    },
    "caption": {
      "$value": {
        "fontFamily": "Kraken-Product",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "small": {
      "$value": {
        "fontFamily": "Kraken-Product",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": "1.33",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for small."
    },
    "micro": {
      "$value": {
        "fontFamily": "Kraken-Product",
        "fontSize": "7px",
        "fontWeight": 500,
        "lineHeight": "1.00",
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for micro."
    }
  },
  "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."
    },
    "48": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 48."
    }
  },
  "radius": {
    "sm": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "9px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius xl."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.kraken.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}