{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Vercel",
  "meta": {
    "name": "Vercel",
    "description": "An inspired interpretation of Vercel's design language — a developer-platform brand whose surface is a stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient (cyan / blue / magenta / amber) that acts as the entire decorative system, paired with a custom geometric sans for headlines and a monospaced caption face for technical labels.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#171717",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#171717",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "#4d4d4d",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "mute": {
      "$value": "#888888",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "hairline": {
      "$value": "#ebebeb",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-strong": {
      "$value": "#a1a1a1",
      "$type": "color",
      "$description": "Use for the hairline strong role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "canvas-soft": {
      "$value": "#fafafa",
      "$type": "color",
      "$description": "Use for the canvas soft role."
    },
    "canvas-soft-2": {
      "$value": "#f5f5f5",
      "$type": "color",
      "$description": "Use for the canvas soft 2 role."
    },
    "link": {
      "$value": "#0070f3",
      "$type": "color",
      "$description": "Use for the link role."
    },
    "link-deep": {
      "$value": "#0761d1",
      "$type": "color",
      "$description": "Use for the link deep role."
    },
    "link-bg-soft": {
      "$value": "#d3e5ff",
      "$type": "color",
      "$description": "Use for the link bg soft role."
    },
    "success": {
      "$value": "#0070f3",
      "$type": "color",
      "$description": "Use for the success role."
    },
    "error": {
      "$value": "#ee0000",
      "$type": "color",
      "$description": "Use for the error role."
    },
    "error-soft": {
      "$value": "#f7d4d6",
      "$type": "color",
      "$description": "Use for the error soft role."
    },
    "error-deep": {
      "$value": "#c50000",
      "$type": "color",
      "$description": "Use for the error deep role."
    },
    "warning": {
      "$value": "#f5a623",
      "$type": "color",
      "$description": "Use for the warning role."
    },
    "warning-soft": {
      "$value": "#ffefcf",
      "$type": "color",
      "$description": "Use for the warning soft role."
    },
    "warning-deep": {
      "$value": "#ab570a",
      "$type": "color",
      "$description": "Use for the warning deep role."
    },
    "violet": {
      "$value": "#7928ca",
      "$type": "color",
      "$description": "Use for the violet role."
    },
    "violet-soft": {
      "$value": "#d8ccf1",
      "$type": "color",
      "$description": "Use for the violet soft role."
    },
    "violet-deep": {
      "$value": "#4c2889",
      "$type": "color",
      "$description": "Use for the violet deep role."
    },
    "cyan": {
      "$value": "#50e3c2",
      "$type": "color",
      "$description": "Use for the cyan role."
    },
    "cyan-soft": {
      "$value": "#aaffec",
      "$type": "color",
      "$description": "Use for the cyan soft role."
    },
    "cyan-deep": {
      "$value": "#29bc9b",
      "$type": "color",
      "$description": "Use for the cyan deep role."
    },
    "highlight-pink": {
      "$value": "#ff0080",
      "$type": "color",
      "$description": "Use for the highlight pink role."
    },
    "highlight-magenta": {
      "$value": "#eb367f",
      "$type": "color",
      "$description": "Use for the highlight magenta role."
    },
    "gradient-develop-start": {
      "$value": "#007cf0",
      "$type": "color",
      "$description": "Use for the gradient develop start role."
    },
    "gradient-develop-end": {
      "$value": "#00dfd8",
      "$type": "color",
      "$description": "Use for the gradient develop end role."
    },
    "gradient-preview-start": {
      "$value": "#7928ca",
      "$type": "color",
      "$description": "Use for the gradient preview start role."
    },
    "gradient-preview-end": {
      "$value": "#ff0080",
      "$type": "color",
      "$description": "Use for the gradient preview end role."
    },
    "gradient-ship-start": {
      "$value": "#ff4d4d",
      "$type": "color",
      "$description": "Use for the gradient ship start role."
    },
    "gradient-ship-end": {
      "$value": "#f9cb28",
      "$type": "color",
      "$description": "Use for the gradient ship end role."
    },
    "selection-bg": {
      "$value": "#171717",
      "$type": "color",
      "$description": "Use for the selection bg role."
    },
    "selection-fg": {
      "$value": "#f2f2f2",
      "$type": "color",
      "$description": "Use for the selection fg role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "48px",
        "fontWeight": 600,
        "lineHeight": "48px",
        "letterSpacing": "-2.4px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "32px",
        "fontWeight": 600,
        "lineHeight": "40px",
        "letterSpacing": "-1.28px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "24px",
        "fontWeight": 600,
        "lineHeight": "32px",
        "letterSpacing": "-0.96px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "display-sm": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "20px",
        "fontWeight": 600,
        "lineHeight": "28px",
        "letterSpacing": "-0.6px"
      },
      "$type": "typography",
      "$description": "Typography style for display sm."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": "28px",
        "letterSpacing": "0px"
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": "24px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-md-strong": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": "24px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for body md strong."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": "20px",
        "letterSpacing": "-0.28px"
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "body-sm-strong": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": "20px",
        "letterSpacing": "-0.28px"
      },
      "$type": "typography",
      "$description": "Typography style for body sm strong."
    },
    "caption": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": "16px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "caption-mono": {
      "$value": {
        "fontFamily": "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": "16px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for caption mono."
    },
    "code": {
      "$value": {
        "fontFamily": "Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": "20px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for code."
    },
    "button-md": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": "20px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "button-lg": {
      "$value": {
        "fontFamily": "Geist, Inter, system-ui, -apple-system, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": "24px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for button lg."
    }
  },
  "spacing": {
    "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."
    },
    "2xl": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing step 2xl."
    },
    "3xl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 3xl."
    },
    "4xl": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step 4xl."
    },
    "5xl": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step 5xl."
    },
    "6xl": {
      "$value": "128px",
      "$type": "dimension",
      "$description": "Spacing step 6xl."
    },
    "section": {
      "$value": "192px",
      "$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": "12px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "pill-sm": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Border radius pill-sm."
    },
    "pill": {
      "$value": "100px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://vercel.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}