Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-moon/llms.txt
Use this file to discover all available pages before exploring further.
Full Moon’s witch/dark-fantasy aesthetic is expressed through a tightly constrained design system: four custom Tailwind color tokens built around a deep navy base and glowing teal accents, two Google Fonts that balance ornate display lettering with elegant serif body text, and a pair of CSS atmospheric effect classes that layer fog and stars beneath every page. Every visual decision flows from this system, making the aesthetic consistent across components without relying on one-off inline styles.
Color Palette
The palette is defined in tailwind.config.js and extended into Tailwind’s color scale. All four tokens are available as background, text, border, and ring utilities throughout the application.
| Token | Hex | Usage |
|---|
midnight-base | #0a0e1a | Global background color — the dark navy canvas behind all layers |
witch-teal-glow | #2dd4bf | Primary text color, main accents, interactive element highlights |
witch-teal-bright | #5eead4 | Page headings and emphasized text — a lighter teal for visual hierarchy |
witch-teal-dark | #0e3a3a | Borders, icon fills, and dark accent surfaces |
Usage Example
<div class="bg-midnight-base text-witch-teal-glow">
<h1 class="text-witch-teal-bright font-heading">The Developer</h1>
<p class="text-witch-teal-glow/80 font-body italic">I cast `useEffect()` under the full moon.</p>
</div>
Typography
Two typefaces handle all text rendering in the application, each serving a distinct typographic role.
| Tailwind Class | Font Family | Weights | Role |
|---|
font-heading | Cinzel Decorative | 400, 700, 900 | Page headings, navigation links, button labels |
font-body | Cormorant Garamond | 400, 600, 700 (+ italic variants) | Body copy, subtitles, descriptions, captions |
@import declaration at the top of main.css:
@import "https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap";
Atmospheric Effects
Two CSS utility classes produce the signature atmospheric layers that give Full Moon its immersive quality. Both are applied as fixed full-screen overlays inside the Layout component and paired with pointer-events-none so they never interfere with user interaction.
bg-fog renders a semi-transparent fog effect over the entire viewport. It is a CSS-based atmospheric effect that softens the deep navy background into a hazy, diffuse field, making the teal glow elements appear to emanate light rather than simply sit on a flat surface.
starfield renders a field of small animated point-lights that simulate a night sky. It is a CSS-based atmospheric effect applied as a fixed full-screen layer, and it scrolls independently of page content — reinforcing the sense of depth and parallax between the background and foreground layers.
<!-- Both layers in Layout — fixed, full-screen, non-interactive -->
<div class="fixed inset-0 bg-fog pointer-events-none z-0"></div>
<div class="fixed inset-0 starfield pointer-events-none z-0"></div>
Opacity Modifiers
Tailwind’s slash-based opacity modifiers are used extensively throughout the codebase to create layered depth within the single-color palette. Because the design uses only four colors, varying opacity is the primary tool for expressing hierarchy between adjacent elements.
Common patterns you will find in component classes:
| Utility | Effect |
|---|
text-witch-teal-glow/80 | Body text at 80% opacity — slightly receded from full-brightness accents |
text-witch-teal-glow/50 | Placeholder text, secondary labels, muted captions |
border-witch-teal-dark/50 | Subtle border lines at half opacity — visible but not dominant |
bg-witch-teal-glow/10 | Faint teal tint for card backgrounds, hover states, and selection highlights |
bg-witch-teal-dark/30 | Dimmed dark teal for panel backgrounds and overlay containers |
hover:bg-witch-teal-glow/20 or focus rings like focus:ring-witch-teal-glow/60 follow the same pattern without requiring custom CSS.
The custom cursor component achieves its characteristic glow-on-top blending by applying mix-blend-screen to the cursor’s light element. In screen blend mode, the cursor color is composited additively against the layers beneath it — dark backgrounds become transparent while bright teal values are amplified, making the cursor appear to radiate its own light rather than simply overlay content.