Back to Anthropic
AI token editor

Edit Anthropic 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": {
    "background": {
      "cream": {
        "$value": "#F5F3EE",
        "$type": "color",
        "$description": "Primary background color for Anthropic.com pages"
      },
      "white": {
        "$value": "#FFFFFF",
        "$type": "color",
        "$description": "Primary background for Claude.ai and card backgrounds"
      },
      "dark": {
        "$value": "#1A1A1A",
        "$type": "color",
        "$description": "Dark sections, hero cards, footer backgrounds"
      }
    },
    "text": {
      "primary": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Primary text color for headings and body"
      },
      "secondary": {
        "$value": "#2A2A2A",
        "$type": "color",
        "$description": "Secondary text for less emphasis"
      }
    },
    "brand": {
      "coral": {
        "$value": "#D97757",
        "$type": "color",
        "$description": "Primary brand color, CTAs, illustrations"
      },
      "coral-dark": {
        "$value": "#CC785C",
        "$type": "color",
        "$description": "Darker coral for hover states and emphasis"
      },
      "coral-light": {
        "$value": "#E07A5F",
        "$type": "color",
        "$description": "Light coral for backgrounds and accents"
      }
    },
    "accent": {
      "mint": {
        "$value": "#B8D4CE",
        "$type": "color",
        "$description": "Secondary accent color, card backgrounds"
      },
      "mint-dark": {
        "$value": "#A8C9C3",
        "$type": "color",
        "$description": "Darker mint for contrast"
      },
      "yellow": {
        "$value": "#FFE66D",
        "$type": "color",
        "$description": "Highlight color for emphasis"
      },
      "yellow-dark": {
        "$value": "#F4E04D",
        "$type": "color",
        "$description": "Darker yellow for better contrast"
      }
    },
    "border": {
      "light": {
        "$value": "#E5E3DE",
        "$type": "color",
        "$description": "Subtle borders and dividers"
      }
    }
  },
  "font": {
    "family": {
      "serif": {
        "$value": "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
        "$type": "fontFamily",
        "$description": "Serif font for headlines and body text"
      },
      "sans": {
        "$value": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
        "$type": "fontFamily",
        "$description": "Sans-serif font for UI elements and navigation"
      }
    },
    "size": {
      "display-xl": {
        "$value": "72px",
        "$type": "dimension",
        "$description": "Extra large display text for hero headlines"
      },
      "display-lg": {
        "$value": "64px",
        "$type": "dimension",
        "$description": "Large display text"
      },
      "heading-1": {
        "$value": "56px",
        "$type": "dimension",
        "$description": "Page titles"
      },
      "heading-2": {
        "$value": "40px",
        "$type": "dimension",
        "$description": "Section headings"
      },
      "heading-3": {
        "$value": "28px",
        "$type": "dimension",
        "$description": "Subsection headings"
      },
      "heading-4": {
        "$value": "24px",
        "$type": "dimension",
        "$description": "Card titles"
      },
      "body-lg": {
        "$value": "18px",
        "$type": "dimension",
        "$description": "Large body text"
      },
      "body": {
        "$value": "16px",
        "$type": "dimension",
        "$description": "Default body text"
      },
      "body-sm": {
        "$value": "14px",
        "$type": "dimension",
        "$description": "Small text and captions"
      }
    },
    "weight": {
      "normal": {
        "$value": "400",
        "$type": "number",
        "$description": "Regular weight for body text"
      },
      "medium": {
        "$value": "500",
        "$type": "number",
        "$description": "Medium weight for emphasis"
      },
      "semibold": {
        "$value": "600",
        "$type": "number",
        "$description": "Semi-bold for headings"
      },
      "bold": {
        "$value": "700",
        "$type": "number",
        "$description": "Bold for strong emphasis"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "1.1",
        "$type": "number",
        "$description": "Tight line height for display text"
      },
      "snug": {
        "$value": "1.2",
        "$type": "number",
        "$description": "Snug line height for headings"
      },
      "normal": {
        "$value": "1.4",
        "$type": "number",
        "$description": "Normal line height"
      },
      "relaxed": {
        "$value": "1.6",
        "$type": "number",
        "$description": "Relaxed line height for body text"
      }
    }
  },
  "spacing": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Extra small spacing"
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Small spacing"
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Medium spacing"
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Large spacing"
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Extra large spacing"
    },
    "2xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "2x extra large spacing"
    },
    "3xl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "3x extra large spacing"
    },
    "4xl": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "4x extra large spacing"
    },
    "5xl": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "5x extra large spacing"
    },
    "6xl": {
      "$value": "128px",
      "$type": "dimension",
      "$description": "6x extra large spacing"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Small border radius"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Medium border radius for buttons and inputs"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Large border radius for cards"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Extra large border radius for hero cards"
    },
    "full": {
      "$value": "999px",
      "$type": "dimension",
      "$description": "Full border radius for pills and circular elements"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
      "$type": "shadow",
      "$description": "Subtle shadow for slight lift"
    },
    "md": {
      "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
      "$type": "shadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
      "$type": "shadow",
      "$description": "Large shadow for elevated elements"
    },
    "button": {
      "$value": "0 2px 4px rgba(0, 0, 0, 0.08)",
      "$type": "shadow",
      "$description": "Button shadow for depth"
    }
  },
  "border": {
    "width": {
      "default": {
        "$value": "1px",
        "$type": "dimension",
        "$description": "Standard 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.

Anthropic is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.