AI token editor
Edit Patagonia 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": {
"background": {
"primary": {
"$type": "color",
"$value": "#faf9f6",
"$description": "Main page background, light cream tone"
},
"secondary": {
"$type": "color",
"$value": "#ffffff",
"$description": "Card backgrounds and elevated surfaces"
}
},
"text": {
"primary": {
"$type": "color",
"$value": "#000000",
"$description": "Primary text color for headings and body content"
},
"secondary": {
"$type": "color",
"$value": "#1a1a1a",
"$description": "Secondary text color for less prominent content"
}
},
"border": {
"default": {
"$type": "color",
"$value": "#dcdcdc",
"$description": "Default border and divider color"
},
"light": {
"$type": "color",
"$value": "#e8e8e8",
"$description": "Subtle border color for light separators"
}
}
},
"font": {
"family": {
"serif": {
"$type": "fontFamily",
"$value": "Georgia, 'Times New Roman', serif",
"$description": "Serif font stack for headings"
},
"sans": {
"$type": "fontFamily",
"$value": "'Helvetica Neue', Helvetica, Arial, sans-serif",
"$description": "Sans-serif font stack for body text"
}
},
"size": {
"heading": {
"xl": {
"$type": "dimension",
"$value": "44px",
"$description": "Extra large heading size"
},
"lg": {
"$type": "dimension",
"$value": "32px",
"$description": "Large heading size"
},
"md": {
"$type": "dimension",
"$value": "18px",
"$description": "Medium heading size"
},
"sm": {
"$type": "dimension",
"$value": "14px",
"$description": "Small heading size for section headers"
}
},
"body": {
"lg": {
"$type": "dimension",
"$value": "16px",
"$description": "Large body text"
},
"md": {
"$type": "dimension",
"$value": "14px",
"$description": "Medium body text"
},
"sm": {
"$type": "dimension",
"$value": "13px",
"$description": "Small body text"
}
},
"caption": {
"$type": "dimension",
"$value": "11px",
"$description": "Caption and fine print text"
}
},
"weight": {
"normal": {
"$type": "fontWeight",
"$value": "400",
"$description": "Normal font weight for body text"
},
"bold": {
"$type": "fontWeight",
"$value": "700",
"$description": "Bold font weight for headings and emphasis"
}
},
"lineHeight": {
"tight": {
"$type": "number",
"$value": "1.2",
"$description": "Tight line height for large headings"
},
"snug": {
"$type": "number",
"$value": "1.3",
"$description": "Snug line height for medium headings"
},
"normal": {
"$type": "number",
"$value": "1.4",
"$description": "Normal line height for small headings"
},
"relaxed": {
"$type": "number",
"$value": "1.5",
"$description": "Relaxed line height for small body text"
},
"loose": {
"$type": "number",
"$value": "1.6",
"$description": "Loose line height for comfortable reading"
}
}
},
"spacing": {
"xs": {
"$type": "dimension",
"$value": "8px",
"$description": "Extra small spacing for tight layouts"
},
"sm": {
"$type": "dimension",
"$value": "16px",
"$description": "Small spacing for related elements"
},
"md": {
"$type": "dimension",
"$value": "24px",
"$description": "Medium spacing for component padding"
},
"lg": {
"$type": "dimension",
"$value": "32px",
"$description": "Large spacing for section padding"
},
"xl": {
"$type": "dimension",
"$value": "48px",
"$description": "Extra large spacing for major sections"
},
"2xl": {
"$type": "dimension",
"$value": "64px",
"$description": "2X large spacing for section dividers"
},
"3xl": {
"$type": "dimension",
"$value": "96px",
"$description": "3X large spacing for hero sections"
}
},
"border": {
"width": {
"thin": {
"$type": "dimension",
"$value": "1px",
"$description": "Thin border width for dividers"
},
"medium": {
"$type": "dimension",
"$value": "2px",
"$description": "Medium border width for emphasis"
}
},
"radius": {
"none": {
"$type": "dimension",
"$value": "0px",
"$description": "No border radius for sharp corners"
},
"sm": {
"$type": "dimension",
"$value": "2px",
"$description": "Small border radius for subtle rounding"
}
}
},
"shadow": {
"none": {
"$type": "shadow",
"$value": "none",
"$description": "No shadow for flat design"
},
"sm": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
"$description": "Subtle shadow for minimal elevation"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Patagonia is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.