Skip to main content

Documentation Index

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

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

Digital Alchemy has a dark mystical aesthetic built around deep blacks, warm parchment tones, and glowing turquoise accents. The visual language evokes candlelight, ancient manuscripts, and arcane ritual — executed through a Tailwind CSS design token system and two carefully chosen typefaces.

​
Color palette

All six colors are compiled as custom Tailwind tokens into assets/main.css and used throughout the codebase via utility classes like text-turquoise, bg-midnight, and border-teal.
TokenHexUsage
ink#050505Page background, darkest surfaces, scrollbar track
parchment#E8E0CEPrimary body text, headings, light-surface text
turquoise#40E0D0Primary accent — glows, active borders, interactive hover states, scrollbar thumb hover, text selection highlight
midnight#0F0C29Card backgrounds, modal overlays, panel backgrounds
amber#FFBF00Candle flame glow, warm decorative accents
teal#008080Secondary borders, crystal ball accents, scrollbar thumb base

​
Color in context

/* Body default — ink background, parchment text */
body {
  background-color: #050505; /* bg-ink */
  color: #E8E0CE;            /* text-parchment */
}

/* Turquoise glow on selection */
::selection {
  background-color: #40E0D033; /* turquoise/20 */
  color: #40E0D0;              /* text-turquoise */
}

/* Scrollbar */
::-webkit-scrollbar-thumb       { background-color: #0080804D; } /* teal/30 */
::-webkit-scrollbar-thumb:hover { background-color: #40E0D099; } /* turquoise/60 */

​
Typography

Two Google Fonts are loaded globally via @import in assets/main.css: 
@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500&display=swap";
RoleFontWeightsNotes
Headings (h1–h6)Cormorant Garamond (serif)400, 500, 600, 700 + italicletter-spacing: 0.025em applied globally via Tailwind config
Body / UIInter (sans-serif)300, 400, 500Default font on <html> and <body>
Heading styles are applied globally: 
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.025em;
}

​
Custom utility classes

Three custom utility classes are defined in assets/main.css and used throughout the component library:

.text-glow

Applies a turquoise drop-shadow text glow effect:
.text-glow {
  text-shadow: 0 0 10px rgba(64, 224, 208, 0.5),
               0 0 20px rgba(64, 224, 208, 0.3);
}
Used on headings, logo text, and accent labels.

.small-caps

Renders text in small-capitals:
.small-caps {
  font-variant: small-caps;
}
Used on nav labels, section subtitles, and footer text.

.hide-cursor

Hides the default cursor on all child elements:
.hide-cursor * {
  cursor: none !important;
}
Applied to <body> so the custom CursorWisp component replaces the OS cursor site-wide.

​
Spacing and layout conventions

The fixed header and footer create occupied zones at the top and bottom of the viewport. All page-level containers account for these zones with consistent padding:
ConventionTailwind classValuePurpose
Top paddingpt-328remClears the fixed header
Bottom paddingpb-246remClears the fixed footer
Narrow contentmax-w-5xl mx-auto64rem wideArticle / detail pages
Wide contentmax-w-6xl mx-auto72rem wide`Grid / gallery pages
Horizontal gutterpx-61.5remStandard page padding

​
Scrollbar styling

The scrollbar is styled globally to match the dark mystical theme: 
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background-color: #050505; }          /* bg-ink */
::-webkit-scrollbar-thumb  { background-color: #0080804D;          /* teal/30 */
                              border-radius: 9999px;
                              transition: background-color 0.15s; }
::-webkit-scrollbar-thumb:hover { background-color: #40E0D099; }   /* turquoise/60 */

​
Global selection highlight

Text selection is styled to maintain the turquoise accent: 
::selection {
  background-color: #40E0D033; /* turquoise at 20% opacity */
  color: #40E0D0;
}
This ensures that even when users highlight text, the selection indicator stays on-brand rather than using the default blue.

Build docs developers (and LLMs) love

Get started for freeTalk to us