storyteller/docs/reference/UI_QUICK_REFERENCE.md

UI Design Quick Reference

TL;DR guide for getting UI designs quickly

---

🎯 Priority Order

Phase 2 (Current - Already Built)

✅ Session Setup Page
✅ Character View
✅ Character Creation Wizard
✅ Storyteller View

Phase 3 (Next - Need Designs)

🎨 Gamemaster Control Panel
🎨 Game Creation Wizard
🎨 Role Assignment Interface

Phase 4+ (Future)

⏳ Admin Dashboard
⏳ Analytics Views

---

📄 6 Core Pages Summary

Page	Purpose	Complexity	Priority
Session Setup	Landing, join/create	Low	✅ Built
Character View	Player interface	Medium	✅ Built
Character Wizard	Character creation	Medium	✅ Built
Storyteller View	GM interface	High	✅ Built
Gamemaster Panel	Game management	High	🎨 Next
Admin Dashboard	System admin	High	⏳ Future

---

🎨 Design Files Location

All design documentation in /docs/reference/:

• UI_ELEMENTS_INVENTORY.md - Complete element list by page (15,000+ words)
• UI_DESIGN_PROMPTS.md - Copy-paste prompts for LLMs
• UI_QUICK_REFERENCE.md - This file

---

⚡ Quick Start

To Get Designs Fast:

1. Read the prompts file:

   • /docs/reference/UI_DESIGN_PROMPTS.md
   • Find the page you need
   • Copy the full prompt

2. Choose your tool:

   • v0.dev (Vercel) - Best for React/Tailwind code
   • Midjourney/DALL-E - Best for visual mockups
   • Claude/GPT-4 - Best for HTML/CSS implementation

3. Generate:

   • Paste prompt
   • Add tool-specific instructions
   • Generate multiple variations
   • Iterate and refine

---

🎨 Current Design System (Already Implemented)

Colors

--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--bg-dark: #1a1a2e;
--surface-dark: #2d3748;
--text-light: #ffffff;
--accent-purple: #667eea;

Components We Have

• ✅ Buttons (primary, secondary, icon)
• ✅ Input fields (text, textarea, dropdown)
• ✅ Cards (base, interactive, info)
• ✅ Badges/Pills
• ✅ Message bubbles
• ✅ Selection cards (wizard)
• ✅ Progress indicator
• ✅ Form layouts
• ✅ Modal overlays

Components We Need

• 🎨 Data tables
• 🎨 Drag-and-drop cards
• 🎨 Charts (line, bar, pie)
• 🎨 Timeline/activity feed
• 🎨 Tabs component
• 🎨 Metric cards with trends
• 🎨 Role assignment slots

---

📋 Example: Getting Gamemaster Panel Design

Option 1: v0.dev (Code + Design)

Prompt: [Copy from UI_DESIGN_PROMPTS.md - Prompt 5]
Add: "Generate as Next.js components with Tailwind CSS and shadcn/ui"
Output: Working React code + visual preview

Option 2: Midjourney (Mockup)

Prompt: [Copy from UI_DESIGN_PROMPTS.md - Prompt 5]
Add: "UI mockup, high fidelity, Figma style, dark theme, 4k"
Output: Visual design to reference

Option 3: Manual Implementation

1. Read element list in UI_ELEMENTS_INVENTORY.md
2. Sketch/wireframe layout
3. Build components one by one
4. Match existing design system colors/spacing

---

🔧 Common Customizations

To Match Different Styles:

Sci-Fi Theme:

Change gradient to: #00d9ff to #0099ff (cyan)
Add: Glowing borders, neon accents
Fonts: Orbitron or Exo 2

Fantasy Theme:

Keep purple gradient
Add: Texture overlays, paper-like cards
Fonts: Cinzel or IM Fell
Decorative borders

Minimal Theme:

Change to monochrome: #000000 to #ffffff
Remove: Gradients, decorative elements
Fonts: Inter or System UI
Flat design

