AI token editor
Edit Mercury 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": {
"primary": {
"50": {
"$type": "color",
"$value": "#EBEDFB",
"$description": "Lightest primary color for backgrounds"
},
"100": {
"$type": "color",
"$value": "#D7DBF7",
"$description": "Very light primary color"
},
"500": {
"$type": "color",
"$value": "#5865F2",
"$description": "Primary brand color"
},
"600": {
"$type": "color",
"$value": "#5865F2",
"$description": "Primary CTA button color"
},
"700": {
"$type": "color",
"$value": "#4752C4",
"$description": "Primary hover state"
}
},
"secondary": {
"50": {
"$type": "color",
"$value": "#E8E9F3",
"$description": "Light secondary background"
},
"300": {
"$type": "color",
"$value": "#8B7EB8",
"$description": "Secondary accent color"
}
},
"purple": {
"600": {
"$type": "color",
"$value": "#4B3F6B",
"$description": "Deep purple for product visuals"
}
},
"dark": {
"700": {
"$type": "color",
"$value": "#3F3D56",
"$description": "Dark gradient color"
},
"800": {
"$type": "color",
"$value": "#2D2E3F",
"$description": "Dark background overlay"
},
"900": {
"$type": "color",
"$value": "#1A1B26",
"$description": "Darkest background, footer"
}
},
"gray": {
"50": {
"$type": "color",
"$value": "#F9FAFB",
"$description": "Lightest gray background"
},
"100": {
"$type": "color",
"$value": "#F3F4F6",
"$description": "Light gray background"
},
"200": {
"$type": "color",
"$value": "#E5E7EB",
"$description": "Border and divider color"
},
"400": {
"$type": "color",
"$value": "#9CA3AF",
"$description": "Placeholder text color"
},
"500": {
"$type": "color",
"$value": "#6B7280",
"$description": "Muted text color"
},
"700": {
"$type": "color",
"$value": "#374151",
"$description": "Body text color"
},
"900": {
"$type": "color",
"$value": "#111827",
"$description": "Heading text color"
}
},
"base": {
"white": {
"$type": "color",
"$value": "#FFFFFF",
"$description": "Pure white"
},
"black": {
"$type": "color",
"$value": "#000000",
"$description": "Pure black"
}
}
},
"font": {
"family": {
"sans": {
"$type": "fontFamily",
"$value": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"$description": "Primary sans-serif font stack"
}
},
"size": {
"xs": {
"$type": "dimension",
"$value": "13px",
"$description": "Extra small text"
},
"sm": {
"$type": "dimension",
"$value": "14px",
"$description": "Small text, captions"
},
"base": {
"$type": "dimension",
"$value": "15px",
"$description": "Base navigation and label size"
},
"md": {
"$type": "dimension",
"$value": "16px",
"$description": "Standard body text"
},
"lg": {
"$type": "dimension",
"$value": "18px",
"$description": "Large body text"
},
"xl": {
"$type": "dimension",
"$value": "24px",
"$description": "Subheadings"
},
"2xl": {
"$type": "dimension",
"$value": "32px",
"$description": "Medium headings"
},
"3xl": {
"$type": "dimension",
"$value": "40px",
"$description": "Large headings"
},
"4xl": {
"$type": "dimension",
"$value": "48px",
"$description": "Page headings"
},
"5xl": {
"$type": "dimension",
"$value": "60px",
"$description": "Large hero text"
},
"6xl": {
"$type": "dimension",
"$value": "72px",
"$description": "Extra large hero text"
}
},
"weight": {
"normal": {
"$type": "number",
"$value": 400,
"$description": "Regular weight"
},
"medium": {
"$type": "number",
"$value": 500,
"$description": "Medium weight for labels"
},
"semibold": {
"$type": "number",
"$value": 600,
"$description": "Semibold for headings"
},
"bold": {
"$type": "number",
"$value": 700,
"$description": "Bold weight"
}
},
"lineHeight": {
"tight": {
"$type": "number",
"$value": 1.1,
"$description": "Tight line height for large headings"
},
"snug": {
"$type": "number",
"$value": 1.25,
"$description": "Snug line height for headings"
},
"normal": {
"$type": "number",
"$value": 1.5,
"$description": "Normal line height"
},
"relaxed": {
"$type": "number",
"$value": 1.6,
"$description": "Relaxed line height for body text"
}
}
},
"spacing": {
"2": {
"$type": "dimension",
"$value": "8px",
"$description": "Tight spacing"
},
"3": {
"$type": "dimension",
"$value": "12px",
"$description": "Small spacing"
},
"4": {
"$type": "dimension",
"$value": "16px",
"$description": "Default element spacing"
},
"6": {
"$type": "dimension",
"$value": "24px",
"$description": "Card spacing"
},
"8": {
"$type": "dimension",
"$value": "32px",
"$description": "Large spacing"
},
"12": {
"$type": "dimension",
"$value": "48px",
"$description": "Section spacing"
},
"20": {
"$type": "dimension",
"$value": "80px",
"$description": "Page section padding"
},
"30": {
"$type": "dimension",
"$value": "120px",
"$description": "Hero section padding"
}
},
"radius": {
"sm": {
"$type": "dimension",
"$value": "6px",
"$description": "Small border radius"
},
"md": {
"$type": "dimension",
"$value": "8px",
"$description": "Default border radius for buttons"
},
"lg": {
"$type": "dimension",
"$value": "12px",
"$description": "Card border radius"
},
"xl": {
"$type": "dimension",
"$value": "16px",
"$description": "Large card border radius"
},
"2xl": {
"$type": "dimension",
"$value": "20px",
"$description": "Extra large border radius"
}
},
"shadow": {
"sm": {
"$type": "shadow",
"$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"$description": "Subtle shadow"
},
"md": {
"$type": "shadow",
"$value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
"$description": "Medium shadow for cards"
},
"lg": {
"$type": "shadow",
"$value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
"$description": "Large shadow for elevated elements"
},
"xl": {
"$type": "shadow",
"$value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
"$description": "Extra large shadow for modals"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Mercury is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.