{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Wired-Inspired",
  "meta": {
    "name": "Wired-Inspired",
    "description": "An inspired interpretation of Wired's design language — a flagship technology-magazine brand whose surface is a strict editorial duet of stark black wordmark on white canvas, anchored by a tall narrow custom display serif for hero headlines, a humanist serif body face for long-form reading, and a clean sans face for metadata; layout reads like a printed magazine ported to the web with very little marketing chrome.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-soft": {
      "$value": "#1a1a1a",
      "$type": "color",
      "$description": "Use for the ink soft role."
    },
    "body": {
      "$value": "#757575",
      "$type": "color",
      "$description": "Use for the body role."
    },
    "hairline": {
      "$value": "#e0e0e0",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "canvas": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "canvas-soft": {
      "$value": "#f5f5f5",
      "$type": "color",
      "$description": "Use for the canvas soft role."
    },
    "link": {
      "$value": "#057dbc",
      "$type": "color",
      "$description": "Use for the link role."
    }
  },
  "typography": {
    "display-hero": {
      "$value": {
        "fontFamily": "WiredDisplay, \"Times New Roman\", Georgia, serif",
        "fontSize": "64px",
        "fontWeight": 400,
        "lineHeight": "59.52px",
        "letterSpacing": "-0.5px"
      },
      "$type": "typography",
      "$description": "Typography style for display hero."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "WiredDisplay, \"Times New Roman\", Georgia, serif",
        "fontSize": "48px",
        "fontWeight": 400,
        "lineHeight": "50.4px",
        "letterSpacing": "-0.4px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "WiredDisplay, \"Times New Roman\", Georgia, serif",
        "fontSize": "32px",
        "fontWeight": 400,
        "lineHeight": "35.2px",
        "letterSpacing": "-0.3px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "display-sm": {
      "$value": {
        "fontFamily": "WiredDisplay, \"Times New Roman\", Georgia, serif",
        "fontSize": "26px",
        "fontWeight": 400,
        "lineHeight": "28.08px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for display sm."
    },
    "display-xs": {
      "$value": {
        "fontFamily": "Apercu, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "fontSize": "20px",
        "fontWeight": 700,
        "lineHeight": "24px",
        "letterSpacing": "-0.28px"
      },
      "$type": "typography",
      "$description": "Typography style for display xs."
    },
    "body-serif-lg": {
      "$value": {
        "fontFamily": "BreveText, Georgia, \"Times New Roman\", serif",
        "fontSize": "19px",
        "fontWeight": 400,
        "lineHeight": "27.93px",
        "letterSpacing": "0.108px"
      },
      "$type": "typography",
      "$description": "Typography style for body serif lg."
    },
    "body-serif-md": {
      "$value": {
        "fontFamily": "BreveText, Georgia, \"Times New Roman\", serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": "24px",
        "letterSpacing": "0.09px"
      },
      "$type": "typography",
      "$description": "Typography style for body serif md."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Apercu, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "fontSize": "17px",
        "fontWeight": 400,
        "lineHeight": "20px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "body-md-strong": {
      "$value": {
        "fontFamily": "Apercu, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "fontSize": "17px",
        "fontWeight": 700,
        "lineHeight": "22px",
        "letterSpacing": "-0.144px"
      },
      "$type": "typography",
      "$description": "Typography style for body md strong."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Apercu, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": "18px",
        "letterSpacing": "0.4px"
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "body-sm-strong": {
      "$value": {
        "fontFamily": "Apercu, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "fontSize": "14px",
        "fontWeight": 700,
        "lineHeight": "18px",
        "letterSpacing": "0.4px"
      },
      "$type": "typography",
      "$description": "Typography style for body sm strong."
    },
    "byline": {
      "$value": {
        "fontFamily": "BreveText, Georgia, \"Times New Roman\", serif",
        "fontSize": "12.73px",
        "fontWeight": 700,
        "lineHeight": "28px",
        "letterSpacing": "0.108px"
      },
      "$type": "typography",
      "$description": "Typography style for byline."
    },
    "caption": {
      "$value": {
        "fontFamily": "Apercu, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": "16px",
        "letterSpacing": "0"
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "button-md": {
      "$value": {
        "fontFamily": "Apercu, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
        "fontSize": "16px",
        "fontWeight": 700,
        "lineHeight": "20px",
        "letterSpacing": "0.3px"
      },
      "$type": "typography",
      "$description": "Typography style for button md."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "2xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step 2xl."
    },
    "3xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step 3xl."
    },
    "4xl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 4xl."
    }
  },
  "radius": {
    "none": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius none."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.wired.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}