Witchcore

STYLEKIT_STYLE_REFERENCE
style_name: Witchcore
style_slug: witchcore
style_source: /styles/witchcore

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

STYLE: Witchcore
TYPE: Occult mystical interface

MUST USE:
- Dark backgrounds: bg-[#0d0b14] or bg-[#4a1942]
- Gold rune text: text-[#c9a74e]
- Text glow: style={{textShadow: '0 0 10px rgba(201,167,78,0.3)'}}
- Glowing gold borders: border border-[#c9a74e]/30
- Serif fonts: font-serif for all text
- uppercase tracking-wider for labels
- Amethyst secondary: text-[#7b68ae]
- Herb green accent: text-[#3d8b6e]

MUST AVOID:
- Light/white backgrounds
- Neon/high-saturation modern colors
- Sans-serif fonts for headings
- Regular shadows (shadow-md)
- Rounded/cute elements (rounded-full)
- Bright cheerful gradients

COLOR RULES:
- Primary: Mystic purple (#4a1942)
- Secondary: Midnight (#0d0b14)
- Gold rune: #c9a74e
- Amethyst: #7b68ae
- Herb green: #3d8b6e

SPECIAL EFFECTS:
- Stardust particle overlays
- Rune glow pulsing animation
- Moon phase symbols as decorative elements
- Radial gradient for mystical light sources

ANIMATION & INTERACTION RULES:
- Ritual Levitation: Cards and primary elements must NOT bounce quickly. Use extremely slow upfloat (hover:-translate-y-2) with duration-1000 ease-in-out. Simulate the feeling of ritual levitation, not a spring.
- Occult Glow: On hover, the gold rune glow (text-shadow or box-shadow using #c9a74e) must expand and pulse as if imbued with magic. Use drop-shadow CSS filter on headings for text glow enhancement.
- Shadow Engulf: On dark backgrounds (#0d0b14), hover should expand a deep purple/amethyst outer glow outward, simulating dark matter or mystical fog spreading.
- Talisman Press: On :active, cancel the glow and add a deep inset shadow (active:shadow-[inset_0_0_20px_rgba(0,0,0,0.8)]) plus slight downward translate (active:translate-y-1), simulating pressing a heavy talisman or ritual object.

---

# Witchcore Design System

> Occult aesthetic style with tarot cards, moon phase symbols, crystals, and herbal elements. Deep purple tones paired with golden mystical runes and shimmering stardust effects on dark backgrounds.

## Design Philosophy

Witchcore design draws inspiration from the occult, tarot, and natural magic traditions, constructing a visual world filled with ritual and mystical power through deep, dark purple tones and shimmering golden runes.

Core concepts:
- Mystical atmosphere: Deep purple and midnight black as the foundation, creating a dark and profound sense of space
- Rune decoration: Golden runes and moon phase symbols as core decorative elements, imbuing the interface with a sense of ritual
- Stardust texture: Faint glowing particles scattered across backgrounds, like dust shimmering in a starlit sky
- Natural magic: Herb green and amethyst purple as supporting colors, bridging the natural and the supernatural

The design language blends medieval alchemical manuscripts, Victorian-era divination aesthetics, and modern dark interface design. Every interactive element should feel like casting a spell -- buttons like activating runes, cards like turning tarot cards, input fields like inscribing prophecies.

Suitable for: occult apps, tarot reading platforms, crystal healing shops, dark aesthetic blogs, indie game interfaces.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#c9a74e]/30
Radius: rounded-none
```

### Shadow
```
sm: shadow-[0_2px_8px_rgba(13,11,20,0.6)]
md: shadow-[0_4px_16px_rgba(13,11,20,0.7)]
lg: shadow-[0_8px_30px_rgba(13,11,20,0.8)]
hover: hover:shadow-[0_0_25px_rgba(201,167,78,0.2)]
focus: focus:shadow-[0_0_15px_rgba(201,167,78,0.15)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:scale-[1.01]
Hover opacity: (none)
Transition: transition-all duration-500 ease-in-out
Active: active:scale-95
```

### Typefaces
```
Heading: font-serif tracking-wider uppercase
Body: font-serif
Mono: font-mono
```

### Type scale
```
Hero: text-4xl md:text-6xl lg:text-8xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-3xl
H3: text-xl md:text-2xl
Body: text-sm md:text-base
Small: text-xs
```

### Spacing
```
Section: py-16 md:py-24
Container: px-4 md:px-8
Card: p-8
Gap sm: gap-4
Gap md: gap-6
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-[#0d0b14]
Background secondary: bg-[#4a1942]
Background accent: bg-[#c9a74e], bg-[#7b68ae], bg-[#3d8b6e]
Text primary: text-[#c9a74e]
Text secondary: text-[#7b68ae]
Text muted: text-[#c9a74e]/50
Button primary: bg-[#4a1942] text-[#c9a74e] border border-[#c9a74e]/50
Button secondary: bg-transparent text-[#7b68ae] border border-[#7b68ae]/50
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `rounded-full`
- `rounded-2xl`
- `rounded-3xl`
- `text-cyan-`
- `text-lime-`
- `text-pink-`
- `bg-cyan-`
- `bg-lime-`

### Banned patterns
- matches `^bg-(?:white|gray-[1-3])`
- matches `^shadow-(?!\[|none)`
- matches `^rounded-(?:full|2xl|3xl)`
- matches `^text-(?:cyan|lime|pink)-`
- matches `^bg-(?:cyan|lime|pink)-`

### Why they are banned
- `bg-white`: Witchcore uses dark backgrounds only
- `shadow-md`: Use glowing shadows: shadow-[0_0_20px_rgba(201,167,78,0.3)]
- `rounded-full`: Witchcore uses sharp edges, not rounded shapes
- `text-cyan-`: Use gold (#c9a74e) or amethyst (#7b68ae) instead of neon colors

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
px-8 py-3
font-serif
uppercase tracking-widest
transition-all duration-500
```

### Every card must include
```
bg-[#0d0b14]/90
border border-[#c9a74e]/30
```

### Every input must include
```
bg-[#0d0b14]/80
border border-[#c9a74e]/20
text-[#c9a74e]
font-serif
focus:border-[#c9a74e]/60
focus:outline-none
```

---

## [COMPARE] Witchcore wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="px-8 py-3 font-serif uppercase tracking-widest transition-all duration-500 bg-[#4a1942] text-[#c9a74e] border border-[#c9a74e]/50">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-[#0d0b14]/90 border border-[#c9a74e]/30 p-8">
  <h3 class="font-serif tracking-wider uppercase text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="bg-[#0d0b14]/80 border border-[#c9a74e]/20 text-[#c9a74e] font-serif focus:border-[#c9a74e]/60 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Witchcore page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#0d0b14] text-[#c9a74e] border border-[#c9a74e]/30 px-4 md:px-8">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
    <a href="/" class="font-serif tracking-wider uppercase text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-6 font-serif text-xs">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#c9a74e] text-[#c9a74e] py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-serif tracking-wider uppercase text-4xl md:text-6xl lg:text-8xl">
      {HEADLINE}
    </h1>
    <p class="font-serif text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="px-8 py-3 font-serif uppercase tracking-widest transition-all duration-500 bg-[#4a1942] text-[#c9a74e] border border-[#c9a74e]/50">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#0d0b14] text-[#c9a74e] py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-serif tracking-wider uppercase text-2xl md:text-3xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Card template - repeat for each card -->
      <div class="bg-[#0d0b14]/90 border border-[#c9a74e]/30 p-8">
        <h3 class="font-serif tracking-wider uppercase text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-serif text-sm md:text-base text-[#c9a74e]/50">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="bg-[#0d0b14]/80 border border-[#c9a74e]/20 text-[#c9a74e] font-serif focus:border-[#c9a74e]/60 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#4a1942] text-[#7b68ae] py-16 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-serif tracking-wider uppercase text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-serif text-xs">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-serif tracking-wider uppercase text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-serif text-xs">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Witchcore post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `px-8 py-3 font-serif uppercase tracking-widest transition-all duration-500`
- [ ] Card includes: `bg-[#0d0b14]/90 border border-[#c9a74e]/30`
- [ ] Input includes: `bg-[#0d0b14]/80 border border-[#c9a74e]/20 text-[#c9a74e] font-serif focus:border-[#c9a74e]/60 focus:outline-none`

### Forbidden check
- [ ] Not using `bg-white`
- [ ] Not using `bg-gray-50`
- [ ] Not using `bg-gray-100`
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`
- [ ] Not using `shadow-lg`
- [ ] Not using `rounded-full`
- [ ] Not using `rounded-2xl`

### Style rule check
- [ ] Use deep purple to midnight black gradient backgrounds bg-gradient-to-b from-[#4a1942] to-[#0d0b14]
- [ ] Gold rune text text-[#c9a74e] with subtle glow [text-shadow:0_0_8px_rgba(201,167,78,0.4)]
- [ ] Use semi-transparent gold borders border border-[#c9a74e]/30 hover:border-[#c9a74e]/60
- [ ] Card backgrounds use bg-[#0d0b14]/80 backdrop-blur-sm for a hazy feel
- [ ] Stardust background effects using radial-gradient with subtle light accents

### Style drift check
- [ ] Does not violate: Do not use bright white or light gray backgrounds
- [ ] Does not violate: Do not use high-saturation neon colors (such as cyan, lime)
- [ ] Does not violate: Do not use rounded cute design elements (such as rounded-full buttons)
- [ ] Does not violate: Do not use modern sans-serif fonts as main headings
- [ ] Does not violate: Do not use regular shadows shadow-md (must be glow shadows or deep shadows)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Witchcore

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use bright white or light gray backgrounds
- use high-saturation neon colors (such as cyan, lime)
- use rounded cute design elements (such as rounded-full buttons)
- use modern sans-serif fonts as main headings
- use regular shadows shadow-md (must be glow shadows or deep shadows)
- use bright cheerful gradients (such as pink-blue, pink-purple gradients)
- use flat design language; all elements need layers and depth

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use bright white or light gray backgrounds
- [ ] do not use high-saturation neon colors (such as cyan, lime)
- [ ] do not use rounded cute design elements (such as rounded-full buttons)
- [ ] do not use modern sans-serif fonts as main headings
- [ ] do not use regular shadows shadow-md (must be glow shadows or deep shadows)