diff --git a/.gitignore b/.gitignore
index 8d89e529..1d4b4fa6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 .DS_Store
 .vscode
 node_modules
+dist
+paragon/build
diff --git a/package.json b/package.json
index 3246496c..71a719e3 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "build-tokens": "paragon build-tokens --source ./paragon/tokens/ --build-dir ./paragon/build -t light",
     "build-scss": "paragon build-scss --corePath ./paragon/core.scss --themesPath ./paragon/build/themes --source",
     "build": "make build",
+    "prepack": "make build",
     "build:watch": "nodemon --ignore dist -x \"make build\"",
     "paragon:help": "paragon help"
   },
diff --git a/paragon/_variables.scss b/paragon/_variables.scss
index d81cab06..f84e2b32 100644
--- a/paragon/_variables.scss
+++ b/paragon/_variables.scss
@@ -1,47 +1,2 @@
 // Use this file to set SASS variables for @edx/paragon
 // See _variables.scss in https://github.com/openedx/paragon/blob/master/scss/core/ for reference
-
-// Font families — matches elm-theme
-$font-family-sans-serif: "Inter", "Helvetica Neue", Arial, sans-serif !default;
-$font-family-serif: $font-family-sans-serif !default;
-$font-family-monospace: "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-
-// Heading sizes (desktop)
-$h1-font-size: 3rem !default;
-$h2-font-size: 2.25rem !default;
-$h3-font-size: 1.75rem !default;
-$h4-font-size: 1.5rem !default;
-$h5-font-size: 1.25rem !default;
-$h6-font-size: 1.125rem !default;
-
-// Heading sizes (mobile)
-$h1-mobile-font-size: 1.875rem !default;
-$h2-mobile-font-size: 1.75rem !default;
-$h3-mobile-font-size: 1.5rem !default;
-$h4-mobile-font-size: 1.375rem !default;
-$h5-mobile-font-size: 1.25rem !default;
-$h6-mobile-font-size: 1.125rem !default;
-
-// Heading weight
-$headings-font-weight: 700 !default;
-
-// Display heading sizes (desktop)
-$display1-size: 3.75rem !default;
-$display2-size: 4.875rem !default;
-$display3-size: 5.625rem !default;
-$display4-size: 6.125rem !default;
-
-// Display heading sizes (mobile)
-$display1-mobile-size: 3rem !default;
-$display2-mobile-size: 3.625rem !default;
-$display3-mobile-size: 4.375rem !default;
-$display4-mobile-size: 5.25rem !default;
-
-// Display heading weights
-$display1-weight: 900 !default;
-$display2-weight: 900 !default;
-$display3-weight: 900 !default;
-$display4-weight: 900 !default;
-
-// Display mobile line height
-$display-mobile-line-height: 1 !default;
diff --git a/paragon/core.scss b/paragon/core.scss
index dc1e239c..17055f55 100644
--- a/paragon/core.scss
+++ b/paragon/core.scss
@@ -1,4 +1,4 @@
-// this file creates the core.css import here all the common styles for your theme. 
+// this file creates the core.css import here all the common styles for your theme.
 
-// @use "./build/core/variables";
+@use "./build/core/variables";
 // @use "./build/core/custom-media-breakpoints";
