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 uses a two-layer styling system:
  1. Tailwind CSS utility classes for layout, spacing, typography, and responsive behavior.
  2. CSS custom properties (design tokens) for the brand color palette, ensuring consistent arcane theming across all components.
Both layers live in assets/main.css, which is generated by the Vite build and loaded via <link rel="stylesheet"> in every HTML shell.

​
CSS Custom Properties (Color Tokens)

The seven core brand colors are declared on :root as CSS custom properties: 
: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;
}
TokenHexRole
--color-void#050208Page background — deep near-black
--color-witch-purple#1b0833Panel backgrounds, borders
--color-electric-violet#9d4dffPrimary accent, nav highlights
--color-neon-lime#9eff5bActive states, CTA elements
--color-ghost-mint#6dffc7Skills section, secondary accents
--color-hot-magenta#ff4ad8Writing section, tertiary accents
--color-moonlight#f0eaffBody text, headings
These tokens are also registered as Tailwind color extensions, making them available as utility classes throughout the codebase: text-electric-violet, bg-void, border-neon-lime, text-ghost-mint, bg-witch-purple, and so on.

​
Typography

Three typefaces are loaded from Google Fonts via an @import at the top of main.css:
Font FamilyVariableUsage
Inter (300–600)font-sans (base)Body copy, UI text
JetBrains Mono (400–700)font-monoLabels, nav items, code, metadata
Syne (400–800)font-displayPage headings, hero text
@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600
         &family=JetBrains+Mono:wght@400;500;700
         &family=Syne:wght@400;500;600;700;800&display=swap";
The base body styles apply Inter as the default and set the page background to --color-void: 
body {
  background-color: #050208; /* --color-void */
  font-family: Inter, sans-serif;
  color: #f0eaff;            /* --color-moonlight */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Syne, sans-serif;
  letter-spacing: -0.025em;
}

code, pre {
  font-family: JetBrains Mono, monospace;
}

​
Custom Utility Classes

Beyond the Tailwind utilities, main.css defines a set of project-specific classes for the glassmorphism card style, neon glow effects, and the float animation.

​
.glass-panel

The signature card style used throughout the portfolio — a semi-transparent panel with a violet border and backdrop blur. 
.glass-panel {
  border-width: 1px;
  border-color: #9d4dff4d;       /* electric-violet at 30% opacity */
  background-color: #1b083366;   /* witch-purple at 40% opacity */
  backdrop-filter: blur(12px);
}
Apply it to any container that should read as a floating, frosted-glass card: 
<div className="glass-panel p-6 rounded-lg">
  {/* content */}
</div>
You can override the border color inline with a Tailwind modifier: glass-panel border-neon-lime/30 or glass-panel border-ghost-mint/40.

​
Glow Effects

Four box-shadow glow utilities provide the neon aura effect on interactive elements: 
.glow-violet  { box-shadow: 0 0 15px #9d4dff80, inset 0 0 10px #9d4dff33; }
.glow-lime    { box-shadow: 0 0 15px #9eff5b80, inset 0 0 10px #9eff5b33; }
.glow-magenta { box-shadow: 0 0 15px #ff4ad880, inset 0 0 10px #ff4ad833; }
.glow-mint    { box-shadow: 0 0 15px #6dffc780, inset 0 0 10px #6dffc733; }
Each glow is a dual-layer shadow: an outer diffused halo and an inner fill. Use them on bordered elements like skill cards, navigation nodes, or interactive buttons: 
<div className="glass-panel rounded-full glow-violet">...</div>
<div className="glass-panel rounded-lg hover:glow-lime transition-all duration-300">...</div>

​
Text Glow Effects

Two text-shadow utilities apply the neon-glow effect directly to 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);  }
Used on headings and active nav labels to create the luminous arcane aesthetic: 
<h1 className="font-display text-moonlight text-glow-violet">
  GRIMOIRE OF ORIGIN
</h1>

<span className="text-neon-lime text-glow-lime">
  [ PORTAL ]
</span>

​
.animate-float

A CSS keyframe animation that gently bobs an element up and down — used on decorative UI elements: 
.animate-float {
  animation: float 6s ease-in-out infinite;
}
The float keyframes are defined elsewhere in the stylesheet and produce a smooth vertical oscillation. Apply to any element you want to pulse with arcane energy: 
<div className="animate-float">
  <HexagonIcon className="w-8 h-8 text-electric-violet" />
</div>

​
Tailwind Color Extension

The brand colors from :root are also wired into Tailwind’s config so you can use them as standard utility classes. The full set of available color utilities includes: 
text-void           bg-void           border-void
text-witch-purple   bg-witch-purple   border-witch-purple
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      border-moonlight
Tailwind’s opacity modifier syntax works with all of these: border-electric-violet/30, bg-witch-purple/50, text-neon-lime/70, etc.

​
Selection Styles

The global text selection color is also themed to match the palette: 
body *::selection {
  background-color: #9d4dff4d;  /* electric-violet at 30% */
  color: #9eff5b;                /* neon-lime */
}
Selecting any text on the page will show a violet highlight with lime-green selected text, reinforcing the brand aesthetic even in micro-interactions.
To change the core color palette, update the CSS custom properties in the :root block inside assets/main.css and rebuild with Vite. See Color System for a complete walkthrough.

Build docs developers (and LLMs) love

Get started for freeTalk to us