From e9af0bc7b60b24462853d23dadb60ab9704c7457 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 21 Oct 2025 23:43:12 +0200
Subject: [PATCH 1/3] Bring 404 page closer to the designs

---
 src/app/not-found.tsx | 43 +++++++++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index d40af4652a..b73d9d7331 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -3,6 +3,11 @@
 import { usePathname } from "next/navigation"
 import { useMounted } from "nextra/hooks"
 
+import { Button } from "./conf/_design-system/button"
+
+import "@/globals.css"
+import "@/app/colors.css"
+
 export default function Page() {
   const pathname = usePathname()
   const mounted = useMounted()
@@ -22,16 +27,34 @@ export default function Page() {
   }/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`
 
   return (
-    <div className="flex h-dvh flex-col items-center justify-center">
-      <h1 className="text-4xl text-white">404: Page Not Found</h1>
-      <a
-        href={url}
-        target="_blank"
-        rel="noreferrer"
-        className="mt-6 text-primary underline decoration-from-font [text-underline-position:from-font]"
-      >
-        Submit an issue about broken link →
-      </a>
+    <div className="flex h-dvh flex-col items-center justify-center gap-8 font-sans lg:gap-10">
+      <FourOhFourIcon />
+      <h1 className="text-4xl text-neu-900">Page not found</h1>
+      <div className="flex gap-4">
+        <Button variant="primary" href={url}>
+          Submit an issue about broken link
+        </Button>
+        <Button variant="secondary" href="/">
+          Go back home
+        </Button>
+      </div>
     </div>
   )
 }
+
+function FourOhFourIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="204"
+      height="80"
+      viewBox="0 0 204 80"
+      fill="hsl(var(--color-pri-base))"
+    >
+      <title>404</title>
+      <path d="M45.2399 80V57.4806H0V33.8414H11.3411V22.5194H22.5576V11.3219H34.0234V0H57.9519V80H45.2399ZM12.5874 44.9145H45.2399V12.5661H35.2696V23.7636H23.8039V34.9611H12.5874V44.9145Z" />
+      <path d="M84.3652 80V68.8025H73.0241V11.3219H84.3652V0H119.51V11.3219H130.976V68.8025H119.51V80H84.3652ZM85.6115 67.5583H118.264V12.5661H85.6115V67.5583Z" />
+      <path d="M191.288 80V57.4806H146.048V33.8414H157.389V22.5194H168.606V11.3219H180.071V0H204V80H191.288ZM158.636 44.9145H191.288V12.5661H181.318V23.7636H169.852V34.9611H158.636V44.9145Z" />
+    </svg>
+  )
+}

From 295d44c451b1f9c9745d002c3a2649e31e3a3cf7 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 21 Oct 2025 23:47:19 +0200
Subject: [PATCH 2/3] Support dark mode

---
 src/app/colors.css    |  6 ++++++
 src/app/not-found.tsx | 10 ++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/colors.css b/src/app/colors.css
index 95ec008b24..5b09e3b8b1 100644
--- a/src/app/colors.css
+++ b/src/app/colors.css
@@ -38,3 +38,9 @@
   --color-neu-50: 77 14% 20%;
   --color-neu-0: 75 15% 5%;
 }
+
+@media (prefers-color-scheme: dark) {
+  .dark-if-preferred {
+    @apply dark;
+  }
+}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index b73d9d7331..366d9e2449 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -7,6 +7,7 @@ import { Button } from "./conf/_design-system/button"
 
 import "@/globals.css"
 import "@/app/colors.css"
+import { useEffect } from "react"
 
 export default function Page() {
   const pathname = usePathname()
@@ -27,8 +28,8 @@ export default function Page() {
   }/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`
 
   return (
-    <div className="flex h-dvh flex-col items-center justify-center gap-8 font-sans lg:gap-10">
-      <FourOhFourIcon />
+    <div className="dark-if-preferred flex h-dvh flex-col items-center justify-center gap-8 bg-neu-0 font-sans lg:gap-10">
+      <FourOhFourIcon className="text-pri-base" />
       <h1 className="text-4xl text-neu-900">Page not found</h1>
       <div className="flex gap-4">
         <Button variant="primary" href={url}>
@@ -42,14 +43,15 @@ export default function Page() {
   )
 }
 
-function FourOhFourIcon() {
+function FourOhFourIcon({ className }: { className?: string }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="204"
       height="80"
       viewBox="0 0 204 80"
-      fill="hsl(var(--color-pri-base))"
+      fill="currentColor"
+      className={className}
     >
       <title>404</title>
       <path d="M45.2399 80V57.4806H0V33.8414H11.3411V22.5194H22.5576V11.3219H34.0234V0H57.9519V80H45.2399ZM12.5874 44.9145H45.2399V12.5661H35.2696V23.7636H23.8039V34.9611H12.5874V44.9145Z" />

From 323341c33b9a0455db334d09cd36275f0329b558 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Tue, 21 Oct 2025 23:53:16 +0200
Subject: [PATCH 3/3] Use next-themes

---
 src/app/colors.css    |  6 ------
 src/app/not-found.tsx | 29 +++++++++++++++++------------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/app/colors.css b/src/app/colors.css
index 5b09e3b8b1..95ec008b24 100644
--- a/src/app/colors.css
+++ b/src/app/colors.css
@@ -38,9 +38,3 @@
   --color-neu-50: 77 14% 20%;
   --color-neu-0: 75 15% 5%;
 }
-
-@media (prefers-color-scheme: dark) {
-  .dark-if-preferred {
-    @apply dark;
-  }
-}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 366d9e2449..cc595f65ef 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -2,12 +2,14 @@
 
 import { usePathname } from "next/navigation"
 import { useMounted } from "nextra/hooks"
+// @ts-expect-error
+import { ThemeProvider } from "next-themes"
 
+import { NewFontsStyleTag } from "./fonts"
 import { Button } from "./conf/_design-system/button"
 
 import "@/globals.css"
 import "@/app/colors.css"
-import { useEffect } from "react"
 
 export default function Page() {
   const pathname = usePathname()
@@ -28,18 +30,21 @@ export default function Page() {
   }/issues/new?title=${encodeURIComponent(title)}&labels=${labels}`
 
   return (
-    <div className="dark-if-preferred flex h-dvh flex-col items-center justify-center gap-8 bg-neu-0 font-sans lg:gap-10">
-      <FourOhFourIcon className="text-pri-base" />
-      <h1 className="text-4xl text-neu-900">Page not found</h1>
-      <div className="flex gap-4">
-        <Button variant="primary" href={url}>
-          Submit an issue about broken link
-        </Button>
-        <Button variant="secondary" href="/">
-          Go back home
-        </Button>
+    <ThemeProvider attribute="class">
+      <div className="flex h-dvh flex-col items-center justify-center gap-8 bg-neu-0 font-sans lg:gap-10">
+        <NewFontsStyleTag />
+        <FourOhFourIcon className="text-pri-base" />
+        <h1 className="text-4xl text-neu-900">Page not found</h1>
+        <div className="flex gap-4">
+          <Button variant="primary" href={url}>
+            Submit an issue about broken link
+          </Button>
+          <Button variant="secondary" href="/">
+            Go back home
+          </Button>
+        </div>
       </div>
-    </div>
+    </ThemeProvider>
   )
 }