Back to Resend
AI token editor

Edit Resend tokens

Describe what you want to change in plain English. Claude rewrites only the tokens you mention and leaves the rest alone. Download the modified CSS / JSON when you're happy.

Try:

Anonymous: 3/hr · Members: 30/hr.

Current

{
  "color": {
    "background": {
      "dark": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Primary dark theme background"
      },
      "light": {
        "$value": "#ffffff",
        "$type": "color",
        "$description": "Primary light theme background"
      }
    },
    "surface": {
      "dark": {
        "$value": "#171717",
        "$type": "color",
        "$description": "Elevated surfaces on dark theme"
      },
      "light": {
        "$value": "#f9f9f9",
        "$type": "color",
        "$description": "Elevated surfaces on light theme"
      }
    },
    "border": {
      "dark": {
        "$value": "#27272a",
        "$type": "color",
        "$description": "Border color for dark theme"
      },
      "light": {
        "$value": "#e5e5e7",
        "$type": "color",
        "$description": "Border color for light theme"
      }
    },
    "text": {
      "primary": {
        "dark": {
          "$value": "#ffffff",
          "$type": "color",
          "$description": "Primary text on dark backgrounds"
        },
        "light": {
          "$value": "#0a0a0a",
          "$type": "color",
          "$description": "Primary text on light backgrounds"
        }
      },
      "secondary": {
        "dark": {
          "$value": "#a1a1aa",
          "$type": "color",
          "$description": "Secondary/muted text on dark"
        },
        "light": {
          "$value": "#737373",
          "$type": "color",
          "$description": "Secondary/muted text on light"
        }
      }
    },
    "accent": {
      "dark": {
        "$value": "#ffffff",
        "$type": "color",
        "$description": "Accent color for CTAs on dark"
      },
      "light": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Accent color for CTAs on light"
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$value": "\"Instrument Serif\", ui-serif, Georgia, serif",
        "$type": "fontFamily",
        "$description": "Display font for headings"
      },
      "body": {
        "$value": "\"Inter\", ui-sans-serif, system-ui, sans-serif",
        "$type": "fontFamily",
        "$description": "Body text font"
      }
    },
    "size": {
      "display-xl": {
        "$value": "4.5rem",
        "$type": "dimension",
        "$description": "Hero display text"
      },
      "display-lg": {
        "$value": "3.75rem",
        "$type": "dimension",
        "$description": "Large display text"
      },
      "heading-1": {
        "$value": "3rem",
        "$type": "dimension",
        "$description": "Page title"
      },
      "heading-2": {
        "$value": "2.25rem",
        "$type": "dimension",
        "$description": "Section heading"
      },
      "heading-3": {
        "$value": "1.5rem",
        "$type": "dimension",
        "$description": "Subsection heading"
      },
      "body-lg": {
        "$value": "1.125rem",
        "$type": "dimension",
        "$description": "Large body text"
      },
      "body": {
        "$value": "1rem",
        "$type": "dimension",
        "$description": "Default body text"
      },
      "body-sm": {
        "$value": "0.875rem",
        "$type": "dimension",
        "$description": "Small text"
      }
    },
    "weight": {
      "regular": {
        "$value": "400",
        "$type": "fontWeight"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight"
      }
    }
  },
  "spacing": {
    "1": {
      "$value": "0.25rem",
      "$type": "dimension"
    },
    "2": {
      "$value": "0.5rem",
      "$type": "dimension"
    },
    "3": {
      "$value": "0.75rem",
      "$type": "dimension"
    },
    "4": {
      "$value": "1rem",
      "$type": "dimension"
    },
    "6": {
      "$value": "1.5rem",
      "$type": "dimension"
    },
    "8": {
      "$value": "2rem",
      "$type": "dimension"
    },
    "12": {
      "$value": "3rem",
      "$type": "dimension"
    },
    "16": {
      "$value": "4rem",
      "$type": "dimension"
    },
    "24": {
      "$value": "6rem",
      "$type": "dimension"
    },
    "32": {
      "$value": "8rem",
      "$type": "dimension"
    }
  },
  "radius": {
    "sm": {
      "$value": "0.375rem",
      "$type": "dimension",
      "$description": "Small border radius"
    },
    "md": {
      "$value": "0.5rem",
      "$type": "dimension",
      "$description": "Medium border radius for buttons"
    },
    "lg": {
      "$value": "0.75rem",
      "$type": "dimension",
      "$description": "Large border radius for cards"
    },
    "xl": {
      "$value": "1rem",
      "$type": "dimension",
      "$description": "Extra large border radius"
    },
    "2xl": {
      "$value": "1.5rem",
      "$type": "dimension",
      "$description": "2XL border radius"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Fully rounded pills"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Subtle shadow"
    },
    "md": {
      "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
      "$type": "shadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Large shadow for modals"
    }
  }
}

Edited (apply an instruction)

Apply an instruction to see the edited tokens here.

Resend is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.