Theming: Colors, Fonts, and CSS Utilities in dev.void

dev.void extends Tailwind CSS’s default theme with a set of space-themed color tokens, three Google Fonts families, and four hand-crafted utility classes. Everything lives in assets/main.css — the compiled Tailwind output — and is available across every component as standard Tailwind class names. This page documents each token and utility so you know exactly which classes to reach for when customising the portfolio.

Color tokens

The palette is built around deep space backgrounds and bioluminescent aurora highlights. Custom colors are registered in the Tailwind config and compiled into main.css as standard utility classes (e.g. bg-aurora-teal, text-aurora-mint, border-space-900/40).

Aurora accent colors

Token	Hex value	Tailwind equivalent	Usage
`aurora-teal`	`#0d9488`	`teal-600`	Primary interactive color — borders, glows, focus rings, CTA buttons
`aurora-mint`	`#34d399`	`emerald-400`	Hover highlights, skill bar fills, success states
`aurora-pink`	`#ec4899`	`pink-500`	Accent contrast — gradient stops, tag labels, decorative lines
`aurora-light`	`#ccfbf1`	`teal-100`	High-contrast text on dark backgrounds; text selection highlight

Space background colors

Token	Hex value	Approximate Tailwind	Usage
`space-950`	`#010308`	darker than `gray-950`	Root background — the “void” itself
`space-900`	`#030712`	`gray-950`	Card and panel backgrounds
`space-800`	`#080f1e`	between `gray-900` and `slate-900`	Secondary panel backgrounds, timeline tracks
`space-700`	`#111827`	`gray-900`	Subtle dividers, inactive borders

Tailwind’s opacity modifier syntax works with all custom tokens. For example, bg-space-900/40 produces background-color: #03071266 — a 40 % opaque version of space-900 used heavily in the glass-panel pattern.

Background gradient utility

A composite gradient class is also compiled into main.css:

.bg-aurora-gradient {
  background-image: linear-gradient(
    120deg,
    rgba(6, 182, 212, 0.4),     /* cyan */
    rgba(13, 148, 136, 0.2) 40%,  /* aurora-teal */
    rgba(236, 72, 153, 0.15) 60%, /* aurora-pink */
    rgba(52, 211, 153, 0.3)       /* aurora-mint */
  );
}

This is applied to the hero blob and decorative background layers to simulate an aurora borealis effect.

Font families

All three families are loaded via a single @import at the top of main.css:

assets/main.css

@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100..800&display=swap";

Tailwind class	Font family	Weights loaded	Role in the UI
`font-sans`	Space Grotesk	300, 400, 500, 600, 700	Primary typeface — all headings (`h1`–`h6`) and body copy
`font-serif`	Cormorant Garamond	400, 600 (regular + italic)	Italic accent text — page subtitles, pull quotes, decorative labels
`font-mono`	JetBrains Mono	100–800 (variable)	All monospace contexts — section labels, status readouts, code, `<code>` and `<pre>` elements

font-sans (Space Grotesk) is set as the Tailwind html base font in main.css, so it applies to the entire document by default. font-serif and font-mono must be applied explicitly via their utility classes.

Custom utility classes

Four utility classes are defined in the @layer utilities section of main.css (below the Tailwind output). They encapsulate the most-repeated visual patterns in the design system.

`.text-glow`

Applies a soft cyan luminescence to text, simulating a neon or bioluminescent glow against dark backgrounds.

.text-glow {
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

Used on: hero headlines, active navigation items, hover states on card titles.
Group-hover variant available: group-hover:text-glow triggers the glow when a parent element with .group is hovered.

`.glass-panel`

The frosted-glass card pattern used throughout the portfolio. Combines a translucent dark background, a thin aurora-teal border at 20 % opacity, and a backdrop-blur-md blur to create the illusion of depth over the starfield.

.glass-panel {
  border-width: 1px;
  border-color: rgba(13, 148, 136, 0.2); /* aurora-teal/20 */
  background-color: rgba(3, 7, 18, 0.4); /* space-900/40  */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

Used on: project cards, skill panels, case-study containers, the contact form, and the navigation bar.

`.box-glow` (hover)

A subtle green-teal outer glow applied on hover to interactive cards and buttons. Defined as a hover variant — always written as hover:box-glow in markup.

.hover\:box-glow:hover {
  box-shadow: 0 0 30px rgba(13, 148, 136, 0.15);
}

Used on: project cards, timeline entries, testimonial blocks — any card that needs a tactile hover response without a distracting border color change.

`.aurora-filter`

Applies an SVG displacement filter (#aurora-turbulence) to an element, warping it with fractal-noise turbulence to simulate the shimmering, organic movement of an aurora.

.aurora-filter {
  filter: url(#aurora-turbulence);
}

The filter itself is defined as an inline SVG in main.js and injected into the DOM at startup:

assets/main.js

<svg className="hidden">
  <defs>
    <filter id="aurora-turbulence">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.015"
        numOctaves="3"
        result="noise"
      />
      <feDisplacementMap
        in="SourceGraphic"
        in2="noise"
        scale="30"
        xChannelSelector="R"
        yChannelSelector="G"
      />
    </filter>
  </defs>
</svg>

When prefers-reduced-motion: reduce is detected, main.css overrides .aurora-filter with filter: none, disabling the displacement effect for users who have requested reduced animation. All Framer Motion transition durations are also forced to 0.01ms under this media query.

Applying the design system

Background

Start every page container with bg-space-950 and text-slate-200 for the default void + readable-text combination.

Cards and panels

Apply .glass-panel and hover:box-glow to any elevated surface. Add rounded-xl or rounded-2xl to match the existing card radius.

Typography hierarchy

Use font-sans for headings with text-slate-100, font-serif italic for subtitles with text-slate-400, and font-mono with tracking-widest uppercase for section labels and status indicators.

Accent color

Use text-aurora-teal or text-aurora-mint for interactive labels and icon fills. Use aurora-pink sparingly as a high-contrast complement in gradients and tag badges.

Glow effects

Add text-glow to headlines that need extra luminosity, and group-hover:text-glow inside a .group wrapper for card-hover effects.

Get Started

Architecture

Theming: Colors, Fonts, and CSS Utilities in dev.void

Color tokens

Aurora accent colors

Space background colors

Background gradient utility

Font families

Custom utility classes

`.text-glow`

`.glass-panel`

`.box-glow` (hover)

`.aurora-filter`

Applying the design system

Build docs developers (and LLMs) love

Get Started

Architecture

Documentation Index

​Color tokens

​Aurora accent colors

​Space background colors

​Background gradient utility

​Font families

​Custom utility classes

​.text-glow

​.glass-panel

​.box-glow (hover)

​.aurora-filter

​Applying the design system

Build docs developers (and LLMs) love

Color tokens

Aurora accent colors

Space background colors

Background gradient utility

Font families

Custom utility classes

`.text-glow`

`.glass-panel`

`.box-glow` (hover)

`.aurora-filter`

Applying the design system