Back to Patagonia
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.