Skip to main content

Documentation Index

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

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

Dev Nexus is built around a witch-tech aesthetic — a dark, arcane palette that pairs near-black voids and deep purples with electric accent colors. Every color in the UI traces back to one of seven CSS custom properties defined in :root inside assets/main.css. Those tokens drive both raw CSS rules and the pre-compiled utility classes baked into the stylesheet.

​
Color Token Reference

TokenCSS VariableHexUsage
Void--color-void#050208Page/app background
Witch Purple--color-witch-purple#1b0833Panel and card backgrounds
Electric Violet--color-electric-violet#9d4dffPrimary accent, glows, borders
Neon Lime--color-neon-lime#9eff5bSecondary accent, active states
Ghost Mint--color-ghost-mint#6dffc7Skills page accent
Hot Magenta--color-hot-magenta#ff4ad8Writing page accent
Moonlight--color-moonlight#f0eaffPrimary text color
All tokens are declared in the :root block of assets/main.css: 
:root {
  --color-void: #050208;
  --color-witch-purple: #1b0833;
  --color-electric-violet: #9d4dff;
  --color-neon-lime: #9eff5b;
  --color-ghost-mint: #6dffc7;
  --color-hot-magenta: #ff4ad8;
  --color-moonlight: #f0eaff;
}

​
Utility Classes

Because Dev Nexus ships as a pre-compiled static site, all color-based utility classes are already present in assets/main.css. The full set of text, background, and border utilities for each token is included in the compiled stylesheet: 
text-electric-violet      bg-electric-violet      border-electric-violet
text-neon-lime            bg-neon-lime             border-neon-lime
text-ghost-mint           bg-ghost-mint            border-ghost-mint
text-hot-magenta          bg-hot-magenta           border-hot-magenta
text-moonlight            bg-moonlight
text-void                 bg-void
text-witch-purple         bg-witch-purple
Opacity modifier variants are also pre-compiled and available on all tokens: 
<!-- 70% opacity text -->
<p class="text-moonlight/70">Subdued body copy</p>

<!-- Semi-transparent panel border -->
<div class="border border-electric-violet/30">...</div>

<!-- Translucent card background -->
<div class="bg-witch-purple/50">...</div>

​
Changing a Color

Color tokens live in assets/main.css inside the :root block. Updating a hex value there propagates the change to every raw CSS rule and custom utility that references the variable: 
/* assets/main.css — change the hex here */
:root {
  --color-electric-violet: #7c3aed; /* swapped to a cooler violet */
}
Any glow, glass-panel, or border rule that uses the variable by name will automatically pick up the new value. Hand-written utility classes that embed the hex directly (such as .glow-violet) will need their hex values updated separately in the same file to stay in sync.

​
The Glass Panel Pattern

The .glass-panel utility class creates the frosted, semi-transparent card surface used throughout the UI. It combines a translucent witch-purple background with a faint electric-violet border and a backdrop blur: 
.glass-panel {
  border: 1px solid #9d4dff4d;   /* electric-violet at ~30% opacity */
  background-color: #1b083366;    /* witch-purple at ~40% opacity */
  backdrop-filter: blur(12px);
}
Apply it to any container to get the signature glassy panel look: 
<div class="glass-panel rounded-xl p-6">
  Panel content
</div>

​
Glow Utility Classes

Four glow-* classes emit colored light via box-shadow. Each has a diffuse outer glow and a subtle inset glow to simulate a light source within the element: 
/* Violet glow — primary accent, used on hero sigil and active nav */
.glow-violet {
  box-shadow:
    0 0 15px #9d4dff80,
    inset 0 0 10px #9d4dff33;
}

/* Lime glow — active states, skill bars */
.glow-lime {
  box-shadow:
    0 0 15px #9eff5b80,
    inset 0 0 10px #9eff5b33;
}

/* Magenta glow — Writing page */
.glow-magenta {
  box-shadow:
    0 0 15px #ff4ad880,
    inset 0 0 10px #ff4ad833;
}

/* Mint glow — Skills page */
.glow-mint {
  box-shadow:
    0 0 15px #6dffc780,
    inset 0 0 10px #6dffc733;
}
Two text-shadow variants add luminosity to heading text: 
.text-glow-violet {
  text-shadow: 0 0 10px rgba(157, 77, 255, 0.8);
}

.text-glow-lime {
  text-shadow: 0 0 10px rgba(158, 255, 91, 0.8);
}

​
Per-Page Accent Color Mapping

Each route in Dev Nexus is assigned a dedicated accent color that drives its glow classes, active borders, and highlight text:
RouteAccent ColorCSS TokenGlow Class
Home (/)Electric Violetelectric-violet.glow-violet
About (/about)Neon Limeneon-lime.glow-lime
Projects (/projects)Per-cardmixedmixed
Skills (/skills)Ghost Mintghost-mint.glow-mint
Writing (/writing)Hot Magentahot-magenta.glow-magenta
Case Studies (/case-studies)Electric Violetelectric-violet.glow-violet
Contact (/contact)Neon Limeneon-lime.glow-lime
The Projects page is the exception — each VialCard carries its own accent determined by the project’s assigned color token, so a single projects grid can span all four accent hues simultaneously.

Build docs developers (and LLMs) love

Get started for freeTalk to us