Back to Discord
AI token editor

Edit Discord 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": {
    "brand": {
      "primary": {
        "$value": "#5865F2",
        "$type": "color",
        "$description": "Primary brand color - Discord Blurple"
      },
      "secondary": {
        "$value": "#404EED",
        "$type": "color",
        "$description": "Secondary brand purple"
      },
      "dark": {
        "$value": "#4752C4",
        "$type": "color",
        "$description": "Darker brand color for hover states"
      }
    },
    "background": {
      "gradient-start": {
        "$value": "#404EED",
        "$type": "color",
        "$description": "Hero gradient start color"
      },
      "gradient-mid": {
        "$value": "#2E3A8C",
        "$type": "color",
        "$description": "Hero gradient middle color"
      },
      "gradient-end": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Hero gradient end color"
      },
      "dark": {
        "$value": "#0B0C0F",
        "$type": "color",
        "$description": "Primary dark background"
      },
      "secondary": {
        "$value": "#23272A",
        "$type": "color",
        "$description": "Secondary dark surface"
      },
      "card": {
        "$value": "#2C2F33",
        "$type": "color",
        "$description": "Card and elevated surface background"
      }
    },
    "text": {
      "primary": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary text color"
      },
      "secondary": {
        "$value": "#B9BBBE",
        "$type": "color",
        "$description": "Secondary text color"
      },
      "muted": {
        "$value": "#72767D",
        "$type": "color",
        "$description": "Muted tertiary text"
      }
    },
    "button": {
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "White button background"
      },
      "white-text": {
        "$value": "#23272A",
        "$type": "color",
        "$description": "Dark text on white buttons"
      }
    },
    "accent": {
      "green": {
        "$value": "#3BA55D",
        "$type": "color",
        "$description": "Success and positive states"
      },
      "red": {
        "$value": "#ED4245",
        "$type": "color",
        "$description": "Error and destructive actions"
      }
    },
    "border": {
      "subtle": {
        "$value": "#40444B",
        "$type": "color",
        "$description": "Subtle border color"
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$value": "\"Ginto Nord\", \"Ginto\", sans-serif",
        "$type": "fontFamily",
        "$description": "Display and heading font"
      },
      "sans": {
        "$value": "\"gg sans\", \"Noto Sans\", sans-serif",
        "$type": "fontFamily",
        "$description": "UI and body text font"
      },
      "mono": {
        "$value": "\"Consolas\", \"Monaco\", monospace",
        "$type": "fontFamily",
        "$description": "Monospace font for code"
      }
    },
    "size": {
      "display-xl": {
        "$value": "96px",
        "$type": "dimension",
        "$description": "Extra large display heading"
      },
      "display-lg": {
        "$value": "80px",
        "$type": "dimension",
        "$description": "Large display heading"
      },
      "display-md": {
        "$value": "64px",
        "$type": "dimension",
        "$description": "Medium display heading"
      },
      "heading-xl": {
        "$value": "48px",
        "$type": "dimension",
        "$description": "Extra large heading"
      },
      "heading-lg": {
        "$value": "32px",
        "$type": "dimension",
        "$description": "Large heading"
      },
      "heading-md": {
        "$value": "24px",
        "$type": "dimension",
        "$description": "Medium heading"
      },
      "body-lg": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Large body text"
      },
      "body-md": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Default body text"
      },
      "body-sm": {
        "$value": "14px",
        "$type": "dimension",
        "$description": "Small body text"
      },
      "nav": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Navigation link size"
      },
      "button-lg": {
        "$value": "18px",
        "$type": "dimension",
        "$description": "Large button text"
      },
      "button-md": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Default button text"
      }
    },
    "weight": {
      "black": {
        "$value": "800",
        "$type": "number",
        "$description": "Extra bold weight"
      },
      "bold": {
        "$value": "700",
        "$type": "number",
        "$description": "Bold weight"
      },
      "semibold": {
        "$value": "600",
        "$type": "number",
        "$description": "Semibold weight"
      },
      "medium": {
        "$value": "500",
        "$type": "number",
        "$description": "Medium weight"
      },
      "regular": {
        "$value": "400",
        "$type": "number",
        "$description": "Regular weight"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "1.1",
        "$type": "number",
        "$description": "Tight line height for large headings"
      },
      "snug": {
        "$value": "1.25",
        "$type": "number",
        "$description": "Snug line height for headings"
      },
      "normal": {
        "$value": "1.5",
        "$type": "number",
        "$description": "Normal line height"
      },
      "relaxed": {
        "$value": "1.6",
        "$type": "number",
        "$description": "Relaxed line height for body"
      }
    }
  },
  "spacing": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Extra small spacing"
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Small spacing"
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Medium spacing"
    },
    "lg": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Large spacing"
    },
    "xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Extra large spacing"
    },
    "2xl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "2XL spacing"
    },
    "3xl": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "3XL spacing"
    },
    "4xl": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "4XL spacing"
    },
    "5xl": {
      "$value": "128px",
      "$type": "dimension",
      "$description": "5XL spacing"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Small border radius"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Medium border radius"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Large border radius"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Extra large border radius"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Full rounded (pill shape)"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.2)",
      "$type": "shadow",
      "$description": "Small shadow"
    },
    "md": {
      "$value": "0 4px 8px rgba(0, 0, 0, 0.3)",
      "$type": "shadow",
      "$description": "Medium shadow"
    },
    "lg": {
      "$value": "0 8px 16px rgba(0, 0, 0, 0.4)",
      "$type": "shadow",
      "$description": "Large shadow"
    },
    "xl": {
      "$value": "0 16px 32px rgba(0, 0, 0, 0.5)",
      "$type": "shadow",
      "$description": "Extra large shadow"
    }
  },
  "border": {
    "width": {
      "thin": {
        "$value": "1px",
        "$type": "dimension",
        "$description": "Thin border"
      },
      "medium": {
        "$value": "2px",
        "$type": "dimension",
        "$description": "Medium border"
      },
      "thick": {
        "$value": "4px",
        "$type": "dimension",
        "$description": "Thick border"
      }
    }
  }
}

Edited (apply an instruction)

Apply an instruction to see the edited tokens here.

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