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’s type system pairs three complementary typefaces to reinforce the space-tech aesthetic: a clean humanist sans-serif for readable body copy, a programmer’s monospace for terminal-flavored labels and code snippets, and a modern geometric sans for bold display headings. All three are loaded in a single Google Fonts import at the top of assets/main.css, so no additional setup is needed beyond the existing build.

​
Font Reference

FamilyFallbackTailwind ClassWeightsPrimary Use
Intersans-serif(default body — no class needed)300, 400, 500, 600Body text, UI labels, form inputs
JetBrains Monomonospacefont-mono400, 700Code snippets, terminal labels, TeletypeText
Space Grotesksans-seriffont-heading400, 600, 700Page headings, section titles, nav brand label
The Google Fonts @import that loads all three families lives at the very top of assets/main.css: 
/* assets/main.css — line 1 */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;600;700&display=swap";
The Tailwind config maps the two non-default families to custom classes: 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: ['Space Grotesk', 'sans-serif'],
        mono:    ['JetBrains Mono', 'monospace'],
      },
    },
  },
}
Inter is set as the global default directly on body in the compiled CSS (font-family: Inter, sans-serif), and Space Grotesk is applied to all heading elements via the rule h1, h2, h3, h4, h5, h6 { font-family: Space Grotesk, sans-serif; } — so headings pick up the display font automatically without a utility class.

​
Type Scale Examples

The following patterns are drawn directly from the project’s page components and show how the three fonts work together across different hierarchy levels. 
// ── Hero display heading ─────────────────────────────────────────
// Space Grotesk bold at fluid responsive sizes, tight tracking
<h1 className="text-5xl md:text-7xl lg:text-9xl font-heading font-bold tracking-tighter">
  Cosmic Developer.
</h1>

// ── Section heading ──────────────────────────────────────────────
// Space Grotesk bold with aurora-teal accent color
<h2 className="text-3xl font-heading font-bold text-aurora-teal">
  Current Trajectory
</h2>

// ── Monospace eyebrow label (TeletypeText wrapper) ───────────────
// JetBrains Mono at small size, widest tracking, uppercase
<div className="font-mono text-aurora-teal mb-2 text-sm tracking-widest uppercase">
  <TeletypeText text="System Online // Signal Acquired" />
</div>

// ── Body paragraph ───────────────────────────────────────────────
// Inter default, star-dim color, relaxed leading for readability
<p className="text-star-dim leading-relaxed text-lg">
  Crafting digital experiences across the cosmos...
</p>

// ── Sub-label / metadata text ────────────────────────────────────
// Inter light weight, muted opacity
<span className="text-xs font-light text-star-dim/80 tracking-wider uppercase">
  2024 — Present
</span>
The font-heading class applies Space Grotesk explicitly. Because the base CSS rule already sets Space Grotesk on all h1–h6 elements, you only need font-heading when applying the display typeface to a non-heading element such as a <div>, <span>, or navigation link.

​
Letter-Spacing Classes

Three tracking-* utilities are used across the site, each tied to a distinct typographic context:
Classletter-spacing valueWhere used
tracking-tighter−0.05emHero and large display headings (<h1>)
tracking-tight−0.025emMedium-size headings and card titles
tracking-wider+0.05emSub-labels, dates, metadata
tracking-widest+0.1emMonospace eyebrow labels, font-mono tags
The general rule: headings compress letter-spacing as size increases (tight at large scale reads better), while small uppercase labels expand spacing to aid legibility.

​
Changing Fonts

To swap any of the three families, make two coordinated edits: Step 1 — Update the Google Fonts import in assets/main.css: 
/* Replace the existing @import with your chosen families */
@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&family=Fira+Code:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap";
Step 2 — Update tailwind.config.js to point the class names at the new families: 
// tailwind.config.js
fontFamily: {
  heading: ['Syne', 'sans-serif'],       // replaces Space Grotesk
  mono:    ['Fira Code', 'monospace'],   // replaces JetBrains Mono
  sans:    ['DM Sans', 'sans-serif'],    // overrides Inter as body default
},
If you override the sans key, Tailwind will use the new family as the base font stack sitewide — including inside buttons, inputs, and form elements. Double-check that the replacement font includes all the weights you reference (300, 400, 500, 600) or some UI elements may fall back to the system font.

​
Line Height

Body copy uses leading-relaxed (line-height: 1.625) throughout the project, which keeps long paragraphs comfortable at the text-lg size. Navigation links and button labels omit an explicit leading class, inheriting the Tailwind base of 1.5. Display headings use no leading override — at text-9xl the default line-height: 1 (leading-none) is appropriate for tight stacking.

Build docs developers (and LLMs) love

Get started for freeTalk to us