AI token editor
Edit DoorDash 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": {
"brand": {
"red": {
"$value": "#FF3008",
"$type": "color",
"$description": "Primary brand color used for CTAs, logo, and key interactive elements"
},
"burgundy": {
"$value": "#5D1049",
"$type": "color",
"$description": "Dark accent color for headings on light backgrounds"
}
},
"neutral": {
"white": {
"$value": "#FFFFFF",
"$type": "color",
"$description": "Pure white for backgrounds and button text"
},
"black": {
"$value": "#191919",
"$type": "color",
"$description": "Primary text color and dark elements"
},
"gray": {
"50": {
"$value": "#F9F9F9",
"$type": "color"
},
"100": {
"$value": "#F5F5F5",
"$type": "color"
},
"200": {
"$value": "#E5E5E5",
"$type": "color"
},
"300": {
"$value": "#D9D9D9",
"$type": "color",
"$description": "Borders and dividers"
},
"400": {
"$value": "#A8A8A8",
"$type": "color"
},
"500": {
"$value": "#8A8A8A",
"$type": "color"
},
"600": {
"$value": "#6B6B6B",
"$type": "color"
},
"700": {
"$value": "#5C5C5C",
"$type": "color",
"$description": "Body text color"
},
"800": {
"$value": "#3D3D3D",
"$type": "color"
},
"900": {
"$value": "#191919",
"$type": "color"
}
}
},
"background": {
"pink": {
"50": {
"$value": "#FFE5F0",
"$type": "color",
"$description": "Light pink background for hero sections"
},
"100": {
"$value": "#FFD6E7",
"$type": "color"
}
},
"yellow": {
"50": {
"$value": "#FFFACD",
"$type": "color"
},
"100": {
"$value": "#F9F871",
"$type": "color",
"$description": "Bright yellow background for Dashers pages"
},
"200": {
"$value": "#F9ED5C",
"$type": "color"
}
}
}
},
"font": {
"family": {
"sans": {
"$value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
"$type": "fontFamily",
"$description": "Primary sans-serif font stack"
}
},
"size": {
"xs": {
"$value": "0.75rem",
"$type": "dimension"
},
"sm": {
"$value": "0.875rem",
"$type": "dimension",
"$description": "Small text and captions"
},
"base": {
"$value": "1rem",
"$type": "dimension",
"$description": "Body text default size"
},
"lg": {
"$value": "1.125rem",
"$type": "dimension"
},
"xl": {
"$value": "1.25rem",
"$type": "dimension",
"$description": "Large body text"
},
"2xl": {
"$value": "1.5rem",
"$type": "dimension"
},
"3xl": {
"$value": "1.75rem",
"$type": "dimension",
"$description": "H3 headings"
},
"4xl": {
"$value": "2.25rem",
"$type": "dimension",
"$description": "H2 headings"
},
"5xl": {
"$value": "3rem",
"$type": "dimension",
"$description": "H1 page titles"
},
"6xl": {
"$value": "4rem",
"$type": "dimension",
"$description": "Hero headings"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight"
},
"medium": {
"$value": "500",
"$type": "fontWeight"
},
"semibold": {
"$value": "600",
"$type": "fontWeight"
},
"bold": {
"$value": "700",
"$type": "fontWeight"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "For hero headings"
},
"snug": {
"$value": "1.2",
"$type": "number"
},
"base": {
"$value": "1.5",
"$type": "number"
},
"relaxed": {
"$value": "1.6",
"$type": "number",
"$description": "For body text"
}
}
},
"spacing": {
"1": {
"$value": "0.25rem",
"$type": "dimension"
},
"2": {
"$value": "0.5rem",
"$type": "dimension"
},
"3": {
"$value": "0.75rem",
"$type": "dimension"
},
"4": {
"$value": "1rem",
"$type": "dimension",
"$description": "Default spacing unit"
},
"5": {
"$value": "1.25rem",
"$type": "dimension"
},
"6": {
"$value": "1.5rem",
"$type": "dimension"
},
"8": {
"$value": "2rem",
"$type": "dimension"
},
"10": {
"$value": "2.5rem",
"$type": "dimension"
},
"12": {
"$value": "3rem",
"$type": "dimension"
},
"16": {
"$value": "4rem",
"$type": "dimension"
},
"20": {
"$value": "5rem",
"$type": "dimension",
"$description": "Section spacing"
},
"24": {
"$value": "6rem",
"$type": "dimension"
},
"30": {
"$value": "7.5rem",
"$type": "dimension"
}
},
"radius": {
"sm": {
"$value": "0.25rem",
"$type": "dimension"
},
"md": {
"$value": "0.5rem",
"$type": "dimension",
"$description": "Input fields and small cards"
},
"lg": {
"$value": "0.75rem",
"$type": "dimension",
"$description": "Cards"
},
"xl": {
"$value": "1rem",
"$type": "dimension"
},
"2xl": {
"$value": "1.5rem",
"$type": "dimension"
},
"pill": {
"$value": "1.5rem",
"$type": "dimension",
"$description": "Pill-shaped buttons"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Fully rounded elements"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Subtle elevation"
},
"md": {
"$value": "0 4px 6px rgba(0, 0, 0, 0.07)",
"$type": "shadow",
"$description": "Cards and dropdowns"
},
"lg": {
"$value": "0 10px 15px rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Modals and popovers"
},
"xl": {
"$value": "0 20px 25px rgba(0, 0, 0, 0.15)",
"$type": "shadow",
"$description": "High elevation elements"
}
}
}
Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
DoorDash is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.