// OVERVIEW

Quest Keeper AI uses a retro-futuristic design system inspired by 1980s cyberpunk aesthetics, terminal interfaces, and neon-lit dystopian futures. The design emphasizes readability, accessibility, and an immersive sci-fi atmosphere.

Design Principles

Neon Contrast: High-contrast neon colors against dark backgrounds for readability
Terminal Aesthetics: Monospace fonts and command-line inspired UI elements
Glowing Effects: Text shadows and box shadows create depth and neon glow
Grid Systems: Clean, structured layouts with responsive breakpoints
Retro Typography: Tech-inspired fonts with letter spacing and uppercase styling

// COLOR_PALETTE

Our color system uses vibrant neon colors paired with deep, dark backgrounds to create the signature cyberpunk aesthetic.

Primary Colors

Neon Cyan

#00ffff

--neon-cyan

Neon Green

#00ff00

--neon-green

Primary (Green-Cyan)

#00ff88

--primary

Accent Colors

Neon Magenta

#ff00ff

--neon-magenta

Neon Orange

#ff9500

--neon-orange

Neon Pink

#ff006e

--neon-pink

Neon Blue

#00d9ff

--neon-blue

Background Colors

Dark Background

#0a0a0f

--bg-dark

Darker Background

#050508

--bg-darker

Card Background

#111118

--bg-card

Card Hover

#1a1a25

--bg-card-hover

Text Colors

Primary Text

#00ffff

--text-primary

Secondary Text

#00ff00

--text-secondary

Muted Text

#6b7280

--text-muted

White Text

#e0e0e0

--text-white

// TYPOGRAPHY

Quest Keeper AI uses monospace fonts to evoke terminal and code aesthetics.

Font Families

Share Tech Mono

Used for: Headings, logos, terminal prompts
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

IBM Plex Mono

Used for: Body text, code blocks, forms
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Text Styles

Heading 1 - Hero Title

Heading 2 - Section Title

Heading 3 - Subsection

Body text - Regular paragraph with readable line height and white color for optimal readability against dark backgrounds.

Muted text - Used for secondary information, captions, and notes.

/* Typography CSS Variables */
font-family: 'Share Tech Mono', monospace;  /* Headers */
font-family: 'IBM Plex Mono', monospace;    /* Body */

letter-spacing: 2-3px;  /* Headers for tech aesthetic */
line-height: 1.8;       /* Body for readability */
text-shadow: 0 0 10px var(--neon-cyan);  /* Glow effect */

// BUTTONS

Buttons use neon borders with hover effects that create glowing transitions.

Button Styles

Primary Button

Secondary Button

Signup Button

<!-- Primary Button -->
<button class="cta-button">> PRIMARY_ACTION</button>

<!-- Secondary Button -->
<button class="cta-button secondary">> SECONDARY_ACTION</button>

<!-- Signup Button -->
<button class="signup-button">> NOTIFY_ME</button>

Button States

Hover over buttons to see glow effects and color transitions

// CARDS

Cards are the primary content containers with subtle backgrounds and glowing borders.

Feature Card

🎲

Feature Title

Feature description with details about functionality and benefits. Cards have hover effects that lift and brighten.

<div class="feature-card">
    <div class="feature-icon">🎲</div>
    <h3>Feature Title</h3>
    <p>Feature description...</p>
</div>

Doc Card

📖 Documentation Title

Brief description of the documentation content and what users can learn from it.

Comparison Card

System Name

✅ Advantage one
✅ Advantage two
❌ Limitation one

// FORMS

Form elements maintain the cyberpunk aesthetic with glowing focus states.

Email Signup Form

[ FORM TITLE ]

Form description text

Privacy note or additional information

<form class="signup-form">
    <input type="email" name="email"
           placeholder="your.email@domain.com" required>
    <button type="submit" class="signup-button">
        > SUBMIT
    </button>
</form>

Input States

// LAYOUTS

Quest Keeper AI uses responsive grid systems with consistent spacing and alignment.

Grid Patterns

/* Feature Grid - 3 columns */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Two Column Layout - Sidebar + Content */
.content-wrapper {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr;
    }
}

Spacing Scale

10px - Tight spacing (icons, inline elements)

20px - Small gaps (list items, form elements)

40px - Medium gaps (cards, grid items)

60px - Large gaps (sections)

80px - Extra large (page sections)

// VISUAL_EFFECTS

Special effects that enhance the retro-futuristic atmosphere.

Glow Effects

Triple Glow Text

Box with cyan glow

/* Text Glow */
text-shadow: 0 0 10px var(--neon-cyan),
             0 0 20px var(--neon-cyan),
             0 0 30px var(--neon-cyan);

/* Box Glow */
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);

/* Hover Glow Intensify */
.element:hover {
    box-shadow: 0 0 50px rgba(0, 255, 255, 0.5);
}

Scanline Overlay

Text with scanline overlay effect - creates CRT monitor aesthetic

/* Applied to body::before */
body::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
}

Terminal Prompt

                            root@questkeeper:~$
                        

                            > COMMAND_INPUT_
                        

<div class="terminal-prompt">root@questkeeper:~$</div>
<h1>> QUEST_KEEPER_AI</h1>

[ JOIN THE QUEST ]