Magic School game UI and UX vector style with themed icon frames

The three frames cover an interface layout sheet, an icon family with themed magic-school props, and a UX flow snapshot showing how panels stack inside the runtime layout. The cover frame leads with the layered UI screen at full render size to anchor the SKU identity.

Icon silhouettes were tuned for visual hierarchy so primary action icons read louder than secondary trim during gameplay, and the panel ornament keeps enough negative space around the action area for clean tap-target readability.

Pipeline ran wireframe pass, color key, vector paint pass, and a runtime check at multiple device scales. Stroke weight and corner radius were calibrated for visual hierarchy across device pixel densities rather than picked once for a single screen size.

Each asset ships at multiple scales so the same icon reads cleanly from the in-game HUD up to feature splash framing. The pipeline plugs into broader studio background painters deliverables when a UI pass needs matched themed background art under it.

Casual vector read with a warm magic-school palette: soft pastel blues, brass and gold ornament, glow accents on action icons, and tuned drop shadow on stacked panels. The vector style holds clean edges across screen densities without forcing offline rasterization.

Themed prop dress stays inside the magic-school fiction so the UI sits naturally on top of in-game backgrounds rather than feeling like a generic casual UI kit dropped onto a different art style.