Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/artisan-developer/llms.txt
Use this file to discover all available pages before exploring further.
All visual styling for the Artisan Developer theme lives in assets/main.css. The file is a compiled Tailwind CSS output with a set of custom utility classes appended at the end. The Tailwind section handles layout, spacing, and responsive behavior. The custom section at the bottom defines the theme’s color palette, decorative effects, and animations. When making visual changes, work in small groups rather than rewriting large sections at once — this keeps the layout system intact while letting you adjust the palette safely.
Do not remove the Google Fonts @import line at the very top of assets/main.css. It loads the Fraunces and Caveat typefaces that are central to the theme’s visual identity. Removing it will cause those fonts to fall back to generic system fonts and break the typographic character of every page.
Color palette
The theme is built around six named colors. These values appear throughout the custom CSS section and in the Tailwind utility class definitions.
| Token | Hex | Primary use |
|---|
cream | #FDFCF9 | Page background, card backgrounds |
cyan-500 (primary) | #06B6D4 | Links, highlights, borders, DyeCursor |
magenta | #D946EF | Accent, tie-dye gradient, hover effects |
violet | #8B5CF6 | Gradient steps, decorative accents |
rose | #FB7185 | Gradient steps, highlight accents |
sunset | #FB923C | Gradient steps, warm accents |
#06b6d4 in the custom section of main.css and replace it with your chosen value. Repeat the same search-and-replace approach for each color you want to change. Changing colors one token at a time makes it easier to preview the effect and revert if the contrast breaks.
Typography
The theme uses three Google Fonts families, each assigned to a Tailwind utility class. These classes are used throughout the component and page HTML.
| Font family | Utility class | Role |
|---|
| Fraunces | .font-display | Headings — h1 through h6 |
| Caveat | .font-hand | Handwritten details, year labels in the timeline |
| DM Sans | .font-sans | Body text, navigation, UI labels |
@import at the top of main.css, which pulls them from Google Fonts. The body element defaults to DM Sans. All heading elements (h1–h6) default to Fraunces, as set in the base styles section of the stylesheet.
To change a font, replace the family name in both the @import URL and the relevant CSS rule. For example, to replace Fraunces with a different display serif, update the import URL to include the new family and update the .font-display rule to reference it.
Custom CSS utilities
The following classes are defined in the custom section at the bottom of main.css. They provide the distinctive visual effects used across the theme’s components.
.tie-dye-bg
.tie-dye-bg {
background: conic-gradient(
from 0deg at 50% 50%,
#06b6d4, #8b5cf6, #d946ef,
#fb7185, #fb923c, #fde047,
#a3e635, #2dd4bf, #06b6d4
);
filter: url(#tie-dye-filter);
}
url(#tie-dye-filter) applies a distortion effect defined inline in the page HTML.
.marbled-paper
.marbled-paper {
background-color: #fdfcf9;
background-image:
radial-gradient(circle at 50% 50%, rgba(6,182,212,0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(217,70,239,0.05) 0%, transparent 40%),
radial-gradient(circle at 20% 80%, rgba(45,212,191,0.1) 0%, transparent 60%);
filter: url(#paper-texture);
}
.soap-bubble
.soap-bubble {
background: radial-gradient(
150% 150% at 30% 30%,
#fdfcf9cc, #06b6d433, #d946ef1a,
#2dd4bf33 60%, #fdfcf966
);
box-shadow:
inset 0 0 20px #fffc,
inset 10px 0 40px #d946ef4d,
inset -10px 0 40px #06b6d44d,
inset 0 -10px 40px #fb923c33,
0 4px 20px #0000000d;
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.dye-bleed-input
.dye-bleed-input:focus {
outline: none;
box-shadow:
0 0 15px 5px #06b6d466,
0 0 30px 10px #d946ef33,
0 0 45px 15px #2dd4bf1a;
border-color: transparent;
transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tie-dye-text
.tie-dye-text {
background: linear-gradient(
to right,
#06b6d4, #8b5cf6, #d946ef,
#fb7185, #fb923c, #fde047,
#a3e635, #2dd4bf
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% auto;
animation: textShine 5s linear infinite;
}
background-clip: text, making the text itself display the rainbow gradient instead of a solid color. The textShine animation scrolls the gradient continuously so the colors appear to flow through the text.
Animations
The theme defines several custom keyframe animations in main.css. Each is applied via a corresponding utility class.
| Keyframe | Class | Duration | Effect |
|---|
textShine | .tie-dye-text (built-in) | 5s | Scrolls the gradient background horizontally through text |
spin-slow | .animate-spin-slow | 20s | Continuous slow rotation, used on decorative circular elements |
float | .animate-float | 6s | Gentle vertical floating with slight rotation, used on the SoapBubble component |
wobble | .animate-wobble | 8s | Morphing border-radius between rounded states, used on circular decorative blobs |
bounce | .animate-bounce | 1s | Standard vertical bounce, from the Tailwind base |
Make color changes in small, specific groups rather than rewriting the entire stylesheet. The Tailwind utility classes handle all layout and spacing, so a palette swap only requires updating the hex values in the custom section at the bottom of main.css. Change one color token, reload the browser, confirm the result looks right, then move on to the next.