Back to Sentry
AI token editor

Edit Sentry 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": {
      "primary": {
        "$value": "#1D1127",
        "$type": "color",
        "$description": "Main background, deep purple"
      },
      "secondary": {
        "$value": "#2B1E3E",
        "$type": "color",
        "$description": "Card backgrounds, elevated surfaces"
      },
      "tertiary": {
        "$value": "#3A2D52",
        "$type": "color",
        "$description": "Hover states, subtle elevations"
      }
    },
    "surface": {
      "dark": {
        "$value": "#151015",
        "$type": "color",
        "$description": "Darkest background surfaces"
      },
      "card": {
        "$value": "#2D2142",
        "$type": "color",
        "$description": "Card container backgrounds"
      }
    },
    "primary": {
      "$value": "#FF4D88",
      "$type": "color",
      "$description": "Primary brand pink, CTAs, accents"
    },
    "primary-hover": {
      "$value": "#FF5E96",
      "$type": "color",
      "$description": "Primary hover state"
    },
    "accent": {
      "purple": {
        "$value": "#6C5FC7",
        "$type": "color",
        "$description": "Secondary purple accent"
      },
      "purple-light": {
        "$value": "#8B7AE8",
        "$type": "color",
        "$description": "Lighter purple variant"
      },
      "green": {
        "$value": "#B0FF00",
        "$type": "color",
        "$description": "Neon green, success states"
      },
      "lime": {
        "$value": "#CCFF00",
        "$type": "color",
        "$description": "Bright lime accents"
      },
      "yellow": {
        "$value": "#FFD76D",
        "$type": "color",
        "$description": "Warning, highlights"
      },
      "orange": {
        "$value": "#FF9966",
        "$type": "color",
        "$description": "Gradient stops"
      },
      "pink-light": {
        "$value": "#FF6B9D",
        "$type": "color",
        "$description": "Light pink accents"
      }
    },
    "text": {
      "primary": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary text, headings"
      },
      "secondary": {
        "$value": "#B8A8CC",
        "$type": "color",
        "$description": "Secondary text, descriptions"
      },
      "tertiary": {
        "$value": "#8E7DA8",
        "$type": "color",
        "$description": "Muted text, labels"
      },
      "inverse": {
        "$value": "#1D1127",
        "$type": "color",
        "$description": "Text on light backgrounds"
      }
    },
    "border": {
      "subtle": {
        "$value": "#3A2D52",
        "$type": "color",
        "$description": "Subtle borders"
      },
      "card": {
        "$value": "#4A3D6A",
        "$type": "color",
        "$description": "Card outlines"
      }
    }
  },
  "font": {
    "family": {
      "sans": {
        "$value": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
        "$type": "fontFamily",
        "$description": "Body text font"
      },
      "display": {
        "$value": "'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
        "$type": "fontFamily",
        "$description": "Headings and display text"
      },
      "mono": {
        "$value": "'Fira Code', 'Monaco', 'Courier New', monospace",
        "$type": "fontFamily",
        "$description": "Code and monospace text"
      }
    },
    "size": {
      "hero": {
        "$value": "72px",
        "$type": "fontSize",
        "$description": "Hero headlines"
      },
      "h1": {
        "$value": "48px",
        "$type": "fontSize",
        "$description": "Page titles"
      },
      "h2": {
        "$value": "36px",
        "$type": "fontSize",
        "$description": "Section headers"
      },
      "h3": {
        "$value": "28px",
        "$type": "fontSize",
        "$description": "Subsection headers"
      },
      "h4": {
        "$value": "20px",
        "$type": "fontSize",
        "$description": "Card titles"
      },
      "body-lg": {
        "$value": "18px",
        "$type": "fontSize",
        "$description": "Large body text"
      },
      "body": {
        "$value": "16px",
        "$type": "fontSize",
        "$description": "Default body text"
      },
      "body-sm": {
        "$value": "14px",
        "$type": "fontSize",
        "$description": "Small text"
      },
      "caption": {
        "$value": "12px",
        "$type": "fontSize",
        "$description": "Captions, labels"
      }
    },
    "weight": {
      "normal": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Normal weight"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Medium weight"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Semibold weight"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold weight"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "1.1",
        "$type": "lineHeight",
        "$description": "Tight line height for large headings"
      },
      "snug": {
        "$value": "1.3",
        "$type": "lineHeight",
        "$description": "Snug line height for headings"
      },
      "normal": {
        "$value": "1.5",
        "$type": "lineHeight",
        "$description": "Normal line height"
      },
      "relaxed": {
        "$value": "1.6",
        "$type": "lineHeight",
        "$description": "Relaxed line height for body text"
      }
    }
  },
  "spacing": {
    "1": {
      "$value": "4px",
      "$type": "spacing",
      "$description": "Smallest spacing unit"
    },
    "2": {
      "$value": "8px",
      "$type": "spacing",
      "$description": "Extra small spacing"
    },
    "3": {
      "$value": "12px",
      "$type": "spacing",
      "$description": "Small spacing"
    },
    "4": {
      "$value": "16px",
      "$type": "spacing",
      "$description": "Base spacing unit"
    },
    "5": {
      "$value": "24px",
      "$type": "spacing",
      "$description": "Medium spacing"
    },
    "6": {
      "$value": "32px",
      "$type": "spacing",
      "$description": "Large spacing"
    },
    "8": {
      "$value": "48px",
      "$type": "spacing",
      "$description": "Extra large spacing"
    },
    "10": {
      "$value": "64px",
      "$type": "spacing",
      "$description": "2XL spacing"
    },
    "12": {
      "$value": "80px",
      "$type": "spacing",
      "$description": "3XL spacing"
    },
    "16": {
      "$value": "120px",
      "$type": "spacing",
      "$description": "4XL spacing"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "borderRadius",
      "$description": "Small border radius"
    },
    "md": {
      "$value": "8px",
      "$type": "borderRadius",
      "$description": "Medium border radius for buttons, inputs"
    },
    "lg": {
      "$value": "12px",
      "$type": "borderRadius",
      "$description": "Large border radius for cards"
    },
    "xl": {
      "$value": "16px",
      "$type": "borderRadius",
      "$description": "Extra large border radius"
    },
    "2xl": {
      "$value": "24px",
      "$type": "borderRadius",
      "$description": "2XL border radius for large cards"
    },
    "full": {
      "$value": "9999px",
      "$type": "borderRadius",
      "$description": "Fully rounded (pills, circles)"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px rgba(0, 0, 0, 0.3)",
      "$type": "boxShadow",
      "$description": "Small shadow"
    },
    "md": {
      "$value": "0 4px 12px rgba(0, 0, 0, 0.4)",
      "$type": "boxShadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 8px 24px rgba(0, 0, 0, 0.5)",
      "$type": "boxShadow",
      "$description": "Large shadow for elevated elements"
    },
    "xl": {
      "$value": "0 16px 48px rgba(0, 0, 0, 0.6)",
      "$type": "boxShadow",
      "$description": "Extra large shadow"
    },
    "glow-pink": {
      "$value": "0 0 40px rgba(255, 77, 136, 0.4)",
      "$type": "boxShadow",
      "$description": "Pink glow effect"
    },
    "glow-purple": {
      "$value": "0 0 40px rgba(108, 95, 199, 0.4)",
      "$type": "boxShadow",
      "$description": "Purple glow effect"
    }
  },
  "borderWidth": {
    "thin": {
      "$value": "1px",
      "$type": "borderWidth",
      "$description": "Thin border"
    },
    "medium": {
      "$value": "2px",
      "$type": "borderWidth",
      "$description": "Medium border"
    },
    "thick": {
      "$value": "3px",
      "$type": "borderWidth",
      "$description": "Thick border"
    }
  }
}

Edited (apply an instruction)

Apply an instruction to see the edited tokens here.

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