Typography in Aurora Drift: Fonts, Scales, and Styles

Aurora Drift pairs a classical serif with a clean geometric sans-serif and a crisp monospace font, creating a typographic contrast that reflects the tension between deep history and the cosmos. Display fonts are loaded from Google Fonts via a single @import at the top of assets/main.css, making swaps straightforward without touching any component files.

Font Stack Overview

Font	Role	Weights Loaded	Loading Method
Cormorant Garamond	Loaded via `@import`	300, 400, 500, 600, 700 + italic 400	Google Fonts `@import` in `assets/main.css`
Manrope	Body sans-serif	300, 400, 500, 600, 700	Google Fonts `@import` in `assets/main.css`
JetBrains Mono	Monospace / code	400 (default)	Set as CSS default for `code, kbd, samp, pre` — not in the Google Fonts `@import`

There is a discrepancy in the heading font declarations in main.css. The Google Fonts @import at the top of the file loads Cormorant Garamond, but the CSS rule applied to h1–h6 declares font-family: Instrument Serif, serif. These are two different typefaces. The compiled CSS reflects both declarations as-is — the @import loads Cormorant Garamond, and the heading rule names Instrument Serif as the applied face.

Font Details

Instrument Serif / Cormorant Garamond
Manrope
JetBrains Mono

All heading elements (h1 through h6) are styled by this global CSS rule in main.css:

h1, h2, h3, h4, h5, h6 {
  font-family: Instrument Serif, serif;
  letter-spacing: -0.025em;
  color: rgb(255 255 255);
}

The font-serif Tailwind utility also maps to Instrument Serif, serif in this project’s compiled output. You can apply it to any element explicitly:

<h1 class="font-serif tracking-tighter text-white">
  Mission Log
</h1>

Key characteristics:

High-contrast strokes with elegant serifs — ideal for large display headings
Negative letter-spacing (-0.025em) tightens character pairs at large sizes
Always renders in pure white against the navy background for maximum contrast
The Google Fonts @import loads Cormorant Garamond weights 300, 400, 500, 600, 700, and italic 400
Italic 400 is available via the italic utility class

Manrope is the default body font, loaded via the Google Fonts @import. It is available across all non-heading text via Tailwind’s font-sans utility or by default on body elements.

<p class="text-slate-200 leading-relaxed font-light">
  Exploring the boundaries of the known universe through design and code.
</p>

Key characteristics:

Geometric sans-serif with rounded terminals — approachable and highly legible at small sizes
Default body weight is font-light (300) or font-normal (400)
Used at font-medium (500) and font-semibold (600) for labels, buttons, and nav items
Works well at tracking-wider for uppercase labels and navigation text

JetBrains Mono is wired into the CSS baseline as the default for all code elements and is also exposed via the font-mono Tailwind utility:

code, kbd, samp, pre {
  font-family: JetBrains Mono, monospace;
}

You can also apply it explicitly with the Tailwind utility:

<span class="font-mono text-aurora-cyan text-sm">
  git commit -m "launch sequence initiated"
</span>

Key characteristics:

Designed for developer tooling — wide characters with clear distinction between 0, O, l, 1
Used in code snippets, terminal-style labels, and any data-display contexts
Available via the font-mono Tailwind utility class
Not included in the Google Fonts @import; relies on the font being available in the environment or loaded separately

Text Size Scale

The following sizes appear in main.css generated from the project’s Tailwind usage. Sizes follow standard Tailwind defaults.

Class	Font Size	Line Height	Typical Use in Aurora Drift
`text-xs`	0.75rem	1rem	Metadata, timestamps, fine print
`text-sm`	0.875rem	1.25rem	Nav labels, tag chips, captions
`text-lg`	1.125rem	1.75rem	Lead paragraphs, card subtitles
`text-xl`	1.25rem	1.75rem	Section subheadings, featured labels
`text-2xl`	1.5rem	2rem	Card headings, testimonial names
`text-3xl`	1.875rem	2.25rem	Section headings (mobile)
`text-4xl`	2.25rem	2.5rem	Section headings (desktop)
`text-5xl`	3rem	1 (none)	Page sub-hero headings
`text-6xl`	3.75rem	1 (none)	Hero heading (tablet — `md:text-6xl`)
`text-7xl`	4.5rem	1 (none)	Hero heading (desktop — `md:text-7xl`)
`text-8xl`	6rem	1 (none)	Hero heading (large — `md:text-8xl`)
`text-9xl`	8rem	1 (none)	Hero heading (xl — `lg:text-9xl`)

Letter Spacing

tracking-tighter

−0.05em — Applied to large display headings where tight kerning improves visual weight and legibility at headline sizes. Used on h1 hero text alongside text-7xl through text-9xl.

tracking-wider

+0.05em — Applied to navigation links, uppercase labels, and small category tags. The extra spacing opens up condensed text at small sizes for readability.

Selection Color

Text selection across the entire site uses an aurora-teal tint defined in main.css:

body *::selection {
  background-color: #14b8a64d;           /* aurora-teal at ~30% opacity */
  color: rgb(204 251 241);               /* teal-50 */
}

This means highlighted text glows with a subtle teal wash — consistent with the aurora aesthetic and far more characterful than the default browser selection blue.

Usage Examples

Hero Heading
Body Paragraph
Nav Label
Monospace Tag

The main hero heading uses the serif font, the largest responsive size, tight tracking, and white color — all applied with Tailwind utilities:

<h1 className="font-serif font-light tracking-tighter text-white
               text-5xl md:text-7xl lg:text-9xl leading-tight">
  Drift Between{" "}
  <span className="text-transparent bg-clip-text
                   bg-gradient-to-r from-aurora-turquoise
                   via-aurora-cyan to-aurora-magenta">
    the Stars
  </span>
</h1>

Body copy uses slate-200 for default text, relaxed line-height, and light weight for comfortable reading against the dark background:

<p className="text-slate-200 text-lg leading-relaxed font-light max-w-2xl">
  A creative developer navigating the intersection of design and
  engineering — building experiences that feel as vast as the cosmos.
</p>

Navigation items use the wider tracking and slate-400 inactive / white active pattern:

<a className="text-sm font-medium tracking-wider uppercase
              text-slate-400 hover:text-white transition-colors">
  Projects
</a>

Inline code labels or technical tags use the mono stack with cyan accent color:

<span className="font-mono text-xs text-aurora-cyan
                 bg-aurora-teal/10 px-2 py-1 rounded">
  React
</span>

Swapping Fonts

To swap any of the display fonts, open assets/main.css and update the Google Fonts @import URL at the very top of the file. For example, to replace Cormorant Garamond with Playfair Display, change the family=Cormorant+Garamond segment to family=Playfair+Display. You will also need to update the font-family: Instrument Serif, serif rule on h1–h6 to reference your chosen font name. No component files need to change — all heading elements inherit from the single global rule.

Getting Started

Core Components

Animation System

Theming & Styling

Pages

Customization

Typography in Aurora Drift: Fonts, Scales, and Styles

Font Stack Overview

Font Details

Text Size Scale

Letter Spacing

tracking-tighter

tracking-wider

Selection Color

Usage Examples

Swapping Fonts

Build docs developers (and LLMs) love

Getting Started

Core Components

Animation System

Theming & Styling

Pages

Customization

Documentation Index

​Font Stack Overview

​Font Details

​Text Size Scale

​Letter Spacing

tracking-tighter

tracking-wider

​Selection Color

​Usage Examples

​Swapping Fonts

Build docs developers (and LLMs) love

Font Stack Overview

Font Details

Text Size Scale

Letter Spacing

Selection Color

Usage Examples

Swapping Fonts