Skip to main content

Documentation Index

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

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

Aurora Drift’s visual identity is built on a carefully curated deep-space palette. Every color has an intentional role — from the luminous turquoise glow that follows your cursor to the near-black navy that grounds the layout. All custom color tokens are defined in assets/main.css as compiled Tailwind output; to change them globally you need to edit the original Vite source project and recompile.

​
Aurora Accent Colors

The aurora accent family provides the vivid, bioluminescent glow that defines the portfolio’s atmosphere. These colors appear in glows, gradients, borders, and active UI states.

aurora-turquoise

#2DD4BF — The primary accent. Used for the cursor bloom radial gradient, active nav dots, button borders, and the dominant layer of the aurora SVG background.

aurora-cyan

#22D3EE — Secondary accent. Used as the end stop of nav underline gradients, link hover states, and focus ring colors.

aurora-teal

#14B8A6 — Tertiary accent. Appears in aurora layer 2 blends, selection highlight backgrounds, and hover border effects.

aurora-magenta

#EC4899 — Contrast accent. Used in aurora layer 2 gradients, tag labels, and decorative borders to add warm-pink contrast against the cool teal tones.

aurora-mint

#A7F3D0 — Soft highlight. Referenced in Nav.js (hover:text-aurora-mint) and used as the start stop of aurora layer 3’s gradient for a lighter, airier feel. Its hex value #a7f3d0 appears in the aurora3 gradient stop in AuroraBackground.js.

​
Background Colors

navy

#050814 — The primary background. Applied globally to body, this deep black-blue evokes the void of deep space and provides maximum contrast for luminous accent colors.

navy-800

#0A1128 — The card and panel surface. Slightly lighter than navy, it lifts glass panels off the background while remaining dark enough to support translucent glassmorphism effects.

​
Text Colors

All text colors are standard Tailwind slate utilities applied against the navy background.
Tailwind ClassHex ValueUsage
text-white#FFFFFFHeadings (h1–h6), active nav links
text-slate-200#E2E8F0Default body text — set on body in main.css
text-slate-300#CBD5E1Secondary body text, card descriptions
text-slate-400#94A3B8Muted text, inactive nav link labels
text-slate-500#64748BVery muted text, metadata, timestamps

​
Color Swatch Reference

TokenHexRGBPrimary Usage
aurora-turquoise#2DD4BFrgb(45, 212, 191)Cursor glow, active nav, aurora L1
aurora-cyan#22D3EErgb(34, 211, 238)Nav underline end, link hover
aurora-teal#14B8A6rgb(20, 184, 166)Aurora L2 blend, selection highlight
aurora-magenta#EC4899rgb(236, 72, 153)Aurora L2, tag labels, contrast trim
aurora-mint#A7F3D0rgb(167, 243, 208)Aurora L3 start, nav hover text
navy#050814rgb(5, 8, 20)Global page background
navy-800#0A1128rgb(10, 17, 40)Card / glass panel surface

​
Gradient Combinations

Gradients are one of the most expressive parts of the Aurora Drift design language. They appear as animated SVG aurora layers, nav underlines, and decorative UI elements.
The primary aurora wave. Defined in AuroraBackground.js as an SVG linearGradient from #2DD4BF (80% opacity) through #06B6D4 (40% opacity) to the navy background color. Animates continuously with mix-blend-screen.
// From AuroraBackground.js
<linearGradient id="aurora1" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%"   stopColor="#2dd4bf" stopOpacity="0.8" />
  <stop offset="50%"  stopColor="#06b6d4" stopOpacity="0.4" />
  <stop offset="100%" stopColor="#0a0e27" stopOpacity="0"   />
</linearGradient>
The second aurora wave, blended with mix-blend-overlay. Runs from #C084FC (soft purple-magenta) through #14B8A6 (teal) to transparent. Adds warm contrast behind the dominant teal layer.
// From AuroraBackground.js
<linearGradient id="aurora2" x1="100%" y1="0%" x2="0%" y2="100%">
  <stop offset="0%"   stopColor="#c084fc" stopOpacity="0.6" />
  <stop offset="50%"  stopColor="#14b8a6" stopOpacity="0.3" />
  <stop offset="100%" stopColor="#0a0e27" stopOpacity="0"   />
</linearGradient>
The softest aurora layer, blended with mix-blend-color-dodge. Runs vertically from #A7F3D0 (mint, 50% opacity) through #2DD4BF (turquoise, 20%) to transparent. This layer adds a lighter, almost white shimmer to the top of the aurora.
// From AuroraBackground.js
<linearGradient id="aurora3" x1="50%" y1="0%" x2="50%" y2="100%">
  <stop offset="0%"   stopColor="#a7f3d0" stopOpacity="0.5" />
  <stop offset="50%"  stopColor="#2dd4bf" stopOpacity="0.2" />
  <stop offset="100%" stopColor="#0a0e27" stopOpacity="0"   />
</linearGradient>

​
Customizing the Palette

Aurora Drift ships as a compiled Vite output. The custom color tokens (aurora-turquoise, aurora-cyan, aurora-teal, aurora-magenta, aurora-mint, navy, navy-800) are baked into assets/main.css at build time. To change any color globally, you need the original Vite source project — update the token value in your Tailwind config, then rebuild so that all utility classes referencing that token regenerate automatically.
To change the cursor glow color, open components/CursorGlow.js and edit the radial-gradient inside the style prop. The current value is radial-gradient(circle, rgba(45,212,191,0.15) 0%, rgba(45,212,191,0) 70%). Swap both RGBA color values to match your desired accent — for example, replace 45,212,191 with 236,72,153 to produce a magenta cursor bloom.

Build docs developers (and LLMs) love

Get started for freeTalk to us