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.