---

📐 Layout Templates

Dashboard Layout (Gamemaster/Admin)

┌─────────────────────────────────┐
│  Header (Global Actions)        │
├──────┬──────────────────────────┤
│ Nav  │ Main Content Area        │
│ Bar  │                          │
│      │ ┌────────┬────────┐     │
│      │ │ Card   │ Card   │     │
│      │ └────────┴────────┘     │
│      │                          │
│      │ [Tables/Charts/Forms]    │
└──────┴──────────────────────────┘

Sidebar: 240px
Content: flex-1
Gap: 24px

Chat Layout (Character/Storyteller)

┌─────────────────────────────────┐
│  Header (Info + Actions)        │
├─────────────────────────────────┤
│                                 │
│  Scrollable Message Area        │
│  (Messages stacked vertically)  │
│                                 │
├─────────────────────────────────┤
│  Fixed Composer (Bottom)        │
└─────────────────────────────────┘

Header: Auto height
Messages: flex-1, overflow-auto
Composer: Auto height, fixed position

Wizard Layout

┌─────────────────────────────────┐
│  Wizard Header + Progress       │
├─────────────────────────────────┤
│                                 │
│                                 │
│  Step Content (Centered)        │
│  Max Width: 600px               │
│                                 │
│                                 │
├─────────────────────────────────┤
│  Footer (Cancel | Back | Next)  │
└─────────────────────────────────┘

Modal: Max 800px width, centered
Content: Vertical padding 48px
Footer: Sticky bottom

---

🎯 Phase 3 Design Priorities

Must Have First:

1. Gamemaster Dashboard - Overview/home screen
2. Game Creation Form - Simple version
3. Player Slot Cards - Assignment interface

Can Wait:

4. Role drag-and-drop (use simple assignment first)
5. Advanced analytics
6. Detailed configuration screens

---

💡 Tips for Design Consistency

When Designing New Pages:

1. Reuse existing components

   • Check what's already built
   • Extend rather than recreate

2. Match spacing

   • Use 8px grid system
   • Common gaps: 16px, 24px, 32px

3. Follow color usage

   • Purple for primary actions
   • Dark backgrounds (#2d3748)
   • White/light text

4. Keep hierarchy clear

   • Largest: Page titles (2rem)
   • Medium: Section titles (1.5rem)
   • Normal: Body text (1rem)

5. Maintain card style

   • Rounded 8-12px
   • Subtle shadows
   • Padding 1-2rem

---

📱 Responsive Breakpoints

/* Mobile First */
.container {
  width: 100%;
  padding: 16px;
}

/* Tablet - 768px */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop - 1024px */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

---

🚀 Workflow Recommendation

For Phase 3 Implementation:

Week 1: Design Phase

• Day 1: Generate Gamemaster dashboard mockups
• Day 2: Review and refine designs
• Day 3: Generate component mockups
• Day 4: Finalize design system updates
• Day 5: Create component specifications

Week 2-3: Implementation

• Build reusable components
• Implement layouts
• Connect to backend
• Test responsive behavior
• Polish animations

Week 4: Polish

• Fix edge cases
• Accessibility improvements
• Performance optimization
• User testing

---

📚 Resources

Design Tools

• v0.dev - https://v0.dev (AI code generation)
• Figma - https://figma.com (Design/prototype)
• Tailwind UI - https://tailwindui.com (Component library)
• shadcn/ui - https://ui.shadcn.com (React components)

Inspiration

• Dribbble - Search "RPG dashboard dark theme"
• Behance - Search "game master interface"
• Awwwards - Dark themed web apps

Color Tools

• Coolors - Generate palette variations
• Color Hunt - Find complementary palettes
• Contrast Checker - Ensure accessibility

---

Everything you need to get UI designs for Phase 3 is ready! 🎨✨

Start with the Gamemaster Control Panel - that's the biggest design challenge for Phase 3.