Back to Lemonade
AI token editor

Edit Lemonade 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": {
      "$value": "#FF0090",
      "$type": "color",
      "$description": "Primary brand color for CTAs and accent elements"
    },
    "background": {
      "$value": "#FAFAF8",
      "$type": "color",
      "$description": "Main page background color"
    },
    "surface": {
      "$value": "#FFFFFF",
      "$type": "color",
      "$description": "Card and surface backgrounds"
    },
    "text": {
      "primary": {
        "$value": "#333333",
        "$type": "color",
        "$description": "Primary text and headings"
      },
      "secondary": {
        "$value": "#5A5A5A",
        "$type": "color",
        "$description": "Secondary body text"
      },
      "tertiary": {
        "$value": "#999999",
        "$type": "color",
        "$description": "Tertiary text, inactive navigation"
      }
    },
    "pink": {
      "400": {
        "$value": "#FF1FA0",
        "$type": "color",
        "$description": "Lighter pink shade"
      },
      "500": {
        "$value": "#FF0090",
        "$type": "color",
        "$description": "Primary pink"
      },
      "600": {
        "$value": "#E0007A",
        "$type": "color",
        "$description": "Darker pink shade for hover states"
      }
    },
    "gray": {
      "50": {
        "$value": "#FAFAF8",
        "$type": "color",
        "$description": "Lightest gray"
      },
      "100": {
        "$value": "#F5F5F3",
        "$type": "color",
        "$description": "Very light gray"
      },
      "200": {
        "$value": "#E5E5E5",
        "$type": "color",
        "$description": "Light gray, borders"
      },
      "400": {
        "$value": "#999999",
        "$type": "color",
        "$description": "Medium gray"
      },
      "600": {
        "$value": "#5A5A5A",
        "$type": "color",
        "$description": "Dark gray"
      },
      "900": {
        "$value": "#333333",
        "$type": "color",
        "$description": "Darkest gray, text"
      }
    },
    "border": {
      "$value": "#E5E5E5",
      "$type": "color",
      "$description": "Default border color"
    },
    "line-art": {
      "$value": "#333333",
      "$type": "color",
      "$description": "Illustration stroke color"
    }
  },
  "font": {
    "family": {
      "sans": {
        "$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
        "$type": "fontFamily",
        "$description": "Sans-serif font stack for body and UI"
      },
      "serif": {
        "$value": "Merriweather, Georgia, serif",
        "$type": "fontFamily",
        "$description": "Serif font for headings"
      },
      "script": {
        "$value": "\"Lemonade Script\", cursive",
        "$type": "fontFamily",
        "$description": "Custom script font for logo"
      }
    },
    "size": {
      "hero": {
        "$value": "4rem",
        "$type": "dimension",
        "$description": "Hero heading size (64px)"
      },
      "h1": {
        "$value": "3rem",
        "$type": "dimension",
        "$description": "H1 heading size (48px)"
      },
      "h2": {
        "$value": "2rem",
        "$type": "dimension",
        "$description": "H2 heading size (32px)"
      },
      "subheading": {
        "$value": "1.25rem",
        "$type": "dimension",
        "$description": "Subheading size (20px)"
      },
      "base": {
        "$value": "1rem",
        "$type": "dimension",
        "$description": "Base body text (16px)"
      },
      "nav": {
        "$value": "0.9375rem",
        "$type": "dimension",
        "$description": "Navigation text (15px)"
      },
      "button": {
        "$value": "0.875rem",
        "$type": "dimension",
        "$description": "Button text (14px)"
      },
      "small": {
        "$value": "0.875rem",
        "$type": "dimension",
        "$description": "Small text (14px)"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "1.15",
        "$type": "number",
        "$description": "Tight line height for hero text"
      },
      "heading": {
        "$value": "1.2",
        "$type": "number",
        "$description": "Line height for headings"
      },
      "subheading": {
        "$value": "1.3",
        "$type": "number",
        "$description": "Line height for subheadings"
      },
      "relaxed": {
        "$value": "1.5",
        "$type": "number",
        "$description": "Relaxed line height"
      },
      "loose": {
        "$value": "1.6",
        "$type": "number",
        "$description": "Loose line height for body text"
      }
    },
    "weight": {
      "normal": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Normal weight"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Medium weight"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Semi-bold weight"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold weight for buttons"
      }
    }
  },
  "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 spacing"
    },
    "4": {
      "$value": "1rem",
      "$type": "dimension",
      "$description": "16px - base spacing"
    },
    "5": {
      "$value": "1.25rem",
      "$type": "dimension",
      "$description": "20px - medium spacing"
    },
    "6": {
      "$value": "1.5rem",
      "$type": "dimension",
      "$description": "24px - navigation spacing"
    },
    "8": {
      "$value": "2rem",
      "$type": "dimension",
      "$description": "32px - section spacing"
    },
    "12": {
      "$value": "3rem",
      "$type": "dimension",
      "$description": "48px - large spacing"
    },
    "16": {
      "$value": "4rem",
      "$type": "dimension",
      "$description": "64px - extra large spacing"
    },
    "20": {
      "$value": "5rem",
      "$type": "dimension",
      "$description": "80px - hero vertical padding"
    },
    "24": {
      "$value": "6rem",
      "$type": "dimension",
      "$description": "96px - hero section spacing"
    },
    "32": {
      "$value": "8rem",
      "$type": "dimension",
      "$description": "128px - maximum vertical spacing"
    }
  },
  "radius": {
    "sm": {
      "$value": "0.25rem",
      "$type": "dimension",
      "$description": "4px - small radius"
    },
    "md": {
      "$value": "0.5rem",
      "$type": "dimension",
      "$description": "8px - medium radius for buttons"
    },
    "lg": {
      "$value": "1rem",
      "$type": "dimension",
      "$description": "16px - large radius"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Full radius for pills"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Subtle elevation"
    },
    "md": {
      "$value": "0 4px 12px rgba(0, 0, 0, 0.08)",
      "$type": "shadow",
      "$description": "Card elevation"
    },
    "lg": {
      "$value": "0 8px 24px rgba(0, 0, 0, 0.12)",
      "$type": "shadow",
      "$description": "Modal elevation"
    },
    "button": {
      "$value": "0 4px 16px rgba(255, 0, 144, 0.25)",
      "$type": "shadow",
      "$description": "Primary button hover shadow"
    }
  },
  "border": {
    "width": {
      "default": {
        "$value": "1px",
        "$type": "dimension",
        "$description": "Default border width"
      },
      "thick": {
        "$value": "2px",
        "$type": "dimension",
        "$description": "Thick border"
      }
    }
  }
}

Edited (apply an instruction)

Apply an instruction to see the edited tokens here.

Lemonade is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.