Skip to main content

Documentation Index

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

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

witch-dev’s visual identity is built on a tight palette of deep cosmic purples and acid greens — the “coven” color system. Every token is registered in the Tailwind config’s theme.extend.colors map and compiled into the CSS bundle, so you get full IntelliSense and zero unused styles at build time.

​
Color Tokens

The full token reference. All hex values are resolved from the compiled assets/main.css output.
TokenHexUsage
coven-black#050308Root <body> background — the deepest layer
coven-dark#0a0612Sidebar background, glass panel tint
coven-purple-400#c026d3Magenta accents, hover highlights
coven-purple-500#a855f7Primary brand color, active states, glow centers
coven-purple-800#2d1b4eFog blob fills, decorative grid lines
coven-purple-900#1a0b2eSidebar border, panel borders, subtle dividers
coven-green-300#bef264Hover text color transitions
coven-green-400#a3e635Active nav link, cursor ring, floating particles, glow source
coven-green-500#84cc16Secondary glow shadow falloff
coven-magenta#d946ef”Featured” badge, magenta accent spots
coven-black (#050308) and coven-dark (#0a0612) are distinct tokens despite looking similar at a glance. coven-black is the absolute floor used for the <body> background; coven-dark is the slightly lighter surface used for sidebar panels and glass overlays. Using the wrong one will produce a subtle but perceptible mismatch at panel edges.

​
Glow Utility Classes

Four utility classes handle the signature glow effects seen on cards, headings, and interactive elements. Apply them directly in JSX alongside other Tailwind classes. 
/* Card borders, skill tiles, nav indicators */
.box-glow-green  { box-shadow: 0 0 15px #a3e6354d, inset 0 0 10px #a3e63533; }
.box-glow-purple { box-shadow: 0 0 15px #a855f74d, inset 0 0 10px #a855f733; }
Each box glow combines an outer ambient halo with a subtle inset fill — the inset layer adds a faint tint to the interior of the element, making it feel lit from within rather than just rimlit. Use box-glow-green on active navigation items and highlighted skill tiles. Use box-glow-purple on featured cards and modal containers.
Box glows use lower effective opacity than text glows. The outer box halo is rgba(163,230,53, ~0.3) (#a3e6354d) while text glows lead with 0.7. Keeping box shadows softer prevents the UI from feeling neon-garish on large card surfaces.

​
Glass Panel

The .glass-panel utility creates the frosted-dark surface used for cards, modals, and the sidebar overlay. It combines a semi-transparent coven-dark background with a soft coven-purple-800 border and a backdrop-filter blur. 
.glass-panel {
  border-width: 1px;
  border-color: #2d1b4e80;        /* coven-purple-800 at 50% opacity */
  background-color: #0a061299;    /* coven-dark at ~60% opacity */
  backdrop-filter: blur(12px);
}
How it layers:
  • The #0a061299 background (coven-dark at ~60%) lets the fog and particle layers behind it bleed through — enough to show motion without competing with readable content.
  • The 1px coven-purple-800 border at 50% opacity acts as a rim light: barely visible on its own but it separates the panel from the background without a harsh edge.
  • backdrop-filter: blur(12px) blurs everything behind the panel, pushing background elements into soft bokeh. This requires the panel to have a non-opaque background to take effect.
backdrop-filter is GPU-composited in all modern browsers. However, it forces the browser to create a new stacking context, which can clip z-index children. If a popover inside a glass panel appears behind the panel, add isolation: isolate to the panel’s parent.

​
Mix-Blend Modes

Two CSS blend modes govern how the decorative background layers interact with coven-black:

mix-blend-screen

Used on floating particles and the cursor ring. screen inverts, multiplies, and inverts again — on a near-black background this makes colored elements appear to glow and lighten rather than darken. The acid green particles at coven-green-400 read as luminous against coven-black rather than as flat colored dots.

mix-blend-multiply

Used on fog blobs. multiply darkens the composite — the deep purple fog shapes deepen the background further in the areas they cover, creating a sense of volumetric depth without adding a bright element. This keeps the fog subtle and atmospheric.

​
Scrollbar Removal

Panels that scroll content (skill lists, timeline, mobile nav) hide the native scrollbar via: 
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;   /* IE / Edge */
  scrollbar-width: none;      /* Firefox */
}
This keeps the dark surfaces clean. Scrollability is still communicated through gradient fade-outs at panel edges rather than a visible track.

​
Customizing Colors

All coven-* tokens are defined in the Tailwind config under theme.extend.colors. The config is processed at build time by Vite, and the resolved values land in assets/main.css as utility classes. The following reflects the values confirmed in the compiled bundle: 
// tailwind.config.js (structure — edit to change tokens)
export default {
  theme: {
    extend: {
      colors: {
        'coven-black':   '#050308',
        'coven-dark':    '#0a0612',
        'coven-purple': {
          400: '#c026d3',
          500: '#a855f7',
          800: '#2d1b4e',
          900: '#1a0b2e',
        },
        'coven-green': {
          300: '#bef264',
          400: '#a3e635',
          500: '#84cc16',
        },
        'coven-magenta': '#d946ef',
      },
    },
  },
}
After changing any token, run vite build (or vite dev) to regenerate assets/main.css. Because Tailwind scans your JSX/TSX files for class names at build time, renaming a token requires a find-and-replace across component files as well.

Build docs developers (and LLMs) love

Get started for freeTalk to us