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 defines its entire color system through a set of named tokens that were registered in Tailwind CSS at build time. Because the repo you received is the compiled static output, the token values now live as inline hex strings throughout assets/main.css. Changing a color means finding and replacing the relevant hex value in that file — no build step, no config files, just a text editor.

​
Current palette

The seven tokens below cover every chromatic surface in the template. The space tokens define the deep-dark background system, while the aurora and cosmic tokens supply the luminous accent colors used for glows, gradients, and interactive states.
TokenValuePrimary Use
aurora-turquoise#5eead4Active nav, focus rings, primary CTAs
aurora-teal#14b8a6Borders, scrollbar thumb, secondary accents
aurora-green#34d399Aurora layer 3 gradient, success badges
cosmic-violet#8b5cf6Star layer 3 glow, aurora layer 2 gradient
cosmic-magenta#ec4899Hover borders, aurora layer 2 from stop
space-900#020617Page background, scrollbar track
space-800#060b1fCard and panel backgrounds

​
Editing color values

All color values are compiled as hex strings inside assets/main.css. Open the file in any text editor, then find and replace the hex you want to change. For example, to swap the primary accent from aurora-turquoise to an electric blue: 
/* Find every occurrence of #5eead4 in assets/main.css and replace with your color */
/* Before: */
color: rgb(94 234 212 / var(--tw-text-opacity, 1));  /* aurora-turquoise */
border-color: rgb(94 234 212 / var(--tw-border-opacity, 1));

/* After swapping to #38bdf8: */
color: rgb(56 189 248 / var(--tw-text-opacity, 1));
border-color: rgb(56 189 248 / var(--tw-border-opacity, 1));
Because Tailwind compiles both the hex shorthand and the rgb(R G B) form, you will need to replace both formats for each token. Use your editor’s “Replace All” function with the hex value (e.g. #5eead4) to catch the shorthand occurrences, then search for the RGB triplet (94 234 212) to catch the rgb() form.

​
Changing the primary accent color

The primary accent (aurora-turquoise, #5eead4) appears in active navigation indicators, focus rings, CTA button text, the .text-glow hover effect, and the scrollbar hover state. Replacing it is a two-step process.
1

Replace the hex in assets/main.css

Open assets/main.css and run a global find-and-replace for all occurrences of #5eead4 and the RGB triplet 94 234 212. Replace both with the values for your new brand color.
/* assets/main.css — example: swap aurora-turquoise (#5eead4) to electric blue (#38bdf8) */

/* Replace shorthand occurrences, e.g.: */
.border-aurora-turquoise\/50 { border-color: #38bdf880; }

/* Replace rgb() occurrences, e.g.: */
color: rgb(56 189 248 / var(--tw-text-opacity, 1));
2

Update .box-glow in assets/main.css

The .box-glow utility is defined near the bottom of assets/main.css and uses the aurora-teal hex (#14b8a6) for its shadow color. If you are also changing the teal accent, update this declaration to match.
/* assets/main.css */
.box-glow {
  box-shadow: 0 0 30px #38bdf833; /* new accent at ~20% opacity */
}

​
Updating CSS custom utilities

Two custom utility classes in assets/main.css contain values derived from the color system. If you change the background (space-800) or accent (aurora-teal) tokens, sync them here as well. 
/* assets/main.css */
/* border: 1px white/10  |  bg: space-800 at 40% opacity  |  backdrop blur */
.glass-panel {
  border-width: 1px;
  border-color: #ffffff1a;         /* white/10 — adjust for panel border tint */
  background-color: #060b1f66;     /* space-800 at ~40% opacity              */
  backdrop-filter: blur(12px);
}
Keep space-900 (#020617) very dark — ideally pure near-black with a blue tint. The three aurora gradient layers use mix-blend-mode: screen, which blends luminous color on top of whatever is beneath them. A light background will wash out the aurora effect entirely and make the gradients appear muted or invisible.
When changing space-900, search assets/main.css for both #020617 and the RGB form 2 6 23. The body { background-color } rule and the ::-webkit-scrollbar-track { background-color } rule both reference this color directly in the compiled output and must be updated manually.

Build docs developers (and LLMs) love

Get started for freeTalk to us