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