AI token editor
Edit Trello 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": "#0079BF",
"$type": "color",
"$description": "Primary brand color - Trello blue"
},
"primary-hover": {
"$value": "#026AA7",
"$type": "color",
"$description": "Hover state for primary actions"
},
"surface": {
"0": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Pure white - cards, navbar, modals"
},
"50": {
"$value": "#FAFBFC",
"$type": "color",
"$description": "Lightest gray - page backgrounds"
},
"100": {
"$value": "#F4F5F7",
"$type": "color",
"$description": "Light gray - subtle backgrounds"
},
"200": {
"$value": "#E3E8ED",
"$type": "color",
"$description": "Medium gray - hero backgrounds"
},
"300": {
"$value": "#DFE1E6",
"$type": "color",
"$description": "Border gray - dividers"
}
},
"text": {
"primary": {
"$value": "#172B4D",
"$type": "color",
"$description": "Primary text - headings, body"
},
"secondary": {
"$value": "#5E6C84",
"$type": "color",
"$description": "Secondary text - muted content"
},
"tertiary": {
"$value": "#6B778C",
"$type": "color",
"$description": "Tertiary text - placeholders"
},
"link": {
"$value": "#0079BF",
"$type": "color",
"$description": "Hyperlink color"
}
},
"accent": {
"orange": {
"$value": "#FF9F1C",
"$type": "color",
"$description": "Accent orange - decorative shapes"
},
"purple": {
"$value": "#B04EC4",
"$type": "color",
"$description": "Accent purple - decorative shapes"
},
"pink": {
"$value": "#EB5A46",
"$type": "color",
"$description": "Accent pink - alerts"
},
"warning": {
"$value": "#FFC400",
"$type": "color",
"$description": "Warning yellow - accept buttons"
}
},
"border": {
"light": {
"$value": "#DFE1E6",
"$type": "color",
"$description": "Light border - default dividers"
},
"medium": {
"$value": "#C1C7D0",
"$type": "color",
"$description": "Medium border - emphasized dividers"
},
"focus": {
"$value": "#0079BF",
"$type": "color",
"$description": "Focus state border"
}
}
},
"font": {
"family": {
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif",
"$type": "fontFamily",
"$description": "Primary font stack - system fonts"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Extra small - captions, fine print"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Small - secondary text, labels"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Base - default body text"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Large - emphasized body text"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Extra large - small headings"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Heading level 2"
},
"3xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Heading level 1"
},
"4xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Display heading 2"
},
"5xl": {
"$value": "56px",
"$type": "dimension",
"$description": "Display heading 1 - hero"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Normal weight - body text"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Medium weight - emphasized text"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Semibold - small headings, buttons"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Bold - major headings"
}
},
"lineHeight": {
"tight": {
"$value": "1.2",
"$type": "number",
"$description": "Tight - large headings"
},
"snug": {
"$value": "1.3",
"$type": "number",
"$description": "Snug - medium headings"
},
"normal": {
"$value": "1.5",
"$type": "number",
"$description": "Normal - body text"
},
"relaxed": {
"$value": "1.6",
"$type": "number",
"$description": "Relaxed - emphasized body text"
}
}
},
"spacing": {
"xs": {
"$value": "4px",
"$type": "dimension",
"$description": "Extra small - tight spacing"
},
"sm": {
"$value": "8px",
"$type": "dimension",
"$description": "Small - compact layouts"
},
"md": {
"$value": "16px",
"$type": "dimension",
"$description": "Medium - default spacing"
},
"lg": {
"$value": "24px",
"$type": "dimension",
"$description": "Large - section padding"
},
"xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Extra large - component gaps"
},
"2xl": {
"$value": "48px",
"$type": "dimension",
"$description": "2X large - major sections"
},
"3xl": {
"$value": "64px",
"$type": "dimension",
"$description": "3X large - hero sections"
},
"4xl": {
"$value": "96px",
"$type": "dimension",
"$description": "4X large - page-level spacing"
}
},
"radius": {
"sm": {
"$value": "3px",
"$type": "dimension",
"$description": "Small - badges, small elements"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Medium - buttons, inputs, cards"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Large - large cards, modals"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Extra large - feature cards"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.08)",
"$type": "shadow",
"$description": "Small - subtle elevation"
},
"md": {
"$value": "0 2px 8px rgba(0, 0, 0, 0.12)",
"$type": "shadow",
"$description": "Medium - cards, dropdowns"
},
"lg": {
"$value": "0 4px 16px rgba(0, 0, 0, 0.16)",
"$type": "shadow",
"$description": "Large - modals, overlays"
},
"xl": {
"$value": "0 8px 24px rgba(0, 0, 0, 0.20)",
"$type": "shadow",
"$description": "Extra large - elevated modals"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Trello is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.