Design at Velocity

Most character select screens are built once, for one character. This one was built to work for all of them. Starting from a blank canvas with a 15-hour window, every component, token, animation, and effect was designed and constructed from scratch. The first archetype took the bulk of the time. The four that followed took under 10 minutes combined.

The spec called for a character select screen for a tablet game targeting players aged 8 to 15. Placeholder assets were specced and integrated from the start, keeping the system fully testable and presentation-ready throughout. Fifteen hours, blank canvas, full delivery.

Scaling a UI across multiple characters without rebuilding it is an architecture problem before it is a design problem. The solution is a single master component housing 20 nested components, all surfaced through one properties panel. Archetype, copy, assets, animation behavior, and lighting are all accessible without touching the underlying structure.

Every glow, outline, and lighting effect is governed by a global token structure. Accent colors 1 through 5, each with opacity variants, carry the entire visual language across all archetypes. Reskinning happens at the token level and propagates instantly with no drift between components. The modular structure keeps every element individually editable, and extending the token set further unlocks cross-archetype color mixing.

Contrast ratios, touchpoint sizing, and readability were validated across every color mode and embedded into the token architecture from the start. Every archetype added to the system inherits compliance automatically. It is structural, not a final check.

With the architecture in place, adding new characters is a paste-and-rename operation. Motion specs, token export, and additional screen types are all natural extensions of what is already built. Deeper token development opens cross-archetype theming, giving teams the range to produce seasonal content, alternate skins, and new characters without starting from scratch. Complex under the hood, frictionless on the surface, and built so designers, artists, and engineers can all work from the same source of truth.