diff --git a/Web_Backgrounds/spidey-theme.css b/Web_Backgrounds/spidey-theme.css
new file mode 100644
index 0000000..4e4b6f2
--- /dev/null
+++ b/Web_Backgrounds/spidey-theme.css
@@ -0,0 +1,36 @@
+/* ============================================================================
+   Spidey Theme — Baseline Design Tokens
+   This is the current website appearance captured as a reusable CSS theme.
+   ============================================================================ */
+
+:root,
+.theme-spidey {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 0 100% 53%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 0 100% 53%;
+  --radius: 0.5rem;
+  --sidebar: 222.2 84% 4.9%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 0 100% 53%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 217.2 32.6% 17.5%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217.2 32.6% 17.5%;
+  --sidebar-ring: 0 100% 53%;
+}
diff --git a/Web_Backgrounds/spidey-tokens.json b/Web_Backgrounds/spidey-tokens.json
new file mode 100644
index 0000000..760ce4a
--- /dev/null
+++ b/Web_Backgrounds/spidey-tokens.json
@@ -0,0 +1,52 @@
+{
+  "theme": {
+    "id": "spidey",
+    "name": "Spidey",
+    "description": "Current website appearance — dark theme with red accents",
+    "type": "dark",
+    "default": true
+  },
+  "colors": {
+    "background": "hsl(222.2, 84%, 4.9%)",
+    "foreground": "hsl(210, 40%, 98%)",
+    "card": "hsl(222.2, 84%, 4.9%)",
+    "cardForeground": "hsl(210, 40%, 98%)",
+    "popover": "hsl(222.2, 84%, 4.9%)",
+    "popoverForeground": "hsl(210, 40%, 98%)",
+    "primary": "hsl(0, 100%, 53%)",
+    "primaryForeground": "hsl(222.2, 47.4%, 11.2%)",
+    "secondary": "hsl(217.2, 32.6%, 17.5%)",
+    "secondaryForeground": "hsl(210, 40%, 98%)",
+    "muted": "hsl(217.2, 32.6%, 17.5%)",
+    "mutedForeground": "hsl(215, 20.2%, 65.1%)",
+    "accent": "hsl(217.2, 32.6%, 17.5%)",
+    "accentForeground": "hsl(210, 40%, 98%)",
+    "destructive": "hsl(0, 62.8%, 30.6%)",
+    "destructiveForeground": "hsl(210, 40%, 98%)",
+    "border": "hsl(217.2, 32.6%, 17.5%)",
+    "input": "hsl(217.2, 32.6%, 17.5%)",
+    "ring": "hsl(0, 100%, 53%)",
+    "sidebar": "hsl(222.2, 84%, 4.9%)",
+    "sidebarForeground": "hsl(210, 40%, 98%)",
+    "sidebarPrimary": "hsl(0, 100%, 53%)",
+    "sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
+    "sidebarAccent": "hsl(217.2, 32.6%, 17.5%)",
+    "sidebarAccentForeground": "hsl(210, 40%, 98%)",
+    "sidebarBorder": "hsl(217.2, 32.6%, 17.5%)",
+    "sidebarRing": "hsl(0, 100%, 53%)"
+  },
+  "borderRadius": "0.5rem",
+  "typography": {
+    "fontFamily": "Inter, sans-serif",
+    "headingFont": "Inter, sans-serif"
+  },
+  "keyColors": {
+    "primary": "#FF0000",
+    "background": "#0a0a0f",
+    "card": "#141414",
+    "sidebar": "#0a0a0f",
+    "border": "#1a1a24",
+    "text": "#e8e8ef",
+    "mutedText": "#888888"
+  }
+}