AI token editor
Edit Calm 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": {
"background": {
"page": {
"$value": "#f5f7fa",
"$type": "color",
"$description": "Light blue-gray page background"
},
"card": {
"$value": "#ffffff",
"$type": "color",
"$description": "White surface for cards and modals"
}
},
"text": {
"primary": {
"$value": "#646464",
"$type": "color",
"$description": "Primary heading text"
},
"body": {
"$value": "#666666",
"$type": "color",
"$description": "Standard body text"
},
"muted": {
"$value": "#b3b3b3",
"$type": "color",
"$description": "Muted text for captions and references"
}
},
"primary": {
"blue": {
"$value": "#1a9fe6",
"$type": "color",
"$description": "Primary brand blue for CTAs"
}
},
"icon": {
"background": {
"$value": "#455a64",
"$type": "color",
"$description": "Dark blue-gray for icon containers"
}
},
"border": {
"subtle": {
"$value": "#e8eaed",
"$type": "color",
"$description": "Light gray borders"
}
}
},
"font": {
"family": {
"primary": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
"$type": "fontFamily",
"$description": "System font stack"
}
},
"size": {
"heading-1": {
"$value": "2rem",
"$type": "dimension",
"$description": "32px - Modal headings"
},
"body-large": {
"$value": "1.125rem",
"$type": "dimension",
"$description": "18px - Large body text"
},
"body": {
"$value": "1rem",
"$type": "dimension",
"$description": "16px - Standard body"
},
"button": {
"$value": "1.125rem",
"$type": "dimension",
"$description": "18px - Button labels"
},
"caption": {
"$value": "0.75rem",
"$type": "dimension",
"$description": "12px - Captions and references"
}
},
"weight": {
"regular": {
"$value": "400",
"$type": "fontWeight",
"$description": "Regular weight"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Medium weight for emphasis"
}
}
},
"spacing": {
"1": {
"$value": "0.25rem",
"$type": "dimension",
"$description": "4px - Micro spacing"
},
"2": {
"$value": "0.5rem",
"$type": "dimension",
"$description": "8px - Tight spacing"
},
"3": {
"$value": "0.75rem",
"$type": "dimension",
"$description": "12px - Small gaps"
},
"4": {
"$value": "1rem",
"$type": "dimension",
"$description": "16px - Standard gaps"
},
"5": {
"$value": "1.5rem",
"$type": "dimension",
"$description": "24px - Medium gaps"
},
"6": {
"$value": "2rem",
"$type": "dimension",
"$description": "32px - Large gaps"
},
"8": {
"$value": "3rem",
"$type": "dimension",
"$description": "48px - Section spacing"
},
"10": {
"$value": "4rem",
"$type": "dimension",
"$description": "64px - Major sections"
}
},
"radius": {
"sm": {
"$value": "0.5rem",
"$type": "dimension",
"$description": "8px - Small elements"
},
"md": {
"$value": "0.75rem",
"$type": "dimension",
"$description": "12px - Standard cards"
},
"lg": {
"$value": "1rem",
"$type": "dimension",
"$description": "16px - Large modals"
},
"pill": {
"$value": "9999px",
"$type": "dimension",
"$description": "Pill-shaped buttons"
}
},
"shadow": {
"card": {
"$value": "0 2px 16px rgba(0, 0, 0, 0.08)",
"$type": "shadow",
"$description": "Card elevation shadow"
},
"subtle": {
"$value": "0 1px 3px rgba(0, 0, 0, 0.06)",
"$type": "shadow",
"$description": "Subtle elevation"
}
}
}
Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Calm is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.