Instruction file imported from HIPgirl95/my-bingo-mixer (.github/instructions/dnd-theme-design.instructions.md). Copyright stays with the author.

High-Fantasy D&D Theme Design Guide

Aesthetic Philosophy

The Bingo Mixer embraces a high-fantasy D&D aesthetic that feels like an ancient, magical artifact for finding fellowship in mystical realms. This is NOT minimalist or modern—it is deliberately maximalist, atmospheric, and immersive.

Core Principles:

• Rich, layered colors with atmospheric depth
• Distinctive serif fonts that evoke medieval manuscripts
• Magical animations and glow effects
• Ornate borders and decorative elements
• Parchment and stone textures
• Dark, mysterious backgrounds

Color System

Primary Palette (Use in @theme)

--color-gold: #d4af37          (Primary accent, glows)
--color-gold-light: #f0d469    (Highlights, text accents)
--color-gold-dark: #b8941e     (Shadows, darker variant)

--color-crimson: #8b1a1a       (Primary action, deep tone)
--color-crimson-light: #c41e3a (Hover/active states, brighter)

--color-purple: #4a135c        (Secondary mystical tone)
--color-purple-light: #6b2878  (Lighter purple for depth)

--color-parchment: #f5e6d3     (Light backgrounds, panels)
--color-parchment-dark: #e6d5ba (Darker parchment variant)

--color-ink: #1a0f0f           (Text, darkest)
--color-stone: #3d3d3d         (Secondary dark tone)

Usage Rules

• Gold is the ONLY accent color—it glows, highlights, and draws attention
• Crimson is for action buttons and primary interactive elements
• Purple appears in gradients and background layers (mystical depth)
• Parchment is for readable backgrounds and panels
• Ink/Stone for body text and dark elements
• Never use gray, blue (non-mystical), or bright colors

Dark Base

