diff --git a/config/collections/index.js b/config/collections/index.js
index 3149ab1..892159b 100644
--- a/config/collections/index.js
+++ b/config/collections/index.js
@@ -1,4 +1,4 @@
-const postsByTag = (collection) => {
+export const postsByTag = (collection) => {
   const posts = collection.getFilteredByTag("post");
 
   const postsByTag = {};
@@ -13,7 +13,7 @@ const postsByTag = (collection) => {
   return postsByTag;
 };
 
-const catalogueByType = (collection) => {
+export const catalogueByType = (collection) => {
   const allItems = collection.getFilteredByTag("catalogue");
 
   const catalogueByType = {};
@@ -28,8 +28,3 @@ const catalogueByType = (collection) => {
 
   return catalogueByType;
 };
-
-module.exports = {
-  catalogueByType,
-  postsByTag,
-};
diff --git a/config/constants.js b/config/constants.js
index 73012bc..f9a391a 100644
--- a/config/constants.js
+++ b/config/constants.js
@@ -1,9 +1,7 @@
-const dir = {
+export const dir = {
   assets: "assets",
   data: "_data",
   includes: "_includes",
   input: "src",
   output: "dist",
 };
-
-module.exports = { dir };
diff --git a/config/design-tokens/colors.js b/config/design-tokens/colors.js
new file mode 100644
index 0000000..6947248
--- /dev/null
+++ b/config/design-tokens/colors.js
@@ -0,0 +1,22 @@
+export default {
+  light: {
+    primary: "188deg 84% 35%",
+    secondary: "8deg 84% 50%",
+    background: "0deg 0% 98%",
+    surface: "188deg 27% 94%",
+    border: "188deg 48% 80%",
+    text: "0deg 0% 4%",
+    fadeText: "188deg 12% 32%",
+    shadow: "188deg 100% 18%",
+  },
+  dark: {
+    primary: "188deg 100% 30%",
+    secondary: "8deg 84% 43%",
+    background: "0deg 0% 9%",
+    surface: "202deg 13% 14%",
+    border: "208deg 27% 15%",
+    text: "0deg 0% 98%",
+    fadeText: "188deg 12% 70%",
+    shadow: "188deg 100% 18%",
+  },
+};
diff --git a/config/design-tokens/colors.json b/config/design-tokens/colors.json
deleted file mode 100644
index f2f1c3f..0000000
--- a/config/design-tokens/colors.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "light": {
-    "primary": "188deg 84% 35%",
-    "secondary": "8deg 84% 50%",
-    "background": "0deg 0% 98%",
-    "surface": "188deg 27% 94%",
-    "border": "188deg 48% 80%",
-    "text": "0deg 0% 4%",
-    "fadeText": "188deg 12% 32%",
-    "shadow": "188deg 100% 18%"
-  },
-  "dark": {
-    "primary": "188deg 100% 30%",
-    "secondary": "8deg 84% 43%",
-    "background": "0deg 0% 9%",
-    "surface": "202deg 13% 14%",
-    "border": "208deg 27% 15%",
-    "text": "0deg 0% 98%",
-    "fadeText": "188deg 12% 70%",
-    "shadow": "188deg 100% 18%"
-  }
-}
diff --git a/config/design-tokens/fonts.js b/config/design-tokens/fonts.js
new file mode 100644
index 0000000..8b94a73
--- /dev/null
+++ b/config/design-tokens/fonts.js
@@ -0,0 +1,60 @@
+export default {
+  display: {
+    family: "Anek Latin",
+    format: "truetype",
+    weights: {
+      ExtraBold: {
+        path: "/aneklatin/AnekLatin-ExtraBold.ttf",
+        "font-style": "normal",
+        weight: 800,
+      },
+      Bold: {
+        path: "/aneklatin/AnekLatin-Bold.ttf",
+        "font-style": "normal",
+        weight: 700,
+      },
+    },
+  },
+  body: {
+    family: "iA Writer Quattro V",
+    format: "woff2",
+    weights: {
+      Regular: {
+        path: "/quattro/iAWriterQuattroS-Regular.woff2",
+        "font-style": "normal",
+        weight: 400,
+      },
+      Italic: {
+        path: "/quattro/iAWriterQuattroS-Italic.woff2",
+        "font-style": "italic",
+        weight: 400,
+      },
+      Bold: {
+        path: "/quattro/iAWriterQuattroS-Bold.woff2",
+        "font-style": "normal",
+        weight: 650,
+      },
+      BoldItalic: {
+        path: "/quattro/iAWriterQuattroS-BoldItalic.woff2",
+        "font-style": "italic",
+        weight: 650,
+      },
+    },
+  },
+  monospace: {
+    family: "IBM Plex Mono",
+    format: "truetype",
+    weights: {
+      Regular: {
+        path: "/ibmplexmono/IBMPlexMono-Regular.ttf",
+        "font-style": "normal",
+        weight: 400,
+      },
+      Italic: {
+        path: "/ibmplexmono/IBMPlexMono-Italic.ttf",
+        "font-style": "italic",
+        weight: 400,
+      },
+    },
+  },
+};
diff --git a/config/design-tokens/fonts.json b/config/design-tokens/fonts.json
deleted file mode 100644
index 14ffe63..0000000
--- a/config/design-tokens/fonts.json
+++ /dev/null
@@ -1,60 +0,0 @@
-{
-  "display": {
-    "family": "Anek Latin",
-    "format": "truetype",
-    "weights": {
-      "ExtraBold": {
-        "path": "/aneklatin/AnekLatin-ExtraBold.ttf",
-        "font-style": "normal",
-        "weight": 800
-      },
-      "Bold": {
-        "path": "/aneklatin/AnekLatin-Bold.ttf",
-        "font-style": "normal",
-        "weight": 700
-      }
-    }
-  },
-  "body": {
-    "family": "iA Writer Quattro V",
-    "format": "woff2",
-    "weights": {
-      "Regular": {
-        "path": "/quattro/iAWriterQuattroS-Regular.woff2",
-        "font-style": "normal",
-        "weight": 400
-      },
-      "Italic": {
-        "path": "/quattro/iAWriterQuattroS-Italic.woff2",
-        "font-style": "italic",
-        "weight": 400
-      },
-      "Bold": {
-        "path": "/quattro/iAWriterQuattroS-Bold.woff2",
-        "font-style": "normal",
-        "weight": 650
-      },
-      "BoldItalic": {
-        "path": "/quattro/iAWriterQuattroS-BoldItalic.woff2",
-        "font-style": "italic",
-        "weight": 650
-      }
-    }
-  },
-  "monospace": {
-    "family": "IBM Plex Mono",
-    "format": "truetype",
-    "weights": {
-      "Regular": {
-        "path": "/ibmplexmono/IBMPlexMono-Regular.ttf",
-        "font-style": "normal",
-        "weight": 400
-      },
-      "Italic": {
-        "path": "/ibmplexmono/IBMPlexMono-Italic.ttf",
-        "font-style": "italic",
-        "weight": 400
-      }
-    }
-  }
-}
diff --git a/config/design-tokens/spacing.js b/config/design-tokens/spacing.js
new file mode 100644
index 0000000..13f8dbe
--- /dev/null
+++ b/config/design-tokens/spacing.js
@@ -0,0 +1,11 @@
+export default {
+  0: 0,
+  0.25: 4,
+  0.5: 8,
+  1: 16,
+  1.5: 24,
+  2: 32,
+  3: 48,
+  4: 64,
+  5: 80,
+};
diff --git a/config/design-tokens/spacing.json b/config/design-tokens/spacing.json
deleted file mode 100644
index d014838..0000000
--- a/config/design-tokens/spacing.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "0": 0,
-  "0.25": 4,
-  "0.5": 8,
-  "1": 16,
-  "1.5": 24,
-  "2": 32,
-  "3": 48,
-  "4": 64,
-  "5": 80
-}
diff --git a/config/filters/index.js b/config/filters/index.js
index a8dc9d2..c43375c 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -1,19 +1,19 @@
-const dayjs = require("dayjs");
-const utc = require("dayjs/plugin/utc");
-const advancedFormat = require("dayjs/plugin/advancedFormat");
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import advancedFormat from "dayjs/plugin/advancedFormat.js";
 
-const pluralizeBase = require("pluralize");
+import pluralizeBase from "pluralize";
 
-const keys = Object.keys;
-const values = Object.values;
-const entries = Object.entries;
+export const keys = Object.keys;
+export const values = Object.values;
+export const entries = Object.entries;
 
 dayjs.extend(utc);
 dayjs.extend(advancedFormat);
 
-const formatDate = (date, format) => dayjs.utc(date).format(format);
+export const formatDate = (date, format) => dayjs.utc(date).format(format);
 
-const organizeByDate = (collection) => {
+export const organizeByDate = (collection) => {
   const collectionByDate = {};
 
   collection.forEach((item) => {
@@ -37,7 +37,7 @@ const allTags = (collection, ignore = []) => {
   return [...tagSet];
 };
 
-const allTagCounts = (collection, ignore = ["post"]) => {
+export const allTagCounts = (collection, ignore = ["post"]) => {
   if (!collection.length) {
     throw new Error("Invalid collection, no items");
   }
@@ -62,28 +62,28 @@ const allTagCounts = (collection, ignore = ["post"]) => {
   return tagArray;
 };
 
-const filter = (collection, filters = []) => {
+export const filter = (collection, filters = []) => {
   return collection.filter((item) => !filters.includes(item));
 };
 
-const pluralize = (string, count = 0) => {
+export const pluralize = (string, count = 0) => {
   return pluralizeBase(string, count);
 };
 
-const filterCatalogueTags = (tags) => {
+export const filterCatalogueTags = (tags) => {
   // In the case of catalogue items, the 0-index is "catalogue"
   // and the 1-index is the catalogueType. We don't need to
   // show those in the front-end.
   return filter(tags, [tags[0], tags[1]]);
 };
 
-const limit = (collection, limit = 5) => collection.slice(0, limit);
+export const limit = (collection, limit = 5) => collection.slice(0, limit);
 
-const filterFavourites = (collection) => {
+export const filterFavourites = (collection) => {
   return collection.filter((item) => item.data.favourite);
 };
 
-const isOld = (dateArg) => {
+export const isOld = (dateArg) => {
   const date = dayjs(dateArg);
   const now = dayjs();
 
@@ -91,19 +91,3 @@ const isOld = (dateArg) => {
 
   return diffInYears >= 2;
 };
-
-module.exports = {
-  allTagCounts,
-  allTags,
-  entries,
-  filter,
-  filterCatalogueTags,
-  filterFavourites,
-  formatDate,
-  isOld,
-  keys,
-  limit,
-  organizeByDate,
-  pluralize,
-  values,
-};
diff --git a/config/plugins/markdown.js b/config/plugins/markdown.js
index c5ea132..c8ceb46 100644
--- a/config/plugins/markdown.js
+++ b/config/plugins/markdown.js
@@ -1,8 +1,8 @@
-const markdownIt = require("markdown-it");
-const markdownItFootnote = require("markdown-it-footnote");
-const markdownItPrism = require("markdown-it-prism");
-const markdownItAbbr = require("markdown-it-abbr");
-const markdownItAnchor = require("markdown-it-anchor");
+import markdownIt from "markdown-it";
+import markdownItFootnote from "markdown-it-footnote";
+import markdownItPrism from "markdown-it-prism";
+import markdownItAbbr from "markdown-it-abbr";
+import markdownItAnchor from "markdown-it-anchor";
 
 const markdown = markdownIt({
   html: true,
@@ -27,4 +27,4 @@ markdown.renderer.rules.footnote_block_open = (_tokens, _idx, options) => {
   );
 };
 
-module.exports = markdown;
+export default markdown;
diff --git a/config/shortcodes/image.js b/config/shortcodes/image.js
index 3659de6..8fef188 100644
--- a/config/shortcodes/image.js
+++ b/config/shortcodes/image.js
@@ -1,4 +1,4 @@
-const Image = require("@11ty/eleventy-img");
+import Image from "@11ty/eleventy-img";
 
 const stringifyAttributes = (attributeMap) => {
   return Object.entries(attributeMap)
@@ -73,4 +73,4 @@ const imageShortcode = async (
   return imageElement;
 };
 
-module.exports = imageShortcode;
+export default imageShortcode;
diff --git a/config/shortcodes/youtube.js b/config/shortcodes/youtube.js
index fcc0b9d..f314820 100644
--- a/config/shortcodes/youtube.js
+++ b/config/shortcodes/youtube.js
@@ -12,4 +12,4 @@ const liteYoutube = (id, label) => {
 </div>`;
 };
 
-module.exports = liteYoutube;
+export default liteYoutube;
diff --git a/config/transforms/html-config.js b/config/transforms/html-config.js
index 169b827..ab76345 100644
--- a/config/transforms/html-config.js
+++ b/config/transforms/html-config.js
@@ -1,6 +1,6 @@
-const htmlmin = require("html-minifier-terser");
+import htmlmin from "html-minifier-terser";
 
-module.exports = (eleventyConfig) => {
+export default function (eleventyConfig) {
   eleventyConfig.addTransform("html-minify", (content, path) => {
     if (path && path.endsWith(".html")) {
       return htmlmin.minify(content, {
@@ -17,4 +17,4 @@ module.exports = (eleventyConfig) => {
     }
     return content;
   });
-};
+}
diff --git a/eleventy.config.js b/eleventy.config.js
index 2db54c0..99fd24f 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -1,13 +1,11 @@
-const UpgradeHelper = require("@11ty/eleventy-upgrade-help");
-const pluginRss = require("@11ty/eleventy-plugin-rss");
-const pluginNoRobots = require("eleventy-plugin-no-robots");
+import UpgradeHelper from "@11ty/eleventy-upgrade-help";
+import pluginRss from "@11ty/eleventy-plugin-rss";
+import pluginNoRobots from "eleventy-plugin-no-robots";
 
-const {
-  catalogueByType,
-  postsByTag,
-} = require("./config/collections/index.js");
-const { dir } = require("./config/constants.js");
-const {
+import { catalogueByType, postsByTag } from "./config/collections/index.js";
+
+import { dir } from "./config/constants.js";
+import {
   allTagCounts,
   entries,
   filter,
@@ -20,12 +18,14 @@ const {
   organizeByDate,
   pluralize,
   values,
-} = require("./config/filters/index.js");
-const markdown = require("./config/plugins/markdown.js");
-const imageShortcode = require("./config/shortcodes/image.js");
-const liteYoutube = require("./config/shortcodes/youtube.js");
+} from "./config/filters/index.js";
+import markdown from "./config/plugins/markdown.js";
+import imageShortcode from "./config/shortcodes/image.js";
+import liteYoutube from "./config/shortcodes/youtube.js";
 
-module.exports = (eleventyConfig) => {
+import htmlConfigTransform from "./config/transforms/html-config.js";
+
+export default function (eleventyConfig) {
   eleventyConfig.addWatchTarget("./src/css");
 
   // 	--------------------- Plugins ---------------------
@@ -51,7 +51,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter("pluralize", pluralize);
 
   // 	--------------------- Custom Transforms -----------------------
-  eleventyConfig.addPlugin(require("./config/transforms/html-config.js"));
+  eleventyConfig.addPlugin(htmlConfigTransform);
 
   // 	--------------------- Passthrough File Copy -----------------------
   ["src/assets/fonts/", "src/assets/images"].forEach((path) =>
@@ -78,4 +78,4 @@ module.exports = (eleventyConfig) => {
 
     dir,
   };
-};
+}
diff --git a/package.json b/package.json
index 4b1ecc8..f60ecf4 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "repository": "https://github.com/wonderfulfrog/wonderfulfrog.com",
   "author": "Devin Haska",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "debug": "DEBUG=Eleventy* eleventy --serve --watch",
     "start": "eleventy --serve --watch --quiet",
diff --git a/src/_data/blogroll.js b/src/_data/blogroll.js
index 9e0270f..053cae1 100644
--- a/src/_data/blogroll.js
+++ b/src/_data/blogroll.js
@@ -87,4 +87,4 @@ const blogroll = [
 
 const sortedBlogroll = blogroll.sort((a, b) => a.title.localeCompare(b.title));
 
-module.exports = sortedBlogroll;
+export default sortedBlogroll;
diff --git a/src/_data/lastfm.js b/src/_data/lastfm.js
index bde62a4..fbf9c70 100644
--- a/src/_data/lastfm.js
+++ b/src/_data/lastfm.js
@@ -1,9 +1,9 @@
-require("dotenv").config();
+import "dotenv/config";
 
-const EleventyFetch = require("@11ty/eleventy-fetch");
-const dayjs = require("dayjs");
-const utc = require("dayjs/plugin/utc");
-const relativeTime = require("dayjs/plugin/relativeTime");
+import EleventyFetch from "@11ty/eleventy-fetch";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import relativeTime from "dayjs/plugin/relativeTime.js";
 
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
@@ -87,7 +87,7 @@ const fetchRecentTracks = async () => {
   return recentTracks;
 };
 
-module.exports = async function () {
+export default async function () {
   const recentTracks = await fetchRecentTracks();
   const recentAlbums = await fetchRecentAlbums();
 
@@ -95,4 +95,4 @@ module.exports = async function () {
     recentTracks,
     recentAlbums,
   };
-};
+}
diff --git a/src/_data/letterboxd.js b/src/_data/letterboxd.js
index e05731e..54e74e4 100644
--- a/src/_data/letterboxd.js
+++ b/src/_data/letterboxd.js
@@ -1,10 +1,10 @@
-require("dotenv").config();
+import "dotenv/config";
 
-const EleventyFetch = require("@11ty/eleventy-fetch");
-const cheerio = require("cheerio");
-const dayjs = require("dayjs");
-const utc = require("dayjs/plugin/utc");
-const relativeTime = require("dayjs/plugin/relativeTime");
+import EleventyFetch from "@11ty/eleventy-fetch";
+import cheerio from "cheerio";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc.js";
+import relativeTime from "dayjs/plugin/relativeTime.js";
 
 dayjs.extend(utc);
 dayjs.extend(relativeTime);
@@ -65,4 +65,4 @@ const fetchRecentMovies = async () => {
   return recentMovies;
 };
 
-module.exports = fetchRecentMovies;
+export default fetchRecentMovies;
diff --git a/src/_data/meta.js b/src/_data/meta.js
index 684feaa..db86cd5 100644
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   url: process.env.URL || "http://localhost:8080",
   siteName: "wonderfulfrog",
   siteDescription:
diff --git a/src/_data/navigation.js b/src/_data/navigation.js
index 46cfb16..f82cee9 100644
--- a/src/_data/navigation.js
+++ b/src/_data/navigation.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   top: [
     {
       text: "About",
diff --git a/src/_data/preloads.js b/src/_data/preloads.js
index 3f00dff..8640fdb 100644
--- a/src/_data/preloads.js
+++ b/src/_data/preloads.js
@@ -1,5 +1,5 @@
-const { getFontUrl } = require("../utils/fonts");
-const fonts = require("../../config/design-tokens/fonts.json");
+import { getFontUrl } from "../utils/fonts.js";
+import fonts from "../../config/design-tokens/fonts.js";
 
 const preloads = [
   {
@@ -19,4 +19,4 @@ const preloads = [
   },
 ];
 
-module.exports = preloads;
+export default preloads;
diff --git a/src/_data/robots.js b/src/_data/robots.js
index 0b134b5..1d785a8 100644
--- a/src/_data/robots.js
+++ b/src/_data/robots.js
@@ -1,6 +1,6 @@
-require("dotenv").config();
+import "dotenv/config";
 
-const EleventyFetch = require("@11ty/eleventy-fetch");
+import EleventyFetch from "@11ty/eleventy-fetch";
 
 const accessToken = process.env.DARK_VISITORS_ACCESS_TOKEN;
 
@@ -101,7 +101,7 @@ const fetchRobotsTxt = async () => {
   }
 };
 
-module.exports = async function () {
+export default async function () {
   const robotsTxt = await fetchRobotsTxt();
 
   if (!robotsTxt) {
@@ -109,4 +109,4 @@ module.exports = async function () {
   }
 
   return robotsTxt;
-};
+}
diff --git a/src/catalogue/books/books.11tydata.js b/src/catalogue/books/books.11tydata.js
index 5521e0a..8f8d64b 100644
--- a/src/catalogue/books/books.11tydata.js
+++ b/src/catalogue/books/books.11tydata.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   layout: "layouts/catalogue-item",
   tags: "book",
   permalink: "catalogue/books/{{ page.fileSlug }}/index.html",
diff --git a/src/catalogue/catalogue.11tydata.js b/src/catalogue/catalogue.11tydata.js
index 74eeb15..1771429 100644
--- a/src/catalogue/catalogue.11tydata.js
+++ b/src/catalogue/catalogue.11tydata.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   tags: "catalogue",
   eleventyComputed: {
     description: (data) => `My thoughts on ${data.title}.`,
diff --git a/src/catalogue/comics/comics.11tydata.js b/src/catalogue/comics/comics.11tydata.js
index 61fe5b9..ddaaf35 100644
--- a/src/catalogue/comics/comics.11tydata.js
+++ b/src/catalogue/comics/comics.11tydata.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   layout: "layouts/catalogue-item",
   tags: "comic",
   permalink: "catalogue/comics/{{ page.fileSlug }}/index.html",
diff --git a/src/catalogue/games/games.11tydata.js b/src/catalogue/games/games.11tydata.js
index 6959208..3801d33 100644
--- a/src/catalogue/games/games.11tydata.js
+++ b/src/catalogue/games/games.11tydata.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   layout: "layouts/catalogue-item",
   tags: "game",
   permalink: "catalogue/games/{{ page.fileSlug }}/index.html",
diff --git a/src/catalogue/podcasts/podcasts.11tydata.js b/src/catalogue/podcasts/podcasts.11tydata.js
index a3032a7..2c7819b 100644
--- a/src/catalogue/podcasts/podcasts.11tydata.js
+++ b/src/catalogue/podcasts/podcasts.11tydata.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   layout: "layouts/catalogue-item",
   tags: "podcast",
   permalink: "catalogue/podcasts/{{ page.fileSlug }}/index.html",
diff --git a/src/css-utils/colors.js b/src/css-utils/colors.js
index dc9e9ed..b03f18f 100644
--- a/src/css-utils/colors.js
+++ b/src/css-utils/colors.js
@@ -1,5 +1,5 @@
-const colorSchemes = require("../../config/design-tokens/colors.json");
-const { helperClassesToCss } = require("./helper-classes");
+import colorSchemes from "../../config/design-tokens/colors.js";
+import { helperClassesToCss } from "./helper-classes.js";
 
 const lightScheme = colorSchemes.light;
 const darkScheme = colorSchemes.dark;
@@ -32,4 +32,4 @@ const helperClassesCss = colorSchemeToHelperClassesCss(
   helperClasses,
 );
 
-module.exports = `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;
+export default `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;
diff --git a/src/css-utils/font-family.js b/src/css-utils/font-family.js
index c705ad7..4192a92 100644
--- a/src/css-utils/font-family.js
+++ b/src/css-utils/font-family.js
@@ -1,5 +1,5 @@
-const { getFontUrl } = require("../utils/fonts");
-const fonts = require("../../config/design-tokens/fonts.json");
+import { getFontUrl } from "../utils/fonts.js";
+import fonts from "../../config/design-tokens/fonts.js";
 
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [, fontProperties]) => {
@@ -48,4 +48,4 @@ const fontFamilyToCss = (
     src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
 }\n`;
 
-module.exports = fontsToCss(fonts);
+export default fontsToCss(fonts);
diff --git a/src/css-utils/font-variables.js b/src/css-utils/font-variables.js
index 21942a5..9779bbb 100644
--- a/src/css-utils/font-variables.js
+++ b/src/css-utils/font-variables.js
@@ -1,4 +1,4 @@
-const fonts = require("../../config/design-tokens/fonts.json");
+import fonts from "../../config/design-tokens/fonts.js";
 
 const fallbacks = [
   "-apple-system",
@@ -42,4 +42,4 @@ const fontFamilyToCss = (type, value) =>
 
 const css = `:root{${fontsToCss(fonts)}}`;
 
-module.exports = css;
+export default css;
diff --git a/src/css-utils/helper-classes.js b/src/css-utils/helper-classes.js
index d454035..08871ad 100644
--- a/src/css-utils/helper-classes.js
+++ b/src/css-utils/helper-classes.js
@@ -2,7 +2,7 @@
  * Given an array of CSS properties, output css properties
  * with each property equal to `value`
  */
-const cssPropertiesToCss = (cssProperties, value) => {
+export const cssPropertiesToCss = (cssProperties, value) => {
   return cssProperties.reduce((css, cssProp) => {
     return css + `${cssProp}:${value};`;
   }, ``);
@@ -13,7 +13,7 @@ const cssPropertiesToCss = (cssProperties, value) => {
  * will generate a css class named helperClass that has
  * all cssProperties mapped to value.
  */
-const helperClassToCss = (helperClass, cssProperties, value) => {
+export const helperClassToCss = (helperClass, cssProperties, value) => {
   const cssProps = cssPropertiesToCss(cssProperties, value);
   return `.${helperClass}{${cssProps}}`;
 };
@@ -34,12 +34,10 @@ const helperClassToCss = (helperClass, cssProperties, value) => {
  *    color: #000;
  * }
  */
-const helperClassesToCss = (helperClasses, variant, value) => {
+export const helperClassesToCss = (helperClasses, variant, value) => {
   return helperClasses.reduce((css, [helperClass, cssProperties]) => {
     return (
       css + helperClassToCss(`${helperClass}-${variant}`, cssProperties, value)
     );
   }, ``);
 };
-
-module.exports = { cssPropertiesToCss, helperClassToCss, helperClassesToCss };
diff --git a/src/css-utils/spacing.js b/src/css-utils/spacing.js
index 35f75bd..8f07f9d 100644
--- a/src/css-utils/spacing.js
+++ b/src/css-utils/spacing.js
@@ -1,5 +1,5 @@
-const spacing = require("../../config/design-tokens/spacing.json");
-const { helperClassesToCss } = require("./helper-classes");
+import spacing from "../../config/design-tokens/spacing.js";
+import { helperClassesToCss } from "./helper-classes.js";
 
 const spacingToCss = (variant, value) =>
   `--spacing-${variant.replace(".", "\\.")}: ${value}px;`;
@@ -48,4 +48,4 @@ const helperCss = spacingToHelperClassesCss(spacing, helperClasses);
 
 const css = `:root{${spacingVariablesCss}}${helperCss}`;
 
-module.exports = css;
+export default css;
diff --git a/src/css/styles.11ty.js b/src/css/styles.11ty.js
index 000a87f..dac4dc1 100644
--- a/src/css/styles.11ty.js
+++ b/src/css/styles.11ty.js
@@ -5,22 +5,24 @@
  * https://github.com/philhawksworth/eleventyone/blob/master/src/site/css/styles.11ty.js
  */
 
-const fs = require("fs");
-const postcss = require("postcss");
-const postcssImport = require("postcss-import");
-const postcssImportExtGlob = require("postcss-import-ext-glob");
-const autoprefixer = require("autoprefixer");
-const cssnano = require("cssnano");
-const path = require("path").posix;
+import fs from "fs";
+import postcss from "postcss";
+import postcssImport from "postcss-import";
+import postcssImportExtGlob from "postcss-import-ext-glob";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import { posix as path } from "path";
+import { fileURLToPath } from "url";
 
-const colors = require("../css-utils/colors");
-const fontFamily = require("../css-utils/font-family");
-const fontVariables = require("../css-utils/font-variables");
-const spacing = require("../css-utils/spacing");
+import colors from "../css-utils/colors.js";
+import fontFamily from "../css-utils/font-family.js";
+import fontVariables from "../css-utils/font-variables.js";
+import spacing from "../css-utils/spacing.js";
 
-module.exports = class {
+export default class {
   async data() {
-    const rawFilepath = path.join(__dirname, "./global.css");
+    const dirname = path.dirname(fileURLToPath(import.meta.url));
+    const rawFilepath = path.join(dirname, "./global.css");
     const rawCss = fs.readFileSync(rawFilepath);
 
     const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
@@ -43,4 +45,4 @@ module.exports = class {
       .process(rawCss, { from: rawFilepath })
       .then((result) => result.css);
   }
-};
+}
diff --git a/src/utils/fonts.js b/src/utils/fonts.js
index c556851..aa74de0 100644
--- a/src/utils/fonts.js
+++ b/src/utils/fonts.js
@@ -1,7 +1,3 @@
-const path = require("path");
+import path from "path";
 
-const getFontUrl = (src) => path.join("/assets/fonts", src);
-
-module.exports = {
-  getFontUrl,
-};
+export const getFontUrl = (src) => path.join("/assets/fonts", src);