diff --git a/playground/index.html b/playground/index.html
index 74e7bd2076..6a61a3cc99 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -26,7 +26,6 @@
     <meta property="og:image" content="/Ruff.png" />
     <link rel="canonical" href="https://play.ruff.rs" />
     <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <script
       src="https://cdn.usefathom.com/script.js"
       data-site="XWUDIXNB"
diff --git a/playground/package.json b/playground/package.json
index 9361fb72a2..a27b063a44 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -8,6 +8,7 @@
     "build": "tsc && vite build",
     "check": "npm run lint && npm run tsc",
     "dev": "vite",
+    "dev:wasm": "wasm-pack build ../crates/ruff_wasm --dev --target web --out-dir ../../playground/src/pkg",
     "fmt": "prettier --cache -w .",
     "lint": "eslint --cache --ext .ts,.tsx src",
     "preview": "vite preview",
diff --git a/playground/public/fonts/Alliance-PlattMedium.otf b/playground/public/fonts/Alliance-PlattMedium.otf
new file mode 100644
index 0000000000..4ab85a6a06
Binary files /dev/null and b/playground/public/fonts/Alliance-PlattMedium.otf differ
diff --git a/playground/public/fonts/Alliance-PlattMedium.woff b/playground/public/fonts/Alliance-PlattMedium.woff
new file mode 100644
index 0000000000..2e61cda1b9
Binary files /dev/null and b/playground/public/fonts/Alliance-PlattMedium.woff differ
diff --git a/playground/public/fonts/Alliance-PlattMedium.woff2 b/playground/public/fonts/Alliance-PlattMedium.woff2
new file mode 100644
index 0000000000..ce7326b49e
Binary files /dev/null and b/playground/public/fonts/Alliance-PlattMedium.woff2 differ
diff --git a/playground/public/fonts/Alliance-PlattRegular.otf b/playground/public/fonts/Alliance-PlattRegular.otf
new file mode 100644
index 0000000000..e3fb5ccc67
Binary files /dev/null and b/playground/public/fonts/Alliance-PlattRegular.otf differ
diff --git a/playground/public/fonts/Alliance-PlattRegular.woff b/playground/public/fonts/Alliance-PlattRegular.woff
new file mode 100644
index 0000000000..875da29046
Binary files /dev/null and b/playground/public/fonts/Alliance-PlattRegular.woff differ
diff --git a/playground/public/fonts/Alliance-PlattRegular.woff2 b/playground/public/fonts/Alliance-PlattRegular.woff2
new file mode 100644
index 0000000000..1e6ce3f818
Binary files /dev/null and b/playground/public/fonts/Alliance-PlattRegular.woff2 differ
diff --git a/playground/public/fonts/Alliance-TextMedium.otf b/playground/public/fonts/Alliance-TextMedium.otf
new file mode 100644
index 0000000000..305858821e
Binary files /dev/null and b/playground/public/fonts/Alliance-TextMedium.otf differ
diff --git a/playground/public/fonts/Alliance-TextMedium.woff b/playground/public/fonts/Alliance-TextMedium.woff
new file mode 100644
index 0000000000..25a79ab90e
Binary files /dev/null and b/playground/public/fonts/Alliance-TextMedium.woff differ
diff --git a/playground/public/fonts/Alliance-TextMedium.woff2 b/playground/public/fonts/Alliance-TextMedium.woff2
new file mode 100644
index 0000000000..7d168fb54c
Binary files /dev/null and b/playground/public/fonts/Alliance-TextMedium.woff2 differ
diff --git a/playground/public/fonts/Alliance-TextRegular.otf b/playground/public/fonts/Alliance-TextRegular.otf
new file mode 100644
index 0000000000..0af4a82ce6
Binary files /dev/null and b/playground/public/fonts/Alliance-TextRegular.otf differ
diff --git a/playground/public/fonts/Alliance-TextRegular.woff b/playground/public/fonts/Alliance-TextRegular.woff
new file mode 100644
index 0000000000..3e837e3a49
Binary files /dev/null and b/playground/public/fonts/Alliance-TextRegular.woff differ
diff --git a/playground/public/fonts/Alliance-TextRegular.woff2 b/playground/public/fonts/Alliance-TextRegular.woff2
new file mode 100644
index 0000000000..a15707cdc4
Binary files /dev/null and b/playground/public/fonts/Alliance-TextRegular.woff2 differ
diff --git a/playground/src/Editor/AstralButton.tsx b/playground/src/Editor/AstralButton.tsx
new file mode 100644
index 0000000000..099b5313f8
--- /dev/null
+++ b/playground/src/Editor/AstralButton.tsx
@@ -0,0 +1,35 @@
+import type { ButtonHTMLAttributes } from "react";
+import classNames from "classnames";
+
+export default function AstralButton({
+  className,
+  children,
+  ...otherProps
+}: ButtonHTMLAttributes<any>) {
+  return (
+    <button
+      className={classNames(
+        "uppercase",
+        "ease-in-out",
+        "font-heading",
+        "transition-all duration-200",
+        "bg-radiate",
+        "text-black",
+        "hover:text-white",
+        "hover:bg-galaxy",
+        "outline-1",
+        "dark:outline",
+        "dark:hover:outline-white",
+        "rounded-md",
+        "tracking-[.08em]",
+        "text-sm",
+        "font-medium",
+        "enabled:hover:bg-galaxy",
+        className,
+      )}
+      {...otherProps}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/playground/src/Editor/Editor.tsx b/playground/src/Editor/Editor.tsx
index 01436db4d6..421b5f1f53 100644
--- a/playground/src/Editor/Editor.tsx
+++ b/playground/src/Editor/Editor.tsx
@@ -13,6 +13,7 @@ import { persist, restore, stringify } from "./settings";
 import SettingsEditor from "./SettingsEditor";
 import SourceEditor from "./SourceEditor";
 import MonacoThemes from "./MonacoThemes";
+import SideBar from "./SideBar";
 
 type Tab = "Source" | "Settings";
 
@@ -111,26 +112,21 @@ export default function Editor() {
   }, []);
 
   return (
-    <main
-      className={
-        "h-full w-full flex flex-auto bg-ayu-background dark:bg-ayu-background-dark"
-      }
-    >
+    <main className="flex flex-col h-full bg-ayu-background dark:bg-ayu-background-dark">
       <Header
         edit={source.revision}
-        tab={tab}
         theme={theme}
         version={ruffVersion}
-        onChangeTab={setTab}
         onChangeTheme={setTheme}
         onShare={handleShare}
       />
 
       <MonacoThemes />
 
-      <div className={"mt-12 relative flex-auto"}>
+      <div className="flex flex-grow">
         {initialized ? (
           <>
+            <SideBar onSelectTool={(tool) => setTab(tool)} selected={tab} />
             <SourceEditor
               visible={tab === "Source"}
               source={source.pythonSource}
diff --git a/playground/src/Editor/Header.tsx b/playground/src/Editor/Header.tsx
index e356dba34f..636e1ae9e5 100644
--- a/playground/src/Editor/Header.tsx
+++ b/playground/src/Editor/Header.tsx
@@ -9,18 +9,14 @@ export type Tab = "Source" | "Settings";
 
 export default function Header({
   edit,
-  tab,
   theme,
   version,
-  onChangeTab,
   onChangeTheme,
   onShare,
 }: {
   edit: number;
-  tab: Tab;
   theme: Theme;
   version: string | null;
-  onChangeTab: (tab: Tab) => void;
   onChangeTheme: (theme: Theme) => void;
   onShare?: () => void;
 }) {
@@ -29,14 +25,11 @@ export default function Header({
       className={classNames(
         "w-full",
         "flex",
-        "items-center",
         "justify-between",
-        "flex-none",
         "pl-5",
-        "sm:pl-6",
+        "sm:pl-1",
         "pr-4",
         "lg:pr-6",
-        "absolute",
         "z-10",
         "top-0",
         "left-0",
@@ -44,62 +37,44 @@ export default function Header({
         "antialiased",
         "border-b",
         "border-gray-200",
-        "dark:border-gray-800",
+        "dark:border-b-radiate",
+        "dark:bg-galaxy",
       )}
     >
-      <div className="flex space-x-5">
-        <button
-          type="button"
-          className={classNames(
-            "relative flex py-3 text-sm leading-6 font-semibold focus:outline-none",
-            tab === "Source"
-              ? "text-ayu-accent"
-              : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white",
-          )}
-          onClick={() => onChangeTab("Source")}
+      <div className="py-4 pl-2">
+        <svg
+          width="136"
+          height="32"
+          viewBox="0 0 272 64"
+          className="fill-galaxy dark:fill-radiate"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <span
-            className={classNames(
-              "absolute bottom-0 inset-x-0 bg-ayu-accent h-0.5 rounded-full transition-opacity duration-150",
-              tab === "Source" ? "opacity-100" : "opacity-0",
-            )}
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M61.5 0C62.8807 0 64 1.11929 64 2.5V32.06C64 33.4407 62.8807 34.56 61.5 34.56H51.2V39.68H64V64H34.56V44.8H29.44V64H0V0H61.5ZM39.68 29.44V24.32H24.32V29.44H39.68ZM69.12 0H98.56V41.6H103.68V0H133.12V61.5C133.12 62.8807 132.001 64 130.62 64H71.62C70.2393 64 69.12 62.8807 69.12 61.5V0ZM202.24 0H145.86C144.479 0 143.36 1.11929 143.36 2.5V29.44H138.24V53.76H143.36V64H172.8V53.76H199.74C201.121 53.76 202.24 52.6407 202.24 51.26V29.44H172.8V24.32H202.24V0ZM214.98 0H271.36V24.32H241.92V29.44H271.36V51.26C271.36 52.6407 270.241 53.76 268.86 53.76H241.92V64H212.48V53.76H207.36V29.44H212.48V2.5C212.48 1.11929 213.599 0 214.98 0Z"
           />
-          Source
-        </button>
-        <button
-          type="button"
-          className={classNames(
-            "relative flex py-3 text-sm leading-6 font-semibold focus:outline-none",
-            tab === "Settings"
-              ? "text-ayu-accent"
-              : "text-gray-700 hover:text-gray-900 focus:text-gray-900 dark:text-gray-300 dark:hover:text-white",
-          )}
-          onClick={() => onChangeTab("Settings")}
-        >
-          <span
-            className={classNames(
-              "absolute bottom-0 inset-x-0 bg-ayu-accent h-0.5 rounded-full transition-opacity duration-150",
-              tab === "Settings" ? "opacity-100" : "opacity-0",
-            )}
-          />
-          Settings
-        </button>
+        </svg>
       </div>
-      <div className={"flex items-center min-w-0"}>
+      <div className="flex items-center min-w-0">
         {version ? (
-          <div className={"hidden sm:flex items-center"}>
+          <div className="hidden sm:flex items-center">
             <VersionTag>v{version}</VersionTag>
           </div>
         ) : null}
-        <div className="hidden sm:block mx-6 lg:mx-4 w-px h-6 bg-gray-200 dark:bg-gray-700" />
+        <Divider />
         <RepoButton />
-        <div className="hidden sm:block mx-6 lg:mx-4 w-px h-6 bg-gray-200 dark:bg-gray-700" />
-        <div className="hidden sm:block">
-          <ShareButton key={edit} onShare={onShare} />
-        </div>
-        <div className="hidden sm:block mx-6 lg:mx-4 w-px h-6 bg-gray-200 dark:bg-gray-700" />
+        <Divider />
+        <ShareButton key={edit} onShare={onShare} />
+        <Divider />
         <ThemeButton theme={theme} onChange={onChangeTheme} />
       </div>
     </div>
   );
 }
+
+function Divider() {
+  return (
+    <div className="hidden sm:block mx-6 lg:mx-4 w-px h-8 bg-gray-200 dark:bg-gray-700" />
+  );
+}
diff --git a/playground/src/Editor/Icons.tsx b/playground/src/Editor/Icons.tsx
new file mode 100644
index 0000000000..a1625c4c04
--- /dev/null
+++ b/playground/src/Editor/Icons.tsx
@@ -0,0 +1,49 @@
+// Icons from the [VS code icon set](https://github.com/microsoft/vscode-icons/).
+//
+// Icon-LICENSE:
+// MIT License
+//
+// Copyright (c) Microsoft Corporation.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE
+
+export function FileIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24">
+      <path d="M17.5 0H8.5L7 1.5V6H2.5L1 7.5V22.5699L2.5 24H14.5699L16 22.5699V18H20.7L22 16.5699V4.5L17.5 0ZM17.5 2.12L19.88 4.5H17.5V2.12ZM14.5 22.5H2.5V7.5H7V16.5699L8.5 18H14.5V22.5ZM20.5 16.5H8.5V1.5H16V6H20.5V16.5Z" />
+    </svg>
+  );
+}
+
+export function SettingsIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.85 8.75L24 9.57996V14.42L19.85 15.25L22.2 18.77L18.77 22.2L15.25 19.85L14.42 24H9.57996L8.75 19.85L5.22998 22.2L1.80005 18.77L4.15002 15.25L0 14.42V9.57996L4.15002 8.75L1.80005 5.22998L5.22998 1.80005L8.75 4.15002L9.57996 0H14.42L15.25 4.15002L18.77 1.80005L22.2 5.22998L19.85 8.75ZM18.28 13.8199L22.28 13.01V11.01L18.28 10.2L17.74 8.90002L20.03 5.46997L18.6 4.04004L15.17 6.32996L13.87 5.79004L13.0601 1.79004H11.0601L10.25 5.79004L8.94995 6.32996L5.52002 4.04004L4.08997 5.46997L6.38 8.90002L5.83997 10.2L1.83997 11.01V13.01L5.83997 13.8199L6.38 15.12L4.08997 18.55L5.52002 19.98L8.94995 17.6899L10.25 18.23L11.0601 22.23H13.0601L13.87 18.23L15.17 17.6899L18.6 19.98L20.03 18.55L17.74 15.12L18.28 13.8199ZM10.0943 9.14807C10.6584 8.77118 11.3216 8.56995 12 8.56995C12.9089 8.57258 13.7798 8.93484 14.4225 9.57751C15.0652 10.2202 15.4274 11.0911 15.43 12C15.43 12.6784 15.2288 13.3416 14.8519 13.9056C14.475 14.4697 13.9394 14.9093 13.3126 15.1689C12.6859 15.4286 11.9962 15.4965 11.3308 15.3641C10.6654 15.2318 10.0543 14.9051 9.57457 14.4254C9.09488 13.9457 8.7682 13.3345 8.63585 12.6692C8.50351 12.0038 8.57143 11.3141 8.83104 10.6874C9.09065 10.0606 9.53029 9.52496 10.0943 9.14807ZM11.0499 13.4218C11.3311 13.6097 11.6618 13.71 12 13.71C12.2249 13.7113 12.4479 13.668 12.656 13.5825C12.8641 13.4971 13.0531 13.3712 13.2121 13.2122C13.3712 13.0531 13.497 12.8641 13.5825 12.656C13.668 12.4479 13.7113 12.2249 13.7099 12C13.7099 11.6618 13.6096 11.3311 13.4217 11.0499C13.2338 10.7687 12.9669 10.5496 12.6544 10.4202C12.3419 10.2907 11.9981 10.2569 11.6664 10.3229C11.3347 10.3889 11.03 10.5517 10.7909 10.7909C10.5517 11.03 10.3888 11.3347 10.3229 11.6664C10.2569 11.9981 10.2907 12.342 10.4202 12.6544C10.5496 12.9669 10.7687 13.2339 11.0499 13.4218Z"
+      />
+    </svg>
+  );
+}
diff --git a/playground/src/Editor/RepoButton.tsx b/playground/src/Editor/RepoButton.tsx
index a21955a1d6..1834d4dc4c 100644
--- a/playground/src/Editor/RepoButton.tsx
+++ b/playground/src/Editor/RepoButton.tsx
@@ -1,25 +1,24 @@
 export default function RepoButton() {
   return (
     <a
-      className={"hover:text-ayu-accent/70 text-ayu-accent"}
-      href={"https://github.com/astral-sh/ruff"}
-      target={"_blank"}
-      rel={"noreferrer"}
+      className="rounded-full"
+      href="https://github.com/astral-sh/ruff"
+      target="_blank"
+      rel="noreferrer"
     >
       <svg
-        xmlns={"http://www.w3.org/2000/svg"}
-        width={"24"}
-        height={"24"}
-        viewBox={"0 0 16 16"}
-        fill={"none"}
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 16 16"
+        className="fill-black dark:fill-white"
       >
         <path
-          fillRule={"evenodd"}
-          clipRule={"evenodd"}
+          fillRule="evenodd"
+          clipRule="evenodd"
           d={
             "M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
           }
-          fill={"currentColor"}
         />
       </svg>
     </a>
diff --git a/playground/src/Editor/ShareButton.tsx b/playground/src/Editor/ShareButton.tsx
index 0cb56cac8a..f7ed4d85ec 100644
--- a/playground/src/Editor/ShareButton.tsx
+++ b/playground/src/Editor/ShareButton.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import AstralButton from "./AstralButton";
 
 export default function ShareButton({ onShare }: { onShare?: () => void }) {
   const [copied, setCopied] = useState(false);
@@ -11,9 +12,9 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
   }, [copied]);
 
   return copied ? (
-    <button
+    <AstralButton
       type="button"
-      className="relative flex-none rounded-md text-sm font-semibold leading-6 py-1.5 px-3 cursor-auto text-ayu-accent shadow-copied dark:bg-ayu-accent/10"
+      className="relative flex-none leading-6 py-1.5 px-3 cursor-auto shadow-copied"
     >
       <span
         className="absolute inset-0 flex items-center justify-center invisible"
@@ -24,11 +25,11 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
       <span className="" aria-hidden="false">
         Copied!
       </span>
-    </button>
+    </AstralButton>
   ) : (
-    <button
+    <AstralButton
       type="button"
-      className="relative flex-none rounded-md text-sm font-semibold leading-6 py-1.5 px-3 enabled:hover:bg-ayu-accent/70 bg-ayu-accent text-white shadow-sm dark:shadow-highlight/20 disabled:opacity-50"
+      className="relative flex-none leading-6 py-1.5 px-3 shadow-sm disabled:opacity-50"
       disabled={!onShare || copied}
       onClick={
         onShare
@@ -48,6 +49,6 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
       <span className="invisible" aria-hidden="true">
         Copied!
       </span>
-    </button>
+    </AstralButton>
   );
 }
diff --git a/playground/src/Editor/SideBar.tsx b/playground/src/Editor/SideBar.tsx
new file mode 100644
index 0000000000..2d40a485d9
--- /dev/null
+++ b/playground/src/Editor/SideBar.tsx
@@ -0,0 +1,61 @@
+import { FileIcon, SettingsIcon } from "./Icons";
+import { type ReactNode } from "react";
+
+type Tool = "Settings" | "Source";
+
+type SideBarProps = {
+  selected: Tool;
+  onSelectTool(tool: Tool): void;
+};
+
+export default function SideBar({ selected, onSelectTool }: SideBarProps) {
+  return (
+    <ul className="w-12 flex-initial border-r bg-galaxy flex flex-col items-stretch">
+      <SideBarEntry
+        title="Source"
+        onClick={() => onSelectTool("Source")}
+        selected={selected == "Source"}
+      >
+        <FileIcon />
+      </SideBarEntry>
+
+      <SideBarEntry
+        title="Settings"
+        onClick={() => onSelectTool("Settings")}
+        selected={selected == "Settings"}
+      >
+        <SettingsIcon />
+      </SideBarEntry>
+    </ul>
+  );
+}
+
+interface SideBarEntryProps {
+  title: string;
+  selected: boolean;
+  onClick?(): void;
+  children: ReactNode;
+}
+
+function SideBarEntry({
+  title,
+  onClick,
+  children,
+  selected,
+}: SideBarEntryProps) {
+  return (
+    <li
+      title={title}
+      onClick={onClick}
+      role="button"
+      className={`py-4 px-2 relative flex items-center flex-col ${
+        selected ? "fill-white" : "fill-slate-500"
+      }`}
+    >
+      {children}
+      {selected && (
+        <span className="absolute start-0 inset-y-0 bg-white w-0.5 rounded-full transition-opacity duration-150 opacity-100"></span>
+      )}
+    </li>
+  );
+}
diff --git a/playground/src/Editor/ThemeButton.tsx b/playground/src/Editor/ThemeButton.tsx
index 3c53678ec6..72b26edb02 100644
--- a/playground/src/Editor/ThemeButton.tsx
+++ b/playground/src/Editor/ThemeButton.tsx
@@ -2,6 +2,7 @@
  * Button to toggle between light and dark mode themes.
  */
 import { Theme } from "./theme";
+import AstralButton from "./AstralButton";
 
 export default function ThemeButton({
   theme,
@@ -11,9 +12,9 @@ export default function ThemeButton({
   onChange: (theme: Theme) => void;
 }) {
   return (
-    <button
+    <AstralButton
       type="button"
-      className="ml-4 sm:ml-0 ring-1 ring-gray-900/5 shadow-sm hover:bg-gray-50 dark:ring-0 dark:bg-gray-800 dark:hover:bg-gray-700 dark:shadow-highlight/4 group focus:outline-none focus-visible:ring-2 rounded-md focus-visible:ring-ayu-accent dark:focus-visible:ring-2 dark:focus-visible:ring-gray-400"
+      className="ml-4 sm:ml-0 shadow-sm"
       onClick={() => onChange(theme === "light" ? "dark" : "light")}
     >
       <span className="sr-only">
@@ -27,7 +28,7 @@ export default function ThemeButton({
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className="stroke-ayu-accent fill-ayu-accent/10 group-hover:stroke-ayu-accent/80 dark:stroke-gray-400 dark:fill-gray-400/20 dark:group-hover:stroke-gray-300"
+        className="stroke-black hover:stroke-radiate hover:fill-black fill-radiate"
       >
         <g className="dark:opacity-0">
           <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
@@ -44,6 +45,6 @@ export default function ThemeButton({
           />
         </g>
       </svg>
-    </button>
+    </AstralButton>
   );
 }
diff --git a/playground/src/index.css b/playground/src/index.css
index 3e52427419..5bf338e90a 100644
--- a/playground/src/index.css
+++ b/playground/src/index.css
@@ -12,13 +12,56 @@ html,
   margin: 0;
   height: 100%;
   width: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .shadow-copied {
-  --tw-shadow: 0 0 0 1px #f07171, inset 0 0 0 1px #f07171;
+  --tw-shadow: 0 0 0 1px theme("colors.radiate"),
+    inset 0 0 0 1px theme("colors.radiate");
   --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color),
     inset 0 0 0 1px var(--tw-shadow-color);
 
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+
+@font-face {
+  font-family: "Alliance Text";
+  src:
+    url("../public/fonts/Alliance-TextRegular.woff2") format("woff2"),
+    url("../public/fonts/Alliance-TextRegular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Alliance Text";
+  src:
+    url("../public/fonts/Alliance-TextMedium.woff2") format("woff2"),
+    url("../public/fonts/Alliance-TextMedium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Alliance Platt";
+  src:
+    url("../public/fonts/Alliance-PlattMedium.woff2") format("woff2"),
+    url("../public/fonts/Alliance-PlattMedium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: block;
+}
+
+@font-face {
+  font-family: "Alliance Platt";
+  src:
+    url("../public/fonts/Alliance-PlattRegular.woff2") format("woff2"),
+    url("../public/fonts/Alliance-PlattRegular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
diff --git a/playground/tailwind.config.cjs b/playground/tailwind.config.cjs
index b5e39cbb41..5ed0e9dc11 100644
--- a/playground/tailwind.config.cjs
+++ b/playground/tailwind.config.cjs
@@ -12,9 +12,65 @@ module.exports = {
           DEFAULT: "#f8f9fa",
           dark: "#0b0e14",
         },
+        black: "#261230",
+        white: "#FFFFFF",
+        radiate: "#D7FF64",
+        flare: "#6340AC",
+        rock: "#78876E",
+        galaxy: "#261230",
+        space: "#30173D",
+        comet: "#6F5D6F",
+        cosmic: "#DE5FE9",
+        sun: "#FFAC2F",
+        electron: "#46EBE1",
+        aurora: "#46EB74",
+        constellation: "#5F6DE9",
+        neutron: "#CFF3CF",
+        proton: "#F6AFBC",
+        nebula: "#CDCBFB",
+        supernova: "#F1AFF6",
+        starlight: "#F4F4F1",
+        lunar: "#FBF2FC",
+        asteroid: "#E3CEE3",
+        crater: "#F0DFDF",
       },
       fontFamily: {
-        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+        heading: [
+          "Alliance Platt",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "monospace",
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+        ],
+        body: [
+          "Alliance Text",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica",
+          "Arial",
+          "sans-serif",
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+        ],
+        mono: ["Roboto Mono"],
+      },
+      fontSize: {
+        xs: "0.75rem" /* 12px */,
+        sm: "0.875rem" /* 14px */,
+        base: "1rem" /* 16px */,
+        lg: "1.125rem" /* 18px */,
+        xl: "1.25rem" /* 20px */,
+        "2xl": "1.5rem" /* 25px */,
+        "3xl": "1.875rem" /* 30px */,
+        "4xl": "2.25rem" /* 36px */,
+        "5xl": "3rem" /* 48px */,
       },
     },
   },