AI token editor
Edit Render 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": {
"$type": "color",
"$value": "#8B00FF",
"$description": "Primary brand purple for accents, interactive elements, and charts"
},
"600": {
"$type": "color",
"$value": "#A855F7",
"$description": "Medium purple variant"
},
"300": {
"$type": "color",
"$value": "#C084FC",
"$description": "Light purple accent"
},
"200": {
"$type": "color",
"$value": "#DDD6FE",
"$description": "Light purple for backgrounds and pricing cards"
},
"100": {
"$type": "color",
"$value": "#F3F0FF",
"$description": "Subtle purple tint"
},
"dark": {
"$type": "color",
"$value": "#2D1B4E",
"$description": "Dark purple for banner background"
}
},
"accent": {
"cyan": {
"$type": "color",
"$value": "#06FFF0",
"$description": "Cyan accent for charts and highlights"
},
"lime": {
"$type": "color",
"$value": "#D4FF4D",
"$description": "Lime accent for Pro pricing tier"
},
"blue": {
"$type": "color",
"$value": "#B3E5FC",
"$description": "Blue accent for Hobby pricing tier"
},
"orange": {
"$type": "color",
"$value": "#FF6B35",
"$description": "Orange accent for gradients"
}
},
"neutral": {
"black": {
"$type": "color",
"$value": "#000000",
"$description": "Primary text and UI elements"
},
"white": {
"$type": "color",
"$value": "#FFFFFF",
"$description": "Backgrounds and inverted text"
},
"gray-900": {
"$type": "color",
"$value": "#171717",
"$description": "Darkest text"
},
"gray-700": {
"$type": "color",
"$value": "#404040",
"$description": "Body text"
},
"gray-600": {
"$type": "color",
"$value": "#525252",
"$description": "Secondary text"
},
"gray-500": {
"$type": "color",
"$value": "#737373",
"$description": "Tertiary text and labels"
},
"gray-400": {
"$type": "color",
"$value": "#A3A3A3",
"$description": "Muted text"
},
"gray-300": {
"$type": "color",
"$value": "#D4D4D4",
"$description": "Borders and dividers"
},
"gray-200": {
"$type": "color",
"$value": "#E5E5E5",
"$description": "Subtle borders and card backgrounds"
},
"gray-100": {
"$type": "color",
"$value": "#F5F5F4",
"$description": "Light backgrounds"
},
"gray-50": {
"$type": "color",
"$value": "#FAFAF9",
"$description": "Page background"
},
"cream": {
"$type": "color",
"$value": "#F9F8F6",
"$description": "Warm off-white background"
}
}
},
"font": {
"family": {
"sans": {
"$type": "fontFamily",
"$value": "ABC Favorit, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif",
"$description": "Primary sans-serif font stack"
},
"mono": {
"$type": "fontFamily",
"$value": "JetBrains Mono, Courier New, monospace",
"$description": "Monospace font for code"
}
},
"size": {
"display-xl": {
"$type": "dimension",
"$value": "96px",
"$description": "Extra large display text for hero headlines"
},
"display-lg": {
"$type": "dimension",
"$value": "72px",
"$description": "Large display text"
},
"display-md": {
"$type": "dimension",
"$value": "60px",
"$description": "Medium display text for page headlines"
},
"heading-xl": {
"$type": "dimension",
"$value": "48px",
"$description": "Extra large heading"
},
"heading-lg": {
"$type": "dimension",
"$value": "36px",
"$description": "Large heading"
},
"heading-md": {
"$type": "dimension",
"$value": "30px",
"$description": "Medium heading for cards"
},
"heading-sm": {
"$type": "dimension",
"$value": "24px",
"$description": "Small heading"
},
"body-lg": {
"$type": "dimension",
"$value": "20px",
"$description": "Large body text"
},
"body-md": {
"$type": "dimension",
"$value": "18px",
"$description": "Default body text"
},
"body-sm": {
"$type": "dimension",
"$value": "16px",
"$description": "Small body text and navigation"
},
"caption": {
"$type": "dimension",
"$value": "14px",
"$description": "Caption and label text"
},
"overline": {
"$type": "dimension",
"$value": "12px",
"$description": "Uppercase overline labels"
}
},
"weight": {
"normal": {
"$type": "number",
"$value": 400,
"$description": "Normal font weight"
},
"medium": {
"$type": "number",
"$value": 500,
"$description": "Medium font weight"
},
"semibold": {
"$type": "number",
"$value": 600,
"$description": "Semibold font weight"
}
},
"lineHeight": {
"tight": {
"$type": "number",
"$value": 1.0,
"$description": "Tight line height for display text"
},
"snug": {
"$type": "number",
"$value": 1.15,
"$description": "Snug line height for headings"
},
"normal": {
"$type": "number",
"$value": 1.5,
"$description": "Normal line height"
},
"relaxed": {
"$type": "number",
"$value": 1.6,
"$description": "Relaxed line height for body text"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "8px",
"$description": "Base spacing unit - tight spacing"
},
"2": {
"$type": "dimension",
"$value": "16px",
"$description": "Small gaps"
},
"3": {
"$type": "dimension",
"$value": "24px",
"$description": "Medium gaps"
},
"4": {
"$type": "dimension",
"$value": "32px",
"$description": "Large gaps"
},
"5": {
"$type": "dimension",
"$value": "40px",
"$description": "Extra large gaps"
},
"6": {
"$type": "dimension",
"$value": "48px",
"$description": "Section padding"
},
"8": {
"$type": "dimension",
"$value": "64px",
"$description": "Large section padding"
},
"10": {
"$type": "dimension",
"$value": "80px",
"$description": "Extra large section padding"
},
"12": {
"$type": "dimension",
"$value": "96px",
"$description": "Hero section spacing"
},
"16": {
"$type": "dimension",
"$value": "128px",
"$description": "XXL section spacing"
},
"20": {
"$type": "dimension",
"$value": "160px",
"$description": "Hero vertical padding"
},
"24": {
"$type": "dimension",
"$value": "192px",
"$description": "Massive spacing"
}
},
"radius": {
"sm": {
"$type": "dimension",
"$value": "4px",
"$description": "Small border radius"
},
"md": {
"$type": "dimension",
"$value": "6px",
"$description": "Medium border radius for buttons"
},
"lg": {
"$type": "dimension",
"$value": "12px",
"$description": "Large border radius for cards"
},
"xl": {
"$type": "dimension",
"$value": "16px",
"$description": "Extra large border radius"
},
"2xl": {
"$type": "dimension",
"$value": "24px",
"$description": "XXL border radius for feature cards"
}
},
"shadow": {
"sm": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "1px",
"blur": "2px",
"color": "rgba(0, 0, 0, 0.05)"
},
"$description": "Subtle shadow for minimal lift"
},
"md": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "4px",
"blur": "6px",
"color": "rgba(0, 0, 0, 0.07)"
},
"$description": "Medium shadow for cards"
},
"lg": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "10px",
"blur": "15px",
"color": "rgba(0, 0, 0, 0.1)"
},
"$description": "Large shadow for elevated cards"
},
"xl": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "20px",
"blur": "25px",
"color": "rgba(0, 0, 0, 0.15)"
},
"$description": "Extra large shadow for modals"
}
},
"border": {
"width": {
"thin": {
"$type": "dimension",
"$value": "1px",
"$description": "Default border width"
},
"medium": {
"$type": "dimension",
"$value": "2px",
"$description": "Emphasized border width"
},
"thick": {
"$type": "dimension",
"$value": "3px",
"$description": "Strong border width"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Render is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.