Back to Wise
AI token editor

Edit Wise 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": {
      "primary": {
        "$value": "#9FE870",
        "$type": "color",
        "$description": "Primary brand green (lime) for CTAs and key accents"
      },
      "primary-dark": {
        "$value": "#8BD65C",
        "$type": "color",
        "$description": "Darker shade for hover states"
      },
      "dark-green": {
        "$value": "#0D2B0D",
        "$type": "color",
        "$description": "Dark green for alternative hero backgrounds"
      },
      "pale-green": {
        "$value": "#D7F2A8",
        "$type": "color",
        "$description": "Light green for banners and promotional sections"
      }
    },
    "neutral": {
      "black": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Pure black for headlines and primary text"
      },
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "White for backgrounds and inverse text"
      },
      "gray-50": {
        "$value": "#F5F5F5",
        "$type": "color",
        "$description": "Lightest gray for subtle backgrounds"
      },
      "gray-200": {
        "$value": "#E0E0E0",
        "$type": "color",
        "$description": "Light gray for borders"
      },
      "gray-500": {
        "$value": "#707070",
        "$type": "color",
        "$description": "Medium gray for tertiary text"
      },
      "gray-700": {
        "$value": "#505050",
        "$type": "color",
        "$description": "Dark gray for secondary text"
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$value": "'GT America Expanded', ui-sans-serif, system-ui, sans-serif",
        "$type": "fontFamily",
        "$description": "Bold condensed font for headlines and hero text"
      },
      "body": {
        "$value": "'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif",
        "$type": "fontFamily",
        "$description": "Sans-serif font for body text and UI"
      }
    },
    "size": {
      "xs": {
        "$value": "12px",
        "$type": "dimension",
        "$description": "Extra small text for labels and metadata"
      },
      "sm": {
        "$value": "14px",
        "$type": "dimension",
        "$description": "Small text for captions"
      },
      "base": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Base body text size"
      },
      "lg": {
        "$value": "20px",
        "$type": "dimension",
        "$description": "Large body text"
      },
      "xl": {
        "$value": "24px",
        "$type": "dimension",
        "$description": "H4 headings"
      },
      "2xl": {
        "$value": "32px",
        "$type": "dimension",
        "$description": "H3 headings"
      },
      "3xl": {
        "$value": "48px",
        "$type": "dimension",
        "$description": "H2 headings"
      },
      "4xl": {
        "$value": "64px",
        "$type": "dimension",
        "$description": "H1 headings"
      },
      "5xl": {
        "$value": "80px",
        "$type": "dimension",
        "$description": "Hero headlines"
      }
    },
    "weight": {
      "normal": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Normal weight for body text"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Medium weight for emphasis"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold for subheadings"
      },
      "extrabold": {
        "$value": "800",
        "$type": "fontWeight",
        "$description": "Extra bold for large headings"
      },
      "black": {
        "$value": "900",
        "$type": "fontWeight",
        "$description": "Black for hero headlines"
      }
    }
  },
  "spacing": {
    "1": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Base spacing unit"
    },
    "2": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Small gaps between elements"
    },
    "3": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Default element spacing"
    },
    "4": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Medium spacing"
    },
    "6": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Large spacing"
    },
    "8": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Section padding"
    },
    "12": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Large section gaps"
    },
    "16": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Hero section padding"
    },
    "24": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Extra large spacing between sections"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Small radius for subtle rounding"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Medium radius for cards and inputs"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Large radius for prominent cards"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Extra large radius for hero elements"
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Full radius for pills and circular elements"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.04)",
      "$type": "shadow",
      "$description": "Subtle elevation for small elements"
    },
    "md": {
      "$value": "0 2px 8px rgba(0, 0, 0, 0.08)",
      "$type": "shadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 4px 16px rgba(0, 0, 0, 0.12)",
      "$type": "shadow",
      "$description": "Large shadow for modals and dropdowns"
    }
  }
}

Edited (apply an instruction)

Apply an instruction to see the edited tokens here.

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