{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for The Verge",
  "meta": {
    "name": "The Verge",
    "description": "The Verge's 2024 redesign feels like somebody wired a Condé Nast magazine to a chiptune soundboard. The canvas is almost-black (`#131313`), the headlines are built from a brutally heavy display face (Manuka) that runs up to 107px, and the whole page is peppered with acid-mint `#3cffd0` and ultraviolet `#5200ff` that behave less like brand colors and more like hazard tape. Story tiles are not quiet gray cards — they're saturated, full-bleed color blocks (yellow, pink, orange, blue, purple) that feel like pasted-up rave flyers arranged into a timeline. The mood is \"developer console meets club night meets tech tabloid\": serious enough to cover a congressional hearing, loud enough to review a synthesizer.",
    "theme": "light"
  },
  "color": {
    "color-1": {
      "$value": "#131313",
      "$type": "color",
      "$description": "Use for the color 1 role."
    },
    "color-2": {
      "$value": "#3cffd0",
      "$type": "color",
      "$description": "Use for the color 2 role."
    },
    "color-3": {
      "$value": "#5200ff",
      "$type": "color",
      "$description": "Use for the color 3 role."
    },
    "dominates-the-masthead-in-manuka-at-hero-scale-letting-the-reader-know-before-any-headline-loads-that-this-is-editorial-territory-not-a-template-there-is-no-light-mode-on-the-homepage-the-dark-canvas-is-the-product-and-the-only-time-the-palette-inverts-is-when-a-single-story-tile-takes-a-mint-or-yellow-fill-the-depth-is-almost-entirely-flat": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the dominates the masthead in manuka at hero scale letting the reader know before any headline loads that this is editorial territory not a template there is no light mode on the homepage the dark canvas is the product and the only time the palette inverts is when a single story tile takes a mint or yellow fill the depth is almost entirely flat role."
    },
    "color-5": {
      "$value": "#2d2d2d",
      "$type": "color",
      "$description": "Use for the color 5 role."
    },
    "console-mint-border": {
      "$value": "#309875",
      "$type": "color",
      "$description": "Use for the console mint border role."
    },
    "deep-link-blue": {
      "$value": "#3860be",
      "$type": "color",
      "$description": "Use for the deep link blue role."
    },
    "focus-cyan": {
      "$value": "#1eaedb",
      "$type": "color",
      "$description": "Use for the focus cyan role."
    },
    "purple-rule": {
      "$value": "#3d00bf",
      "$type": "color",
      "$description": "Use for the purple rule role."
    },
    "image-frame": {
      "$value": "#313131",
      "$type": "color",
      "$description": "Use for the image frame role."
    },
    "absolute-black": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the absolute black role."
    },
    "secondary-text": {
      "$value": "#949494",
      "$type": "color",
      "$description": "Use for the secondary text role."
    },
    "muted-text": {
      "$value": "#e9e9e9",
      "$type": "color",
      "$description": "Use for the muted text role."
    },
    "overlay-black": {
      "$value": "rgba(0, 0, 0, 0.33)",
      "$type": "color",
      "$description": "Use for the overlay black role."
    },
    "dim-gray": {
      "$value": "#8c8c8c",
      "$type": "color",
      "$description": "Use for the dim gray role."
    },
    "color-16": {
      "$value": "rgba(255, 255, 255, 0.2)",
      "$type": "color",
      "$description": "Use for the color 16 role."
    },
    "color-17": {
      "$value": "#c2c2c2",
      "$type": "color",
      "$description": "Use for the color 17 role."
    },
    "color-18": {
      "$value": "rgba(140, 140, 140, 0.87)",
      "$type": "color",
      "$description": "Use for the color 18 role."
    },
    "color-19": {
      "$value": "#0500ff",
      "$type": "color",
      "$description": "Use for the color 19 role."
    }
  },
  "typography": {
    "hero-wordmark-display": {
      "$value": {
        "fontFamily": "Manuka",
        "fontSize": "1.07px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for hero wordmark display."
    },
    "heading-wide": {
      "$value": {
        "fontFamily": "PolySans",
        "fontSize": "0.32px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading wide."
    },
    "light-capitalized-label": {
      "$value": {
        "fontFamily": "PolySans",
        "fontSize": "1.9px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for light capitalized label."
    },
    "all-caps-label-xl": {
      "$value": {
        "fontFamily": "PolySans",
        "fontSize": "1.8px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for all caps label xl."
    },
    "inline-label": {
      "$value": {
        "fontFamily": "PolySans",
        "fontSize": "0.15px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for inline label."
    },
    "eyebrow-all-caps": {
      "$value": {
        "fontFamily": "PolySans",
        "fontSize": "1.8px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for eyebrow all caps."
    },
    "tag-label": {
      "$value": {
        "fontFamily": "PolySans",
        "fontSize": "0.72px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for tag label."
    },
    "caption-micro": {
      "$value": {
        "fontFamily": "PolySans",
        "fontSize": "1.1px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption micro."
    },
    "meta-nano": {
      "$value": {
        "fontFamily": "PolySans",
        "fontSize": "1.5px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for meta nano."
    },
    "mono-button-label": {
      "$value": {
        "fontFamily": "PolySans Mono",
        "fontSize": "1.5px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for mono button label."
    }
  },
  "spacing": {
    "4": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step 4."
    },
    "8": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step 8."
    },
    "12": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step 12."
    },
    "16": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step 16."
    },
    "20": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Spacing step 20."
    },
    "24": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step 24."
    },
    "32": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step 32."
    },
    "40": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Spacing step 40."
    },
    "48": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step 48."
    },
    "64": {
      "$value": "64px",
      "$type": "dimension",
      "$description": "Spacing step 64."
    }
  },
  "radius": {
    "sm": {
      "$value": "0px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "40px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "30px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "pill": {
      "$value": "20px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "r6": {
      "$value": "3px",
      "$type": "dimension",
      "$description": "Border radius r6."
    },
    "r7": {
      "$value": "5px",
      "$type": "dimension",
      "$description": "Border radius r7."
    },
    "r8": {
      "$value": "1px",
      "$type": "dimension",
      "$description": "Border radius r8."
    },
    "r9": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius r9."
    },
    "r10": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Border radius r10."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.theverge.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}