diff --git a/apps/www/components/lo-fi/accordion.tsx b/apps/www/components/lo-fi/accordion.tsx
deleted file mode 100644
index cb3c16b3..00000000
--- a/apps/www/components/lo-fi/accordion.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { Atom } from "@/components/lo-fi/atom"
-
-export function AccordionLoFi() {
-  return (
-    <div className="flex flex-col">
-      <div className="flex flex-col gap-1 border-b py-2">
-        <div className="flex items-center justify-between">
-          <Atom shade="300" className="h-2 w-1/3" />
-          <ChevronDownIcon className="size-3" />
-        </div>
-      </div>
-      <div className="flex flex-col gap-1 border-b py-2">
-        <div className="flex items-center justify-between">
-          <Atom shade="300" className="h-2 w-1/2" />
-          <ChevronUpIcon className="size-3" />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <Atom shade="200" className="h-2 w-2/3" />
-          <Atom shade="200" className="h-2 w-1/3" />
-        </div>
-      </div>
-      <div className="flex flex-col gap-1 py-2">
-        <div className="flex items-center justify-between">
-          <Atom shade="300" className="h-2 w-2/3" />
-          <ChevronDownIcon className="size-3" />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/www/components/lo-fi/alert.tsx b/apps/www/components/lo-fi/alert.tsx
deleted file mode 100644
index 13e44a49..00000000
--- a/apps/www/components/lo-fi/alert.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { CircleAlertIcon } from "lucide-react"
-
-import { Atom } from "@/components/lo-fi/atom"
-
-export function AlertLoFi() {
-  return (
-    <Atom
-      shade="100"
-      className="rounder-lg flex items-start justify-between gap-2 border p-2"
-    >
-      <CircleAlertIcon className="size-3" />
-      <div className="flex flex-1 flex-col gap-1">
-        <Atom shade="300" className="h-2 w-2/3" />
-        <Atom shade="200" className="h-2 w-full" />
-      </div>
-    </Atom>
-  )
-}
diff --git a/apps/www/components/lo-fi/atom.tsx b/apps/www/components/lo-fi/atom.tsx
deleted file mode 100644
index 8952be09..00000000
--- a/apps/www/components/lo-fi/atom.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const atomVariants = cva(
-  "inline-flex rounded-lg border-neutral-300 dark:border-neutral-600",
-  {
-    variants: {
-      shade: {
-        "50": "bg-neutral-50 dark:bg-neutral-900",
-        "100": "bg-neutral-100 dark:bg-neutral-800",
-        "200": "bg-neutral-200 dark:bg-neutral-700",
-        "300": "bg-neutral-300 dark:bg-neutral-600",
-        "400": "bg-neutral-400 dark:bg-neutral-500",
-        "500": "bg-neutral-500 dark:bg-neutral-400",
-        "600": "bg-neutral-600 dark:bg-neutral-300",
-        "700": "bg-neutral-700 dark:bg-neutral-200",
-        "800": "bg-neutral-800 dark:bg-neutral-100",
-        "900": "bg-neutral-900 dark:bg-neutral-50",
-      },
-    },
-    defaultVariants: {
-      shade: "50",
-    },
-  }
-)
-
-function Atom({
-  className,
-  shade,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof atomVariants>) {
-  return (
-    <div
-      data-slot="button"
-      className={cn(atomVariants({ shade, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Atom }
diff --git a/apps/www/components/lo-fi/component.tsx b/apps/www/components/lo-fi/component.tsx
deleted file mode 100644
index 54b708ee..00000000
--- a/apps/www/components/lo-fi/component.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from "next/link"
-
-import { Atom } from "@/components/lo-fi/atom"
-
-function Component({ href, ...props }: React.ComponentProps<typeof Link>) {
-  return <Link href={href} className="group flex flex-col gap-2" {...props} />
-}
-
-function ComponentContent({ ...props }: React.ComponentProps<typeof Atom>) {
-  return (
-    <Atom
-      shade="50"
-      className="bg-muted/30 ring-muted flex aspect-video items-center justify-center rounded-lg p-4 ring *:w-full *:max-w-[70%]"
-      {...props}
-    />
-  )
-}
-
-function ComponentName({ ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      className="text-foreground text-center font-medium underline-offset-2 group-hover:underline"
-      {...props}
-    />
-  )
-}
-
-export { Component, ComponentContent, ComponentName }
diff --git a/apps/www/components/lo-fi/index.tsx b/apps/www/components/lo-fi/index.tsx
deleted file mode 100644
index 69429ef8..00000000
--- a/apps/www/components/lo-fi/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { AccordionLoFi } from "@/components/lo-fi/accordion"
-import { AlertLoFi } from "@/components/lo-fi/alert"
-import {
-  Component,
-  ComponentContent,
-  ComponentName,
-} from "@/components/lo-fi/component"
-
-export function LoFi() {
-  return (
-    <div className="mx-auto grid max-w-[350px] gap-6 sm:max-w-none sm:grid-cols-2">
-      <Component href="/docs/components/accordion">
-        <ComponentContent>
-          <AccordionLoFi />
-        </ComponentContent>
-        <ComponentName>Accordion</ComponentName>
-      </Component>
-      <Component href="/docs/components/alert">
-        <ComponentContent>
-          <AlertLoFi />
-        </ComponentContent>
-        <ComponentName>Alert</ComponentName>
-      </Component>
-    </div>
-  )
-}