Skip to main content

Documentation Index

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

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

The entire visual identity of Welcome, Mortals lives in assets/main.css. The dark purple backdrop, Pumpkin Orange headings, Parchment content surfaces, and Lawn Green accents are all defined there, and the documented palette is the right starting point for any color change. Before touching a single value, search for the hex codes listed below — knowing where each color appears prevents broken patches.

​
Color Palette

The five palette colors carry the full spooky personality of the theme. Use them as your reference before making any changes.
Color NameHexPrimary Use
Haunted Purple#2A1B3DPrimary page background
Pumpkin Orange#FF7518Headings and Halloween accents
Parchment#F4F1E8Readable content surfaces and body text
Lawn Green#7CFC00Bright accent details and hover states
White#FFFFFFHigh-contrast readable text

​
How to Find and Change a Color

1

Open assets/main.css in your editor

All layout, color, and typography rules live in this single file. Do not edit the files inside components/ to change colors — those components inherit their visual treatment from the stylesheet.
2

Search for the hex value you want to change

Use your editor’s find tool to search for the exact hex code, for example #FF7518. The stylesheet references each palette color in multiple places — utility classes, hover states, focus rings, and other declarations. Review every result before changing any of them.
3

Make one targeted replacement at a time

Change one occurrence at a time and verify the result in a browser before moving to the next. Replacing a value globally can affect hover states, borders, or focus rings that use the same hex but should stay visually distinct.
4

Check contrast after each change

Save the file, reload the site in a browser, and verify that text remains readable on all background combinations. Pay special attention to orange and green text on dark purple.
Do not rewrite or reorganize the entire stylesheet. assets/main.css is a pre-compiled, minified file. Wholesale replacement will break spacing, layout, interactive states, and responsive behavior across all eleven pages. Work surgically — find the specific declaration you need to change and update only that value.

​
Experimenting with a Color Override

The cleanest way to experiment with a color swap is to append an override block to the bottom of assets/main.css rather than editing values scattered through the file. Adding a new rule at the end takes precedence over earlier declarations: 
/* Custom palette override — add at the very end of assets/main.css */
/* Replace the hex value below with your chosen color */
.your-target-element {
  color: #E8630A; /* example: shift Pumpkin Orange slightly darker */
}
Search for the original hex value first to identify the exact selector you need to override. This approach keeps the original declarations intact so you can revert by deleting the override block.
If you want a different seasonal feel — cooler blues for winter, warm crimson for a different Halloween variation — create a copy of assets/main.css and rename it (for example, assets/main-winter.css). Keep the original file unchanged. Swap the <link> reference in each HTML file to test the alternate palette. This preserves the original layout and lets you flip between versions cleanly.

​
Orange and Green Accents: Emphasis Only

Pumpkin Orange (#FF7518) and Lawn Green (#7CFC00) are high-saturation colors that create strong contrast against the Haunted Purple background — which is exactly what makes them effective for headings, labels, and interactive callouts. That same intensity makes them fatiguing when used for long passages of body text.
Keep orange and green as emphasis colors, not body-text colors. Use Parchment (#F4F1E8) or White (#FFFFFF) for readable paragraph text. Before publishing any customized version, run a contrast check on every orange-or-green-on-dark combination you have used.
The prefers-reduced-motion rule is already present in assets/main.css and collapses animations for visitors who have that preference enabled. Keep this rule in place when editing the stylesheet — it is part of the theme’s accessibility baseline alongside color contrast.

​
Fonts

Font families are declared in assets/main.css — search for font-family declarations to find and update them. The stylesheet assigns typefaces to heading elements and body text separately, so you can swap one without affecting the other. To change a typeface:
  1. Open assets/main.css in your editor.
  2. Search for font-family to locate every declaration where a typeface is explicitly set.
  3. Replace the font name in the relevant declaration with your chosen typeface.
  4. If loading a web font, add or update the corresponding @import or <link> in the HTML files.
  5. Save and reload the site to confirm the new font renders correctly.
Search for all font-family occurrences before making substitutions — there may be additional declarations inside utility classes lower in the stylesheet. Replacing only the first occurrence can leave some elements on the page using a different typeface.

​
Preserving Spacing and Layout

The spacing values in assets/main.css are inlined throughout the file rather than driven by a single variable. Changing a padding, margin, gap, or line-height value in one place does not update every component that uses the same spacing scale. To preserve layout stability:
  • Change only color, font-family, and font-size values unless you are intentionally redesigning a section.
  • Do not delete rules that look unused — some apply only at specific viewport widths inside @media blocks lower in the file.
  • After any edit, test the homepage and at least two additional pages at both desktop and mobile widths to confirm nothing has shifted.
  • Searched for every occurrence of the original hex values before replacing them
  • Confirmed body text uses Parchment or White, not orange or green
  • Ran a contrast check on all custom orange and green accent uses
  • Tested on both desktop and a narrow mobile viewport
  • Verified the prefers-reduced-motion block is still present in the stylesheet
  • Confirmed heading font and body font still load correctly (check browser network tab)
  • Reviewed all eleven pages to confirm layout has not shifted

Build docs developers (and LLMs) love

Get started for freeTalk to us