Skip to main content

Documentation Index

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

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

Cosmic Developer ships with eight purpose-built color tokens that span three semantic layers: deep backgrounds that evoke the void of space, neutral text colors scaled from bright to muted, and four vivid aurora-inspired accent colors. Every token is registered as a Tailwind extension, so you get the full suite of utility classes — bg-*, text-*, border-*, opacity modifiers, and arbitrary-value shadow strings — out of the box across every page and component.

​
Color Reference

The full palette, including the Tailwind utility prefix used most commonly for each token, is listed below.
TokenHexPrimary Tailwind ClassRole
cosmic-black#04050dbg-cosmic-blackDeepest background — <body> default
cosmic-navy#0a1535bg-cosmic-navyGlass panel background fill
star-white#f5fbfftext-star-whitePrimary / heading text
star-dim#8b9bb4text-star-dimSecondary / muted body text
aurora-teal#3dd6c4text-aurora-tealPrimary accent — borders, headings, glows
aurora-magenta#d96cf0text-aurora-magentaSecondary accent — articles, about sections
aurora-green#7af0a8text-aurora-greenTertiary accent — skills, testimonials
aurora-violet#6b4fe0text-aurora-violetQuaternary accent — work history, about

​
Registering the Tokens in Tailwind

All eight tokens live in the extend.colors block of tailwind.config.js. To change any color, update only the hex value here — every utility class generated from that token will update automatically across the entire site. 
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        'cosmic-black':   '#04050d',
        'cosmic-navy':    '#0a1535',
        'star-white':     '#f5fbff',
        'star-dim':       '#8b9bb4',
        'aurora-teal':    '#3dd6c4',
        'aurora-magenta': '#d96cf0',
        'aurora-green':   '#7af0a8',
        'aurora-violet':  '#6b4fe0',
      },
    },
  },
  plugins: [],
}
To rebrand to a warm palette, try swapping aurora-teal → a burnt-orange like #f07d3d and aurora-magenta → a golden-yellow like #f0c43d. Because shadows and borders reference the hex value directly in arbitrary classes (e.g. shadow-[0_0_15px_#3dd6c4]), you will also need to do a find-and-replace on the raw hex string inside component files.

​
Usage Patterns

The primary accent aurora-teal is applied consistently across three CSS properties: text color for headings and labels, border color for card outlines, and arbitrary box-shadow values for glow effects. This three-way consistency is what ties the visual language together. 
// Primary accent — section headings
<h2 className="text-aurora-teal">Current Trajectory</h2>

// Card border with opacity modifier
<div className="border border-aurora-teal/40 rounded-xl p-6">
  ...
</div>

// Neon glow shadow using raw hex (arbitrary value)
<div className="shadow-[0_0_15px_#3dd6c4]">
  ...
</div>

// Larger atmospheric glow on hero elements
<div className="shadow-[0_0_50px_rgba(61,214,196,0.5)]">
  ...
</div>
The currentColor trick is used in several places to keep glow shadows synchronized with whatever text color is active on the element, avoiding the need to hard-code the hex twice: 
<div className="text-aurora-green shadow-[0_0_15px_currentColor]">
  ...
</div>

​
The glass-panel Utility Class

The glass-panel class is a custom component defined at the bottom of assets/main.css. It combines a semi-transparent cosmic-navy fill, an aurora-teal/20 border, and a 12 px backdrop blur to create the frosted-glass card aesthetic used throughout the portfolio. 
/* assets/main.css */
.glass-panel {
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: #3dd6c433;        /* aurora-teal/20  */
  background-color: #0a153566;    /* cosmic-navy/40  */
  backdrop-filter: blur(12px);
}
To vary the intensity of the effect, override the individual properties with Tailwind utilities on the same element — Tailwind utilities applied after the class take precedence via cascade: 
// Lighter panel — less blur, more transparent fill
<div className="glass-panel bg-cosmic-navy/20 backdrop-blur-sm">...</div>

// Heavier panel — more opaque, stronger blur
<div className="glass-panel bg-cosmic-navy/70 backdrop-blur-xl">...</div>

// Swap accent border to magenta for a secondary section
<div className="glass-panel border-aurora-magenta/30">...</div>

​
Opacity Modifiers

Tailwind’s slash-opacity syntax is used extensively throughout the project to layer colors at reduced opacity without needing separate token definitions. The following opacity levels appear in the compiled CSS:
ModifierExample classComputed alpha
/10bg-aurora-teal/1010 %
/20border-aurora-teal/2020 %
/30bg-aurora-teal/3030 %
/40border-aurora-teal/4040 %
/50border-aurora-teal/5050 %
/70text-aurora-magenta/7070 %
/80text-star-dim/8080 %
/90text-star-white/9090 %
Because these are generated at build time from Tailwind’s JIT engine, any fraction you write in a class name will be compiled — you are not limited to the values listed here.
Text selection styling — the compiled CSS overrides the browser’s default blue selection highlight so that selected text displays cosmic-black text on an aurora-teal background sitewide. This is set on body *::selection in main.css. Update the background-color there if you change aurora-teal.

​
Per-Page Accent Color Convention

All four aurora colors are active across the site, but each page leans toward a dominant accent to aid visual wayfinding:
  • aurora-teal — Home hero, Projects orbital rings, navigation active states
  • aurora-magenta — Articles list, About page gradient
  • aurora-green — Skills section, Testimonials cards
  • aurora-violet — Work history timeline, About detail panels
Keeping this mapping consistent means visitors build an unconscious color association with each section, making the portfolio feel cohesive even across very different page layouts.

Build docs developers (and LLMs) love

Get started for freeTalk to us