AI token editor
Edit Mailchimp 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": {
"yellow": {
"primary": {
"$value": "#FFE01B",
"$type": "color",
"$description": "Primary brand yellow for CTAs and accents"
},
"hover": {
"$value": "#E6CA18",
"$type": "color",
"$description": "Hover state for yellow buttons"
}
},
"black": {
"$value": "#241C15",
"$type": "color",
"$description": "Primary text and dark UI elements"
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "White backgrounds and light text"
},
"beige": {
"50": {
"$value": "#FAF9F7",
"$type": "color",
"$description": "Lightest beige background"
},
"100": {
"$value": "#F6F4F0",
"$type": "color",
"$description": "Light beige background"
}
},
"gray": {
"900": {
"$value": "#241C15",
"$type": "color",
"$description": "Darkest gray for primary text"
},
"700": {
"$value": "#3C3C3C",
"$type": "color",
"$description": "Dark gray for secondary text"
},
"600": {
"$value": "#666666",
"$type": "color",
"$description": "Medium gray for tertiary text"
},
"400": {
"$value": "#86868B",
"$type": "color",
"$description": "Light gray for muted text"
},
"300": {
"$value": "#C4C4C4",
"$type": "color",
"$description": "Border gray"
},
"200": {
"$value": "#E1E1E1",
"$type": "color",
"$description": "Light border gray"
},
"100": {
"$value": "#F5F5F5",
"$type": "color",
"$description": "Subtle background gray"
}
},
"teal": {
"$value": "#007C89",
"$type": "color",
"$description": "Secondary brand accent color"
},
"green": {
"$value": "#2ECC71",
"$type": "color",
"$description": "Success color for checkmarks"
}
},
"font": {
"family": {
"serif": {
"$value": "\"Means\", \"Cooper Light\", Georgia, serif",
"$type": "fontFamily",
"$description": "Serif font family for display headings"
},
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif",
"$type": "fontFamily",
"$description": "Sans-serif font family for body text"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Extra small text size"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text size"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Base text size"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large text size"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Extra large text size"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "2XL heading size"
},
"3xl": {
"$value": "28px",
"$type": "dimension",
"$description": "3XL heading size"
},
"4xl": {
"$value": "32px",
"$type": "dimension",
"$description": "4XL heading size"
},
"5xl": {
"$value": "40px",
"$type": "dimension",
"$description": "5XL display size"
},
"6xl": {
"$value": "48px",
"$type": "dimension",
"$description": "6XL display size"
},
"7xl": {
"$value": "56px",
"$type": "dimension",
"$description": "7XL display size"
},
"8xl": {
"$value": "64px",
"$type": "dimension",
"$description": "8XL display size"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Normal font weight"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Medium font weight"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Semibold font weight"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Bold font weight"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Tight line height for display text"
},
"snug": {
"$value": "1.25",
"$type": "number",
"$description": "Snug line height for headings"
},
"normal": {
"$value": "1.5",
"$type": "number",
"$description": "Normal line height for body text"
},
"relaxed": {
"$value": "1.625",
"$type": "number",
"$description": "Relaxed line height"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "4px spacing unit"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "8px spacing unit (base)"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "12px spacing unit"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "16px spacing unit"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "20px spacing unit"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "24px spacing unit"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "32px spacing unit"
},
"10": {
"$value": "40px",
"$type": "dimension",
"$description": "40px spacing unit"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "48px spacing unit"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "64px spacing unit"
},
"20": {
"$value": "80px",
"$type": "dimension",
"$description": "80px spacing unit"
},
"24": {
"$value": "96px",
"$type": "dimension",
"$description": "96px spacing unit"
}
},
"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": "24px",
"$type": "dimension",
"$description": "Extra large border radius"
},
"pill": {
"$value": "9999px",
"$type": "dimension",
"$description": "Pill-shaped border radius"
},
"full": {
"$value": "50%",
"$type": "dimension",
"$description": "Circular border radius"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Small shadow"
},
"md": {
"$value": "0 4px 6px rgba(0, 0, 0, 0.07)",
"$type": "shadow",
"$description": "Medium shadow"
},
"lg": {
"$value": "0 10px 15px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Large shadow"
},
"xl": {
"$value": "0 20px 25px rgba(0, 0, 0, 0.15)",
"$type": "shadow",
"$description": "Extra large shadow"
},
"modal": {
"$value": "0 25px 50px rgba(0, 0, 0, 0.25)",
"$type": "shadow",
"$description": "Modal shadow"
}
},
"border": {
"width": {
"thin": {
"$value": "1px",
"$type": "dimension",
"$description": "Thin border width"
},
"default": {
"$value": "2px",
"$type": "dimension",
"$description": "Default border width"
},
"thick": {
"$value": "3px",
"$type": "dimension",
"$description": "Thick border width"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Mailchimp is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.