Skip to main content

Documentation Index

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

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

Nightshade’s visual identity rests on six custom color tokens compiled into assets/main.css via Tailwind CSS. Each token carries a deliberate role — from the void-black canvas to the amber candleflame that marks your active position in the navigation. Understanding these tokens is the first step to reading or modifying the UI’s dark-witch aesthetic.

​
Color Tokens

The six tokens are registered as Tailwind theme extensions and resolve to the following hex values.
TokenHexUsage
witch-dark#0b0d10Page background, card backgrounds, nav background
witch-plum#581c87Borders, inactive nav, SmokeLayer blob, decorative elements
witch-turquoise#14b8a6Primary interactive color, active states, scrollbar thumb
witch-amber#f59e0bActive nav flame, hover highlights, candle flame, headings
witch-moonlight#e2e8f0Default text color, subtle UI elements
witch-teal#0d9488Secondary accent, SmokeLayer blob, text glow
Each token is referenced with the standard Tailwind utility pattern — for example bg-witch-dark, text-witch-amber, or border-witch-plum.

​
Opacity Variants

Tailwind’s slash-opacity syntax is used extensively throughout the codebase to layer transparency over the saturated token colors. The table below lists the variants compiled into main.css.
UtilityAlphaCommon Context
witch-plum/2012%Background washes on hover states
witch-plum/3019%Border overlays, inactive dividers
witch-plum/5031%Mid-weight borders
witch-plum/6038%Stronger border accents
witch-turquoise/2012%Subtle teal background fill
witch-turquoise/3019%Lighter border tones
witch-moonlight/4025%Dimmed text on dark cards
witch-moonlight/6038%Secondary body text
witch-moonlight/7044%Caption and metadata text
witch-moonlight/8050%Near-standard text on dark surfaces
witch-amber/106%Faint amber background tint
witch-amber/2012%Amber gradient starts
witch-dark/3019%Translucent overlay panels
witch-dark/8050%Nav and modal backdrops
These are applied inline as Tailwind classes — for example bg-witch-plum/30 or text-witch-moonlight/60.

​
Glow Utilities

Three custom utility classes defined at the bottom of main.css apply text-shadow and box-shadow glows that reinforce the candle-lit atmosphere. 
.text-glow-amber {
  text-shadow:
    0 0 10px rgba(245, 158, 11, 0.5),
    0 0 20px rgba(245, 158, 11, 0.3);
}

.text-glow-teal {
  text-shadow:
    0 0 10px rgba(13, 148, 136, 0.5),
    0 0 20px rgba(13, 148, 136, 0.3);
}

.box-glow-plum {
  box-shadow:
    0 0 15px #581c8766,
    inset 0 0 20px #581c8733;
}
  • .text-glow-amber — Applied to active navigation labels and section headings to simulate candlelight spill.
  • .text-glow-teal — Applied to turquoise-tinted decorative text and terminal-style labels.
  • .box-glow-plum — Applied to card borders and modal containers to give them an arcane purple halo.

​
Parchment Background

The .parchment-bg utility combines a near-black fill with an inline SVG fractal-noise texture rendered at 5% opacity. It is used on modal panels and the blog post reader. 
.parchment-bg {
  background-color: #1a1c23;
  background-image: url("data:image/svg+xml,..."); /* SVG fractal noise texture at 5% opacity */
}
The SVG uses <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4"> to generate the grain. The texture is embedded as a data URI so no external image request is made.

​
Color Hierarchy

The six tokens form a layered hierarchy from deepest background to brightest interaction signal.
  • witch-dark — Foundation layer. The near-black canvas that every other token sits on. Used for body, card backgrounds, and the navigation bar fill.
    • witch-plum — Structural layer. Deep purple frames the content through borders, dividers, and ambient blob glows. It marks boundaries without drawing the eye away from content.
      • witch-turquoise — Interaction layer. Bright teal signals clickable and active surfaces — buttons, links, the scrollbar thumb, and focused input borders.
        • witch-amber — Highlight layer. Warm amber is reserved for the highest-priority active state: the current-page flame in the navigation, candle wicks, and hover text on dark cards.
          • witch-moonlight — Reading layer. Cool off-white sits above everything as the default text color, legible against all darker tokens.
          • witch-teal — Echo layer. A slightly darker sibling of turquoise used for secondary accents, hover states on the scrollbar, and the teal text-glow utility.

​
Changing Colors

All color values are currently baked into the compiled assets/main.css. The Tailwind utility classes — including the six witch-* token names — are resolved at build time from tailwind.config.js. To change any token, you must edit the original source config and rebuild with npm run build. Editing main.css directly will be overwritten on the next build.
To update a token, locate the theme.extend.colors block in tailwind.config.js and change the hex value for the token you want to modify, then run the build: 
// tailwind.config.js (source — not committed to this repo)
module.exports = {
  theme: {
    extend: {
      colors: {
        "witch-dark":      "#0b0d10",
        "witch-plum":      "#581c87",
        "witch-turquoise": "#14b8a6",
        "witch-amber":     "#f59e0b",
        "witch-moonlight": "#e2e8f0",
        "witch-teal":      "#0d9488",
      },
    },
  },
};

Build docs developers (and LLMs) love

Get started for freeTalk to us