Skip to main content

Documentation Index

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

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

The Craft’s visual identity is built on a tightly controlled set of design tokens — named colors, typographic families, and handcrafted CSS utilities — all defined inside assets/main.css. Because the project ships a pre-compiled Tailwind v3 output (there is no separate tailwind.config.js in the built bundle), every color and style value lives directly in that single file. Understanding these tokens is the first step to reshaping the grimoire into something distinctly your own.

​
Color Palettes

The Craft uses five semantic color families. Each family maps to one or more concrete hex values that appear throughout the compiled CSS as both named Tailwind tokens (e.g. bg-midnight, text-spell) and raw hex literals inside custom class definitions.
FamilyToken nameHex valueRole
midnightmidnight#0a0d14Primary background — the deep void
midnightmidnight-darker#05070aDarker variant — scrollbar track, borders
midnightmidnight-lighter#0d1117Lighter variant — glass panel background base
spellspell#2dd4bfPrimary accent — teal magical glow
parchmentparchment#e8dcc4Light text color and parchment surfaces
bloodblood#7f1d1dRed accent — borders, hover states, danger
parchment surfacebg-[#e8dcc4]#e8dcc4Inline Tailwind arbitrary value — same hex as parchment token, used for surface backgrounds
bg-[#e8dcc4] and bg-parchment resolve to the same color (rgb(232 220 196)). The arbitrary-value form appears in components that predate the named token being added, and both are safe to use interchangeably.
All five families also appear with Tailwind opacity modifiers such as /10, /30, /50, and /80. For example, bg-spell/30 compiles to background-color: #2dd4bf4d — a 30 % translucent teal.

​
Custom CSS Utility Classes

Beyond the Tailwind token system, main.css defines six hand-crafted utility classes that produce effects Tailwind’s core utilities cannot express on their own. These classes are used directly in JSX alongside standard Tailwind class names.

​
.parchment-texture

Simulates aged parchment paper on light-background surfaces such as modals and testimonial cards. 
.parchment-texture {
  background-color: #e8dcc4;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='noiseFilter'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(#noiseFilter)' opacity='0.4'/></svg>");
  color: #1a1a1a;
  box-shadow: inset 0 0 40px rgba(139,69,19,0.15), 0 10px 30px rgba(0,0,0,0.75);
}
The SVG feTurbulence filter with type="fractalNoise" at baseFrequency="0.8" and opacity="0.4" generates an organic grain pattern. The inset box-shadow adds a warm amber vignette (#8b4513 at 15 % opacity) that darkens the edges like a centuries-old manuscript page.

​
.text-glow

Applies a layered teal luminescence to text — used on headings, accent labels, and interactive elements to give the impression of arcane energy. 
.text-glow {
  text-shadow:
    0 0 10px rgba(45, 212, 191, 0.6),
    0 0 20px rgba(45, 212, 191, 0.3);
}
Two shadow layers at 60 % and 30 % opacity create a soft halo that fades naturally. The wider 20px spread forms the outer aura while the tighter 10px layer keeps the core bright.

​
.glass-panel

Creates a frosted-glass dark panel — the primary surface for cards, drawers, and overlaid UI elements. 
.glass-panel {
  background: rgba(13, 17, 23, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(45, 212, 191, 0.15);
}
The midnight-lighter base (#0d1117) at 70 % opacity lets background content bleed through, while the 12px backdrop blur softens it into an ethereal haze. The 15 % teal border provides just enough definition without breaking the dark atmosphere.
backdrop-filter is not supported in all browsers. The -webkit-backdrop-filter prefix is included for Safari. In unsupported environments the panel will still render correctly — it will simply appear as a solid dark surface without the blur.

​
.animate-spin-slow

A full 360° rotation that completes once every 20 seconds — used on the scrying mirror ring and other ambient circular elements. 
.animate-spin-slow {
  animation: spin 20s linear infinite;
}
/* spin keyframe: to { transform: rotate(360deg) } */
The linear easing and infinite repeat produce a smooth, hypnotic rotation with no acceleration or deceleration.

​
.animate-pulse-glow

Cycles a teal drop-shadow filter between a brighter glow and a dimmer glow, creating a slow “breathing” effect on SVG and icon elements. 
.animate-pulse-glow {
  animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 10px #2dd4bf);
  }
  50% {
    opacity: 0.6;
    filter: drop-shadow(0 0 4px #14b8a6);
  }
}
At the midpoint the shadow shrinks from 10px to 4px and the color shifts from bright teal (#2dd4bf) to a deeper teal (#14b8a6), simulating the dimming of a magical aura between pulses.

​
.animate-flicker

A three-stage keyframe that oscillates opacity and scale, replicating the irregular motion of a candle flame or torch light. 
.animate-flicker {
  animation: flicker 3s infinite alternate;
}

@keyframes flicker {
  0%, 100% { opacity: 1;   transform: scale(1); }
  25%, 75%  { opacity: 0.9; transform: scale(1.02); }
  50%       { opacity: 0.8; transform: scale(0.98); }
}
The alternate direction causes the animation to reverse on each cycle, preventing the abrupt jump back to frame zero that would make the flicker look mechanical. The scale oscillates between 0.98 and 1.02 — a subtle 4 % range that reads as organic movement without being distracting.

​
Changing the Primary Accent Color

The spell teal (#2dd4bf) is the most pervasive token in The Craft. It appears in borders, text glows, drop shadows, keyframe filters, box shadows, and as a named Tailwind token (spell) throughout every component.
1

Choose your replacement hex value

Pick your new accent color. For best results with the glow and glass effects, choose a saturated mid-brightness color — very dark or very desaturated values will make the glow effects invisible.
2

Find and replace the raw hex literals

In assets/main.css, search for #2dd4bf and replace every instance with your new hex value. There are occurrences inside .text-glow, .glass-panel, the pulseGlow keyframe, box-shadow utilities, and the selection highlight rules.
3

Replace the secondary teal shade

The pulseGlow keyframe also references #14b8a6 (a darker teal used at the 50 % keyframe). Replace this with a darker variant of your new accent — approximately 20–30 % darker works well.
4

Update Tailwind token references

Search for the string spell in your component JSX files and update any hardcoded references if needed. Because this is a compiled output, the named spell token is already baked into main.css — you do not need a separate config file.
If you are replacing teal with a warm color (amber, gold, rose), also update the inset shadow color in .parchment-texture from #8b4513 to a complementary warm tone so the parchment vignette doesn’t clash with the new accent palette.

Build docs developers (and LLMs) love

Get started for freeTalk to us