AI token editor
Edit Shopify 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": {
"green": {
"$value": "#95BF47",
"$type": "color",
"$description": "Primary brand color for Shopify"
},
"green-light": {
"$value": "#7CE5A5",
"$type": "color",
"$description": "Light green accent for badges and highlights"
},
"green-dark": {
"$value": "#5F8F3B",
"$type": "color",
"$description": "Dark green for hover states"
}
},
"neutral": {
"black": {
"$value": "#000000",
"$type": "color",
"$description": "Primary black for text and buttons"
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Pure white for backgrounds and text"
},
"gray-50": {
"$value": "#FAFBFB",
"$type": "color",
"$description": "Lightest gray for backgrounds"
},
"gray-100": {
"$value": "#F1F2F3",
"$type": "color",
"$description": "Light gray for subtle backgrounds"
},
"gray-200": {
"$value": "#E3E4E6",
"$type": "color",
"$description": "Border gray"
},
"gray-600": {
"$value": "#616668",
"$type": "color",
"$description": "Secondary text color"
},
"gray-900": {
"$value": "#1A1A1A",
"$type": "color",
"$description": "Dark gray for headings"
}
},
"dark": {
"navy-900": {
"$value": "#0A0E27",
"$type": "color",
"$description": "Darkest navy for hero backgrounds"
},
"navy-800": {
"$value": "#1C2340",
"$type": "color",
"$description": "Dark navy for sections"
}
},
"accent": {
"blue": {
"$value": "#2C6ECB",
"$type": "color",
"$description": "Blue accent for Plus plan and links"
},
"cyan-50": {
"$value": "#E6F9F9",
"$type": "color",
"$description": "Light cyan background"
},
"mint-50": {
"$value": "#C1F0DB",
"$type": "color",
"$description": "Mint background for pricing cards"
},
"mint-green": {
"$value": "#7CE5A5",
"$type": "color",
"$description": "Mint green for badges"
}
}
},
"font": {
"family": {
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
}
},
"size": {
"display-xl": {
"$value": "80px",
"$type": "dimension",
"$description": "Extra large display size for hero headings"
},
"display-lg": {
"$value": "64px",
"$type": "dimension",
"$description": "Large display size for section headings"
},
"display-md": {
"$value": "48px",
"$type": "dimension",
"$description": "Medium display size"
},
"heading-xl": {
"$value": "36px",
"$type": "dimension",
"$description": "Extra large heading"
},
"heading-lg": {
"$value": "28px",
"$type": "dimension",
"$description": "Large heading"
},
"heading-md": {
"$value": "20px",
"$type": "dimension",
"$description": "Medium heading"
},
"body-lg": {
"$value": "18px",
"$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"
},
"price-display": {
"$value": "56px",
"$type": "dimension",
"$description": "Pricing amount display"
}
},
"weight": {
"regular": {
"$value": "400",
"$type": "fontWeight",
"$description": "Regular 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": {
"display-xl": {
"$value": "88px",
"$type": "dimension",
"$description": "Line height for XL display"
},
"display-lg": {
"$value": "72px",
"$type": "dimension",
"$description": "Line height for LG display"
},
"heading-xl": {
"$value": "44px",
"$type": "dimension",
"$description": "Line height for XL headings"
},
"body-md": {
"$value": "24px",
"$type": "dimension",
"$description": "Line height for medium body"
}
}
},
"spacing": {
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Tight spacing"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Small gaps"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Default padding"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Section padding"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "Large gaps"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "Large sections"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "Hero spacing"
},
"24": {
"$value": "96px",
"$type": "dimension",
"$description": "Hero vertical padding"
}
},
"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 for cards"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Extra large border radius"
},
"pill": {
"$value": "999px",
"$type": "dimension",
"$description": "Pill-shaped border radius"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.06)",
"$type": "shadow",
"$description": "Small shadow"
},
"md": {
"$value": "0 4px 8px rgba(0, 0, 0, 0.08)",
"$type": "shadow",
"$description": "Medium shadow for cards"
},
"lg": {
"$value": "0 8px 16px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Large shadow"
},
"xl": {
"$value": "0 12px 24px rgba(0, 0, 0, 0.12)",
"$type": "shadow",
"$description": "Extra large shadow"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Shopify is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.