Skip to main content

Documentation Index

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

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

Nightshade’s typographic system pairs three Google Fonts families — each chosen for a distinct register of the witch-portfolio voice. Cormorant Unicase lends formal arcane authority to headings, Lora gives body text a literary warmth, and JetBrains Mono grounds technical labels in terminal precision. Together they form a hierarchy that is immediately legible while remaining atmospherically dark.

​
Google Fonts Import

All three families are loaded from a single Google Fonts request at the top of assets/main.css. The display=swap parameter ensures text renders in a system fallback font while the custom fonts download, preventing an invisible flash of content. 
@import "https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@400;600;700&family=JetBrains+Mono:wght@400;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap";
The @import in assets/main.css is written without a url() wrapper — @import"https://..." — which is valid CSS but easy to miss when reading minified output. Both syntaxes are equivalent in all modern browsers.

​
Font Families

​
Cormorant Unicase — Headings

Cormorant Unicase is applied to all heading elements. Its unicase letterforms — where uppercase and lowercase glyphs share the same cap-height — give section titles a carved-into-stone quality that suits the arcane theme. Weights 400, 600, and 700 are loaded; the base heading weight is 400 with a slight positive letter-spacing. 
h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Unicase", serif;
  font-weight: 400;
  letter-spacing: 0.025em;
}
Use .font-heading to apply this family to any element outside of h1–h6 — for example navigation labels, drop-caps, or decorative pull-quotes.

​
Lora — Body Text

Lora is the default body font set on the body element. It is a contemporary serif with strong stroke contrast, well-suited to long-form reading on dark backgrounds. Five variant axes are loaded: three upright weights (400, 500, 600) and two italic weights (400, 500) for emphasis within running text. 
body {
  font-family: Lora, serif;
  cursor: none;
}
The cursor: none declaration on body suppresses the native OS pointer across the entire document. This is intentional — Nightshade renders a custom FamiliarCursor component that replaces the system cursor with a spring-physics familiar sprite. If you remove or override cursor: none, the native cursor will render on top of the custom one. Use .font-body on any element where you want to explicitly restore Lora — for example inside a card whose parent has had .font-code applied.

​
JetBrains Mono — Code and Labels

JetBrains Mono is applied to code and pre elements and is used for status badges, category chips, and incantation-tooltip labels throughout the portfolio. Both weights (400 regular and 700 bold) are loaded. The base font-size is reduced to 0.875rem (text-sm) to maintain visual balance with the larger Lora body text. 
code, pre {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
Use .font-code to apply monospace styling to any non-code element.

​
Font-Family Utility Classes

The three compiled utility classes mirror the semantic assignments above and can override the inherited family on any element.
ClassFont FamilyFallback
.font-headingCormorant Unicaseserif
.font-bodyLoraserif
.font-codeJetBrains Monomonospace

​
Type Scale

The following sizes are used across the UI. All sizes are Tailwind utility classes compiled from the default scale unless marked as arbitrary.
SizeTailwind ClassTypical Use
10px.text-[10px]Incantation tooltips, micro labels
12px / xs.text-xsCode labels, metadata, category chips
14px / sm.text-smSubtitles, captions, code baseline
18px / lg.text-lgBody text, descriptions, timeline entries
24px / 2xl.text-2xlSection subheadings
48px / 5xl.text-5xlPage titles
72px / 7xl.md:text-7xlHero headline (medium breakpoint and up)
The md:text-7xl class is responsive — on viewports narrower than 768px the hero headline falls back to a smaller compiled size to remain within the viewport.

​
Letter Spacing

Most heading text uses .tracking-widest (letter-spacing: 0.1em) to widen the Cormorant Unicase letterforms into the open dark space of the layout, reinforcing the arcane aesthetic. Secondary text — navigation labels and metadata — uses .tracking-wider (0.05em) for a subtler expansion. 
/* .tracking-widest — headings and first-line styling */
letter-spacing: 0.1em;

/* .tracking-wider — nav labels, category text */
letter-spacing: 0.05em;

​
Drop-Cap Styling

Blog post body text uses Tailwind’s first-letter: and first-line: variant prefixes to create a traditional illuminated-manuscript drop-cap effect. The first letter floats left, scales up to text-6xl, switches to the heading font in amber, and the first line of the paragraph is set in all-caps with widest tracking. 
/* Applied as Tailwind variant classes on the prose wrapper */
.first-letter:float-left
.first-letter:pr-4
.first-letter:text-6xl
.first-letter:font-heading
.first-letter:text-witch-amber
.first-letter:leading-[0.8]
.first-line:uppercase
.first-line:tracking-widest
The leading-[0.8] arbitrary value pulls the oversized first letter up tight against the cap-line of the second line, preventing a gap that would break the column rhythm.

Build docs developers (and LLMs) love

Get started for freeTalk to us