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