AI token editor
Edit Twitch 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": {
"purple": {
"primary": {
"$value": "#9146FF",
"$type": "color",
"$description": "Primary brand purple for CTAs, links, and key UI elements"
},
"dark": {
"$value": "#772CE8",
"$type": "color",
"$description": "Darker purple for hover states and active elements"
},
"light": {
"$value": "#BF94FF",
"$type": "color",
"$description": "Light purple for accents and highlights"
},
"11": {
"$value": "#A970FF",
"$type": "color",
"$description": "Purple variant for hover states"
}
},
"background": {
"base": {
"$value": "#0E0E10",
"$type": "color",
"$description": "Primary background color for dark theme"
},
"alt": {
"$value": "#18181B",
"$type": "color",
"$description": "Alternate background for sidebars and surfaces"
},
"alt2": {
"$value": "#1F1F23",
"$type": "color",
"$description": "Secondary alternate background for elevated surfaces"
},
"surface": {
"$value": "#2D2D35",
"$type": "color",
"$description": "Surface background for cards and panels"
},
"light": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Light theme background"
},
"lightAlt": {
"$value": "#F7F7F8",
"$type": "color",
"$description": "Light theme alternate background"
}
},
"border": {
"default": {
"$value": "#3A3A3D",
"$type": "color",
"$description": "Default border color"
},
"subtle": {
"$value": "#2D2D35",
"$type": "color",
"$description": "Subtle border for dividers"
},
"light": {
"$value": "#E5E5E8",
"$type": "color",
"$description": "Light theme border color"
}
},
"text": {
"primary": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Primary text color for dark theme"
},
"secondary": {
"$value": "#ADADB8",
"$type": "color",
"$description": "Secondary text for metadata and labels"
},
"tertiary": {
"$value": "#6C6C7A",
"$type": "color",
"$description": "Tertiary text for disabled states"
},
"lightPrimary": {
"$value": "#1F1F23",
"$type": "color",
"$description": "Primary text for light theme"
},
"lightSecondary": {
"$value": "#53535F",
"$type": "color",
"$description": "Secondary text for light theme"
}
},
"semantic": {
"live": {
"$value": "#E91916",
"$type": "color",
"$description": "Live indicator red"
},
"error": {
"$value": "#EC1818",
"$type": "color",
"$description": "Error state color"
},
"success": {
"$value": "#00F7C3",
"$type": "color",
"$description": "Success state teal"
},
"successDark": {
"$value": "#1DB887",
"$type": "color",
"$description": "Dark success variant"
},
"warning": {
"$value": "#FFD700",
"$type": "color",
"$description": "Warning state yellow"
}
}
},
"font": {
"family": {
"sans": {
"$value": "Roobert, Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
},
"mono": {
"$value": "Consolas, Monaco, Courier New, monospace",
"$type": "fontFamily",
"$description": "Monospace font stack"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Extra small text (metadata, small labels)"
},
"sm": {
"$value": "13px",
"$type": "dimension",
"$description": "Small text (tags, compact UI)"
},
"base": {
"$value": "14px",
"$type": "dimension",
"$description": "Base body text"
},
"lg": {
"$value": "16px",
"$type": "dimension",
"$description": "Large body text"
},
"xl": {
"$value": "18px",
"$type": "dimension",
"$description": "Extra large body text"
},
"2xl": {
"$value": "20px",
"$type": "dimension",
"$description": "H5 heading"
},
"3xl": {
"$value": "24px",
"$type": "dimension",
"$description": "H4 heading"
},
"4xl": {
"$value": "36px",
"$type": "dimension",
"$description": "H3 heading"
},
"5xl": {
"$value": "48px",
"$type": "dimension",
"$description": "H2 heading"
},
"6xl": {
"$value": "72px",
"$type": "dimension",
"$description": "H1 hero heading"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Regular weight"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Semi-bold weight"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Bold weight"
}
},
"lineHeight": {
"xs": {
"$value": "16px",
"$type": "dimension",
"$description": "Line height for 12px text"
},
"sm": {
"$value": "18px",
"$type": "dimension",
"$description": "Line height for 13px text"
},
"base": {
"$value": "20px",
"$type": "dimension",
"$description": "Line height for 14px text"
},
"lg": {
"$value": "22px",
"$type": "dimension",
"$description": "Line height for 16px text"
},
"xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Line height for 18px text"
},
"2xl": {
"$value": "26px",
"$type": "dimension",
"$description": "Line height for 20px text"
},
"3xl": {
"$value": "30px",
"$type": "dimension",
"$description": "Line height for 24px text"
},
"4xl": {
"$value": "42px",
"$type": "dimension",
"$description": "Line height for 36px text"
},
"5xl": {
"$value": "54px",
"$type": "dimension",
"$description": "Line height for 48px text"
},
"6xl": {
"$value": "78px",
"$type": "dimension",
"$description": "Line height for 72px text"
}
}
},
"spacing": {
"0": {
"$value": "0px",
"$type": "dimension",
"$description": "No spacing"
},
"05": {
"$value": "2px",
"$type": "dimension",
"$description": "Minimal spacing"
},
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Tight spacing"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Small spacing"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Medium-small spacing"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Default spacing"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "Medium spacing"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Large spacing"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "XL spacing"
},
"10": {
"$value": "40px",
"$type": "dimension",
"$description": "2XL spacing"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "3XL spacing"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "4XL spacing"
}
},
"radius": {
"none": {
"$value": "0px",
"$type": "dimension",
"$description": "No border radius"
},
"sm": {
"$value": "4px",
"$type": "dimension",
"$description": "Small radius for tags and badges"
},
"md": {
"$value": "6px",
"$type": "dimension",
"$description": "Medium radius for buttons and cards"
},
"lg": {
"$value": "8px",
"$type": "dimension",
"$description": "Large radius for cards"
},
"xl": {
"$value": "12px",
"$type": "dimension",
"$description": "XL radius for hero images"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Full radius for circular elements"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.3)",
"$type": "shadow",
"$description": "Subtle elevation shadow"
},
"md": {
"$value": "0 2px 8px rgba(0, 0, 0, 0.4)",
"$type": "shadow",
"$description": "Card elevation shadow"
},
"lg": {
"$value": "0 4px 16px rgba(0, 0, 0, 0.5)",
"$type": "shadow",
"$description": "Modal and dropdown shadow"
},
"xl": {
"$value": "0 8px 32px rgba(0, 0, 0, 0.6)",
"$type": "shadow",
"$description": "High elevation shadow"
}
},
"borderWidth": {
"thin": {
"$value": "1px",
"$type": "dimension",
"$description": "Default border width"
},
"thick": {
"$value": "2px",
"$type": "dimension",
"$description": "Thick border for emphasis"
}
}
}
Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Twitch is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.