Skip to main content

Documentation Index

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

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

The dev.void color system is built around two conceptual layers: a deep space background scale that anchors every surface in near-total darkness, and a four-color aurora accent palette that provides all interactive highlights, glow effects, and gradient endpoints. Every color in the site traces back to one of these two groups. The compiled source of truth for all color values at runtime is assets/main.css — this is the only color file present in the built output, and all live utility classes are consumed directly from it.
The source of truth for all color values at runtime is assets/main.css. No tailwind.config.js is present in the built repo output — all utility classes, color tokens, and opacity variants are already compiled into the CSS file.

​
Aurora Accent Colors

The four aurora accents are inspired by the shifting greens, teals, and pinks of a real aurora borealis. Each color has a clearly defined semantic role across the site.

aurora-teal — #0d9488

The primary accent. Used for active borders, focus ring styles, scrollbar thumb, the .glass-panel border, and all primary interactive highlights. If you change one color to rebrand the site, this is the one.

aurora-mint — #34d399

The secondary green. Used for ping blips on the radar, success state indicators, active timeline dates, and group-hover text transitions (group-hover:text-aurora-mint).

aurora-pink — #ec4899

The highlight pink. Used for hover gradient endpoints, incident/alert badges, and role labels on testimonial cards (e.g., text-aurora-pink uppercase tracking-widest).

aurora-light — #ccfbf1

The near-white teal. Used for main text accents, selected text color (::selection), cursor dot fill, and hover text states (hover:text-aurora-light).

​
How Accents Are Applied Across the Site

RoleColor TokenExample Usage
Primary bordersaurora-teal/20 – aurora-teal/50Cards, input focus rings, .glass-panel
Active / hover textaurora-lightNav links, card headings on hover
Success pingsaurora-mintRadar blips, online indicators
Alert / highlight badgesaurora-pinkIncident labels, role tags
Scrollbar thumbaurora-teal/30::-webkit-scrollbar-thumb
Selected text backgroundaurora-teal/30::selection
Selected text coloraurora-light::selection
Glow shadowsrgba(13,148,136,…).box-glow, shadow utilities

​
Space Background Scale

The background scale simulates the progressive darkness of deep space. Darker values sit behind everything; slightly lighter values surface on cards and dividers.
TokenHexRGBUsage
space-950#010308rgb(1 3 8)body background — the deepest dark
space-900#030712rgb(3 7 18)Primary card backgrounds, scrollbar track
space-800#080f1ergb(8 15 30)Secondary card backgrounds, icon button wells
space-700#111827rgb(17 24 39)Borders and dividers (equivalent to Tailwind gray-900)
/* Confirmed compiled values from main.css */
.bg-space-950 { background-color: rgb(1 3 8); }
.bg-space-900 { background-color: rgb(3 7 18); }
.bg-space-800 { background-color: rgb(8 15 30); }
.border-space-700 { border-color: rgb(17 24 39); }

​
Aurora Gradient

The bg-aurora-gradient utility is applied to the background layers of AuroraHero. It sweeps across all four accent colors at low opacity so that the underlying starfield stays visible. 
/* From main.css — compiled bg-aurora-gradient utility */
.bg-aurora-gradient {
  background-image: linear-gradient(
    120deg,
    #06b6d466,           /* cyan-500 at 40% opacity — leading edge */
    #0d948833 40%,       /* aurora-teal at 20% opacity */
    #ec489926 60%,       /* aurora-pink at 15% opacity */
    #34d3994d            /* aurora-mint at 30% opacity — trailing edge */
  );
}
The gradient intentionally uses very low opacity values so colors blend into the star layer underneath via mix-blend-mode: screen. If you want a more vivid aurora, increase the alpha channels (e.g., change #0d948833 to #0d948866).

​
Custom CSS Utilities

These four utilities are defined as Tailwind plugins/components and compiled as static class names in main.css. Apply them with a single class name rather than rebuilding individual property combinations.
Creates the frosted-glass card surface used throughout the site — nav bar, project cards, contact forms, and any floating panel.
/* Compiled output in main.css */
.glass-panel {
  border-width: 1px;
  border-color: #0d948833;          /* aurora-teal/20 */
  background-color: #03071266;      /* space-900/40 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
When to use it: Any container that floats over the starfield or a gradient layer. The semi-transparent background lets the background show through while the backdrop-blur keeps the content legible. Avoid stacking multiple .glass-panel elements directly on top of each other — double-blurring kills performance.
Adds a soft cyan halo around text. Used on primary headings and the nav logo on hover.
.text-glow {
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}
Also available as a group-hover variant: group-hover:text-glow.
Applies a subtle teal outer glow on card hover via the hover:box-glow variant.
.hover\:box-glow:hover {
  box-shadow: 0 0 30px #0d948826;   /* aurora-teal at ~15% opacity */
}
Pipes the element through the inline SVG displacement filter url(#aurora-turbulence) defined in the AuroraHero DOM. This creates the organic, flowing warp effect on the aurora background layers.
.aurora-filter {
  filter: url(#aurora-turbulence);
}
Under prefers-reduced-motion: reduce, this filter is overridden to filter: none in main.css. Do not rely on the aurora warp effect for any meaningful content — it is purely decorative.

​
Text Selection Colors

Selected text across the whole site uses the aurora palette for a consistent branded feel: 
/* From main.css */
::selection {
  background-color: #0d94884d;   /* aurora-teal/30 */
  color: rgb(204 251 241);       /* aurora-light */
}
These are applied via the Tailwind selection: variant classes selection:bg-aurora-teal/30 and selection:text-aurora-light on the root <body> wrapper.

​
How to Change the Primary Accent Color

Because the Tailwind config (tailwind.config.js) is not included in the built output, you have two paths for recoloring the site.
1

Identify all teal references in main.css

The hex value #0d9488 (aurora-teal) and its alpha variants (#0d948833, #0d94884d, #0d948866, #0d948880) appear throughout the compiled CSS. Use a global find-and-replace in your editor.
grep -o '#0d9488[0-9a-f]*' assets/main.css | sort | uniq
2

Replace with your chosen color

Choose a new hex value (e.g., #7c3aed for a violet accent). Replace each opacity variant by computing the same alpha percentage against your new base color, or use a tool like uicolors.app to generate matching alpha stops.
# Example: swap aurora-teal for violet #7c3aed
sed -i 's/#0d9488/#7c3aed/g' assets/main.css
3

(Preferred) Rebuild from source

For a durable change, edit tailwind.config.js in the source repository, update the aurora-teal value under theme.extend.colors, then run the build:
npm run build
This regenerates main.css with all utility classes correctly recalculated, including opacity variants and gradient stops.
Do not manually edit only some of the aurora-teal alpha variants and leave others unchanged — mismatched opacity stops will produce visible inconsistencies across borders, glows, and hover states.

​
Full Color Reference

TokenHexOpacity Variants in Use
aurora-teal#0d9488/10 /20 /30 /40 /50
aurora-mint#34d399/20
aurora-pink#ec4899/20
aurora-light#ccfbf1(solid only)
space-950#010308/50 /80 /95
space-900#030712/50 /80
space-800#080f1e/50
space-700#111827(solid only)

Build docs developers (and LLMs) love

Get started for freeTalk to us