Skip to main content

Documentation Index

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

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

Telemetry ships with a carefully crafted dark-space aesthetic built on Tailwind CSS custom tokens. Every color, font, and visual effect is defined in a consistent design system — meaning you can systematically replace the palette to create a completely different look while keeping the same component structure.

​
Color System

Telemetry defines its palette as CSS custom properties on :root, directly compiled into assets/main.css. These tokens are then referenced throughout the Tailwind utility classes in every component. The full set of space-themed color tokens is:
TokenHexUsage
space-black#04060fPage background, scrollbar track
midnight-navy#0a0f24Navigation bg, card backgrounds, overlays
aurora-teal#14b8a6Primary accents, borders, timeline lines, scrollbar thumb
aurora-cyan#22d3eeHighlights, cursor dot glow, text-glow shadow, active nav pill
aurora-violet#8b5cf6Secondary accents, Skills page cluster, status bar
aurora-magenta#f0abfcOrbital ring border, Writing page hero
sunset-orange#fb923cAlert/status indicators, priority badges
To change any of these colors, update the theme.extend.colors section of your tailwind.config.js before building. Each token maps directly to the CSS variable set in :root: 
/* Compiled output in assets/main.css — defined in tailwind.config.js */
:root {
  --space-black: #04060f;
  --midnight-navy: #0a0f24;
  --aurora-teal: #14b8a6;
  --aurora-cyan: #22d3ee;
  --aurora-violet: #8b5cf6;
  --aurora-magenta: #f0abfc;
  --sunset-orange: #fb923c;
}

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        'space-black':    '#04060f',
        'midnight-navy':  '#0a0f24',
        'aurora-teal':    '#14b8a6',
        'aurora-cyan':    '#22d3ee',
        'aurora-violet':  '#8b5cf6',
        'aurora-magenta': '#f0abfc',
        'sunset-orange':  '#fb923c',
      },
    },
  },
}
After editing the config, run npm run build to regenerate the compiled assets.

​
Typography

Telemetry imports three font families from Google Fonts, declared at the top of main.css: 
@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=JetBrains+Mono:wght@100..800&family=Manrope:wght@200..800&display=swap";
Each Tailwind utility maps to a specific role in the UI:
UtilityFamilyRole
font-monoJetBrains MonoCode-style labels, nav items, status badges, decorative mono text
font-sansManropeBody text, headings, the OBSERVATORY wordmark
font-serif-italicCormorant Garamond (300 italic)Stylized name display — the text-glow heading on each page
The font-serif-italic utility is a custom class defined in the CSS layer: 
.font-serif-italic {
  font-family: Cormorant Garamond, serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.025em;
}
To swap fonts, update theme.extend.fontFamily in the Tailwind config and replace the @import URL with your chosen Google Fonts or self-hosted URL.

​
Space-Specific Visual Effects

Beyond the color tokens, Telemetry defines several custom CSS utilities that drive its visual signature: text-glow — Applies a two-layer text-shadow in aurora-cyan to make headings softly radiate: 
.text-glow {
  text-shadow:
    0 0 10px rgba(34, 211, 238, 0.5),
    0 0 20px rgba(34, 211, 238, 0.3);
}
text-glow-violet — The same pattern in aurora-violet, used on About and Skills page headings: 
.text-glow-violet {
  text-shadow:
    0 0 10px rgba(139, 92, 246, 0.5),
    0 0 20px rgba(139, 92, 246, 0.3);
}
box-glow — Adds outer and inset glow on cards and panels using aurora-teal: 
.box-glow {
  box-shadow:
    0 0 15px #14b8a633,
    inset 0 0 20px #14b8a61a;
}
mix-blend-screen — Applied to the aurora blob <div> elements so their colors add additively against the dark background rather than overlaying it. Removing this causes the blobs to appear as solid colored patches instead of luminous glows. blur-[100px] — Gaussian blur applied to the aurora blobs container. This is the single property that turns three colored rounded-full divs into soft atmospheric light. animate-[aurora-flow_100s_linear_infinite] — A custom keyframe animation used on the SVG starfield layers in AuroraBackground.js: 
@keyframes aurora-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

​
Changing the Primary Glow Color

The glow effects reference aurora-cyan directly in the CSS values. To switch your accent glow to a different color — for example, a blue or green theme — update both the Tailwind token and the hardcoded rgba values in the custom classes: 
/* Original — aurora-cyan glow */
.text-glow {
  text-shadow:
    0 0 10px rgba(34, 211, 238, 0.5),
    0 0 20px rgba(34, 211, 238, 0.3);
}

/* Blue accent example */
.text-glow {
  text-shadow:
    0 0 10px rgba(96, 165, 250, 0.5),  /* blue-400 */
    0 0 20px rgba(96, 165, 250, 0.3);
}
Apply the same change to .box-glow and the shadow utilities on the cursor dot (shadow-[0_0_10px_#22d3ee,0_0_20px_#14b8a6]) to keep the accent color consistent across the whole site.

​
Dark Theme

Telemetry is dark-theme-only by design. The space-black background (#04060f) is applied globally to body in the compiled CSS, and every component assumes this dark baseline for its contrast ratios, glow effects, and mix-blend-screen blending.
Telemetry ships as a dark-only site. The aurora visual effects depend entirely on a near-black background — the mix-blend-screen blend mode and text-glow shadows only produce the intended luminous effect against very dark colors. Enabling a light mode would require replacing all color tokens, removing blend modes, and reworking the glow utilities throughout every component file.

Build docs developers (and LLMs) love

Get started for freeTalk to us