Skip to main content

Documentation Index

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

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

DevHaunt’s visual identity is built entirely on a set of named Tailwind color tokens, three Google Fonts families, and a handful of targeted CSS rules in assets/main.css. Every color, typeface, and surface detail — from the pumpkin-orange accent to the haunted scrollbar — traces back to one of these tokens.
This is a pre-built static dist. There is no tailwind.config.js, package.json, or source directory exposed in the repository. Changing color tokens or font mappings requires find-and-replacing hex values or font-family names directly in the minified assets/main.css and assets/main.js files, or rebuilding from source.

​
Color System

DevHaunt extends Tailwind’s default palette with seven custom named colors, all confirmed from the compiled class output in assets/main.css. Each token is available as a bg-*, text-*, and border-* utility class, and some appear with opacity modifiers such as /80 or /50.
TokenCSS class prefixHex valueUsage
nightbg-night, text-night, border-night#0b3a44Page background, body base color, dark text on light surfaces
pumpkinbg-pumpkin, text-pumpkin, border-pumpkin#ff7a1aPrimary accent, CTAs, active nav items, SVG window glow
ghosttext-ghost, border-ghost#f4f1eaPrimary body text, light backgrounds, fog SVG fill
tombstonebg-tombstone, border-tombstone#5a6268Muted borders, secondary UI elements
tombstone-darkbg-tombstone-dark, border-tombstone-dark#3a4044Darker secondary UI, dividers
tombstone-lightborder-tombstone-light#7a8288Lighter borders and separators
woodbg-wood, border-wood#3e2723Door panels, wooden surface elements, hanging sign background
Opacity modifiers like bg-night/80 or text-ghost/60 are used extensively throughout the components. Tailwind generates these automatically from the base token — you do not need to define them separately.

​
Changing the Color Palette

Because DevHaunt ships as a pre-built static dist, there is no Tailwind config file to edit. Color tokens are compiled into assets/main.css as literal hex values. To rebrand the palette, perform a find-and-replace directly on the minified CSS (and on assets/main.js for any inline SVG fill/stroke values).
1

Find and replace hex values in assets/main.css

Open assets/main.css in any text editor that supports find-and-replace and swap each token hex for your desired color. Every Tailwind utility class that references a token (e.g. bg-night, text-pumpkin, border-ghost) is compiled as a raw hex, so a single replacement covers all usages of that token.
TokenCurrent hexFind in main.css
night#0b3a44#0b3a44 and rgb(11 58 68
pumpkin#ff7a1a#ff7a1a and rgb(255 122 26
ghost#f4f1ea#f4f1ea and rgb(244 241 234
tombstone#5a6268#5a6268 and rgb(90 98 104
tombstone-dark#3a4044rgb(58 64 68
tombstone-light#7a8288rgb(122 130 136
wood#3e2723#3e2723 and rgb(62 39 35
The body rule near the end of assets/main.css also hard-codes the background and text colors — update those too:
assets/main.css
body {
  background-color: #0b3a44; /* night — replace with your new background hex */
  color: #f4f1ea;            /* ghost — replace with your new text hex */
  overflow-x: hidden;
  cursor: none;
}
2

Update the custom scrollbar in assets/main.css

Find the scrollbar thumb rules and replace the pumpkin hex with your new accent color:
assets/main.css
::-webkit-scrollbar-thumb       { background: #ff7a1a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #e66a10; }
3

Update hardcoded SVG colors in assets/main.js

The haunted house SVG in components/HauntedHouse.js (bundled into assets/main.js) uses raw hex values for inline fill and stroke attributes. Search assets/main.js for each hex and replace it:
Current hexTokenRole
#0b3a44nightBackground fill
#ff7a1apumpkinAccent / window glow
#f4f1eaghostLight surfaces, fog fill
#3e2723woodDoor panels, sign background
Because the CSS and JS are minified, always work on a backup copy. A global find-and-replace on a short hex like #3e2723 is generally safe, but verify that no unrelated strings share the same value before saving.

​
Font System

DevHaunt loads all three typefaces from a single Google Fonts @import at the top of assets/main.css:
assets/main.css
@import"https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap";
The fonts are then exposed as Tailwind utility classes compiled into assets/main.css:
Tailwind tokenFont familyUsage
font-spookyCaveat BrushAll headings, nav labels, section titles, the SVG hanging sign
font-codeJetBrains MonoCode-related UI elements, skill labels, archive badge
(default)InterBody text, descriptions, paragraphs, form fields

​
Changing Fonts

Because DevHaunt is a pre-built static dist, font mappings are compiled into assets/main.css. To change fonts you must edit the minified CSS directly — there is no tailwind.config.js to update.
1

Update the Google Fonts import URL in assets/main.css

The very first line of assets/main.css is the Google Fonts @import. Replace the family names with your chosen fonts. Build a new URL at fonts.google.com:
assets/main.css
/* Example: swap Caveat Brush → Creepster, JetBrains Mono → Fira Code */
@import"https://fonts.googleapis.com/css2?family=Creepster&family=Inter:wght@400;500;600;700&family=Fira+Code&display=swap";
2

Update font-family values in assets/main.css

Search assets/main.css for the compiled font-family declarations and replace the family name strings:
ClassFindReplace with
.font-spookyCaveat Brush,cursiveCreepster,cursive
.font-codeJetBrains Mono,monospaceFira Code,monospace
These compiled rules look like:
.font-code{font-family:JetBrains Mono,monospace}
.font-spooky{font-family:Caveat Brush,cursive}
The font-spooky class is also used inside an SVG <text> element in HauntedHouse.js via fontFamily: 'Caveat Brush'. Update that attribute directly if you change the spooky font.

​
Selection Colors

When a visitor highlights text on the page, the selection is styled with Halloween colors. These classes are applied to the root wrapper <div> in components/Layout.js:
components/Layout.js
<div className="min-h-screen bg-night text-ghost relative selection:bg-pumpkin selection:text-night">
The compiled CSS output that powers these classes:
assets/main.css
/* Pumpkin background on selected text */
.selection\:bg-pumpkin *::selection  { background-color: rgb(255 122 26); }
.selection\:bg-pumpkin::selection    { background-color: rgb(255 122 26); }

/* Night-colored text inside the selection */
.selection\:text-night *::selection  { color: rgb(11 58 68); }
.selection\:text-night::selection    { color: rgb(11 58 68); }
To change the selection style, update those two classes on the root <div> in Layout.js. Any bg-* and text-* token from the palette works as a selection: modifier.

​
Custom Scrollbar

The scrollbar is fully styled in assets/main.css using WebKit pseudo-elements, giving it a consistent Halloween look in Chromium-based browsers and Safari:
assets/main.css
::-webkit-scrollbar              { width: 10px; }
::-webkit-scrollbar-track        { background: #0b3a44; }         /* night */
::-webkit-scrollbar-thumb        { background: #ff7a1a; border-radius: 5px; } /* pumpkin */
::-webkit-scrollbar-thumb:hover  { background: #e66a10; }         /* pumpkin darkened */
Firefox uses a different scrollbar API (scrollbar-color and scrollbar-width). If cross-browser scrollbar styling matters to you, add a scrollbar-color: #ff7a1a #0b3a44; rule to the body in main.css alongside the WebKit rules.

Build docs developers (and LLMs) love

Get started for freeTalk to us