{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for HashiCorp",
  "meta": {
    "name": "HashiCorp",
    "description": "An enterprise-infrastructure marketing canvas built around a near-black ground (#000000) and a system of per-product accent colors — Terraform purple, Vault yellow, Consul pink, Waypoint cyan, Vagrant blue — that act as identity tokens rather than decorative palette. Display type is hashicorpSans set in 600/700 with tight 1.17–1.21 line-heights; body type runs the same family at 500 weight with relaxed 1.50–1.71 line-heights. Cards live as charcoal surfaces with 1px translucent gray borders; product showcase cards lift into per-product chromatic gradients. The system reads as confident, technical, and intentionally multi-product — every section quietly signals which HashiCorp tool it represents.",
    "theme": "dark"
  },
  "color": {
    "primary": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "accent-blue": {
      "$value": "#2b89ff",
      "$type": "color",
      "$description": "Use for the accent blue role."
    },
    "ink": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-muted": {
      "$value": "#b2b6bd",
      "$type": "color",
      "$description": "Use for the ink muted role."
    },
    "ink-subtle": {
      "$value": "#656a76",
      "$type": "color",
      "$description": "Use for the ink subtle role."
    },
    "canvas": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-1": {
      "$value": "#15181e",
      "$type": "color",
      "$description": "Use for the surface 1 role."
    },
    "surface-2": {
      "$value": "#1f232b",
      "$type": "color",
      "$description": "Use for the surface 2 role."
    },
    "surface-3": {
      "$value": "#3b3d45",
      "$type": "color",
      "$description": "Use for the surface 3 role."
    },
    "hairline": {
      "$value": "#3b3d45",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-soft": {
      "$value": "#252830",
      "$type": "color",
      "$description": "Use for the hairline soft role."
    },
    "inverse-canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the inverse canvas role."
    },
    "inverse-ink": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the inverse ink role."
    },
    "product-terraform": {
      "$value": "#7b42bc",
      "$type": "color",
      "$description": "Use for the product terraform role."
    },
    "product-terraform-bright": {
      "$value": "#911ced",
      "$type": "color",
      "$description": "Use for the product terraform bright role."
    },
    "product-vault": {
      "$value": "#ffcf25",
      "$type": "color",
      "$description": "Use for the product vault role."
    },
    "product-consul": {
      "$value": "#e62b1e",
      "$type": "color",
      "$description": "Use for the product consul role."
    },
    "product-waypoint": {
      "$value": "#14c6cb",
      "$type": "color",
      "$description": "Use for the product waypoint role."
    },
    "product-waypoint-deep": {
      "$value": "#12b6bb",
      "$type": "color",
      "$description": "Use for the product waypoint deep role."
    },
    "product-vagrant": {
      "$value": "#1868f2",
      "$type": "color",
      "$description": "Use for the product vagrant role."
    },
    "product-nomad": {
      "$value": "#00ca8e",
      "$type": "color",
      "$description": "Use for the product nomad role."
    },
    "product-boundary": {
      "$value": "#f24c53",
      "$type": "color",
      "$description": "Use for the product boundary role."
    },
    "amber-100": {
      "$value": "#fbeabf",
      "$type": "color",
      "$description": "Use for the amber 100 role."
    },
    "amber-200": {
      "$value": "#bb5a00",
      "$type": "color",
      "$description": "Use for the amber 200 role."
    },
    "blue-7": {
      "$value": "#101a59",
      "$type": "color",
      "$description": "Use for the blue 7 role."
    },
    "semantic-success": {
      "$value": "#00ca8e",
      "$type": "color",
      "$description": "Use for the semantic success role."
    },
    "semantic-warning": {
      "$value": "#ffcf25",
      "$type": "color",
      "$description": "Use for the semantic warning role."
    },
    "semantic-error": {
      "$value": "#e62b1e",
      "$type": "color",
      "$description": "Use for the semantic error role."
    },
    "semantic-visited": {
      "$value": "#a737ff",
      "$type": "color",
      "$description": "Use for the semantic visited role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "80px",
        "fontWeight": 700,
        "lineHeight": 1.17,
        "letterSpacing": "-2.5px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "56px",
        "fontWeight": 700,
        "lineHeight": 1.18,
        "letterSpacing": "-1.6px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "40px",
        "fontWeight": 600,
        "lineHeight": 1.19,
        "letterSpacing": "-1.0px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "headline": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "28px",
        "fontWeight": 600,
        "lineHeight": 1.21,
        "letterSpacing": "-0.6px"
      },
      "$type": "typography",
      "$description": "Typography style for headline."
    },
    "card-title": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "22px",
        "fontWeight": 600,
        "lineHeight": 1.18,
        "letterSpacing": "-0.4px"
      },
      "$type": "typography",
      "$description": "Typography style for card title."
    },
    "subhead": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "20px",
        "fontWeight": 600,
        "lineHeight": 1.35,
        "letterSpacing": "-0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for subhead."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "18px",
        "fontWeight": 500,
        "lineHeight": 1.69,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.71,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "13px",
        "fontWeight": 500,
        "lineHeight": 1.38,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "button": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "14px",
        "fontWeight": 600,
        "lineHeight": 1.29,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button."
    },
    "eyebrow": {
      "$value": {
        "fontFamily": "hashicorpSans",
        "fontSize": "12px",
        "fontWeight": 600,
        "lineHeight": 1.23,
        "letterSpacing": "0.6px"
      },
      "$type": "typography",
      "$description": "Typography style for eyebrow."
    }
  },
  "spacing": {
    "hair": {
      "$value": "1px",
      "$type": "dimension",
      "$description": "Spacing step hair."
    },
    "xxs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "xxl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Border radius xxl."
    },
    "pill": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.hashicorp.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}