diff --git a/paragon/tokens/core/global/typography.json b/paragon/tokens/core/global/typography.json
new file mode 100644
index 00000000..005cefec
--- /dev/null
+++ b/paragon/tokens/core/global/typography.json
@@ -0,0 +1,165 @@
+{
+  "typography": {
+    "font": {
+      "family": {
+        "$type": "fontFamily",
+        "sans": {
+          "serif": {
+            "source": "$font-family-sans-serif",
+            "$value": "Inter, 'Helvetica Neue', Arial, sans-serif",
+            "$description": "Sans-serif font family."
+          }
+        },
+        "serif": {
+          "source": "$font-family-serif",
+          "$value": "{typography.font.family.sans.serif}",
+          "$description": "Serif font family."
+        },
+        "monospace": {
+          "source": "$font-family-monospace",
+          "$value": "'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+          "$description": "Monospace font family."
+        }
+      },
+      "size": {
+        "$type": "dimension",
+        "h1": {
+          "base": {
+            "source": "$h1-font-size",
+            "$value": "3rem",
+            "$description": "Base font size of heading level 1."
+          },
+          "mobile": {
+            "source": "$h1-mobile-font-size",
+            "$value": "1.875rem",
+            "$description": "Mobile font size of heading level 1."
+          }
+        },
+        "h2": {
+          "base": {
+            "source": "$h2-font-size",
+            "$value": "2.25rem",
+            "$description": "Font size of heading level 2."
+          },
+          "mobile": {
+            "source": "$h2-mobile-font-size",
+            "$value": "1.75rem",
+            "$description": "Mobile font size of heading level 2."
+          }
+        },
+        "h3": {
+          "base": {
+            "source": "$h3-font-size",
+            "$value": "1.75rem",
+            "$description": "Font size of heading level 3."
+          },
+          "mobile": {
+            "source": "$h3-mobile-font-size",
+            "$value": "1.5rem",
+            "$description": "Mobile font size of heading level 3."
+          }
+        },
+        "h4": {
+          "base": {
+            "source": "$h4-font-size",
+            "$value": "1.5rem",
+            "$description": "Font size of heading level 4."
+          },
+          "mobile": {
+            "source": "$h4-mobile-font-size",
+            "$value": "1.375rem",
+            "$description": "Mobile font size of heading level 4."
+          }
+        },
+        "h5": {
+          "base": {
+            "source": "$h5-font-size",
+            "$value": "1.25rem",
+            "$description": "Font size of heading level 5."
+          },
+          "mobile": {
+            "source": "$h5-mobile-font-size",
+            "$value": "1.25rem",
+            "$description": "Mobile font size of heading level 5."
+          }
+        },
+        "h6": {
+          "base": {
+            "source": "$h6-font-size",
+            "$value": "1.125rem",
+            "$description": "Font size of heading level 6."
+          },
+          "mobile": {
+            "source": "$h6-mobile-font-size",
+            "$value": "1.125rem",
+            "$description": "Mobile font size of heading level 6."
+          }
+        },
+        "display": {
+          "4": {
+            "source": "$display4-size",
+            "$value": "6.125rem",
+            "$description": "Font size for heading of level 4."
+          },
+          "mobile": {
+            "1": {
+              "source": "$display1-mobile-size",
+              "$value": "3rem",
+              "$description": "Mobile font size for display heading level 1."
+            },
+            "2": {
+              "source": "$display2-mobile-size",
+              "$value": "3.625rem",
+              "$description": "Mobile font size for display heading level 2."
+            },
+            "3": {
+              "source": "$display3-mobile-size",
+              "$value": "4.375rem",
+              "$description": "Mobile font size for display heading level 3."
+            },
+            "4": {
+              "source": "$display4-mobile-size",
+              "$value": "5.25rem",
+              "$description": "Mobile font size for display heading level 4."
+            }
+          }
+        }
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "display": {
+          "1": {
+            "source": "$display1-weight",
+            "$value": "900",
+            "$description": "Font weight of display level 1."
+          },
+          "2": {
+            "source": "$display2-weight",
+            "$value": "900",
+            "$description": "Font weight of display level 2."
+          },
+          "3": {
+            "source": "$display3-weight",
+            "$value": "900",
+            "$description": "Font weight of display level 3."
+          },
+          "4": {
+            "source": "$display4-weight",
+            "$value": "900",
+            "$description": "Font weight of display level 4."
+          }
+        }
+      }
+    },
+    "line-height": {
+      "$type": "number",
+      "display": {
+        "mobile": {
+          "source": "$display-mobile-line-height",
+          "$value": "1",
+          "$description": "Mobile display line height."
+        }
+      }
+    }
+  }
+}