AI token editor
Edit Coinbase 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": {
"primary": {
"$value": "#0052FF",
"$type": "color",
"$description": "Primary brand color for CTAs, links, and interactive elements"
},
"primary-dark": {
"$value": "#0A1F44",
"$type": "color",
"$description": "Dark blue for gradients and deep backgrounds"
},
"primary-hover": {
"$value": "#0047E0",
"$type": "color",
"$description": "Hover state for primary buttons"
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "White for backgrounds and text on dark surfaces"
},
"black": {
"$value": "#000000",
"$type": "color",
"$description": "Black for high-emphasis text and headings"
},
"gray": {
"900": {
"$value": "#050F19",
"$type": "color",
"$description": "Darkest gray for primary text"
},
"700": {
"$value": "#5B616E",
"$type": "color",
"$description": "Body text and secondary content"
},
"600": {
"$value": "#6B7280",
"$type": "color",
"$description": "Tertiary text and placeholders"
},
"400": {
"$value": "#9CA3AF",
"$type": "color",
"$description": "Disabled text and subtle borders"
},
"300": {
"$value": "#D8D8D8",
"$type": "color",
"$description": "Default borders and dividers"
},
"200": {
"$value": "#E5E5E5",
"$type": "color",
"$description": "Subtle dividers"
},
"100": {
"$value": "#F5F5F5",
"$type": "color",
"$description": "Card backgrounds and hover states"
},
"50": {
"$value": "#FAFAFA",
"$type": "color",
"$description": "Page backgrounds"
}
},
"success": {
"$value": "#05B169",
"$type": "color",
"$description": "Success states and positive values"
},
"success-light": {
"$value": "#00D924",
"$type": "color",
"$description": "Chart indicators for positive trends"
},
"error": {
"$value": "#DF5F67",
"$type": "color",
"$description": "Error states and negative values"
},
"error-bright": {
"$value": "#FF0000",
"$type": "color",
"$description": "Critical alerts and warnings"
},
"warning": {
"$value": "#F5841F",
"$type": "color",
"$description": "Warning states and Bitcoin brand color"
},
"warning-yellow": {
"$value": "#FCD535",
"$type": "color",
"$description": "Highlights and accent elements"
}
},
"font": {
"family": {
"sans": {
"$value": "\"Coinbase Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
},
"mono": {
"$value": "\"Coinbase Mono\", \"Roboto Mono\", Menlo, monospace",
"$type": "fontFamily",
"$description": "Monospace font for numerical values"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Extra small text, labels"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text, captions"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Default body text"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body text"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Small headings"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Medium headings"
},
"3xl": {
"$value": "28px",
"$type": "dimension",
"$description": "Large headings"
},
"4xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Extra large headings"
},
"5xl": {
"$value": "40px",
"$type": "dimension",
"$description": "Display headings"
},
"6xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Large display text"
},
"7xl": {
"$value": "64px",
"$type": "dimension",
"$description": "Hero display text"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Regular text weight"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Medium emphasis"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Headings and emphasis"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Strong emphasis, display text"
}
},
"lineHeight": {
"xs": {
"$value": "16px",
"$type": "dimension",
"$description": "Tight line height for small text"
},
"sm": {
"$value": "20px",
"$type": "dimension",
"$description": "Small text line height"
},
"base": {
"$value": "24px",
"$type": "dimension",
"$description": "Default body line height"
},
"lg": {
"$value": "28px",
"$type": "dimension",
"$description": "Large text line height"
},
"xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Heading line height"
},
"2xl": {
"$value": "40px",
"$type": "dimension",
"$description": "Large heading line height"
},
"3xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Display line height"
},
"4xl": {
"$value": "56px",
"$type": "dimension",
"$description": "Large display line height"
},
"5xl": {
"$value": "72px",
"$type": "dimension",
"$description": "Hero line height"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Minimal spacing"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Compact spacing"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Small spacing"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Default spacing"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "Medium-small spacing"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Medium spacing"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "Large spacing"
},
"10": {
"$value": "40px",
"$type": "dimension",
"$description": "Extra large spacing"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "Section spacing"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "Page section spacing"
},
"20": {
"$value": "80px",
"$type": "dimension",
"$description": "Hero spacing"
},
"24": {
"$value": "96px",
"$type": "dimension",
"$description": "Large page section"
}
},
"radius": {
"sm": {
"$value": "4px",
"$type": "dimension",
"$description": "Small border radius for badges"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Default border radius for buttons, inputs, cards"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Large border radius for prominent cards"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Extra large radius for hero sections"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Full radius for pills and circles"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Subtle elevation"
},
"md": {
"$value": "0 2px 8px rgba(0, 0, 0, 0.08)",
"$type": "shadow",
"$description": "Card elevation"
},
"lg": {
"$value": "0 4px 16px rgba(0, 0, 0, 0.12)",
"$type": "shadow",
"$description": "Modal elevation"
},
"xl": {
"$value": "0 8px 32px rgba(0, 0, 0, 0.16)",
"$type": "shadow",
"$description": "High elevation for overlays"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Coinbase is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.