Skip to main content

Documentation Index

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

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

dev-mode’s color system is built around six hand-picked neon tokens that evoke classic CRT monitors and arcade cabinets. Each token is defined as a CSS custom property in :root and simultaneously registered as a named color in the Tailwind config, so you can reach for either var(--neon-lime) in raw CSS or text-arcade-lime in JSX — whichever fits the context.

​
Full Token Reference

Token nameHexCSS variableTailwind classUsage
arcade-bg#0a0610--bg-darkbg-arcade-bgPage/app background
arcade-purple#1a0a2e--purple-basebg-arcade-purplePanels, cards, borders
arcade-cyan#00f0ff--cyantext-arcade-cyanPrimary actions, links
arcade-lime#9eff00--neon-limetext-arcade-limeSecondary actions, success
arcade-magenta#ff2bd6--magentatext-arcade-magentaEmphasis, warnings
arcade-white#f0e9ff--off-whitetext-arcade-whiteBody text, labels

​
Background Colors

The two background tokens establish depth. arcade-bg is the near-black base layer that fills the viewport, while arcade-purple surfaces one step above it — used for panels, navigation drawers, skill cards, and any UI element that needs to “lift” from the page without breaking the dark aesthetic. 
:root {
  --bg-dark:     #0a0610; /* arcade-bg    — page background  */
  --purple-base: #1a0a2e; /* arcade-purple — panels / borders */
}

{/* Full-page background */}
<div className="min-h-screen bg-arcade-bg">

  {/* Elevated panel */}
  <aside className="bg-arcade-purple border border-arcade-cyan/30 rounded-lg p-6">
    {/* content */}
  </aside>

</div>

​
Accent Neons

The three neon accent colors are the visual heartbeat of dev-mode. They appear in headings, button borders, glowing shadows, and the animated color-cycle effect. Use them intentionally — each carries a semantic role (see the note below). 
:root {
  --cyan:      #00f0ff; /* arcade-cyan    — rgb(0, 240, 255)   */
  --neon-lime: #9eff00; /* arcade-lime    — rgb(158, 255, 0)   */
  --magenta:   #ff2bd6; /* arcade-magenta — rgb(255, 43, 214)  */
}

{/* Primary CTA — cyan */}
<button className="border border-arcade-cyan text-arcade-cyan font-mono px-4 py-2">
  VIEW PROJECTS
</button>

{/* Success badge — lime */}
<span className="text-arcade-lime font-mono text-sm">● AVAILABLE FOR WORK</span>

{/* Warning/emphasis — magenta */}
<p className="text-arcade-magenta font-pixel text-2xl">LEVEL UP</p>
The three neon accents follow a consistent semantic contract throughout dev-mode:
  • Cyan (arcade-cyan) — primary interactive actions: nav links, primary buttons, focus rings.
  • Lime (arcade-lime) — secondary/success states: availability badges, skill highlights, progress indicators.
  • Magenta (arcade-magenta) — emphasis and warnings: error states, alert callouts, dramatic heading accents.
Keeping this contract intact when you customize the palette ensures that the UI remains readable and intentional at a glance.

​
Text Color

arcade-white is not a pure white — it carries a faint purple tint (#f0e9ff) that keeps body text from harshly contrasting against the dark backgrounds while still reading cleanly in long-form content. 
:root {
  --off-white: #f0e9ff; /* arcade-white — rgb(240, 233, 255) */
}

<p className="font-mono text-arcade-white leading-relaxed">
  Full-stack developer with a soft spot for retro interfaces.
</p>

​
Neon Glow Utilities

Beyond flat color, dev-mode ships ready-made shadow utilities that add the characteristic bloom you see on real neon signs and CRT phosphors. They are split into box shadows (for borders and containers) and text shadows (for headings and labels).

​
Box Shadow Classes

Apply these to any container or button to give it a glowing neon border effect.
ClassEffect
box-shadow-neon-cyanOuter + inset glow in cyan
box-shadow-neon-magentaOuter + inset glow in magenta
box-shadow-neon-limeOuter + inset glow in lime
.box-shadow-neon-cyan {
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5),
              inset 0 0 10px rgba(0, 240, 255, 0.2);
}

.box-shadow-neon-magenta {
  box-shadow: 0 0 10px rgba(255, 43, 214, 0.5),
              inset 0 0 10px rgba(255, 43, 214, 0.2);
}

.box-shadow-neon-lime {
  box-shadow: 0 0 10px rgba(158, 255, 0, 0.5),
              inset 0 0 10px rgba(158, 255, 0, 0.2);
}

{/* Neon-bordered project card */}
<div className="bg-arcade-purple box-shadow-neon-cyan rounded-lg p-6">
  <h2 className="font-pixel text-arcade-cyan">PROJECT ALPHA</h2>
</div>

​
Text Shadow Classes

These add a soft glow halo around text. text-shadow-crt is special — it applies chromatic aberration by splitting the text shadow into a red-shifted right offset and a blue-shifted left offset, mimicking the color fringing of a real CRT tube.
ClassEffect
text-shadow-crtChromatic aberration (magenta right, cyan left)
text-shadow-glow-limeDouble-layer lime glow halo
text-shadow-glow-magentaDouble-layer magenta glow halo
.text-shadow-crt {
  text-shadow: 2px 0 0 rgba(255, 43, 214, 0.8),
              -2px 0 0 rgba(0, 240, 255, 0.8);
}

.text-shadow-glow-lime {
  text-shadow: 0 0 10px rgba(158, 255, 0, 0.7),
               0 0 20px rgba(158, 255, 0, 0.5);
}

.text-shadow-glow-magenta {
  text-shadow: 0 0 10px rgba(255, 43, 214, 0.7),
               0 0 20px rgba(255, 43, 214, 0.5);
}

{/* CRT-aberrated hero heading */}
<h1 className="font-pixel text-arcade-cyan text-shadow-crt text-6xl">
  DEV MODE
</h1>

{/* Glowing skill label */}
<span className="font-mono text-arcade-lime text-shadow-glow-lime">
  React
</span>

​
Customizing the Palette

To swap any color, update both the CSS variable in :root and the matching entry in tailwind.config.js so that Tailwind’s utility classes stay in sync. 
:root {
  /* Replace arcade-cyan with electric blue */
  --cyan: #0066ff;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us