{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Resend",
  "meta": {
    "name": "Resend",
    "description": "Resend's marketing surfaces sit on a near-pure black canvas with off-white\ntext and a single signature color — the deep editorial-serif Domaine\nDisplay headline mark — that gives an otherwise utilitarian developer-tool\nbrand its print-magazine confidence. The system pairs Domaine Display\n(oversized 76px–96px serif, ss01/ss04/ss11 features on) with ABC Favorit\nfor body and Inter for UI. Surfaces rely on subtle 6–9% opacity gradient\nglows, hairline 1px borders made from translucent white, and a strict\nrounded-12px container vocabulary. There is no decorative chrome — just\ntype, code, and atmospheric depth.",
    "theme": "dark"
  },
  "color": {
    "primary": {
      "$value": "#fcfdff",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "primary-on": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the primary on role."
    },
    "ink": {
      "$value": "#fcfdff",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "body": {
      "$value": "rgba(252,253,255,0.86)",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "charcoal": {
      "$value": "rgba(252,253,255,0.7)",
      "$type": "color",
      "$description": "Use for the charcoal role."
    },
    "mute": {
      "$value": "#a1a4a5",
      "$type": "color",
      "$description": "Use for the mute role."
    },
    "ash": {
      "$value": "#888e90",
      "$type": "color",
      "$description": "Use for the ash role."
    },
    "stone": {
      "$value": "#464a4d",
      "$type": "color",
      "$description": "Use for the stone role."
    },
    "on-light": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the on light role."
    },
    "on-light-mute": {
      "$value": "rgba(0,0,51,0.7)",
      "$type": "color",
      "$description": "Use for the on light mute role."
    },
    "canvas": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-card": {
      "$value": "#0a0a0c",
      "$type": "color",
      "$description": "Use for the surface card role."
    },
    "surface-elevated": {
      "$value": "#101012",
      "$type": "color",
      "$description": "Use for the surface elevated role."
    },
    "surface-deep": {
      "$value": "#06060a",
      "$type": "color",
      "$description": "Use for the surface deep role."
    },
    "hairline": {
      "$value": "rgba(255,255,255,0.06)",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-strong": {
      "$value": "rgba(255,255,255,0.14)",
      "$type": "color",
      "$description": "Use for the hairline strong role."
    },
    "divider-soft": {
      "$value": "rgba(255,255,255,0.04)",
      "$type": "color",
      "$description": "Use for the divider soft role."
    },
    "accent-orange": {
      "$value": "#ff801f",
      "$type": "color",
      "$description": "Use for the accent orange role."
    },
    "accent-orange-glow": {
      "$value": "rgba(255,89,0,0.22)",
      "$type": "color",
      "$description": "Use for the accent orange glow role."
    },
    "accent-yellow": {
      "$value": "#ffc53d",
      "$type": "color",
      "$description": "Use for the accent yellow role."
    },
    "accent-blue": {
      "$value": "#3b9eff",
      "$type": "color",
      "$description": "Use for the accent blue role."
    },
    "accent-blue-glow": {
      "$value": "rgba(0,117,255,0.34)",
      "$type": "color",
      "$description": "Use for the accent blue glow role."
    },
    "accent-green": {
      "$value": "#11ff99",
      "$type": "color",
      "$description": "Use for the accent green role."
    },
    "accent-green-glow": {
      "$value": "rgba(34,255,153,0.18)",
      "$type": "color",
      "$description": "Use for the accent green glow role."
    },
    "accent-red": {
      "$value": "#ff2047",
      "$type": "color",
      "$description": "Use for the accent red role."
    },
    "accent-red-glow": {
      "$value": "rgba(255,32,71,0.34)",
      "$type": "color",
      "$description": "Use for the accent red glow role."
    },
    "link": {
      "$value": "#3b9eff",
      "$type": "color",
      "$description": "Use for the link role."
    },
    "surface-light": {
      "$value": "#f1f7fe",
      "$type": "color",
      "$description": "Use for the surface light role."
    }
  },
  "typography": {
    "display-xxl": {
      "$value": {
        "fontFamily": "Domaine Display",
        "fontSize": "96px",
        "fontWeight": 400,
        "lineHeight": 1,
        "letterSpacing": "-0.96px"
      },
      "$type": "typography",
      "$description": "Typography style for display xxl."
    },
    "display-xl": {
      "$value": {
        "fontFamily": "Domaine Display",
        "fontSize": "76.8px",
        "fontWeight": 400,
        "lineHeight": 1,
        "letterSpacing": "-0.768px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "ABC Favorit",
        "fontSize": "56px",
        "fontWeight": 400,
        "lineHeight": 1.2,
        "letterSpacing": "-2.8px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "24px",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": "-0.4px"
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "heading-sm": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "20px",
        "fontWeight": 500,
        "lineHeight": 1.3,
        "letterSpacing": "-0.3px"
      },
      "$type": "typography",
      "$description": "Typography style for heading sm."
    },
    "subtitle": {
      "$value": {
        "fontFamily": "ABC Favorit",
        "fontSize": "20px",
        "fontWeight": 400,
        "lineHeight": 1.3,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for subtitle."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-md": {
      "$value": {
        "fontFamily": "ABC Favorit",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "-0.8px"
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.43,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "button-md": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.43,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    },
    "button-sm": {
      "$value": {
        "fontFamily": "ABC Favorit",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.43,
        "letterSpacing": "0.35px"
      },
      "$type": "typography",
      "$description": "Typography style for button sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "Inter",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "caption-emph": {
      "$value": {
        "fontFamily": "Helvetica",
        "fontSize": "14px",
        "fontWeight": 600,
        "lineHeight": 1,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for caption emph."
    },
    "code-md": {
      "$value": {
        "fontFamily": "Geist Mono",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for code 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."
    },
    "xxxl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step xxxl."
    },
    "section": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step section."
    },
    "band": {
      "$value": "128px",
      "$type": "dimension",
      "$description": "Spacing step band."
    }
  },
  "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."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://resend.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}