Skip to main content

Documentation Index

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

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

A Master Artificer uses a named design-token system for its color palette. Every color in the theme is referenced by a semantic class name — grimoire-dark, grimoire-glow, grimoire-paper, and so on — rather than by a raw hex value scattered throughout the stylesheet. That means you can understand what a color does from its name alone, and targeted edits to assets/main.css update every instance of that token at once without hunting through the entire file.

​
Color tokens

The theme defines six grimoire color tokens. Each token appears as a utility class in the pattern bg-, text-, or border- followed by the token name.
TokenHexRGBPrimary use
grimoire-dark#0A2A2Ergb(10 42 46)Deep teal-black page background; the base surface for every page
grimoire-dark-lighter#113A40rgb(17 58 64)Slightly lighter background for cards, panels, and elevated surfaces
grimoire-glow#2DD4BFrgb(45 212 191)Teal accent used for links, active borders, the cursor, and hover highlights
grimoire-paper#F4ECD8rgb(244 236 216)Warm parchment color for body text on dark backgrounds
grimoire-ink#1A3C40rgb(26 60 64)Dark ink for text displayed on light surfaces; also used for subtle borders
grimoire-accent#9D7A96rgb(157 122 150)Secondary accent in purple-mauve tones for decorative details and secondary labels

​
CSS class pattern

Each token generates a full set of utility classes for background color, text color, and border color. Opacity variants are written with a / suffix: 
/* Background */
.bg-grimoire-dark           { background-color: rgb(10 42 46); }
.bg-grimoire-dark-lighter   { background-color: rgb(17 58 64); }
.bg-grimoire-glow           { background-color: rgb(45 212 191); }
.bg-grimoire-paper          { background-color: rgb(244 236 216); }

/* Text */
.text-grimoire-glow         { color: rgb(45 212 191); }
.text-grimoire-paper        { color: rgb(244 236 216); }
.text-grimoire-accent       { color: rgb(157 122 150); }

/* Border */
.border-grimoire-glow       { border-color: rgb(45 212 191); }
.border-grimoire-glow\/30   { border-color: #2dd4bf4d; }  /* 30% opacity */
.border-grimoire-ink        { border-color: rgb(26 60 64); }
Opacity variants follow the same naming pattern. For example, .bg-grimoire-glow/20 applies the glow color at 20% opacity, and .text-grimoire-paper/70 applies parchment text at 70% opacity.

​
Editing colors

All visual changes should start in assets/main.css. This is the primary stylesheet for the static theme — it contains every layout rule, spacing value, responsive behavior, and the full set of grimoire utility classes. Use targeted edits rather than rewriting the whole stylesheet. To change a token color, search for its rgb() definition in the file and update the three channel values. Every utility class generated from that token will update at once. For example, to change grimoire-glow from teal to a warm amber: 
/* Find the existing grimoire-glow background rule */
.bg-grimoire-glow {
    --tw-bg-opacity: 1;
    background-color: rgb(45 212 191 / var(--tw-bg-opacity, 1));
}

/* Replace the channel values */
.bg-grimoire-glow {
    --tw-bg-opacity: 1;
    background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
You will need to update the same token value in its bg-, text-, border-, and opacity-variant classes throughout the file.
Test color contrast after every change before publishing. The combination of grimoire-paper (#F4ECD8) text on the grimoire-dark (#0A2A2E) background passes WCAG AA contrast requirements. If you change either of these tokens, verify that body text remains readable at small sizes and that interactive elements like links and buttons still have sufficient contrast against their backgrounds. Readable content is more important than visual style.

​
Fonts

The theme loads three typefaces from Google Fonts. Each font has a distinct role in the visual hierarchy.
FontRoleCSS class
Pirata OneDisplay / headings — decorative serif used for page titles and section headersfont-title
EB GaramondBody serif — used for all body text, paragraphs, and prose content(default body font)
JetBrains MonoMonospace — used for code snippets, labels, and technical contentfont-mono

​
Google Fonts import

The @import line at the very top of assets/main.css loads all three families in a single request: 
@import "https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Pirata+One&display=swap";
  • EB Garamond is loaded for both regular and italic styles, with the full weight range from 400 to 800.
  • JetBrains Mono is loaded for both regular and italic styles, with weights from 100 to 800.
  • Pirata One is a display font with a single weight, so no range is specified.

​
CSS font classes

The three CSS classes that apply these fonts are defined in assets/main.css: 
.font-title {
    font-family: Pirata One, cursive;
}

/* Body — applied to the <body> element directly */
body {
    font-family: EB Garamond, serif;
}

/* Code and monospace elements */
code, kbd, samp, pre {
    font-family: JetBrains Mono, monospace;
}

.font-mono {
    font-family: JetBrains Mono, monospace;
}

​
Swapping fonts

To replace a font, make two changes:
  1. Update the Google Fonts import URL — visit fonts.google.com, select the new family and weights you need, then copy the updated @import URL and replace the existing one at the top of assets/main.css.
  2. Update the font-family declaration — find the CSS rule that references the old font name and replace it with the new family name and its generic fallback.
For example, to replace Pirata One with Cinzel as the display font: 
/* Old */
.font-title {
    font-family: Pirata One, cursive;
}

/* New */
.font-title {
    font-family: Cinzel, serif;
}
Update the @import line at the same time so the new family is actually loaded.
Make color and font changes after your content is already in place. Text length and image sizes can significantly affect how a palette or typeface reads in context. A font that looks elegant on a placeholder sentence might feel overpowering at the lengths of a real project description. Seeing real content first makes it easier to judge whether a visual change actually improves the design.

Build docs developers (and LLMs) love

Get started for freeTalk to us