diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index bb3afff3c3..fd538bbc77 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import { dystopian, inter } from "fonts";
-import { cn } from "lib/cn";
+import { cn } from "lib/css-utils";
 
 export const metadata: Metadata = {
   title: "Guildhall",
diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
new file mode 100644
index 0000000000..5dc21f2d6a
--- /dev/null
+++ b/src/app/playground/page.tsx
@@ -0,0 +1,14 @@
+const Playground = () => {
+  return (
+    <main className="text-8xl">
+      <h1 className="font-display">Hello, Guild!</h1>
+      <h2 className="font-bold font-display">Hello, Guild!</h2>
+      <p>Test, one, two, three...</p>
+      <p className="font-sans">
+        Test, <strong>one</strong>, <em>two</em>, three...
+      </p>
+    </main>
+  );
+};
+
+export default Playground;
diff --git a/src/lib/cn.ts b/src/lib/css-utils.ts
similarity index 100%
rename from src/lib/cn.ts
rename to src/lib/css-utils.ts