feat(gatsby-design-tokens): Add "Inter" font stack (#21598)

Available via `fonts.sans` and `fonts.inter`.

BREAKING CHANGE: `fonts.sans` now delivers the "Inter" font stack, not the `system` font stack anymore
fix: `fonts.sans` and `.brand` aliases

packages/gatsby-design-tokens/src/fonts.js

@@ -2,7 +2,7 @@ import preval from "preval.macro"
 
 // TODO re:system-ui, keep an eye on https://github.com/primer/css/issues/838
 const f = preval`
-  const system = sans = body = [
+  const system = body = [
     "-apple-system",
     "BlinkMacSystemFont",
     "Segoe UI",
@@ -17,6 +17,8 @@ const f = preval`
     "Noto Color Emoji",
   ]
 
+  const sans = inter = ["Inter", ...system]
+
   const heading = brand = ["Futura PT", ...system]
 
   const monospace = [
@@ -31,7 +33,7 @@ const f = preval`
 
   const serif = ["Georgia", "Times New Roman", "Times", "serif"]
 
-  const fonts = { body, system, heading, monospace, serif }
+  const fonts = { body, system, sans, heading, brand, monospace, serif }
 
   let fontsStrings = {}
   for (const fontFamily in fonts) {