AI token editor
Edit Loom 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": "#2D6FF7",
"$type": "color",
"$description": "Primary brand color used for buttons, links, and key actions"
},
"primary-hover": {
"$value": "#1E5FE0",
"$type": "color",
"$description": "Primary button hover state"
},
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Pure white for backgrounds and text on dark surfaces"
},
"black": {
"$value": "#1B1B1B",
"$type": "color",
"$description": "Primary text color for headings"
},
"gray": {
"50": {
"$value": "#F9FAFB",
"$type": "color",
"$description": "Lightest gray for subtle backgrounds"
},
"100": {
"$value": "#F3F4F6",
"$type": "color",
"$description": "Light gray for section backgrounds"
},
"200": {
"$value": "#E5E7EB",
"$type": "color",
"$description": "Border color for cards and dividers"
},
"300": {
"$value": "#D1D5DB",
"$type": "color",
"$description": "Medium borders and dividers"
},
"400": {
"$value": "#9CA3AF",
"$type": "color",
"$description": "Placeholder text"
},
"500": {
"$value": "#6B7280",
"$type": "color",
"$description": "Muted text"
},
"600": {
"$value": "#4B5563",
"$type": "color",
"$description": "Body text color"
},
"700": {
"$value": "#374151",
"$type": "color",
"$description": "Secondary text color"
},
"900": {
"$value": "#111827",
"$type": "color",
"$description": "Dark text"
}
},
"blue-light": {
"$value": "#E8F0FE",
"$type": "color",
"$description": "Light blue background for feature sections"
},
"purple-light": {
"$value": "#F5F3FF",
"$type": "color",
"$description": "Light purple background for cards"
},
"purple": {
"$value": "#8B5CF6",
"$type": "color",
"$description": "Purple accent for gradients"
},
"pink": {
"$value": "#EC4899",
"$type": "color",
"$description": "Pink accent for gradients"
},
"orange": {
"$value": "#F97316",
"$type": "color",
"$description": "Orange accent for gradients"
},
"teal": {
"$value": "#06B6D4",
"$type": "color",
"$description": "Teal accent for gradients"
},
"info": {
"$value": "#3B82F6",
"$type": "color",
"$description": "Info state color"
},
"success": {
"$value": "#10B981",
"$type": "color",
"$description": "Success state color"
},
"warning": {
"$value": "#F59E0B",
"$type": "color",
"$description": "Warning state color"
},
"error": {
"$value": "#EF4444",
"$type": "color",
"$description": "Error state color"
}
},
"font": {
"family": {
"sans": {
"$value": "'Graphik', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
},
"mono": {
"$value": "'SF Mono', 'Consolas', 'Monaco', monospace",
"$type": "fontFamily",
"$description": "Monospace font for code"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Extra small text"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small text, labels"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Base body text"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large body text"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Small headings"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Medium headings"
},
"3xl": {
"$value": "30px",
"$type": "dimension",
"$description": "Large headings"
},
"4xl": {
"$value": "36px",
"$type": "dimension",
"$description": "Extra large headings"
},
"5xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Display medium"
},
"6xl": {
"$value": "60px",
"$type": "dimension",
"$description": "Display large"
},
"7xl": {
"$value": "72px",
"$type": "dimension",
"$description": "Display extra large"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "number",
"$description": "Normal text weight"
},
"medium": {
"$value": "500",
"$type": "number",
"$description": "Medium weight for emphasis"
},
"semibold": {
"$value": "600",
"$type": "number",
"$description": "Semibold for headings"
},
"bold": {
"$value": "700",
"$type": "number",
"$description": "Bold for emphasis"
},
"black": {
"$value": "900",
"$type": "number",
"$description": "Black weight for display headings"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Tight line height for large headings"
},
"snug": {
"$value": "1.2",
"$type": "number",
"$description": "Snug line height for headings"
},
"normal": {
"$value": "1.5",
"$type": "number",
"$description": "Normal line height for body text"
},
"relaxed": {
"$value": "1.6",
"$type": "number",
"$description": "Relaxed line height for readable text"
}
}
},
"spacing": {
"xs": {
"$value": "4px",
"$type": "dimension",
"$description": "Minimal spacing"
},
"sm": {
"$value": "8px",
"$type": "dimension",
"$description": "Tight spacing"
},
"md": {
"$value": "12px",
"$type": "dimension",
"$description": "Default spacing"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Base unit"
},
"lg": {
"$value": "24px",
"$type": "dimension",
"$description": "Comfortable spacing"
},
"xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Large spacing"
},
"2xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Section spacing"
},
"3xl": {
"$value": "64px",
"$type": "dimension",
"$description": "Large sections"
},
"4xl": {
"$value": "80px",
"$type": "dimension",
"$description": "Major sections"
},
"5xl": {
"$value": "96px",
"$type": "dimension",
"$description": "Hero sections"
},
"6xl": {
"$value": "128px",
"$type": "dimension",
"$description": "Extra large sections"
}
},
"radius": {
"sm": {
"$value": "6px",
"$type": "dimension",
"$description": "Small border radius"
},
"base": {
"$value": "8px",
"$type": "dimension",
"$description": "Base border radius for buttons and inputs"
},
"md": {
"$value": "12px",
"$type": "dimension",
"$description": "Medium border radius for cards"
},
"lg": {
"$value": "16px",
"$type": "dimension",
"$description": "Large border radius"
},
"xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Extra large for feature cards"
},
"2xl": {
"$value": "32px",
"$type": "dimension",
"$description": "2XL for hero elements"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Full rounding for pills and 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": "Card shadow"
},
"base": {
"$value": "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Elevated card"
},
"md": {
"$value": "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Hover state shadow"
},
"lg": {
"$value": "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)",
"$type": "shadow",
"$description": "Modal and popover shadow"
},
"xl": {
"$value": "0 25px 50px rgba(0, 0, 0, 0.15)",
"$type": "shadow",
"$description": "Large dialog shadow"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Loom is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.