Unity Dev Open-Sources Production-Ready UI Toolkit Design System

Tokens, components, icons, mobile support, and a runtime helper, all in a dark theme, all keyboard and touch-friendly, and all controlled from one stylesheet.

Sinan Ata

Sinan Ata is a Solo Game Developer working on Leap of Legends, a multiplayer platform fighter that blends elements of Jump'n Bump and Rocket League, planned for release on both desktop and mobile platforms.

Because he is working alone, Sinan has built every part of the game's UI himself, including menus, lobbies, HUD, settings, the in-game store, and post-match screens. He based it on Unity 6's UI Toolkit, developing an additional layer called the Unity UI Toolkit Design System.

Sinan has open-sourced this system under the MIT license, making it freely usable in other projects. It can be integrated by simply dropping a folder into a project's Assets directory and attaching the main stylesheet to the UI screens, allowing the entire interface to adopt a consistent visual style. A live web demo is also available, where users can hover or tap on components to view the selector chain behind each element.

Sinan built his Unity UI Toolkit Design System because the UI Toolkit only provides the basics but no design language. As he explained, in most projects, teams end up recreating things like buttons, inputs, and layouts from scratch, often inconsistently. This project brings all of that together and kept current through a shipped product.

This is how the developer described the impact of the design system on Leap of Legends:

"Some numbers from my own project. Menu screens go from designed to shipped in one or two hours, not one or two days. Mobile parity is free; you add .mobile and ship. Theme experiments are ten minutes of work. Four token palettes were each a git diff DesignTokens.uss. Cross-screen consistency is automatic. Every button looks like every other button, and reviewers don't flag inconsistencies because there are none to flag.

Leap of Legends ships with this layer in Assets/DesignSystem/. Settings, lobby, store, post-match, in-game HUD, all of it uses the same tokens, the same components, the same .mobile flip. The store screen players will buy from is built on it. The settings screen a parent will use to enable child-safe mode is built on it."

You can learn more and try out Sinan's design system here.

Also, subscribe to our Newsletter and join our 80 Level Talent platform, follow us on Twitter, LinkedIn, Telegram, and Instagram, where we share breakdowns, the latest news, awesome artworks, and more.

Are you a fan of what we do here at 80 Level? Then make sure to set us as a Preferred Source on Google to see more of our content in your feed.