Back to Apple
AI token editor

Edit Apple 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": {
    "blue": {
      "primary": {
        "$value": "#0071e3",
        "$type": "color",
        "$description": "Primary brand color for CTAs and links"
      },
      "hover": {
        "$value": "#0077ed",
        "$type": "color",
        "$description": "Hover state for primary blue"
      }
    },
    "black": {
      "$value": "#1d1d1f",
      "$type": "color",
      "$description": "Primary text color on light backgrounds"
    },
    "white": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Text on dark backgrounds, light surfaces"
    },
    "gray": {
      "50": {
        "$value": "#f5f5f7",
        "$type": "color",
        "$description": "Light background surface"
      },
      "100": {
        "$value": "#e8e8ed",
        "$type": "color",
        "$description": "Inactive pill backgrounds, subtle borders"
      },
      "200": {
        "$value": "#d2d2d7",
        "$type": "color",
        "$description": "Borders and dividers in light theme"
      },
      "600": {
        "$value": "#6e6e73",
        "$type": "color",
        "$description": "Secondary text, muted content"
      },
      "800": {
        "$value": "#424245",
        "$type": "color",
        "$description": "Borders in dark theme"
      },
      "900": {
        "$value": "#000000",
        "$type": "color",
        "$description": "Dark mode background, active pill backgrounds"
      }
    },
    "red": {
      "accent": {
        "$value": "#ff3b30",
        "$type": "color",
        "$description": "New badge, alerts, accents"
      }
    },
    "orange": {
      "accent": {
        "$value": "#ff9500",
        "$type": "color",
        "$description": "Decorative accent color"
      }
    },
    "pink": {
      "accent": {
        "$value": "#ff2d55",
        "$type": "color",
        "$description": "Decorative illustrations"
      }
    },
    "yellow": {
      "accent": {
        "$value": "#ffcc00",
        "$type": "color",
        "$description": "Decorative illustrations"
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$value": "SF Pro Display, system-ui, -apple-system, sans-serif",
        "$type": "fontFamily",
        "$description": "Display font for headings"
      },
      "text": {
        "$value": "SF Pro Text, system-ui, -apple-system, sans-serif",
        "$type": "fontFamily",
        "$description": "Text font for body and UI"
      },
      "mono": {
        "$value": "SF Mono, ui-monospace, monospace",
        "$type": "fontFamily",
        "$description": "Monospace font for code"
      }
    },
    "size": {
      "display-xl": {
        "$value": "96px",
        "$type": "fontSize",
        "$description": "Hero heading size"
      },
      "display-lg": {
        "$value": "80px",
        "$type": "fontSize",
        "$description": "Large display heading"
      },
      "display-md": {
        "$value": "64px",
        "$type": "fontSize",
        "$description": "Medium display heading"
      },
      "heading-xl": {
        "$value": "56px",
        "$type": "fontSize",
        "$description": "Extra large heading"
      },
      "heading-lg": {
        "$value": "48px",
        "$type": "fontSize",
        "$description": "Large heading"
      },
      "heading-md": {
        "$value": "40px",
        "$type": "fontSize",
        "$description": "Medium heading"
      },
      "heading-sm": {
        "$value": "32px",
        "$type": "fontSize",
        "$description": "Small heading"
      },
      "body-xl": {
        "$value": "21px",
        "$type": "fontSize",
        "$description": "Large body text"
      },
      "body-lg": {
        "$value": "17px",
        "$type": "fontSize",
        "$description": "Standard body text"
      },
      "body-md": {
        "$value": "14px",
        "$type": "fontSize",
        "$description": "Small body text"
      },
      "body-sm": {
        "$value": "12px",
        "$type": "fontSize",
        "$description": "Captions and labels"
      }
    },
    "weight": {
      "regular": {
        "$value": "400",
        "$type": "fontWeight",
        "$description": "Regular text weight"
      },
      "medium": {
        "$value": "500",
        "$type": "fontWeight",
        "$description": "Medium emphasis"
      },
      "semibold": {
        "$value": "600",
        "$type": "fontWeight",
        "$description": "Semibold for subheadings"
      },
      "bold": {
        "$value": "700",
        "$type": "fontWeight",
        "$description": "Bold for headings"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "1.05",
        "$type": "lineHeight",
        "$description": "Tight leading for large headings"
      },
      "snug": {
        "$value": "1.1",
        "$type": "lineHeight",
        "$description": "Snug leading for headings"
      },
      "normal": {
        "$value": "1.38",
        "$type": "lineHeight",
        "$description": "Normal leading for body text"
      },
      "relaxed": {
        "$value": "1.47",
        "$type": "lineHeight",
        "$description": "Relaxed leading for readable text"
      }
    }
  },
  "spacing": {
    "1": {
      "$value": "4px",
      "$type": "spacing",
      "$description": "Minimal spacing"
    },
    "2": {
      "$value": "8px",
      "$type": "spacing",
      "$description": "Extra small spacing"
    },
    "3": {
      "$value": "12px",
      "$type": "spacing",
      "$description": "Small spacing"
    },
    "4": {
      "$value": "16px",
      "$type": "spacing",
      "$description": "Base spacing unit"
    },
    "5": {
      "$value": "20px",
      "$type": "spacing",
      "$description": "Medium-small spacing"
    },
    "6": {
      "$value": "24px",
      "$type": "spacing",
      "$description": "Medium spacing"
    },
    "8": {
      "$value": "32px",
      "$type": "spacing",
      "$description": "Large spacing"
    },
    "10": {
      "$value": "40px",
      "$type": "spacing",
      "$description": "Extra large spacing"
    },
    "12": {
      "$value": "48px",
      "$type": "spacing",
      "$description": "2X large spacing"
    },
    "16": {
      "$value": "64px",
      "$type": "spacing",
      "$description": "3X large spacing"
    },
    "20": {
      "$value": "80px",
      "$type": "spacing",
      "$description": "4X large spacing"
    },
    "24": {
      "$value": "96px",
      "$type": "spacing",
      "$description": "5X large spacing"
    }
  },
  "radius": {
    "sm": {
      "$value": "4px",
      "$type": "borderRadius",
      "$description": "Small radius for badges"
    },
    "md": {
      "$value": "8px",
      "$type": "borderRadius",
      "$description": "Medium radius for buttons"
    },
    "lg": {
      "$value": "12px",
      "$type": "borderRadius",
      "$description": "Large radius for cards"
    },
    "xl": {
      "$value": "18px",
      "$type": "borderRadius",
      "$description": "Extra large radius"
    },
    "pill": {
      "$value": "980px",
      "$type": "borderRadius",
      "$description": "Pill shape for buttons and toggles"
    }
  },
  "shadow": {
    "sm": {
      "$value": "0 1px 3px rgba(0, 0, 0, 0.08)",
      "$type": "shadow",
      "$description": "Subtle shadow"
    },
    "md": {
      "$value": "0 4px 12px rgba(0, 0, 0, 0.1)",
      "$type": "shadow",
      "$description": "Medium shadow for cards"
    },
    "lg": {
      "$value": "0 8px 24px rgba(0, 0, 0, 0.12)",
      "$type": "shadow",
      "$description": "Large shadow for modals"
    },
    "xl": {
      "$value": "0 16px 48px rgba(0, 0, 0, 0.16)",
      "$type": "shadow",
      "$description": "Extra large shadow"
    }
  },
  "border": {
    "width": {
      "$value": "1px",
      "$type": "borderWidth",
      "$description": "Standard border width"
    },
    "color": {
      "light": {
        "$value": "#d2d2d7",
        "$type": "color",
        "$description": "Border color for light theme"
      },
      "dark": {
        "$value": "#424245",
        "$type": "color",
        "$description": "Border color for dark theme"
      }
    }
  }
}

Edited (apply an instruction)

Apply an instruction to see the edited tokens here.

Apple is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.