novafarma/docs/UI_GENERATION_PLAN.md

🎨 UI ASSET GENERATION PLAN

Demo Completion - Batch 1
Start: 2026-01-04 21:18
Style: Dark-Chibi Noir (Style 32)

---

📋 BATCH 1 - UI ELEMENTS (20 assets)

Health & Stamina Bars (4 assets)

1. health_bar_frame.png

   • 200×30px bar container
   • Dark border, noir style
   • Empty frame outline

2. health_bar_fill.png

   • 196×26px red gradient fill
   • Blood red (#CC0000)
   • Fits inside frame

3. stamina_bar_frame.png

   • 200×30px bar container
   • Same style as health
   • Empty frame

4. stamina_bar_fill.png

   • 196×26px blue gradient fill
   • Energy blue (#0099FF)
   • Fits inside frame

---

Inventory System (6 assets)

5. inventory_panel.png

   • 400×500px background
   • Dark wooden panel texture
   • Noir aesthetic
   • Slightly worn edges

6. inventory_slot_frame.png

   • 64×64px item slot
   • Dark border
   • Can see through center

7. inventory_slot_highlight.png

   • 64×64px glow effect
   • Golden/yellow outline
   • Selected state

8. hotbar_background.png

   • 600×80px horizontal bar
   • Bottom of screen
   • 9 slots visible
   • Dark wood/metal

9. item_slot_number.png

   • Small number badge (1-9)
   • White text on dark circle
   • For hotbar slots

10. inventory_close_button.png

    • 40×40px X button
    • Red when hover
    • Top-right of panel

---

Dialogue System (4 assets)

11. dialogue_box.png

    • 800×200px text container
    • Bottom-center of screen
    • Dark background, semi-transparent
    • Rounded corners

12. dialogue_portrait_frame.png

    • 120×120px character portrait frame
    • Left side of dialogue box
    • Ornate border

13. dialogue_continue_arrow.png

    • 32×32px blinking arrow
    • Bottom-right of dialogue
    • Indicates "press to continue"

14. dialogue_name_tag.png

    • 200×40px name banner
    • Above dialogue box
    • Shows NPC name

---

Quest & UI Elements (6 assets)

15. quest_marker.png

    • 32×32px exclamation mark
    • Floats above NPC head
    • Yellow glow
    • Animated pulse

16. quest_panel.png

    • 350×250px quest list
    • Side panel
    • Shows active quests
    • Dark background

17. button_normal.png

    • 200×50px standard button
    • Dark metal/wood
    • Rounded edges

18. button_hover.png

    • 200×50px button (lit)
    • Slightly brighter
    • Golden glow

19. button_pressed.png

    • 200×50px button (pressed)
    • Darker, inset look
    • Tactile feel

20. coin_icon.png

    • 32×32px gold coin
    • Shiny, metallic
    • For currency display

---

🎨 STYLE GUIDE:

Color Palette:

• Dark browns/blacks (noir)
• Blood red (health)
• Energy blue (stamina)
• Gold accents (highlights)
• Semi-transparent backgrounds

Art Style:

• Dark-Chibi Noir (Style 32)
• Thick black outlines
• Flat colors
• Gritty, worn textures
• Post-apocalyptic feel

Technical:

• 32-bit PNG with alpha
• Clean edges
• Centered subjects
• UI-optimized (crisp at screen resolution)

---

⏱️ GENERATION ORDER:

Priority 1 (Critical - 10 assets): 1-4: Health/Stamina bars 5-7: Inventory basics 11-13: Dialogue box

Priority 2 (Important - 6 assets): 8-10: Hotbar 14: Name tag 15: Quest marker

Priority 3 (Polish - 4 assets): 16-19: Quest panel + buttons 20: Coin icon

---

📊 ESTIMATED TIME:

• Batch 1 Priority: 15 min
• Batch 2 Priority: 10 min
• Batch 3 Priority: 5 min

TOTAL: 30 minutes for all 20 UI assets

---

✅ AFTER UI GENERATION:

Next batches:

• Batch 2: Buildings (Shack, Campfire, Chest) - 15 min
• Batch 3: Item icons (Wood, Stone, etc.) - 10 min

TOTAL DEMO ASSETS: 28
TOTAL TIME: ~55 minutes

---

Ready to generate! 🚀

Starting with Priority 1 (critical UI) now...