Skip to main content

Documentation Index

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

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

Spooky’s colors are defined as CSS custom properties on :root in assets/main.css, alongside a set of Tailwind utility classes that reference those same values directly as arbitrary color tokens. This approach keeps the palette consistent across every component and ensures that a single variable change propagates through both the CSS layer and any inline Tailwind classes that reference the matching hex value.

​
CSS custom properties

The five palette variables are declared at the top of the custom section in assets/main.css, immediately after the Tailwind base reset: 
:root {
  --color-charcoal: #1a1a1d;
  --color-pumpkin: #ff7518;
  --color-ghost: #f5f5f5;
  --color-bat: #4a1a5c;
  --color-candy: #fcd34d;
}
VariableHex ValuePrimary Use
--color-charcoal#1A1A1DPage background, darkest surface
--color-pumpkin#FF7518Primary accent, interactive elements, cursor flame
--color-ghost#F5F5F5Primary text, light surfaces
--color-bat#4A1A5CSecondary accent, borders, panel backgrounds
--color-candy#FCD34DHighlight, hover states, candle flame tip

​
Text selection

The CSS overrides the browser’s default text-selection highlight so that any selected text on the page appears with a pumpkin-orange background (#FF7518) and charcoal text (#1A1A1D). This keeps the selection style on-brand rather than inheriting the default blue highlight, and applies consistently to both ::selection and ::-moz-selection across all child elements of body.

​
Tailwind color references

Because the theme is compiled with Tailwind’s JIT engine, components reference the palette values directly as Tailwind arbitrary value classes rather than through CSS variable syntax. This means the same color appears as both a CSS variable in :root and as a hardcoded hex token in Tailwind utility classes throughout the component files. 
<!-- Background using charcoal -->
<div class="bg-[#1a1a1d]">

  <!-- Pumpkin-orange text accent -->
  <span class="text-[#ff7518]">Featured Project</span>

  <!-- Bat-purple border on a panel -->
  <div class="border border-[#4a1a5c]">...</div>

</div>
When updating a palette color, change the CSS variable in :root and do a find-and-replace for the matching hex value across the component files.

​
Glow effects

Two custom Tailwind utility classes are defined at the end of assets/main.css to produce the ambient glow effects used on headings and highlighted panels: .text-glow-pumpkin — applies a two-layer pumpkin-orange text shadow for lit-from-within heading effects: 
.text-glow-pumpkin {
  text-shadow:
    0 0 10px rgba(255, 117, 24, 0.5),
    0 0 20px rgba(255, 117, 24, 0.3);
}
.box-glow-pumpkin — applies a single pumpkin-orange box shadow for glowing panel borders: 
.box-glow-pumpkin {
  box-shadow: 0 0 15px #ff751866;
}
Both classes are also available as group-hover variants (group-hover:text-glow-pumpkin) so that glow effects can be triggered on parent hover.
To change the primary accent color across the entire theme, update --color-pumpkin in :root to your new hex value, then find and replace every instance of #ff7518 (and its alpha variants such as #ff751866 and rgba(255,117,24,…)) in the component files with the new value. The same replacement logic applies to the glow utility classes defined at the bottom of main.css.

Build docs developers (and LLMs) love

Get started for freeTalk to us