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 tightly controlled six-color palette that evokes a dark, candlelit grimoire. All colors are registered as Tailwind theme extensions, so every standard Tailwind utility — backgrounds, text, borders, rings, gradients — works with them out of the box. The palette deliberately avoids neutral grays; instead it uses saturated darks and warm accent tones so the interface always feels alive and intentional.

​
Color Token Reference

TokenHexTailwind PrefixPrimary Purpose
midnight#0a0a1amidnightApp-wide background (<body>, page wrappers)
ink#1a0a2einkCard and surface backgrounds, SpellBook page fill
void#05050avoidDeepest shadows, scrollbar track, structural dividers
parchment#e8dcc7parchmentPrimary body text, light surface fill (SpellBook pages)
amber#f5c45aamberPrimary accent — headings, active nav, skill bars, CTA
teal#3dd6c4tealSecondary accent — subtitles, hover states, form focus rings

​
Dark background trio

midnight, ink, and void form a layered depth system. The app shell sits on midnight; cards and panels rise to ink; deepest structural chrome (scrollbar, dividers, candle wicks) reaches void. 
// Page wrapper — base background layer
<div className="min-h-screen bg-midnight text-parchment">

  {/* Card surface — one step lighter */}
  <div className="bg-ink border border-teal/20 rounded-xl p-6">

    {/* Deepest accent — border / divider */}
    <div className="border-t border-void" />

  </div>
</div>

​
Accent pair

amber and teal are the two accent colors. Use amber for the primary focal element (page titles, active indicators, progress fills) and teal for secondary metadata, hover feedback, and supporting decoration. 
// Page title in amber, subtitle in teal — standard pattern across all pages
<h1 className="font-cinzel text-4xl text-amber">Conjurings</h1>
<p className="font-inter text-sm text-teal/60 tracking-widest uppercase">
  Artifacts brought into the material plane
</p>

​
Opacity Modifier Pattern

Because these tokens are standard Tailwind color extensions, Tailwind’s opacity modifier syntax (color/opacity) works across every utility. The compiled CSS confirms all of the following variants are present:

​
Amber opacity variants

<div className="bg-amber/20">  {/* subtle amber tint — skill bar backgrounds */}
<div className="bg-amber/30">  {/* CandleTimeline glow halo */}
<span className="text-amber/40">{/* dimmed amber — decorative text */}
<span className="text-amber/60">{/* muted accent — status notes */}
<div className="border-amber/20">{/* hairline amber border */}
<div className="border-amber/30">{/* standard card amber border */}
<div className="border-amber/40">{/* emphasized amber border */}
<div className="border-amber/60">{/* strong amber border — active states */}

​
Teal opacity variants

<div className="bg-teal/10">   {/* barely-visible teal wash */}
<div className="bg-teal/20">   {/* soft teal highlight */}
<div className="bg-teal/50">   {/* half-opacity teal fill */}
<div className="border-teal/10">{/* ghost border */}
<div className="border-teal/20">{/* resting card border */}
<div className="border-teal/30">{/* navigation and button borders */}
<div className="border-teal/40">{/* hovered border state */}
<div className="border-teal/50">{/* semi-opaque border */}
<span className="text-teal/40">{/* dimmed teal — decorative */}
<span className="text-teal/60">{/* teal subtitle — used site-wide */}
<span className="text-teal/80">{/* near-full teal — hero subtitles */}

​
Parchment opacity variants

<p className="text-parchment/50">{/* timestamps, metadata */}
<p className="text-parchment/60">{/* supporting body copy */}
<p className="text-parchment/70">{/* comfortable reading text */}
<p className="text-parchment/80">{/* primary body copy */}
<p className="text-parchment/90">{/* near-full — emphatic prose */}

​
Midnight and ink opacity variants

<div className="bg-midnight/80">  {/* nav backdrop — partially transparent */}
<div className="bg-midnight/95">  {/* near-solid overlay */}
<div className="bg-ink/10">       {/* translucent panel wash */}
<div className="bg-ink/30">       {/* article card glaze */}
<div className="bg-ink/50">       {/* form input backgrounds */}
<div className="bg-ink/80">       {/* modal overlays */}
Tailwind generates opacity modifier classes on-demand from source. Only the variants listed above are confirmed present in the compiled main.css bundle. If rebuilding from source, any /0–/100 modifier will be generated automatically as long as you use the class in your JSX files — Tailwind’s content scanner picks them up at build time.

​
Gradient Utility Classes

Two custom utility classes — .text-gradient-amber and .text-gradient-teal — produce background-clipped gradient text. They are defined as component utilities in main.css and are fully Tailwind-aware.

​
.text-gradient-amber

Flows from #f5c45a (amber) to #fb923c (orange), left to right. Use for the most visually prominent headings or hero callouts. 
.text-gradient-amber {
  background-image: linear-gradient(to right, #f5c45a, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<h1 className="font-cinzel text-5xl text-gradient-amber">
  Spell Index
</h1>

​
.text-gradient-teal

Flows from #3dd6c4 (teal) to #60a5fa (blue), left to right. Use for secondary decorative headings or interactive highlights. 
.text-gradient-teal {
  background-image: linear-gradient(to right, #3dd6c4, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<span className="font-inter text-lg text-gradient-teal">
  Open to new conjurings
</span>
Background-clip text requires color: transparent to be visible. The utility classes set this automatically, but if you try to combine them with a Tailwind text-{color} utility on the same element, the explicit color will win and the gradient will disappear.

​
Selection & Scrollbar Styling

​
Text selection

The top-level app wrapper applies the following selection styles globally: 
// In the root App component
<div className="selection:bg-teal/30 selection:text-amber">
  {/* all text selections inside show teal highlight with amber text */}
</div>
This means whenever a visitor highlights text anywhere in the portfolio, the selection background renders as teal at 30% opacity and the selected text color shifts to solid amber.

​
Custom scrollbar

The scrollbar is styled entirely with the color token system — 6px wide, with the track using void and the thumb using ink backed by a teal/30 border: 
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background-color: #05050a; }       /* void */
::-webkit-scrollbar-thumb  {
  border-radius: 9999px;
  border: 1px solid #3dd6c44d;                                   /* teal/30 */
  background-color: #1a0a2e;                                     /* ink */
}
::-webkit-scrollbar-thumb:hover { background-color: #3dd6c499; } /* teal/60 */

​
Customizing the Palette

The six tokens are defined as Tailwind theme extensions. This repository contains only the compiled Vite build output — main.css and main.js — and does not include tailwind.config.js or any source files. If you are rebuilding from source, you would register these tokens under theme.extend.colors in tailwind.config.js: 
// tailwind.config.js (not present in this repo — shown for reference)
module.exports = {
  theme: {
    extend: {
      colors: {
        midnight: '#0a0a1a',   // ← swap for a cooler or warmer dark
        ink:      '#1a0a2e',
        void:     '#05050a',
        parchment:'#e8dcc7',   // ← swap for a colder white or cream
        amber:    '#f5c45a',   // ← swap for a different accent hue
        teal:     '#3dd6c4',
      },
    },
  },
}
After changing a token value, rebuild the CSS with npm run build (or vite build) so that every compiled opacity variant and gradient is regenerated to match.
Only main.css is committed to the repository — the tailwind.config.js source file is not. The config above is reconstructed from the compiled CSS output and reflects exactly how the tokens behave at runtime.

Build docs developers (and LLMs) love

Get started for freeTalk to us