Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/spooky-developer/llms.txt

Use this file to discover all available pages before exploring further.

Every color in Spooky Developer flows from a tight palette of seven custom Tailwind tokens — all named after things that go bump in the night. From the deep, cave-dark haunt-bg that wraps every page to the bioluminescent haunt-moon glow that pulses on interactive elements, these tokens form a deliberate aesthetic system: midnight atmosphere cut through by just enough spectral light to navigate by. Understanding the tokens is the first step to bending the site’s look to your will.

​
Color Token Reference

The seven tokens cover every role in the interface — backgrounds, text, borders, accents, and decorative surfaces.
TokenHexSample Tailwind classesUsage
haunt-bg#0d2e35bg-haunt-bg, text-haunt-bgMain page background
haunt-dark#081c20bg-haunt-dark, text-haunt-dark, border-haunt-darkDeep shadows, tombstone interiors
haunt-moon#5eead4bg-haunt-moon, text-haunt-moon, border-haunt-moonActive nav, glow effects, primary accent
haunt-pumpkin#fb923cbg-haunt-pumpkin, text-haunt-pumpkinYear labels, orange accents
haunt-bone#fef3c7text-haunt-bone, bg-haunt-boneBody text color
haunt-tombstone#475569bg-haunt-tombstone, border-haunt-tombstoneTombstone surfaces
haunt-tombstoneDark#334155bg-haunt-tombstoneDark, border-haunt-tombstoneDarkTombstone borders, card edges

​
Swatch Preview

haunt-bg

#0d2e35

haunt-dark

#081c20

haunt-moon

#5eead4

haunt-pumpkin

#fb923c

​
How the Tokens Are Defined

The deployed site is a pre-built Vite output — there is no tailwind.config.js in the distributed files. The config shown below is what the original source project would have used to register these tokens. If you are building from source, edit tailwind.config.js as shown; if you are working with the compiled output, token values are baked directly into assets/main.css.
The tokens are registered in tailwind.config.js under theme.extend.colors. Each value is a plain hex string — Tailwind then generates all the standard utility variants (bg-*, text-*, border-*, ring-*, etc.) automatically.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx}'],
  theme: {
    extend: {
      colors: {
        'haunt-bg':           '#0d2e35',
        'haunt-dark':         '#081c20',
        'haunt-moon':         '#5eead4',
        'haunt-pumpkin':      '#fb923c',
        'haunt-bone':         '#fef3c7',
        'haunt-tombstone':    '#475569',
        'haunt-tombstoneDark':'#334155',
      },
    },
  },
  plugins: [],
}
To change a color site-wide, update the hex value in this config and rebuild. Every utility class that references the token updates automatically — no search-and-replace required.
Tailwind JIT generates utility classes on demand. If you add a brand-new token, make sure the relevant utility classes (e.g. bg-haunt-newtoken) actually appear in your source files, otherwise Tailwind won’t emit them in the final CSS.

​
Opacity Modifiers

All seven tokens support Tailwind’s slash opacity syntax, and the project uses this heavily throughout. Append /<number> to any color utility to set its opacity at the call site — no extra CSS variables or wrapper classes needed. 
{/* 20% teal tint — glassmorphism card background */}
<div className="bg-haunt-moon/20 backdrop-blur-md" />

{/* 30% teal border — subtle panel outline */}
<div className="border border-haunt-moon/30" />

{/* 80% bone text — softened body copy */}
<p className="text-haunt-bone/80" />

{/* 50% dark overlay — translucent scrim */}
<div className="bg-haunt-dark/50" />
Glassmorphism cards in the project — such as the candy bowl backdrop on the Skills page and the contact form panel — combine bg-haunt-moon/20 with backdrop-blur-md to create the frosted-glass effect. The backdrop-blur-* utilities require a browser that supports backdrop-filter, which all modern evergreen browsers do.
The following opacity steps appear in the compiled stylesheet and are safe to use without triggering a Tailwind rebuild:
StepEquivalent alphaCommon use
/1010%Faint hover backgrounds
/2020%Glassmorphism fills
/3030%Subtle borders, tinted backgrounds
/5050%Mid-weight overlays, disabled states
/8080%Nearly-opaque backgrounds, muted text

​
Changing a Token

To retheme the accent color from teal to, say, emerald green:
tailwind.config.js
// Before
'haunt-moon': '#5eead4',

// After — swap to emerald
'haunt-moon': '#34d399',
Rebuild the CSS (vite build or vite dev) and every text-haunt-moon, border-haunt-moon, bg-haunt-moon/20, and shadow reference updates in one shot.
This workflow applies when building from the original source project with a tailwind.config.js present. In the pre-built deployment, token values are compiled into assets/main.css and changing them requires a full source rebuild.
The haunt-moon token is also referenced as a raw hex value (rgba(94, 234, 212, ...)) inside some shadow-[...] and drop-shadow-[...] arbitrary utilities in the compiled CSS. If you change the token, hunt down those arbitrary shadow values in the source JSX files and update them to match.

​
Scrollbar Styling

main.css applies the haunt palette to the custom scrollbar as well: 
::-webkit-scrollbar-track {
  background-color: rgb(8 28 32);      /* haunt-dark */
}
::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background-color: #5eead44d;         /* haunt-moon / ~30% */
}
::-webkit-scrollbar-thumb:hover {
  background-color: #5eead480;         /* haunt-moon / 50% */
}
This keeps the browser chrome on-theme without any additional JavaScript.

Build docs developers (and LLMs) love

Get started for freeTalk to us