Legends of Hastinapur - Design Bible

Version 1.0 - The Golden Age

1. Visual Philosophy

• Tapasya (Ascetic Heat): Warm golds, burning oranges, sacred fires.
• Akasha (Ether/Void): Deep cosmic blues, starfields, infinite space.
• Dharma (Order): Clean lines, geometric mandalas, symmetrical layouts.

2. Color Palette

Primary (The Trinity)

• Cosmic Blue (Bramha/Space): #050b14
  • Usage: Backgrounds, App Shells, Deep Void areas.
• Tapes Gold (Vishnu/Preservation): #d4af37
  • Usage: Accents, Borders, Primary Actions, Highlighting valuable items.
• Agni Orange (Shiva/Transformation): #ff4500
  • Usage: Call-to-Actions (CTAs), Critical Alerts, Combat Hits.

Secondary

• Parchment (History): #f0ead6
  • Usage: Text, Tooltips, Paper-like containers.
• Void Gray: #1a1a1a
  • Usage: Card backgrounds, secondary panels.

Semantic

• Success (Sattva): #52c41a (Vibrant Leaf Green)
• Error (Tamas): #ff4d4f (Crimson Red)
• Warning (Rajas): #faad14 (Sunset Gold)

3. Typography

Headings: Cinzel or Playfair Display

• Feel: Epic, Monumental, Chiseled.
• Usage: H1-H3, Hero text, Item names.
• Weight: Bold (700) or Black (900).

Body: Inter or Lato

• Feel: Clean, Readable, Modern.
• Usage: Paragraphs, Descriptions, UI Inputs.
• Weight: Regular (400) to Medium (500).

Data/Code: JetBrains Mono

• Feel: Technical, Precise.
• Usage: Stats, Coordinates, Price values, Referral Codes.

4. UI Components

Containers ("The Reliquary")

• Style: Glassmorphism + Gold Borders.
• Background: bg-black/60 (60% opacity black).
• Border: border border-tapes-gold/20 (Subtle gold rim).
• Backdrop: backdrop-blur-md (Frosted glass).

Buttons ("The Vow")

• Primary: Solid Gold/Orange background, Black text, Uppercase, Tracking-widest.
  • Hover: Glow effect (shadow-[0_0_20px_rgba(255,215,0,0.5)]).
• Secondary: Transparent background, Gold border, Gold text.

Interactive Elements

• Hover: All interactive elements must respond instantly.
• Feedback: "Click" effects (scale down), "Hover" effects (lift up).

5. Web Specifics (loh-website & loh-ops-tools)

Framework: TailwindCSS

• Animations:
  • animate-fade-in: Smooth entry for text.
  • animate-slow-zoom: For Hero backgrounds (Ken Burns effect).
  • animate-tilt: Subtle tilting for cards on hover.
  • animate-pulse: For live status indicators.

6. Game Client Specifics (loh-game)

Framework: Bevy UI / Egui

• Windows: Dark semi-transparent panels with gold trim.
• Text: White with black outline (Outline shadow) for readability against 3D world.
• Health/Mana Bars:
  • Health: Red to Black gradient.
  • Mana: Blue to Cyan gradient.
  • Stamina: Yellow to Orange gradient.