Back to Coinbase
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.