AI token editor
Edit Nike 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": {
"black": {
"$value": "#111111",
"$type": "color",
"$description": "Primary text, logo, icons, button backgrounds"
},
"white": {
"$value": "#ffffff",
"$type": "color",
"$description": "Backgrounds, cards, button text on dark backgrounds"
},
"gray": {
"50": {
"$value": "#f7f7f7",
"$type": "color",
"$description": "Subtle background tints"
},
"100": {
"$value": "#f5f5f5",
"$type": "color",
"$description": "Background accents, disabled states"
},
"200": {
"$value": "#e5e5e5",
"$type": "color",
"$description": "Light borders, subtle dividers"
},
"300": {
"$value": "#cccccc",
"$type": "color",
"$description": "Borders, dividers, inactive elements"
},
"500": {
"$value": "#757575",
"$type": "color",
"$description": "Tertiary text, disabled text, icons"
},
"700": {
"$value": "#333333",
"$type": "color",
"$description": "Secondary text, subheadings"
},
"900": {
"$value": "#111111",
"$type": "color",
"$description": "Headings, primary text (alias to black)"
}
},
"red": {
"$value": "#dc143c",
"$type": "color",
"$description": "Just In badges, error states, accent highlights"
},
"orange": {
"$value": "#ff4500",
"$type": "color",
"$description": "Product accents, CTAs, vibrant highlights"
},
"pink": {
"$value": "#ff006e",
"$type": "color",
"$description": "Product colorways, accent colors"
},
"pink-bright": {
"$value": "#ff1493",
"$type": "color",
"$description": "Vibrant product accents and colorways"
},
"purple": {
"$value": "#6b46c1",
"$type": "color",
"$description": "Product colorways"
},
"blue": {
"$value": "#1e40af",
"$type": "color",
"$description": "Links, interactive elements, product colorways"
}
},
"font": {
"family": {
"primary": {
"$value": "\"Helvetica Neue\", Helvetica, Arial, system-ui, sans-serif",
"$type": "fontFamily",
"$description": "Primary font stack for all text"
}
},
"size": {
"xs": {
"$value": "12px",
"$type": "dimension",
"$description": "Captions, metadata, fine print"
},
"sm": {
"$value": "14px",
"$type": "dimension",
"$description": "Navigation links, labels, secondary text"
},
"base": {
"$value": "16px",
"$type": "dimension",
"$description": "Body text, product titles, default text"
},
"lg": {
"$value": "20px",
"$type": "dimension",
"$description": "Card titles, emphasized text"
},
"xl": {
"$value": "28px",
"$type": "dimension",
"$description": "Subsection titles"
},
"2xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Page titles, major headings"
},
"3xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Section headings, large titles"
},
"hero": {
"$value": "72px",
"$type": "dimension",
"$description": "Hero headlines, major campaign text"
}
},
"weight": {
"normal": {
"$value": "400",
"$type": "fontWeight",
"$description": "Body text, default weight"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Emphasized text, labels, buttons"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Headings, strong emphasis"
},
"extrabold": {
"$value": "800",
"$type": "fontWeight",
"$description": "Hero headlines, major headings"
}
},
"lineHeight": {
"tight": {
"$value": "1.1",
"$type": "number",
"$description": "Large headlines, hero text"
},
"snug": {
"$value": "1.25",
"$type": "number",
"$description": "Headings, titles"
},
"normal": {
"$value": "1.5",
"$type": "number",
"$description": "Body text, default line height"
}
}
},
"spacing": {
"1": {
"$value": "4px",
"$type": "dimension",
"$description": "Minimal spacing, icon padding"
},
"2": {
"$value": "8px",
"$type": "dimension",
"$description": "Tight spacing, small gaps"
},
"3": {
"$value": "12px",
"$type": "dimension",
"$description": "Grid gaps, compact padding"
},
"4": {
"$value": "16px",
"$type": "dimension",
"$description": "Default padding, comfortable spacing"
},
"5": {
"$value": "20px",
"$type": "dimension",
"$description": "Medium spacing"
},
"6": {
"$value": "24px",
"$type": "dimension",
"$description": "Card padding, comfortable gaps"
},
"8": {
"$value": "32px",
"$type": "dimension",
"$description": "Section padding, large gaps"
},
"9": {
"$value": "36px",
"$type": "dimension",
"$description": "Large section spacing"
},
"12": {
"$value": "48px",
"$type": "dimension",
"$description": "Container padding, major section spacing"
},
"16": {
"$value": "64px",
"$type": "dimension",
"$description": "Extra large section gaps"
},
"24": {
"$value": "96px",
"$type": "dimension",
"$description": "Hero padding, major vertical rhythm"
}
},
"radius": {
"none": {
"$value": "0px",
"$type": "dimension",
"$description": "Sharp corners for product cards and images"
},
"sm": {
"$value": "4px",
"$type": "dimension",
"$description": "Subtle rounding for small elements"
},
"md": {
"$value": "8px",
"$type": "dimension",
"$description": "Inputs, small buttons"
},
"lg": {
"$value": "12px",
"$type": "dimension",
"$description": "Toggles, medium cards"
},
"xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Modals, dialogs, large cards"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Pill buttons, badges, circular elements"
}
},
"shadow": {
"sm": {
"$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
"$type": "shadow",
"$description": "Subtle elevation, minimal depth"
},
"md": {
"$value": "0 4px 8px 0 rgba(0, 0, 0, 0.1)",
"$type": "shadow",
"$description": "Cards on hover, dropdown triggers"
},
"lg": {
"$value": "0 10px 24px 0 rgba(0, 0, 0, 0.15)",
"$type": "shadow",
"$description": "Dropdowns, elevated panels"
},
"xl": {
"$value": "0 20px 40px 0 rgba(0, 0, 0, 0.2)",
"$type": "shadow",
"$description": "Modals, major overlays"
}
},
"border": {
"width": {
"$value": "1px",
"$type": "dimension",
"$description": "Standard border width"
},
"light": {
"$value": "1px solid #e5e5e5",
"$type": "border",
"$description": "Subtle dividers, light borders"
},
"medium": {
"$value": "1px solid #cccccc",
"$type": "border",
"$description": "Input borders, default borders"
},
"dark": {
"$value": "1px solid #757575",
"$type": "border",
"$description": "Active states, emphasized borders"
}
}
}Edited (apply an instruction)
Apply an instruction to see the edited tokens here.
Nike is a trademark of its respective owner. Tokens are an analytical reference, not an endorsement.