AI token editor
Edit Robinhood 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": {
"black": {
"$type": "color",
"$value": "#000000",
"$description": "Primary dark background, headlines on light surfaces"
},
"white": {
"$type": "color",
"$value": "#FFFFFF",
"$description": "Light backgrounds, text on dark surfaces"
},
"brand": {
"green": {
"$type": "color",
"$value": "#00C805",
"$description": "Primary CTA on light theme, success states, illustrations"
},
"lime": {
"$type": "color",
"$value": "#C9FF00",
"$description": "Primary CTA on dark theme, accent color, highlights"
},
"gold": {
"$type": "color",
"$value": "#C8A668",
"$description": "Premium content headlines, promotional text"
}
},
"gray": {
"50": {
"$type": "color",
"$value": "#F7F7F7",
"$description": "Light backgrounds, subtle surfaces"
},
"100": {
"$type": "color",
"$value": "#F3F3F3",
"$description": "Card backgrounds on light theme"
},
"400": {
"$type": "color",
"$value": "#A3A3A3",
"$description": "Muted text, placeholders"
},
"600": {
"$type": "color",
"$value": "#6B7280",
"$description": "Secondary text"
},
"700": {
"$type": "color",
"$value": "#4B5563",
"$description": "Body text on light backgrounds"
}
},
"blue-gray": {
"$type": "color",
"$value": "#94A5B5",
"$description": "Alternate hero background color"
},
"navy": {
"$type": "color",
"$value": "#1E3A5F",
"$description": "Illustration accents"
},
"red": {
"$type": "color",
"$value": "#FF5252",
"$description": "Error states, negative values in trading UI"
}
},
"font": {
"family": {
"display": {
"$type": "fontFamily",
"$value": "'Garnett', Georgia, serif",
"$description": "Custom serif for large headlines and hero text"
},
"sans": {
"$type": "fontFamily",
"$value": "'Capsule Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"$description": "Custom sans-serif for UI elements and body text"
}
},
"size": {
"display-2xl": {
"$type": "dimension",
"$value": "5rem",
"$description": "80px - Hero headlines"
},
"display-xl": {
"$type": "dimension",
"$value": "4rem",
"$description": "64px - Page headlines"
},
"display-lg": {
"$type": "dimension",
"$value": "3rem",
"$description": "48px - Section headlines"
},
"heading-lg": {
"$type": "dimension",
"$value": "2rem",
"$description": "32px - Subheadings"
},
"heading-md": {
"$type": "dimension",
"$value": "1.5rem",
"$description": "24px - Card titles"
},
"body-lg": {
"$type": "dimension",
"$value": "1.125rem",
"$description": "18px - Hero body text"
},
"body-md": {
"$type": "dimension",
"$value": "1rem",
"$description": "16px - Standard body text"
},
"body-sm": {
"$type": "dimension",
"$value": "0.875rem",
"$description": "14px - Small text, captions"
}
},
"weight": {
"normal": {
"$type": "fontWeight",
"$value": "400",
"$description": "Regular weight for body text"
},
"medium": {
"$type": "fontWeight",
"$value": "500",
"$description": "Medium weight for labels and buttons"
},
"semibold": {
"$type": "fontWeight",
"$value": "600",
"$description": "Semibold for emphasis"
}
},
"lineHeight": {
"tight": {
"$type": "number",
"$value": "1.1",
"$description": "For large display text"
},
"snug": {
"$type": "number",
"$value": "1.2",
"$description": "For headings"
},
"base": {
"$type": "number",
"$value": "1.5",
"$description": "For body text"
},
"relaxed": {
"$type": "number",
"$value": "1.6",
"$description": "For readable paragraphs"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "0.25rem",
"$description": "4px"
},
"2": {
"$type": "dimension",
"$value": "0.5rem",
"$description": "8px"
},
"3": {
"$type": "dimension",
"$value": "0.75rem",
"$description": "12px"
},
"4": {
"$type": "dimension",
"$value": "1rem",
"$description": "16px"
},
"6": {
"$type": "dimension",
"$value": "1.5rem",
"$description": "24px"
},
"8": {
"$type": "dimension",
"$value": "2rem",
"$description": "32px"
},
"12": {
"$type": "dimension",
"$value": "3rem",
"$description": "48px"
},
"16": {
"$type": "dimension",
"$value": "4rem",
"$description": "64px"
},
"20": {
"$type": "dimension",
"$value": "5rem",
"$description": "80px"
},
"24": {
"$type": "dimension",
"$value": "6rem",
"$description": "96px"
},
"32": {
"$type": "dimension",
"$value": "8rem",
"$description": "128px"
}
},
"radius": {
"sm": {
"$type": "dimension",
"$value": "4px",
"$description": "Small elements"
},
"md": {
"$type": "dimension",
"$value": "8px",
"$description": "Cards, modals"
},
"lg": {
"$type": "dimension",
"$value": "12px",
"$description": "Large cards"
},
"full": {
"$type": "dimension",
"$value": "9999px",
"$description": "Pill-shaped buttons"
}
},
"shadow": {
"sm": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "1px",
"blur": "2px",
"color": "rgba(0, 0, 0, 0.05)"
},
"$description": "Subtle shadow for small elevations"
},
"md": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "4px",
"blur": "6px",
"color": "rgba(0, 0, 0, 0.1)"
},
"$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 surfaces"
},
"xl": {
"$type": "shadow",
"$value": {
"offsetX": "0px",
"offsetY": "20px",
"blur": "25px",
"color": "rgba(0, 0, 0, 0.15)"
},
"$description": "Extra large shadow for modals"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Robinhood is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.