Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/sys-witch/llms.txt
Use this file to discover all available pages before exploring further.
All visual styling in Sys.Witch V2 is driven by a single compiled stylesheet: assets/main.css. Rather than scattering color and font values across hundreds of utility classes, the theme centralizes its distinctive look in a small set of CSS custom properties — defined once in the :root block and then referenced everywhere else. To change the accent color, background depth, or glow intensity across the entire site, you update the token in one place and every component that references it updates automatically.
The :root Token System
The complete set of design tokens is declared at the top of assets/main.css. These are the exact values shipped with the theme:
/* assets/main.css — :root token block */
:root {
/* Backgrounds */
--bg-base: #050508;
--bg-surface: #0a0a12;
--bg-surface-elevated: #12101c;
/* Neon Accents */
--neon-purple: #b026ff;
--neon-magenta: #ff00ff;
--neon-cyan: #00f3ff;
--neon-lime: #39ff14;
--neon-deep-purple: #4a00e0;
/* Text */
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-muted: #475569;
/* Glow Effects (box-shadow values) */
--glow-purple: 0 0 10px rgba(176, 38, 255, .5), 0 0 20px rgba(176, 38, 255, .3);
--glow-magenta: 0 0 10px rgba(255, 0, 255, .5), 0 0 20px rgba(255, 0, 255, .3);
--glow-cyan: 0 0 10px rgba(0, 243, 255, .5), 0 0 20px rgba(0, 243, 255, .3);
--glow-lime: 0 0 10px rgba(57, 255, 20, .5), 0 0 20px rgba(57, 255, 20, .3);
}
Color Token Reference
All --neon-* tokens are also available as Tailwind utility classes throughout the stylesheet — for example, text-neon-cyan, border-neon-purple, bg-neon-lime, and shadow-glow-magenta. Changing the :root value updates every usage at once.
Background Tokens
| Token | Value | Primary Use |
|---|
--bg-base | #050508 | Page body background — the deepest layer |
--bg-surface | #0a0a12 | Card and panel backgrounds |
--bg-surface-elevated | #12101c | Raised UI elements, modal surfaces, elevated sections |
Neon Accent Tokens
| Token | Value | Primary Use |
|---|
--neon-purple | #b026ff | Primary accent — borders, highlights, active states |
--neon-magenta | #ff00ff | Secondary accent — hover states, decorative glows |
--neon-cyan | #00f3ff | Tertiary accent — links, selection highlight color |
--neon-lime | #39ff14 | Quaternary accent — skill tiles, tag labels |
--neon-deep-purple | #4a00e0 | Scrollbar thumb (default state) |
Text Tokens
| Token | Value | Primary Use |
|---|
--text-primary | #e2e8f0 | Body copy, headings, primary readable text |
--text-secondary | #94a3b8 | Supporting labels, metadata, secondary copy |
--text-muted | #475569 | Disabled states, timestamps, decorative placeholders |
Glow Effect Tokens
| Token | Effect | Used By |
|---|
--glow-purple | Double-layer purple radial blur | .shadow-glow-purple, .text-glow-purple |
--glow-magenta | Double-layer magenta radial blur | .shadow-glow-magenta, .text-glow-magenta |
--glow-cyan | Double-layer cyan radial blur | .shadow-glow-cyan, .text-glow-cyan |
--glow-lime | Double-layer lime radial blur | .shadow-glow-lime, .text-glow-lime |
Changing Accent Colors
To swap the primary accent from neon purple to a different hue, update --neon-purple in the :root block and update the matching --glow-purple rgba values to the same hue:
:root {
/* Example: swap primary accent to electric blue */
--neon-purple: #0066ff;
--glow-purple: 0 0 10px rgba(0, 102, 255, .5), 0 0 20px rgba(0, 102, 255, .3);
}
Keep the glow rgba values in sync with their corresponding neon hex values. If you change --neon-cyan to a warm orange but leave --glow-cyan as blue-toned rgba values, the box-shadow glows will appear inconsistent with the border and text colors.
Changing Background Colors
To lighten the overall aesthetic or shift toward a warmer dark palette, update the three background tokens:
:root {
/* Example: slightly warmer dark backgrounds */
--bg-base: #080508;
--bg-surface: #100a12;
--bg-surface-elevated: #1a1020;
}
--bg-base should be the darkest, --bg-surface-elevated the lightest of the three — so that card surfaces remain visually distinct from the page background.
Typography
Sys.Witch V2 uses three typefaces loaded from Google Fonts. The @import at the very top of assets/main.css fetches all three in a single request:
/* assets/main.css — Google Fonts import */
@import "https://fonts.googleapis.com/css2?family=Audiowide&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&family=Tektur:wght@400;500;600;700;800;900&display=swap";
Font Stack
| Role | Family | Tailwind Class | Usage |
|---|
| Body / UI | Inter | font-sans | Default body copy, navigation, buttons, form labels |
| Display headings | Tektur | font-display | Page titles, project names, section headings |
| Code / monospace | JetBrains Mono | font-mono | Code blocks, terminal-style labels, tag text |
Changing Fonts
To substitute a different typeface, update the Google Fonts @import URL to include the new family and then update the font-family references in the stylesheet:
/* Step 1 — update the @import URL to include your chosen font */
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap";
/* Step 2 — update the font-display class to use the new family */
.font-display {
font-family: "Space Grotesk", sans-serif;
}
font-sans (Inter) and font-mono (JetBrains Mono) classes follow the same pattern. The base html rule also explicitly sets font-family: Inter, sans-serif — update that as well if you replace the body font.
Make targeted edits to font references rather than rewriting the base CSS reset block. The reset section of assets/main.css is generated by Tailwind and controls baseline browser normalization — altering it unintentionally can break spacing, line-height, and form element rendering across all pages.
Glow Utility Classes
The stylesheet provides ready-made glow utilities derived from the --glow-* tokens. Apply them directly to elements in the HTML markup:
/* Text glow — applied via text-shadow */
.text-glow-purple { text-shadow: 0 0 8px rgba(176, 38, 255, .6); }
.text-glow-cyan { text-shadow: 0 0 8px rgba(0, 243, 255, .6); }
.text-glow-magenta { text-shadow: 0 0 8px rgba(255, 0, 255, .6); }
.text-glow-lime { text-shadow: 0 0 8px rgba(57, 255, 20, .6); }
/* Box-shadow glow — applied via box-shadow using --glow-* tokens */
.shadow-glow-purple { box-shadow: var(--glow-purple); }
.shadow-glow-cyan { box-shadow: var(--glow-cyan); }
.shadow-glow-magenta { box-shadow: var(--glow-magenta); }
.shadow-glow-lime { box-shadow: var(--glow-lime); }
/* Drop-shadow glow — applied to SVG and image elements */
.drop-shadow-glow-purple { filter: drop-shadow(0 0 8px rgba(176, 38, 255, .8)); }
.drop-shadow-glow-cyan { filter: drop-shadow(0 0 8px rgba(0, 243, 255, .8)); }
.drop-shadow-glow-magenta { filter: drop-shadow(0 0 8px rgba(255, 0, 255, .8)); }
.drop-shadow-glow-lime { filter: drop-shadow(0 0 8px rgba(57, 255, 20, .8)); }
hover:shadow-glow-cyan and group-hover:text-glow-purple — are also generated and used extensively by the ProjectPanel, RuneTile, and GlyphButton components.
Scrollbar Theming
The custom scrollbar uses --neon-deep-purple for the thumb and --bg-base for the track. On hover, the thumb brightens to --neon-purple:
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--neon-deep-purple); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--neon-purple); }
--neon-deep-purple in the :root block. This only affects the scrollbar — no other components reference --neon-deep-purple directly.
Custom scrollbar styling via ::-webkit-scrollbar is supported in Chrome, Edge, and Safari. Firefox uses the standardized scrollbar-color and scrollbar-width properties, which are not currently included in the theme stylesheet.
Text Selection Color
The highlighted text selection color is also defined in main.css using the ::selection pseudo-element:
::selection {
background-color: #b026ff4d; /* --neon-purple at 30% opacity */
color: var(--neon-cyan);
}
background-color hex to change the selection highlight and the color value to change the text color when selected.