diff --git a/frontend/public/fonts/DotGothic16.woff2 b/frontend/public/fonts/DotGothic16.woff2
new file mode 100644
index 0000000..3cf2254
Binary files /dev/null and b/frontend/public/fonts/DotGothic16.woff2 differ
diff --git a/frontend/public/fonts/ReenieBeanie.woff2 b/frontend/public/fonts/ReenieBeanie.woff2
new file mode 100644
index 0000000..c119db5
Binary files /dev/null and b/frontend/public/fonts/ReenieBeanie.woff2 differ
diff --git a/frontend/public/fonts/VT323.woff2 b/frontend/public/fonts/VT323.woff2
new file mode 100644
index 0000000..7aba70b
Binary files /dev/null and b/frontend/public/fonts/VT323.woff2 differ
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
new file mode 100644
index 0000000..490af1b
--- /dev/null
+++ b/frontend/src/styles/global.css
@@ -0,0 +1,50 @@
+@font-face {
+  font-family: "DotGothic16";
+  src: url("/fonts/DotGothic16.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "VT323";
+  src: url("/fonts/VT323.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "ReenieBeanie";
+  src: url("/fonts/ReenieBeanie.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  background:
+    radial-gradient(ellipse at 20% 0%, #ff3ea522 0%, transparent 45%),
+    radial-gradient(ellipse at 80% 30%, #5ef7ff14 0%, transparent 45%),
+    radial-gradient(ellipse at 50% 100%, #a78bff22 0%, transparent 50%),
+    var(--plum);
+  color: var(--cream);
+  font-family: var(--f-mono);
+  min-height: 100vh;
+  font-variant-emoji: text;
+}
+body::before {
+  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
+  opacity: 0.07; mix-blend-mode: overlay;
+}
+body::after {
+  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
+  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 3px);
+  opacity: 0.5;
+}
+a { color: var(--cyan); text-decoration: none; }
+a:hover { color: var(--cream); text-decoration: underline; }
+::selection { background: var(--pink); color: var(--ink); }
+
+.page { max-width: 1200px; margin: 0 auto; padding: 24px 28px 0; position: relative; z-index: 1; }
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
new file mode 100644
index 0000000..8e98b80
--- /dev/null
+++ b/frontend/src/styles/tokens.css
@@ -0,0 +1,14 @@
+:root {
+  --f-pixel: "DotGothic16", "VT323", monospace;
+  --f-mono: "VT323", ui-monospace, monospace;
+  --f-hand: "ReenieBeanie", cursive;
+  --pink: #ff3ea5;
+  --cyan: #5ef7ff;
+  --lemon: #ffe24a;
+  --lav: #a78bff;
+  --green: #5eff9b;
+  --cream: #fff4e8;
+  --ink: #0a0410;
+  --plum: #1a0820;
+  --plum-2: #2a1030;
+}