AI token editor
Edit Pinterest 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": "#E60023",
"$type": "color",
"$description": "Pinterest brand red - primary CTA buttons, logo, brand elements"
},
"primary-hover": {
"$value": "#AD081B",
"$type": "color",
"$description": "Darker red for primary button hover states"
},
"black": {
"$value": "#111111",
"$type": "color",
"$description": "Primary text color, headings, high-emphasis content"
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Page backgrounds, button text on dark surfaces"
},
"gray": {
"50": {
"$value": "#FAFAFA",
"$type": "color",
"$description": "Subtle backgrounds, hover states"
},
"100": {
"$value": "#F7F7F7",
"$type": "color",
"$description": "Section backgrounds, alternate rows"
},
"200": {
"$value": "#EFEFEF",
"$type": "color",
"$description": "Input backgrounds, disabled states"
},
"300": {
"$value": "#E2E2E2",
"$type": "color",
"$description": "Secondary button fills, dividers"
},
"400": {
"$value": "#CDCDCD",
"$type": "color",
"$description": "Borders, inactive elements"
},
"600": {
"$value": "#767676",
"$type": "color",
"$description": "Secondary text, metadata, captions"
},
"700": {
"$value": "#5F5F5F",
"$type": "color",
"$description": "Tertiary text"
},
"900": {
"$value": "#333333",
"$type": "color",
"$description": "Body text, labels"
}
},
"success": {
"$value": "#0A6E3E",
"$type": "color",
"$description": "Success states, positive feedback"
},
"error": {
"$value": "#CC0000",
"$type": "color",
"$description": "Error states, alerts, destructive actions"
}
},
"font": {
"family": {
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
"$type": "fontFamily",
"$description": "Primary font stack - system fonts for optimal performance"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Captions, timestamps, fine print"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small body text, metadata"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Default body text size"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body copy, emphasized text"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Small headings"
},
"2xl": {
"$value": "28px",
"$type": "dimension",
"$description": "Card titles, component headers"
},
"3xl": {
"$value": "36px",
"$type": "dimension",
"$description": "Subsection headings"
},
"4xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Section headings"
},
"5xl": {
"$value": "60px",
"$type": "dimension",
"$description": "Page heroes"
},
"6xl": {
"$value": "72px",
"$type": "dimension",
"$description": "Display headlines, hero statements"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Regular body text"
},
"medium": {
"$value": "600",
"$type": "fontWeight",
"$description": "Button labels, emphasis"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Headings, strong emphasis"
},
"extrabold": {
"$value": "800",
"$type": "fontWeight",
"$description": "Display headlines"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Large display text"
},
"snug": {
"$value": "1.25",
"$type": "number",
"$description": "Headings"
},
"normal": {
"$value": "1.5",
"$type": "number",
"$description": "Body text"
},
"relaxed": {
"$value": "1.6",
"$type": "number",
"$description": "Large body copy"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Micro spacing, icon gaps"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Tight spacing"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Small padding"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Default spacing unit, grid gaps"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "Card padding"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Component padding, gutters"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "Section padding"
},
"10": {
"$value": "40px",
"$type": "dimension",
"$description": "Large gaps"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "Section margins"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "Major section spacing"
},
"20": {
"$value": "80px",
"$type": "dimension",
"$description": "Hero padding"
},
"24": {
"$value": "96px",
"$type": "dimension",
"$description": "Page section dividers"
},
"32": {
"$value": "128px",
"$type": "dimension",
"$description": "Extra large spacing"
}
},
"radius": {
"sm": {
"$value": "8px",
"$type": "dimension",
"$description": "Small cards, inputs, tabs"
},
"md": {
"$value": "16px",
"$type": "dimension",
"$description": "Cards, images, containers"
},
"lg": {
"$value": "24px",
"$type": "dimension",
"$description": "Large cards, modals"
},
"xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Buttons, search bars"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Pill-shaped buttons, circular elements"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.06)",
"$type": "shadow",
"$description": "Subtle elevation, inputs"
},
"md": {
"$value": "0 4px 8px rgba(0, 0, 0, 0.08)",
"$type": "shadow",
"$description": "Cards, dropdowns, hover states"
},
"lg": {
"$value": "0 8px 16px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Modals, popovers"
},
"xl": {
"$value": "0 16px 32px rgba(0, 0, 0, 0.12)",
"$type": "shadow",
"$description": "Major overlays, drawers"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Pinterest is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.