AI token editor
Edit PostHog 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": "#F9BD2B",
"$type": "color",
"$description": "Primary brand color for CTAs and highlights"
},
"primary-dark": {
"$value": "#E5A820",
"$type": "color",
"$description": "Darker variant of primary for hover states"
},
"blue": {
"$value": "#1D4AFF",
"$type": "color",
"$description": "Product Analytics brand color"
},
"orange": {
"$value": "#FF9500",
"$type": "color",
"$description": "Session Replay brand color"
},
"green": {
"$value": "#52C41A",
"$type": "color",
"$description": "Web Analytics brand color, success states"
},
"purple": {
"$value": "#9B59B6",
"$type": "color",
"$description": "A/B Testing, Feature Flags brand color"
},
"pink": {
"$value": "#FF69B4",
"$type": "color",
"$description": "Data Warehouse brand color"
},
"red": {
"$value": "#E74C3C",
"$type": "color",
"$description": "Error, alert states"
},
"beige": {
"$value": "#E5DCC5",
"$type": "color",
"$description": "Main background texture color"
},
"beige-dark": {
"$value": "#D4C5B0",
"$type": "color",
"$description": "Darker beige variant for subtle contrast"
},
"black": {
"$value": "#1A1A1A",
"$type": "color",
"$description": "Primary text color"
},
"gray": {
"900": {
"$value": "#2D2D2D",
"$type": "color",
"$description": "Secondary text color"
},
"700": {
"$value": "#666666",
"$type": "color",
"$description": "Tertiary text color"
},
"500": {
"$value": "#999999",
"$type": "color",
"$description": "Disabled text, placeholder"
},
"300": {
"$value": "#CCCCCC",
"$type": "color",
"$description": "Borders, dividers"
},
"100": {
"$value": "#F5F5F5",
"$type": "color",
"$description": "Subtle backgrounds, hover states"
}
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Card backgrounds, inverted text"
}
},
"font": {
"family": {
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
},
"mono": {
"$value": "\"SF Mono\", Monaco, \"Cascadia Code\", monospace",
"$type": "fontFamily",
"$description": "Monospace font for code"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Extra small text - captions, labels"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text - secondary content"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Base body text size"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body text"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Subheadings"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "H3 heading"
},
"3xl": {
"$value": "30px",
"$type": "dimension",
"$description": "H2 heading"
},
"4xl": {
"$value": "36px",
"$type": "dimension",
"$description": "H1 heading"
},
"5xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Display large heading"
},
"6xl": {
"$value": "60px",
"$type": "dimension",
"$description": "Hero heading"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "number",
"$description": "Normal font weight for body text"
},
"medium": {
"$value": "500",
"$type": "number",
"$description": "Medium weight for emphasis"
},
"semibold": {
"$value": "600",
"$type": "number",
"$description": "Semibold for subheadings"
},
"bold": {
"$value": "700",
"$type": "number",
"$description": "Bold for headings"
}
},
"lineHeight": {
"xs": {
"$value": "16px",
"$type": "dimension",
"$description": "Line height for xs text"
},
"sm": {
"$value": "20px",
"$type": "dimension",
"$description": "Line height for sm text"
},
"base": {
"$value": "24px",
"$type": "dimension",
"$description": "Line height for base text"
},
"lg": {
"$value": "28px",
"$type": "dimension",
"$description": "Line height for lg text"
},
"xl": {
"$value": "28px",
"$type": "dimension",
"$description": "Line height for xl text"
},
"2xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Line height for 2xl text"
},
"3xl": {
"$value": "36px",
"$type": "dimension",
"$description": "Line height for 3xl text"
},
"4xl": {
"$value": "40px",
"$type": "dimension",
"$description": "Line height for 4xl text"
},
"5xl": {
"$value": "56px",
"$type": "dimension",
"$description": "Line height for 5xl text"
},
"6xl": {
"$value": "68px",
"$type": "dimension",
"$description": "Line height for 6xl text"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Minimal spacing"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Tight spacing"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Small spacing"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Base spacing unit"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "Medium spacing"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Standard 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": "Major section spacing"
},
"20": {
"$value": "80px",
"$type": "dimension",
"$description": "Hero spacing"
},
"24": {
"$value": "96px",
"$type": "dimension",
"$description": "Maximum spacing"
}
},
"radius": {
"sm": {
"$value": "4px",
"$type": "dimension",
"$description": "Small elements, tags"
},
"base": {
"$value": "6px",
"$type": "dimension",
"$description": "Inputs, small cards"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Buttons, standard cards"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Large cards, modals"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Feature sections"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Pills, circular elements"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Subtle elevation"
},
"base": {
"$value": "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
"$type": "shadow",
"$description": "Cards, default elevation"
},
"md": {
"$value": "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Dropdowns, menus"
},
"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"
},
"xl": {
"$value": "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",
"$type": "shadow",
"$description": "Large popovers, floating elements"
}
},
"border": {
"width": {
"default": {
"$value": "1px",
"$type": "dimension",
"$description": "Default border width"
},
"thick": {
"$value": "2px",
"$type": "dimension",
"$description": "Emphasized borders"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
PostHog is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.