Skip to main content

Documentation Index

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

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

Spell Index uses a two-font pairing that balances mystical atmosphere with everyday readability. Cinzel — a geometric all-caps serif — carries all headings, labels, and decorative text, evoking the look of engraved stone or illuminated manuscript titles. Inter — a clean humanist sans-serif — handles body copy, descriptions, and prose, keeping longer reading comfortable and screen-friendly. Both are loaded from Google Fonts and exposed as Tailwind utility classes.

​
Google Fonts Import

Both families are imported at the very top of main.css, before any Tailwind directives: 
@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600&display=swap";
display=swap ensures text renders immediately in a fallback font while the web fonts load, preventing invisible text during page paint.
If you self-host fonts or move to a bundler-level font loader (e.g., next/font), remove this @import line. The font-family stacks (Cinzel, serif and Inter, sans-serif) are compiled into main.css — if rebuilding from source you would update them in tailwind.config.js, but that file is not present in this repository’s build output.

​
Font Families

Cinzel

Family: Cinzel, serifTailwind class: font-cinzelWeights loaded: 400, 600, 700, 900Character: All-caps geometric serif. Inspired by classical Roman inscriptions. Best at large sizes where its proportions can breathe.Use for: Page titles, section headings, navigation labels, skill names, card titles, button labels.

Inter

Family: Inter, sans-serifTailwind class: font-interWeights loaded: 300, 400, 500, 600Character: Neutral, highly legible humanist sans. Optimized for screen rendering at small-to-medium sizes.Use for: Body paragraphs, descriptions, metadata, form inputs, timestamps, tooltip text.
The body element is set to font-inter by default, so Inter is the fallback for any element that doesn’t explicitly set a font family. You must always add font-cinzel explicitly to elements that need the serif. 
/* From main.css */
body {
  font-family: Inter, sans-serif;
  color: rgb(232 220 199);   /* parchment */
  background-color: rgb(10 10 26); /* midnight */
}

​
Available Weight Classes

​
Cinzel weights

Cinzel is loaded at weights 400, 600, 700, and 900. The compiled CSS bundle includes font-semibold (600) and font-bold (700) as the two weight utilities generated from source. Weights 400 (default) and 900 are present in the loaded font file and render correctly, but no separate Tailwind class was emitted for them in the build — apply them via inline style or a custom class if needed:
Tailwind ClassWeightCinzel Use Case
(default / no class)400Navigation items, page numbers, light labels
font-semibold600Sub-headings, card titles
font-bold700Primary page headings (h1, h2)
// Weight examples in practice
<h1 className="font-cinzel font-bold text-4xl text-amber">
  Dark Arts
</h1>

<h2 className="font-cinzel font-semibold text-2xl text-parchment">
  Resurrecting a Legacy Codebase
</h2>

<span className="font-cinzel text-sm text-teal">
  Page 1
</span>

​
Inter weights

Inter is loaded at weights 300, 400, 500, and 600. The compiled CSS bundle emits font-semibold (600) and font-bold (700) as weight utilities. Weights 300, 400, and 500 render from the loaded font file at their default values — no separate Tailwind weight class was emitted for them in this build:
Tailwind ClassWeightInter Use Case
(default)400Standard body copy, paragraphs
font-semibold600Data labels, tag chips, strong UI labels
<p className="font-inter text-parchment/80 leading-relaxed">
  Weaving logic into digital spells. Specializing in front-end alchemy.
</p>

<span className="font-inter font-semibold text-sm text-teal">
  Mystic Tech Ltd
</span>

<p className="font-inter text-xs text-parchment/50">
  2021 - Present
</p>

​
Letter-Spacing Utilities

Cinzel especially benefits from generous letter-spacing. The following tracking utilities appear in the compiled CSS and are used across the app:
Tailwind ClassCSS ValueUsage
tracking-tighter-0.05emDecorative large display text where default spacing feels loose
tracking-wider0.05emSub-headings, relaxed label spacing
tracking-widest0.1emuppercase subtitle lines — the most common Cinzel + Inter pattern
tracking-[0.2em]0.2em (arbitrary)Hero subtitles that need extra air, e.g. "The Developer Known As"
The most repeated typographic pattern across every page is an uppercase Inter subtitle with tracking-widest, rendered in teal/60: 
// Standard page subtitle pattern — appears on every route
<p className="font-inter text-sm text-teal/60 tracking-widest uppercase">
  Turn the pages of the grimoire
</p>

​
Heading vs Body Patterns

​
Primary page heading

Every route uses a Cinzel h1 in amber at text-4xl / md:text-5xl: 
<h1 className="font-cinzel text-4xl md:text-5xl text-amber mb-4">
  Day Job Spells
</h1>

​
Card / section heading

Secondary headings drop to text-2xl or text-xl and use parchment or amber depending on the surface: 
{/* On a dark ink surface */}
<h2 className="font-cinzel text-2xl text-parchment mb-2">
  The 100ms Prophecy
</h2>

{/* On a light parchment surface (SpellBook) */}
<h2 className="font-cinzel text-4xl text-ink font-bold">
  Front-End Alchemy
</h2>

​
Skill / list label

Cinzel bold is used for data labels like skill names and page-turn controls: 
<span className="font-cinzel font-bold text-ink">
  React / Next.js
</span>

​
Body paragraph

Inter at text-lg or text-sm with leading-relaxed is the standard prose pattern: 
<p className="font-inter text-lg text-parchment/80 leading-relaxed">
  Transforming caffeine into code. I specialize in taking raw, chaotic
  requirements and distilling them into polished, user-centric experiences.
</p>

​
Italic quote / caption

Italic Inter appears for incantation text and pull quotes: 
<p className="font-inter italic text-ink/60 mt-2">
  "Visually manifest that which is unseen."
</p>

<p className="font-inter italic text-amber/60 text-sm">
  Status: Caffeinated and dangerous.
</p>

​
Metadata / timestamp

Small Inter text in a dimmed parchment or teal provides supporting context without competing with headings: 
<p className="font-inter text-xs text-parchment/50 mb-4">
  Sep 15, 2023
</p>

<span className="font-inter text-sm text-teal">
  Ethereal Agency
</span>

​
Font in the SpellBook Component

The SpellBook component flips between a dark (ink) outer cover and a light (parchment) inner page. Typography adapts accordingly — Cinzel flips from text-amber outside to text-ink inside, maintaining contrast on both surfaces: 
{/* SpellBook page — light parchment surface */}
<h2 className="font-cinzel text-4xl text-ink font-bold text-center">
  {page.title}
</h2>
<p className="font-inter italic text-ink/60 mt-2">
  "{page.incantation}"
</p>

{/* Skill label inside SpellBook */}
<div className="flex justify-between font-cinzel text-ink mb-2">
  <span className="font-bold">{skill.name}</span>
  <span>{skill.level}%</span>
</div>
When placing Cinzel text on the parchment surface, use text-ink or text-ink/60 rather than text-amber — the warm amber on warm parchment produces low contrast. Reserve text-amber for dark backgrounds where it glows against the deep purples.

Build docs developers (and LLMs) love

Get started for freeTalk to us