Nintendo Switch UI Kit
Last Updated on August 24, 2026 by Editorial Team
A free system UI kit for the new Nintendo Switch game console. Crafted and shared by Olivier Charavel.
Nice to read: designing for the Nintendo Switch
Look closely at the blueprint-style preview and you can see exactly how this kit is built: a flat-lined Switch console rendered in white against that engineering-blue backdrop, with the joy-con controls, home button, and screen area all drawn as clean vector shapes.
The grid, the icon glyphs scattered around the edges, and the diamond mark in the corner all point to a designer who thinks in systems, not just a single mockup screenshot.
That blueprint framing matters because it tells you what the kit is actually for. This isn’t a photorealistic device render meant for a marketing splash page. It’s a structural reference, a way to visualize how interface elements sit within the real proportions and button layout of the console, so you can design screens that feel native to the hardware rather than guessing at scale.
The blank white rectangle in the center of the screen is the working canvas. That’s where the actual utility lives.
Because the joy-con controls, buttons, and screen bezel are already mapped out around it, you can drop in a game menu, a settings panel, an onboarding flow, or a HUD concept and immediately see how much room you have to work with and how the physical buttons relate to on-screen elements.
This is especially useful for indie game studios and UI designers pitching a Switch title, since publishers and stakeholders respond far better to a concept shown inside accurate device context than to a flat screen mockup floating on a white background.
Where This Kit Fits in a Design Workflow
If you’re designing menu systems, in-game overlays, or portable-mode interfaces for a Switch project, this kit gives you the console’s real screen ratio and control geometry to design against.
It also works well for teaching or presentation purposes: walking a client or team through how a UI adapts between docked and handheld play, or simply explaining button placement relative to on-screen prompts.
Because the whole thing is vector-based line art, it scales cleanly whether you’re placing it small in a slide deck or blowing it up for a large presentation board.
Editing it is straightforward in any vector-capable editor. Since the console outline, buttons, and screen are separate shapes, you can:
- Swap the blueprint blue background for a plain white or dark canvas if you want the focus purely on your UI mockup.
- Recolor the console outline and button glyphs to match a game’s branding, since the flat white linework takes color changes easily.
- Resize or reposition the joy-con elements independently if you’re mocking up a custom controller skin or accessory concept.
- Paste your interface design directly into the blank screen area, then adjust the crop so the corners match the screen’s rounded bezel.
Pairing this kit with actual UI components, icon sets, or a type system built for on-screen legibility at handheld distances will get you the furthest.
Since the mockup itself is intentionally minimal, it leaves plenty of room for your own interface work to be the visual focus, which is exactly the point of a blueprint-style reference like this one.
