{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Raycast",
  "meta": {
    "name": "Raycast",
    "description": "Raycast's marketing system reads like an extended product screenshot. The chrome IS the in-product chrome at marketing scale: pure-near-black canvas, hairline 1px borders, command-palette-style cards, Inter typography with the ss03 stylistic set enabled site-wide, white CTA pill, and a small set of saturated category accent colors (yellow / red / green / blue) reserved for extension and feature illustrations. Section rhythm is generous (~96px) but the page never breaks tonal continuity — the whole site sits in one continuous dark mode.",
    "theme": "dark"
  },
  "color": {
    "primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-pressed": {
      "$value": "#e8e8e8",
      "$type": "color",
      "$description": "Use for the primary pressed role."
    },
    "on-primary": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#f4f4f6",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "#cdcdcd",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "charcoal": {
      "$value": "#d3d3d4",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "mute": {
      "$value": "#9c9c9d",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "ash": {
      "$value": "#6a6b6c",
      "$type": "color",
      "$description": "Use for the ash role."
    },
    "stone": {
      "$value": "#434345",
      "$type": "color",
      "$description": "Use for the stone role."
    },
    "on-dark": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on dark role."
    },
    "on-dark-mute": {
      "$value": "rgba(255,255,255,0.72)",
      "$type": "color",
      "$description": "Use for the on dark mute role."
    },
    "canvas": {
      "$value": "#07080a",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface": {
      "$value": "#0d0d0d",
      "$type": "color",
      "$description": "Use for the surface role."
    },
    "surface-elevated": {
      "$value": "#101111",
      "$type": "color",
      "$description": "Use for the surface elevated role."
    },
    "surface-card": {
      "$value": "#121212",
      "$type": "color",
      "$description": "Use for the surface card role."
    },
    "button-fg": {
      "$value": "#18191a",
      "$type": "color",
      "$description": "Use for the button fg role."
    },
    "hairline": {
      "$value": "#242728",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-soft": {
      "$value": "rgba(255,255,255,0.08)",
      "$type": "color",
      "$description": "Use for the hairline soft role."
    },
    "hairline-strong": {
      "$value": "rgba(255,255,255,0.16)",
      "$type": "color",
      "$description": "Use for the hairline strong role."
    },
    "accent-blue": {
      "$value": "#57c1ff",
      "$type": "color",
      "$description": "Use for the accent blue role."
    },
    "accent-blue-soft": {
      "$value": "rgba(87,193,255,0.15)",
      "$type": "color",
      "$description": "Use for the accent blue soft role."
    },
    "accent-red": {
      "$value": "#ff6161",
      "$type": "color",
      "$description": "Use for the accent red role."
    },
    "accent-red-soft": {
      "$value": "rgba(255,97,97,0.15)",
      "$type": "color",
      "$description": "Use for the accent red soft role."
    },
    "accent-green": {
      "$value": "#59d499",
      "$type": "color",
      "$description": "Use for the accent green role."
    },
    "accent-green-soft": {
      "$value": "rgba(89,212,153,0.15)",
      "$type": "color",
      "$description": "Use for the accent green soft role."
    },
    "accent-yellow": {
      "$value": "#ffc533",
      "$type": "color",
      "$description": "Use for the accent yellow role."
    },
    "accent-yellow-soft": {
      "$value": "rgba(255,197,51,0.15)",
      "$type": "color",
      "$description": "Use for the accent yellow soft role."
    },
    "hero-stripe-start": {
      "$value": "#ff5757",
      "$type": "color",
      "$description": "Use for the hero stripe start role."
    },
    "hero-stripe-end": {
      "$value": "#a1131a",
      "$type": "color",
      "$description": "Use for the hero stripe end role."
    },
    "key-bg-start": {
      "$value": "#121212",
      "$type": "color",
      "$description": "Use for the key bg start role."
    },
    "key-bg-end": {
      "$value": "#0d0d0d",
      "$type": "color",
      "$description": "Use for the key bg end role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "64px",
        "fontWeight": 600,
        "lineHeight": 1.1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "56px",
        "fontWeight": 500,
        "lineHeight": 1.17,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "heading-xl": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "24px",
        "fontWeight": 500,
        "lineHeight": 1.6,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for heading xl."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "22px",
        "fontWeight": 500,
        "lineHeight": 1.15,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "20px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "heading-sm": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "18px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for heading sm."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-strong": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for body strong."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "body-sm-strong": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.6,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for body sm strong."
    },
    "caption-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": "0.1px"
      },
      "$type": "typography",
      "$description": "Typography style for caption md."
    },
    "caption-sm": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0.4px"
      },
      "$type": "typography",
      "$description": "Typography style for caption sm."
    },
    "link-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0.3px"
      },
      "$type": "typography",
      "$description": "Typography style for link md."
    },
    "button-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.6,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$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": "96px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "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": "10px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.raycast.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}