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.