Back to Mailchimp
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.