Back to GitHub
AI token editor

Edit GitHub 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": {
    "canvas": {
      "default": {
        "dark": {
          "$value": "#0d1117",
          "$type": "color",
          "$description": "Default dark canvas background"
        },
        "light": {
          "$value": "#ffffff",
          "$type": "color",
          "$description": "Default light canvas background"
        }
      },
      "inset": {
        "dark": {
          "$value": "#010409",
          "$type": "color",
          "$description": "Deeper dark background"
        }
      },
      "subtle": {
        "dark": {
          "$value": "#161b22",
          "$type": "color",
          "$description": "Subtle dark surface"
        },
        "light": {
          "$value": "#f6f8fa",
          "$type": "color",
          "$description": "Subtle light surface"
        }
      }
    },
    "fg": {
      "default": {
        "dark": {
          "$value": "#e6edf3",
          "$type": "color",
          "$description": "Primary text on dark"
        },
        "light": {
          "$value": "#1f2328",
          "$type": "color",
          "$description": "Primary text on light"
        }
      },
      "muted": {
        "dark": {
          "$value": "#7d8590",
          "$type": "color",
          "$description": "Muted text on dark"
        },
        "light": {
          "$value": "#636c76",
          "$type": "color",
          "$description": "Muted text on light"
        }
      },
      "subtle": {
        "dark": {
          "$value": "#6e7681",
          "$type": "color",
          "$description": "Subtle text on dark"
        },
        "light": {
          "$value": "#6e7781",
          "$type": "color",
          "$description": "Subtle text on light"
        }
      }
    },
    "border": {
      "default": {
        "dark": {
          "$value": "#30363d",
          "$type": "color",
          "$description": "Default border on dark"
        },
        "light": {
          "$value": "#d0d7de",
          "$type": "color",
          "$description": "Default border on light"
        }
      },
      "muted": {
        "dark": {
          "$value": "#21262d",
          "$type": "color",
          "$description": "Muted border on dark"
        },
        "light": {
          "$value": "#d8dee4",
          "$type": "color",
          "$description": "Muted border on light"
        }
      }
    },
    "success": {
      "emphasis": {
        "$value": "#2da44e",
        "$type": "color",
        "$description": "Primary success/green CTA color"
      },
      "fg": {
        "$value": "#1f883d",
        "$type": "color",
        "$description": "Success text and hover state"
      }
    },
    "accent": {
      "emphasis": {
        "$value": "#0969da",
        "$type": "color",
        "$description": "Primary blue accent for links"
      },
      "fg": {
        "$value": "#0366d6",
        "$type": "color",
        "$description": "Accent text and hover state"
      }
    },
    "done": {
      "emphasis": {
        "$value": "#a371f7",
        "$type": "color",
        "$description": "Purple accent color"
      }
    },
    "sponsors": {
      "emphasis": {
        "$value": "#bf3989",
        "$type": "color",
        "$description": "Pink sponsor color"
      }
    },
    "severe": {
      "fg": {
        "$value": "#fb8500",
        "$type": "color",
        "$description": "Orange warning color"
      }
    },
    "gradient": {
      "purple": {
        "start": {
          "$value": "#8957e5",
          "$type": "color",
          "$description": "Purple gradient start"
        },
        "mid": {
          "$value": "#6e40c9",
          "$type": "color",
          "$description": "Purple gradient middle"
        }
      },
      "blue": {
        "end": {
          "$value": "#0969da",
          "$type": "color",
          "$description": "Blue gradient end"
        }
      },
      "cyan": {
        "$value": "#39c5cf",
        "$type": "color",
        "$description": "Cyan accent in gradients"
      }
    }
  },
  "font": {
    "family": {
      "sans": {
        "$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\"",
        "$type": "fontFamily",
        "$description": "System font stack for body text"
      },
      "mono": {
        "$value": "\"SF Mono\", ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", Menlo, monospace",
        "$type": "fontFamily",
        "$description": "Monospace font stack for code"
      }
    },
    "size": {
      "xs": {
        "$value": "0.75rem",
        "$type": "fontSize",
        "$description": "12px - captions, labels"
      },
      "sm": {
        "$value": "0.875rem",
        "$type": "fontSize",
        "$description": "14px - default body text"
      },
      "base": {
        "$value": "1rem",
        "$type": "fontSize",
        "$description": "16px - large body text"
      },
      "lg": {
        "$value": "1.25rem",
        "$type": "fontSize",
        "$description": "20px - subheadings"
      },
      "xl": {
        "$value": "1.5rem",
        "$type": "fontSize",
        "$description": "24px - card headings"
      },
      "2xl": {
        "$value": "2rem",
        "$type": "fontSize",
        "$description": "32px - page headings"
      },
      "3xl": {
        "$value": "2.5rem",
        "$type": "fontSize",
        "$description": "40px - section headings"
      },
      "4xl": {
        "$value": "3.5rem",
        "$type": "fontSize",
        "$description": "56px - large headings"
      },
      "5xl": {
        "$value": "4.5rem",
        "$type": "fontSize",
        "$description": "72px - hero titles"
      }
    },
    "weight": {
      "normal": {
        "$value": 400,
        "$type": "fontWeight",
        "$description": "Regular text weight"
      },
      "medium": {
        "$value": 500,
        "$type": "fontWeight",
        "$description": "Medium weight"
      },
      "semibold": {
        "$value": 600,
        "$type": "fontWeight",
        "$description": "Semibold for headings and buttons"
      },
      "bold": {
        "$value": 700,
        "$type": "fontWeight",
        "$description": "Bold weight"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": 1.1,
        "$type": "number",
        "$description": "Tight line height for large headings"
      },
      "snug": {
        "$value": 1.25,
        "$type": "number",
        "$description": "Snug line height for headings"
      },
      "normal": {
        "$value": 1.5,
        "$type": "number",
        "$description": "Normal line height for body"
      },
      "relaxed": {
        "$value": 1.75,
        "$type": "number",
        "$description": "Relaxed line height"
      }
    }
  },
  "spacing": {
    "1": {
      "$value": "0.25rem",
      "$type": "spacing",
      "$description": "4px - micro spacing"
    },
    "2": {
      "$value": "0.5rem",
      "$type": "spacing",
      "$description": "8px - extra small"
    },
    "3": {
      "$value": "0.75rem",
      "$type": "spacing",
      "$description": "12px - small"
    },
    "4": {
      "$value": "1rem",
      "$type": "spacing",
      "$description": "16px - medium (base)"
    },
    "6": {
      "$value": "1.5rem",
      "$type": "spacing",
      "$description": "24px - large"
    },
    "8": {
      "$value": "2rem",
      "$type": "spacing",
      "$description": "32px - extra large"
    },
    "12": {
      "$value": "3rem",
      "$type": "spacing",
      "$description": "48px - 2xl"
    },
    "16": {
      "$value": "4rem",
      "$type": "spacing",
      "$description": "64px - 3xl"
    },
    "24": {
      "$value": "6rem",
      "$type": "spacing",
      "$description": "96px - 4xl"
    },
    "32": {
      "$value": "8rem",
      "$type": "spacing",
      "$description": "128px - 5xl"
    }
  },
  "radius": {
    "sm": {
      "$value": "3px",
      "$type": "borderRadius",
      "$description": "Small radius for pills"
    },
    "md": {
      "$value": "6px",
      "$type": "borderRadius",
      "$description": "Medium radius for buttons and inputs"
    },
    "lg": {
      "$value": "12px",
      "$type": "borderRadius",
      "$description": "Large radius for cards"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 0 rgba(27, 31, 36, 0.04)",
      "$type": "shadow",
      "$description": "Small shadow for subtle elevation"
    },
    "md": {
      "$value": "0 3px 6px rgba(140, 149, 159, 0.15)",
      "$type": "shadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 8px 24px rgba(140, 149, 159, 0.2)",
      "$type": "shadow",
      "$description": "Large shadow for elevated elements"
    },
    "xl": {
      "$value": "0 12px 48px rgba(31, 35, 40, 0.12)",
      "$type": "shadow",
      "$description": "Extra large shadow for modals"
    }
  },
  "border": {
    "width": {
      "$value": "1px",
      "$type": "borderWidth",
      "$description": "Default border width"
    }
  }
}

Edited (apply an instruction)

Apply an instruction to see the edited tokens here.

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