AI token editor
Edit Algolia 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": "#2d7ff9",
"$type": "color",
"$description": "Primary brand color for CTAs, links, and key interactive elements"
},
"primary-hover": {
"$value": "#1e6fe8",
"$type": "color",
"$description": "Hover state for primary color"
},
"navy": {
"900": {
"$value": "#0b1a3d",
"$type": "color",
"$description": "Primary dark background, hero sections"
},
"800": {
"$value": "#142654",
"$type": "color",
"$description": "Card backgrounds, secondary dark surfaces"
}
},
"purple": {
"600": {
"$value": "#5468ff",
"$type": "color",
"$description": "Gradient overlays, accent elements"
},
"500": {
"$value": "#7b61ff",
"$type": "color",
"$description": "Gradient transitions"
}
},
"accent-green": {
"$value": "#9fef00",
"$type": "color",
"$description": "Success states, NEW badges, cursor highlights"
},
"white": {
"$value": "#ffffff",
"$type": "color",
"$description": "Text on dark backgrounds, light surfaces"
},
"gray": {
"100": {
"$value": "#f5f5f7",
"$type": "color",
"$description": "Light section backgrounds"
},
"400": {
"$value": "#8b92a6",
"$type": "color",
"$description": "Secondary text, muted elements"
},
"700": {
"$value": "#3d4556",
"$type": "color",
"$description": "Borders, dividers"
}
},
"blue-light": {
"$value": "#e8f0ff",
"$type": "color",
"$description": "Search input backgrounds in light mode"
}
},
"font": {
"family": {
"sans": {
"$value": "'Averta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"$type": "fontFamily",
"$description": "Primary font stack"
},
"mono": {
"$value": "'Menlo', 'Monaco', 'Courier New', monospace",
"$type": "fontFamily",
"$description": "Monospace font for code snippets"
}
},
"size": {
"hero": {
"$value": "96px",
"$type": "dimension",
"$description": "Hero headline size"
},
"display": {
"$value": "64px",
"$type": "dimension",
"$description": "Section headlines"
},
"h1": {
"$value": "48px",
"$type": "dimension",
"$description": "Page titles"
},
"h2": {
"$value": "32px",
"$type": "dimension",
"$description": "Card titles, subsections"
},
"h3": {
"$value": "24px",
"$type": "dimension",
"$description": "Component headings"
},
"body-lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body copy"
},
"body": {
"$value": "16px",
"$type": "dimension",
"$description": "Default body text"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text, labels"
},
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Badges, micro-copy"
}
},
"weight": {
"black": {
"$value": "800",
"$type": "fontWeight",
"$description": "Extra bold for hero text"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Headings, emphasis"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Buttons, strong labels"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Navigation, medium emphasis"
},
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Body text"
}
},
"lineHeight": {
"tight": {
"$value": "1.05",
"$type": "number",
"$description": "Hero headlines"
},
"heading": {
"$value": "1.2",
"$type": "number",
"$description": "Headings"
},
"body": {
"$value": "1.5",
"$type": "number",
"$description": "Body text"
},
"relaxed": {
"$value": "1.6",
"$type": "number",
"$description": "Long-form content"
}
}
},
"spacing": {
"1": {
"$value": "8px",
"$type": "dimension",
"$description": "Base spacing unit"
},
"2": {
"$value": "16px",
"$type": "dimension",
"$description": "2x base"
},
"3": {
"$value": "24px",
"$type": "dimension",
"$description": "3x base"
},
"4": {
"$value": "32px",
"$type": "dimension",
"$description": "4x base"
},
"5": {
"$value": "40px",
"$type": "dimension",
"$description": "5x base"
},
"6": {
"$value": "48px",
"$type": "dimension",
"$description": "6x base"
},
"8": {
"$value": "64px",
"$type": "dimension",
"$description": "8x base"
},
"12": {
"$value": "96px",
"$type": "dimension",
"$description": "12x base"
},
"16": {
"$value": "128px",
"$type": "dimension",
"$description": "16x base"
}
},
"radius": {
"sm": {
"$value": "6px",
"$type": "dimension",
"$description": "Small elements, badges"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Buttons, inputs"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Cards, modals"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Large cards"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Feature sections"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Pills, avatars"
}
},
"shadow": {
"sm": {
"$value": "0 1px 3px rgba(11, 26, 61, 0.1)",
"$type": "shadow",
"$description": "Subtle shadow for small elements"
},
"md": {
"$value": "0 4px 12px rgba(11, 26, 61, 0.15)",
"$type": "shadow",
"$description": "Medium shadow for cards"
},
"lg": {
"$value": "0 12px 32px rgba(11, 26, 61, 0.2)",
"$type": "shadow",
"$description": "Large shadow for modals"
},
"xl": {
"$value": "0 24px 64px rgba(11, 26, 61, 0.25)",
"$type": "shadow",
"$description": "Extra large shadow for popovers"
},
"glow": {
"$value": "0 0 24px rgba(45, 127, 249, 0.3)",
"$type": "shadow",
"$description": "Focus glow for interactive elements"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Algolia is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.