• Background: linear-gradient(135deg, #1a0f0f 0%, #2d1f2d 50%, #1a0f0f 100%)
• Never use white or light gray as primary background

Typography

Font Stack (all from Google Fonts)

--font-display: "Cinzel", serif          (Headings, titles, uppercase)
--font-heading: "Crimson Text", serif    (Subtitles, narrative text)
--font-body: "Belleza", sans-serif       (Body content, interface text)

Usage

• Title/Display (Cinzel): Uppercase, large size, 700 weight, high letter-spacing
  • Example: "BINGO MIXER", "VICTORY", quest titles
• Heading (Crimson Text): Italic for subtitles and narrative flavor
  • Example: "Seek Fellowship in the Realms", story descriptions
• Body (Belleza): All interface text, labels, descriptions
  • Use 400 weight for regular, 600 for emphasis

Never Use

• Arial, Inter, Roboto, system fonts
• Non-serif fonts (except Belleza which is distinctive)
• Lowercase for major titles

Component Styling Classes

Utility Classes (add to index.css)

.parchment-bg - Aged paper background for panels

<div className="parchment-bg ornate-border rounded-lg p-8">

• Textured background with subtle repeating pattern
• Inset shadow for depth
• Pair with ornate-border always

.ornate-border - Decorative golden border with corner ornaments

<div className="ornate-border">

• 3px gold border with glow effect
• ◆ decorative elements top/bottom

.mystical-button - All clickable buttons

<button className="mystical-button w-full py-4 px-8">Action</button>

• Crimson gradient background
• Gold border
• Hover: Light sweep animation
• Active: Scale down, intense glow
• Use font-display for uppercase text

.square-magic - Base class for bingo squares

<button className={`square-magic ${square.isMarked ? 'square-marked' : 'unmarked'}`}>

• Smooth cubic-bezier transitions
• Parchment background for unmarked
• Gold/crimson for marked

.square-marked - Marked bingo square visual state

// Applied when isMarked: true

• Gold gradient background
• Glow effect: 0 0 15px var(--color-gold)
• Scale: 1.05 (slightly larger)
• Checkmark or ✦ symbol in corner

.rune-glow - Text glow effect for headings

<h1 className="rune-glow">Title Text</h1>

• Multi-layer text-shadow with gold color
• Creates readable, mystical appearance

.title-ancient - Hero title styling

<h1 className="title-ancient">BINGO MIXER</h1>

• Cinzel font, uppercase, large
• Gold gradient text
• Drop shadow filter for glow
• Use for main page titles only

.subtitle-mystical - Narrative subtitle

<p className="subtitle-mystical">Seek Fellowship in the Realms</p>

• Crimson Text italic
• Gold-light color
• Smaller text-shadow for atmosphere

.header-ornate - Page header styling

<header className="header-ornate">

• Crimson gradient background
• Gold bottom border
• Glow shadow effect

.modal-ancient - Victory modal animation

<div className="modal-ancient">  

• Scroll-in animation (Y-scale + perspectiverotate)
• 0.6s ease-out timing

.victory-pulse - Victorious state animation

<div className="victory-pulse">

• Infinite pulsing glow animation
• Gold + crimson color alternation

Animation Patterns

Entrance Animations

• Scroll-in for modals (Y-scale + rotateX perspective)
• Staggered reveals for sequential elements
• Use animation-delay for item lists

Interactive Feedback

• Hover: Subtle glow increase, border brightening
• Active/Pressed: Scale 0.98%, intense glow
• Transitions: All 0.3s ease, cubic-bezier for magic effects

Continuous Effects

• Victory: victory-glow loop (1.5s) for pulsing
• Text: Optional subtle glow animations
• Never use jarring flashes or rapid changes

CSS Variables Usage

Always use CSS custom properties from @theme:

// ✓ Good
className="bg-gradient-to-br from-gold to-gold-dark text-ink"

// ✗ Bad  
className="bg-gradient-to-br from-yellow-500 to-amber-600 text-gray-900"

Component Implementation Examples

Button Pattern

<button
  className="mystical-button w-full py-4 px-8 rounded-lg"
  style={{ fontFamily: 'var(--font-display)' }}
>
  BEGIN YOUR JOURNEY
</button>

Panel Pattern

<div className="parchment-bg ornate-border rounded-lg p-8 shadow-2xl">
  <h2 style={{ fontFamily: 'var(--font-display)' }} className="text-ink mb-4">
    ⚔️ Title ⚔️
  </h2>
  {/* content */}
</div>

Square Pattern

<button
  className={`square-magic ${square.isMarked ? 'square-marked' : 'bg-gradient-to-br from-parchment to-parchment-dark border-2 border-gold/50'}`}
>
  {square.text}
  {square.isMarked && <span className="absolute top-0.5 right-0.5 text-crimson-light">✦</span>}
</button>

Title Pattern

<h1 className="title-ancient">BINGO MIXER</h1>
<p className="subtitle-mystical">Seek Fellowship in the Realms</p>

What to Avoid

❌ Color Mistakes

• Using blues, grays, or modern colors
• Mixing gold with silver
• Light/bright backgrounds
• Rainbow or multicolor themes

❌ Typography Mistakes

• Default sans-serif fonts (system-ui, -apple-system)
• Inter, Roboto, Arial
• Mixed serif/sans-serif without purpose
• Lowercase titles

❌ Design Mistakes

• Minimal, flat aesthetic
• Smooth, rounded corners without ornament
• Overuse of white space (should be dark)
• Modern glass-morphism effects
• Icon-only interfaces

❌ Animation Mistakes

• Constant animation (tiring)
• Fast, jarring transitions
• Page-load animation bloat
• Keyframe animations on hover (janky)

Testing the Theme

Before considering any design complete:

1. ✓ Colors match the palette (gold glows, crimson acts, parchment readable)
2. ✓ Fonts are distinctive (never generic)
3. ✓ Borders ornate (gold, glowing)
4. ✓ Animations smooth (not jarring)
5. ✓ Dark background consistent
6. ✓ No generic AI aesthetic (feels designed, not templated)

Related Guidelines

• See frontend-design.instructions.md for creative design principles
• See tailwind-4.instructions.md for Tailwind v4 technical details
• See .../vite.config.ts for bundle optimization