AI token editor
Edit PlanetScale 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": {
"orange": {
"600": {
"$value": "#ff6c37",
"$type": "color",
"$description": "Primary CTA buttons, accent borders"
},
"700": {
"$value": "#e85c2a",
"$type": "color",
"$description": "Button hover states"
}
},
"blue": {
"600": {
"$value": "#0066cc",
"$type": "color",
"$description": "Links, interactive elements, icons"
},
"700": {
"$value": "#0052a3",
"$type": "color",
"$description": "Link hover states"
}
},
"yellow": {
"500": {
"$value": "#ffc107",
"$type": "color",
"$description": "Banner CTA, badges"
}
},
"gray": {
"950": {
"$value": "#000000",
"$type": "color",
"$description": "Top banner background"
},
"900": {
"$value": "#111827",
"$type": "color",
"$description": "Headings, primary text"
},
"700": {
"$value": "#374151",
"$type": "color",
"$description": "Secondary text"
},
"600": {
"$value": "#6b7280",
"$type": "color",
"$description": "Tertiary text, metadata"
},
"400": {
"$value": "#9ca3af",
"$type": "color",
"$description": "Placeholder text"
},
"300": {
"$value": "#d1d5db",
"$type": "color",
"$description": "Disabled text"
},
"200": {
"$value": "#e5e7eb",
"$type": "color",
"$description": "Borders, dividers"
},
"100": {
"$value": "#f3f4f6",
"$type": "color",
"$description": "Card backgrounds"
},
"50": {
"$value": "#f9fafb",
"$type": "color",
"$description": "Sidebar, page backgrounds"
}
},
"white": {
"$value": "#ffffff",
"$type": "color",
"$description": "Primary background, card surfaces"
}
},
"font": {
"family": {
"sans": {
"$value": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
"$type": "fontFamily",
"$description": "Primary font stack"
},
"mono": {
"$value": "\"SF Mono\", Consolas, Monaco, monospace",
"$type": "fontFamily",
"$description": "Monospace font for code"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Captions, labels"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Body small, form labels"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Body text"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Section headings"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Card titles"
},
"3xl": {
"$value": "30px",
"$type": "dimension",
"$description": "Page titles"
},
"4xl": {
"$value": "36px",
"$type": "dimension",
"$description": "Hero headlines"
},
"5xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Large headlines"
}
},
"weight": {
"normal": {
"$value": 400,
"$type": "fontWeight",
"$description": "Regular body text"
},
"medium": {
"$value": 500,
"$type": "fontWeight",
"$description": "Emphasized text"
},
"semibold": {
"$value": 600,
"$type": "fontWeight",
"$description": "Subheadings"
},
"bold": {
"$value": 700,
"$type": "fontWeight",
"$description": "Headings"
}
},
"lineHeight": {
"tight": {
"$value": 1,
"$type": "number",
"$description": "Tight line height"
},
"snug": {
"$value": 1.2,
"$type": "number",
"$description": "Snug headings"
},
"normal": {
"$value": 1.5,
"$type": "number",
"$description": "Body text"
},
"relaxed": {
"$value": 1.75,
"$type": "number",
"$description": "Loose paragraphs"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Tight spacing"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Small gaps"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Form element spacing"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Card padding, component gaps"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "Section spacing"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Large component spacing"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "Section margins"
},
"10": {
"$value": "40px",
"$type": "dimension",
"$description": "Large section spacing"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "Page section spacing"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "Hero spacing"
},
"20": {
"$value": "80px",
"$type": "dimension",
"$description": "Large layout spacing"
}
},
"radius": {
"sm": {
"$value": "4px",
"$type": "dimension",
"$description": "Small elements, badges"
},
"md": {
"$value": "6px",
"$type": "dimension",
"$description": "Buttons, inputs"
},
"lg": {
"$value": "8px",
"$type": "dimension",
"$description": "Cards, panels"
},
"xl": {
"$value": "12px",
"$type": "dimension",
"$description": "Large containers"
}
},
"shadow": {
"xs": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Subtle elevation"
},
"sm": {
"$value": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
"$type": "shadow",
"$description": "Cards, dropdowns"
},
"md": {
"$value": "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Elevated cards"
},
"lg": {
"$value": "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Modals, popovers"
}
},
"border": {
"width": {
"default": {
"$value": "1px",
"$type": "dimension",
"$description": "Standard borders"
},
"2": {
"$value": "2px",
"$type": "dimension",
"$description": "Emphasized borders"
},
"4": {
"$value": "4px",
"$type": "dimension",
"$description": "Accent left borders"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
PlanetScale is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.