Skip to main content

Documentation Index

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

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

v-doom uses a hand-crafted color system defined in Tailwind CSS utility classes and custom CSS, all rooted in a deep midnight aesthetic. The palette, typography, and special-effect utilities are compiled into assets/main.css — editing that file is how you retheme the deployed site.

​
Color Palette

Four named colors underpin every element of the design:
NameCSS classHexUsage
Midnight.bg-midnight#0B0A1FPage background, card fills, overlay layers
Violet.text-violet / .border-violet#6B3FA0Primary accent — nav indicators, border highlights, glow rings
Amber.text-amber / .border-amber#F5B25BSecondary accent — headings, taglines, cauldron glow, CTA buttons
Bone.text-bone#EDE6D3Default body text and foreground copy
Each color is registered as a custom Tailwind token. Opacity variants like .text-violet\/30 and .bg-midnight\/50 are generated automatically and used extensively for semi-transparent borders, overlays, and layered depth effects.

​
Typography

v-doom loads three typefaces from Google Fonts. The import is the very first line of assets/main.css: 
/* assets/main.css — Google Fonts import */
@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;700
  &family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400
  &family=Inter:wght@300;400;500;600
  &display=swap";
The three families map to Tailwind utility classes used throughout the template:

Cormorant Garamond

Class: font-serifUsed for all headings (h1–h6), the hero name, section titles, and display text. Loaded in regular, semi-bold, bold, and italic weights.

Inter

Class: font-sansUsed for body copy, UI labels, nav links, card descriptions, and all functional text. Loaded in light, regular, medium, and semi-bold.

Caveat

Class: font-accentA handwriting-style face used for decorative subheadings, the tagline, section subtitles, and the contact form’s cast button. Creates the handwritten-grimoire feel.
The body element defaults to Inter, and h1–h6 elements globally override to Cormorant Garamond — both rules live in the compiled CSS: 
/* assets/main.css — font defaults */
body {
  font-family: Inter, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Cormorant Garamond, serif;
}
To swap a typeface, replace the family name in the @import URL and update the two font-stack rules above.

​
Custom Utility Classes

v-doom defines three bespoke CSS utility classes at the end of assets/main.css that are not part of standard Tailwind. They are applied directly via className props throughout the JSX.

​
.text-glow

An amber text-shadow that makes headings and hero text appear to emit warm light: 
/* assets/main.css */
.text-glow {
  text-shadow: 0 0 10px rgba(245, 178, 91, 0.5);
}
Applied to the hero <h1> on the home page (VALERIUS DOOM). Combine with text-bone or text-amber text for maximum effect.

​
.text-glow-violet

A cooler, wider violet text-shadow — used for the italic “The workings of” superscript in the hero: 
/* assets/main.css */
.text-glow-violet {
  text-shadow: 0 0 15px rgba(107, 63, 160, 0.6);
}
The larger spread radius (15px vs 10px) and higher opacity create a more diffuse halo than the amber variant.

​
.glass-panel

A glassmorphism card surface used on Cauldron ingredient buttons and other floating panels: 
/* assets/main.css */
.glass-panel {
  border-width: 1px;
  border-color: #6b3fa04d;           /* violet/30 */
  background-color: #0b0a1f66;       /* midnight/40 */
  box-shadow: 0 0 15px rgba(107, 63, 160, 0.1);
  backdrop-filter: blur(12px);       /* backdrop-blur-md */
}
The combination of a semi-transparent midnight background, a faint violet border, a subtle violet outer shadow, and a 12 px backdrop blur creates the layered depth effect seen on skill ingredient cards.
The .text-glow and .text-glow-violet effects are applied to h1 elements on the home and section pages. Removing them — or setting text-shadow: none — gives a sharper, cleaner look if you prefer a less dramatic, more typographic style.

​
Scrollbar Styling

v-doom replaces the browser’s default scrollbar with a custom one that matches the palette. These rules live at the very bottom of assets/main.css, just after the utility class definitions: 
/* assets/main.css — custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0b0a1f;   /* midnight */
}

::-webkit-scrollbar-thumb {
  background: #6b3fa0;   /* violet */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f5b25b;   /* amber on hover */
}
The hover state that transitions the thumb from violet to amber is a subtle nod to the template’s accent hierarchy. To disable the custom scrollbar entirely, remove all four rule blocks.

​
Replacing Colors

To retheme v-doom with a different palette, use your editor’s find-and-replace on assets/main.css to swap hex values globally. The safest approach is to replace each hex value one color at a time:
1

Identify your new hex values

Decide on replacements for all four palette colors. Choose values that maintain sufficient contrast — midnight-level background, one light neutral for text, and two accent colors with good saturation at low opacity.
2

Replace the background color

Find-and-replace #0b0a1f (and its CSS variable form rgb(11 10 31) where it appears in Tailwind’s opacity utilities) with your new background hex.
3

Replace the primary accent (violet)

Find-and-replace #6b3fa0 (and rgb(107 63 160) in opacity variants) with your chosen primary accent. This updates nav indicators, glass-panel borders, glow shadows, and the violet text class in one pass.
4

Replace the secondary accent (amber)

Find-and-replace #f5b25b (and rgb(245 178 91)) with your secondary accent. This updates headings, taglines, the cauldron glow, button borders, and the scrollbar hover state.
5

Replace the foreground text color (bone)

Find-and-replace #ede6d3 (and rgb(237 230 211)) with your text color. This updates body copy, placeholder text, and icon fills.
6

Verify the custom utilities

After bulk replacement, manually inspect the three custom utility class blocks (.text-glow, .text-glow-violet, .glass-panel) at the end of the file — they use inline hex values in rgba() calls that may need tweaking to match your new palette’s feel.
Tailwind compiles utility classes like .text-violet\/30 by encoding the opacity as a CSS custom property alongside the base RGB value. When replacing colors, search for both the plain hex (#6b3fa0) and the rgb() equivalent (rgb(107 63 160)) to ensure all opacity variants are updated.

Build docs developers (and LLMs) love

Get started for freeTalk to us