A two-week personal concept. The brief I set: a HUD that feels as loud as a Rider Kick and still reads when the player has no time to think. Same problem as any dense interface — games, clinical tools, editor chrome.
Unofficial fan concept. No affiliation with Toei Company or BANDAI. The screens show © BANDAI.
The Paradox
Tokusatsu (Kamen Rider, Super Sentai, Ultraman) is defined by sensory overload: explosions, glowing effects, rapid transformations. Fans love it. But in a game, that same energy can kill the player — if the health bar is obscured by a glitch effect, the player dies. If the combo meter is too subtle, they lose momentum.
"Every UI element in active combat is competing for the same 200ms of player attention. You have to earn the right to be loud."
Design goal: Feel chaotic and energized (honor the genre). Be ruthlessly clear and accessible (serve the player).
Strategic Approach
1. Color System: Neon-Tech on Void Black
Intentionally limited but high-impact palette — every color has a functional job.
The key insight: on a dark (#0A0A0A) background, colors like Impact Orange (#FF6B35) and Rider Teal (#00C9B7) naturally pop at WCAG AA/AAA levels. This lets the design be visually aggressive without sacrificing accessibility.
2. Typography: Sharp, Condensed, and Urgent
UI text: Rajdhani and Orbitron — semi-condensed, geometric sans-serifs. Highly legible at small sizes (critical for HUD), aesthetically aligned with sci-fi/tokusatsu.
Display text: Bebas Neue with custom "glitched" treatments for volatile energy.
3. The "Glitched-Industrial" Aesthetic
Visual motifs pulled from Kamen Rider suit designs — organic curves meets hard-edged technology:
- Circuit-like patterns in backgrounds and dividers
- Holographic textures on panels and overlays
- Subtle glitch effects on hover states — scanlines, RGB shift, noise grain
Critical rule: Glitch effects are never applied to critical information by default. They appear on hover or in non-critical states only. A player who needs to see their health bar sees a clear, solid color — not a seizure-inducing lightshow.
Screen Gallery
Player-First UX Principles
Every design decision was filtered through cognitive load and accessibility principles:
Design System
Modular Figma component library ensuring consistency and scalability:
Buttons: Primary (Impact Orange), Secondary (Rider Teal outline), Destructive (Crimson Glow). All include :hover, :focus, :disabled states with appropriate contrast.
HUD Elements:
- Health Bar: Segmented with clear "low health" color shift (green → yellow → red/pulsing)
- Energy Meter: Distinct visual profile (Rider Teal, vertical)
- Combo Counter: Scales up with consecutive hits, fades gracefully
Menu Frames: Glass-morph panels with strong neon borders, 24px minimum padding, 48px minimum touch targets, glowing neon focus states.
Accessibility: "Reduce Motion" by Design
For players with "reduce motion" enabled, the design gracefully degrades — baked in from the start, not bolted on:
- All glitch effects become static, high-contrast borders
- Pulsing glows become solid colors
- Transition animations are replaced with instant state changes
Key Takeaways
- Aesthetic and accessibility are not mutually exclusive. A dark theme with neon accents is naturally high-contrast. Lean into it.
- Design for the worst-case scenario. If the UI is clear when the player is panicking, it's clear all the time.
- Decorative effects should be opt-in, not mandatory. Cool stuff goes on hover states and non-critical contexts.
- Build accessibility into the system, not individual screens. If the component is accessible, every instance is accessible.
These principles — cognitive load, contrast, progressive disclosure — are the same ones I use on Moremi and Varve. This page is the concept sketch. Those two are the shipped work.
Unofficial fan concept. No affiliation with Toei Company or BANDAI. Kamen Rider and related marks are © BANDAI / Toei Company.