Skip to main content

Documentation Index

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

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

The developer.exe color system draws from the visual language of 1980s arcade cabinets and synthwave aesthetics: near-black backgrounds that push neon hues to maximum contrast, and a small set of vivid accent colors that each carry a distinct semantic role. Every color in the palette is registered as a Tailwind custom token so it can be applied directly in JSX classNames, and the three most-used accents are also exposed as CSS custom properties for use in keyframe animations and pseudo-element styles where Tailwind utilities cannot reach.

Color Reference

TokenHexTailwind ClassesCSS VariableUsage
Arcade Black#06070dbg-arcade-black, text-arcade-blackPage background, code blocks
Arcade Navy#0c1024bg-arcade-navy, border-arcade-navyCard backgrounds, secondary surfaces
Neon Magenta#ff2bd6bg-neon-magenta, text-neon-magenta, border-neon-magenta--hot-magentaPrimary CTA, scrollbar, glitch effect
Electric Cyan#22d3eebg-neon-cyan, text-neon-cyan, border-neon-cyan--electric-cyanSecondary accent, links, borders
Neon Green#39ff14bg-neon-green, text-neon-green, border-neon-green--neon-greenHUD text, terminal style, success states
Neon Yellow#fde047bg-neon-yellow, text-neon-yellow, border-neon-yellowWarnings, highlight, score display

CSS Custom Properties

The three primary accent colors are declared on :root so they are accessible anywhere in the stylesheet — including keyframe text-shadow values and pseudo-element content that cannot use Tailwind utility classes directly.
:root {
  --neon-green: #39ff14;
  --hot-magenta: #ff2bd6;
  --electric-cyan: #22d3ee;
}

Pixel Border Utility

Rather than using a real CSS border property (which would shift an element’s box-model dimensions), developer.exe implements pixel-art–style borders using box-shadow offsets. This keeps the element’s layout footprint stable while producing a crisp, blocky outline that matches the arcade aesthetic.
.pixel-border {
  box-shadow: -4px 0 0 0 currentColor, 4px 0 0 0 currentColor,
              0 -4px 0 0 currentColor, 0 4px 0 0 currentColor;
  margin: 4px;
}
.pixel-border-sm {
  box-shadow: -2px 0 0 0 currentColor, 2px 0 0 0 currentColor,
              0 -2px 0 0 currentColor, 0 2px 0 0 currentColor;
  margin: 2px;
}
Both utilities use currentColor, so the pixel border automatically inherits whatever color is set on the element via a text-color class. Pair them with any neon token to choose the border color:
// Cyan pixel border — pairs text-neon-cyan with pixel-border
<div className="text-neon-cyan pixel-border">...</div>

// Magenta pixel border on a button
<button className="text-neon-magenta pixel-border-sm">PRESS START</button>
The margin: 4px (or 2px for pixel-border-sm) offsets the element from its neighbours to prevent the shadow from being clipped by an overflow: hidden parent.

Selection Highlight

The site overrides the browser’s default ::selection highlight to use --hot-magenta as the background and white as the selected text color, keeping the visual identity consistent even when a user drags to select text:
::selection {
  background: var(--hot-magenta);
  color: #fff;
}
The same effect is available as Tailwind modifier classes — selection:bg-neon-magenta selection:text-white — for scoped application within a component tree.

Custom Cursor

The body element replaces the system cursor with a neon-green crosshair SVG encoded inline as a data: URI, reinforcing the HUD/terminal aesthetic across the entire viewport:
body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2339ff14" stroke-width="2" stroke-linecap="square"><path d="M12 2v20M2 12h20"/></svg>') 12 12, crosshair;
}
The hotspot is set to 12 12 (the centre of the 24 × 24 SVG) so the crosshair intersection lands exactly on the click point. crosshair is provided as the fallback cursor type for browsers that do not support custom SVG cursors.

Build docs developers (and LLMs) love