AI token editor
Edit Notion 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": {
"navy": {
"950": {
"$value": "#00112B",
"$type": "color",
"$description": "Dark hero background"
},
"900": {
"$value": "#001D3D",
"$type": "color",
"$description": "Dark surface background"
}
},
"blue": {
"600": {
"$value": "#0B6FFF",
"$type": "color",
"$description": "Primary CTA, links, active states"
},
"500": {
"$value": "#4F7CE5",
"$type": "color",
"$description": "Primary button hover"
},
"400": {
"$value": "#6B8EF7",
"$type": "color",
"$description": "Secondary accent"
},
"100": {
"$value": "#E8F0FF",
"$type": "color",
"$description": "Light blue backgrounds"
}
},
"purple": {
"500": {
"$value": "#7B61FF",
"$type": "color",
"$description": "Todo status, accent"
}
},
"yellow": {
"500": {
"$value": "#FFB84D",
"$type": "color",
"$description": "In-progress status, warnings"
}
},
"green": {
"500": {
"$value": "#2ECC40",
"$type": "color",
"$description": "Complete status, success"
}
},
"red": {
"500": {
"$value": "#E85D4A",
"$type": "color",
"$description": "Alerts, critical states"
}
},
"cyan": {
"500": {
"$value": "#00A6ED",
"$type": "color",
"$description": "Review status, info"
}
},
"gray": {
"900": {
"$value": "#1A1A1A",
"$type": "color",
"$description": "Dark text"
},
"700": {
"$value": "#3D3D3D",
"$type": "color",
"$description": "Secondary text"
},
"500": {
"$value": "#6B6B6B",
"$type": "color",
"$description": "Muted text"
},
"400": {
"$value": "#999999",
"$type": "color",
"$description": "Placeholder text"
},
"300": {
"$value": "#CCCCCC",
"$type": "color",
"$description": "Disabled text"
},
"200": {
"$value": "#E6E6E6",
"$type": "color",
"$description": "Borders, dividers"
},
"100": {
"$value": "#F5F5F5",
"$type": "color",
"$description": "Subtle backgrounds"
},
"50": {
"$value": "#FAFAFA",
"$type": "color",
"$description": "Card backgrounds"
}
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Background, text on dark"
},
"black": {
"$value": "#000000",
"$type": "color",
"$description": "Headings, primary text"
}
},
"font": {
"family": {
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif",
"$type": "fontFamily",
"$description": "Primary font family"
},
"mono": {
"$value": "\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", monospace",
"$type": "fontFamily",
"$description": "Monospace font family"
}
},
"size": {
"display-xl": {
"$value": "72px",
"$type": "dimension",
"$description": "Hero headings"
},
"display-lg": {
"$value": "60px",
"$type": "dimension",
"$description": "Large headings"
},
"display-md": {
"$value": "48px",
"$type": "dimension",
"$description": "Page headings"
},
"heading-xl": {
"$value": "36px",
"$type": "dimension",
"$description": "Section headings"
},
"heading-lg": {
"$value": "30px",
"$type": "dimension",
"$description": "Card headings"
},
"heading-md": {
"$value": "24px",
"$type": "dimension",
"$description": "Subheadings"
},
"heading-sm": {
"$value": "20px",
"$type": "dimension",
"$description": "Small headings"
},
"body-lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body text"
},
"body-md": {
"$value": "16px",
"$type": "dimension",
"$description": "Default body text"
},
"body-sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small body text"
},
"label-md": {
"$value": "14px",
"$type": "dimension",
"$description": "Form labels, buttons"
},
"label-sm": {
"$value": "12px",
"$type": "dimension",
"$description": "Small labels, badges"
},
"caption": {
"$value": "11px",
"$type": "dimension",
"$description": "Captions, helper text"
}
},
"weight": {
"regular": {
"$value": "400",
"$type": "fontWeight",
"$description": "Regular weight"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Medium weight"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Semibold weight"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Bold weight"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Tight line height"
},
"snug": {
"$value": "1.25",
"$type": "number",
"$description": "Snug line height"
},
"normal": {
"$value": "1.5",
"$type": "number",
"$description": "Normal line height"
},
"relaxed": {
"$value": "1.6",
"$type": "number",
"$description": "Relaxed line height"
}
}
},
"spacing": {
"xs": {
"$value": "4px",
"$type": "dimension",
"$description": "Tight spacing, icon gaps"
},
"sm": {
"$value": "8px",
"$type": "dimension",
"$description": "Compact spacing"
},
"md": {
"$value": "12px",
"$type": "dimension",
"$description": "Default inline spacing"
},
"lg": {
"$value": "16px",
"$type": "dimension",
"$description": "Standard padding"
},
"xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Card padding, section gaps"
},
"2xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Large spacing"
},
"3xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Section spacing"
},
"4xl": {
"$value": "64px",
"$type": "dimension",
"$description": "Hero spacing"
},
"5xl": {
"$value": "96px",
"$type": "dimension",
"$description": "Page-level spacing"
},
"6xl": {
"$value": "128px",
"$type": "dimension",
"$description": "Extra large gaps"
}
},
"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, modals"
},
"xl": {
"$value": "12px",
"$type": "dimension",
"$description": "Large cards, images"
},
"2xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Feature cards"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Pills, avatars"
}
},
"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": "Modals, popovers"
},
"lg": {
"$value": "0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)",
"$type": "shadow",
"$description": "Elevated surfaces"
},
"xl": {
"$value": "0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04)",
"$type": "shadow",
"$description": "Floating elements"
},
"focus-blue": {
"$value": "0 0 0 3px rgba(11,111,255,0.15)",
"$type": "shadow",
"$description": "Focus ring"
}
},
"border": {
"width": {
"default": {
"$value": "1px",
"$type": "dimension",
"$description": "Standard border width"
},
"thick": {
"$value": "2px",
"$type": "dimension",
"$description": "Emphasized border width"
}
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Notion is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.