15. Digital & Web System
Digital & Web System
UI philosophy, responsive layouts, motion design, and accessibility-digital experiences that honor Kaladan's atmosphere
13.1 UI Philosophy
- •Dark interfaces (obsidian, Azure Night)
- •Generous negative space, vignettes at edges (5-10%)
- •Gold CTAs, white text, subtle realm accents
- •No bright neon, sharp corners softened (4-8px radius)
13.2 Layout Grid
A 12-column responsive grid provides structure and consistency across all digital touchpoints.
Desktop (1440px+)
- • Max width: 1440px
- • Gutter: 24px
- • Margin: 48px
Tablet (768px-1439px)
- • Columns: 8
- • Gutter: 20px
- • Margin: 32px
Mobile (320px-767px)
- • Columns: 4
- • Gutter: 16px
- • Margin: 16px
Grid Usage Examples
Full Width (12 columns)
Content + Sidebar (8 + 4 columns)
Three Equal Columns (4 + 4 + 4)
Button States
Interactive elements must provide clear visual feedback across all states to guide user actions.
Primary Buttons
Default State
Hover State
Active/Pressed State
Disabled State
Secondary Buttons
Default State
Hover State
Active/Pressed State
Disabled State
Menu Examples
Navigation components that balance hierarchy, accessibility, and visual elegance.
Horizontal Navigation
Tab Navigation
Motion & Animation Guidelines
Purposeful motion enhances usability and creates a premium experience.
Duration Standards
- Micro (100-200ms): Button hovers, icon changes
- UI (200-400ms): Tab switching, dropdowns
- Page (400-600ms): Route changes, modals
- Complex (600-1000ms): Multi-step sequences
Best Practices
- • Respect prefers-reduced-motion setting
- • Keep animations purposeful and subtle
- • Stagger grouped elements (50-100ms delay)
- • Avoid blocking user interaction
Accessibility Standards
Every player deserves equal access to Kaladan's digital experiences.
Color Contrast (WCAG AA)
Mist White on Azure Night: 12.3:1
Keyboard Navigation
- Focus Indicators: 4px ring with 50% opacity
- Tab Order: Logical top-to-bottom, left-to-right
- Escape Key: Closes modals/dropdowns
- Touch Targets: Minimum 44x44px
Accessibility Checklist
Visual
- ☑ 4.5:1 contrast for text
- ☑ 3:1 contrast for UI elements
- ☑ Focus indicators visible
- ☑ Text resizable to 200%
Interaction
- ☑ Keyboard navigation complete
- ☑ Logical tab order
- ☑ Touch targets ≥44px
- ☑ Reduced motion support
Content
- ☑ Semantic HTML structure
- ☑ Alt text for images
- ☑ ARIA labels where needed
- ☑ Error messages clear
Digital UI Mockups
Desktop Homepage
Ready for asset replacement
Desktop with 12-column grid
Mobile App
Ready for asset replacement
Mobile with 4-column grid