Skip to main content

Documentation Index

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

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

Aurora Cosmos ships as a pre-built static site with a hand-tuned set of color tokens, custom utility classes, and three carefully chosen typefaces compiled into assets/main.css. Every visual decision — from the deep-space background to the glowing nav indicator — traces back to this design system, making it straightforward to restyle or extend the template by editing the compiled stylesheet directly.

​
Color Palette

The palette is divided into two families: aurora tones that evoke the natural light phenomena of polar skies, and cosmic tones drawn from nebula and deep-space photography. Together they overlay a near-black space background scale.
TokenHexPrimary use cases
aurora-turquoise#5eead4Primary accent, active nav indicator, focus rings, text glow
aurora-teal#14b8a6Secondary accent, borders, scrollbar thumb, .box-glow shadow
aurora-green#34d399Success states, aurora background layer 3 gradient
cosmic-violet#8b5cf6Star layer 3 glow, aurora background layer 2 gradient
cosmic-magenta#ec4899Secondary cosmic accent, hover border highlights
space-900#020617Page background, deepest surface
space-800#060b1fCard and panel backgrounds, .glass-panel fill
Aurora Cosmos is a pre-built static site — there is no tailwind.config.js or src/ directory in the repository. Color tokens are already compiled into assets/main.css as CSS custom properties and Tailwind utility classes. To restyle or add tokens, edit assets/main.css directly (or rebuild from your own source if you have it). The class names shown in examples (bg-aurora-turquoise, text-cosmic-violet, etc.) are available because they are present in the compiled stylesheet.

​
Using Tokens in JSX

// Background fills
<div className="bg-space-900">          {/* page root */}
<div className="bg-space-800/40">       {/* translucent panel */}

// Text colors
<h1 className="text-aurora-turquoise">  {/* primary accent heading */}
<p  className="text-cosmic-violet">     {/* violet detail text */}

// Borders with opacity
<div className="border border-aurora-teal/30">    {/* subtle teal ring */}
<div className="border border-cosmic-magenta/50"> {/* magenta hover state */}

// Gradients
<div className="bg-gradient-to-r from-aurora-turquoise via-aurora-teal to-cosmic-violet">
  {/* aurora shimmer */}
</div>

​
Custom Utilities

Three component-level utility classes are compiled into assets/main.css. Apply them directly in your JSX className props alongside any other CSS classes — they are ready to use without any build step.

.glass-panel

Frosted-glass surface used on the navigation sidebar, project cards, and modal panels. Combines a hairline white border, translucent space-800 background, and backdrop-blur-md for the blur effect.
border: 1px solid rgba(255, 255, 255, 0.10);
background-color: rgba(6, 11, 31, 0.40);
backdrop-filter: blur(12px);

.box-glow

A soft outward glow in aurora-teal at 20% opacity. Applied to cards and containers to simulate ambient light emanating from the aurora layers behind them.
box-shadow: 0 0 30px rgba(20, 184, 166, 0.20);

.text-glow (hover)

A text-shadow in aurora-turquoise at 50% opacity applied via the group-hover:text-glow variant. Used on navigation labels when the parent link is hovered.
text-shadow: 0 0 20px rgba(94, 234, 212, 0.50);

​
Example usage in JSX

{/* Navigation link with glass surface and hover glow */}
<a className="group glass-panel box-glow rounded-xl px-4 py-2 flex items-center gap-3">
  <span className="group-hover:text-glow transition-all duration-300 text-slate-300">
    Projects
  </span>
</a>

{/* Project card with glass panel and teal glow */}
<article className="glass-panel box-glow rounded-2xl p-6">
  <h2 className="font-display text-white text-2xl">My Project</h2>
  <p className="text-slate-400 mt-2">Project description goes here.</p>
</article>

​
Typography

Aurora Cosmos loads three typefaces from Google Fonts and maps each to a distinct Tailwind utility class.

Space Grotesk

Class: font-displayApplied automatically to all h1–h6 elements via base styles. Use font-display explicitly on UI labels, stat numbers, and nav brand text. Tracking is tightened to tracking-tight (letter-spacing: -0.025em) by default on headings.

Plus Jakarta Sans

Class: font-sans (default)The body typeface set on <html>. No class needed for running text — it is the default. Use it explicitly when overriding a font-display or font-mono context back to body copy.

JetBrains Mono

Class: font-monoApplied automatically to <code> and <pre> elements. Use font-mono on skill badges, terminal-style labels, version strings, or any element that should read as a system/machine output.

​
Typography in practice

{/* Page hero — Space Grotesk headline over Jakarta body */}
<section className="py-24">
  <h1 className="font-display text-5xl font-bold text-white tracking-tight">
    Full-Stack Developer
  </h1>
  <p className="mt-4 text-lg text-slate-300 leading-relaxed max-w-2xl">
    Crafting performant web experiences from first pixel to final deploy.
  </p>
</section>

{/* Skill badge — JetBrains Mono label */}
<span className="font-mono text-xs uppercase tracking-widest text-aurora-turquoise
                 border border-aurora-teal/30 rounded px-2 py-1">
  TypeScript
</span>

{/* Code snippet inline */}
<code className="font-mono text-sm bg-space-800 text-aurora-green px-1 rounded">
  npm run dev
</code>

Build docs developers (and LLMs) love

Get started for freeTalk to us