unity-ui-document-design-system
Drop-in design system for Unity 6 UI Toolkit (UIDocument + PanelRenderer, UXML + USS): tokens, 24 components, 63 icons, mobile-responsive, dark-themed. One stylesheet, zero dependencies. Battle-tested in a shipping cross-play game.
What is it?
What it is
A comprehensive design system for Unity 6 UI Toolkit (UIDocument + UXML + USS) including tokens, components, icons, and runtime support for flat and world-space panels.
Why it exists
To provide a consistent, production-ready design language for Unity projects, addressing the lack of a unified UI toolkit in the engine. Battle-tested in Leap of Legends, a cross-platform multiplayer game.
Who should use it
Unity developers, game UI/UX designers, and teams building cross-platform games or apps requiring a responsive, dark-themed design system with pre-built components and tokens.
Who should avoid it
Developers not using Unity 6 or UI Toolkit, or those who don't need a design system or mobile-responsive UI components.
How it works
A quick walkthrough in plain English
How unity-ui-document-design-system works
Step 1 of 3
You interact with it
Open unity-ui-document-design-system, send a request, or connect it to your stack.
Features
Advantages
- Centralized theming with easy palette swaps
- Responsive design for both flat and world-space UI
- Large icon library with reusable SVGs
- No external dependencies beyond Unity 6
- Runtime automation for knobs, spinners, and drag/drop
- Cross-platform compatibility (mobile, desktop, 3D panels)
- Open-source MIT license with community support
- Live showcase for real-time theme testing
Disadvantages
- Requires Unity 6 (6000.x+) for full functionality
- World-space panels need Unity 6000.5+
- Relies on `com.unity.ui` and `com.unity.modules.vectorgraphics`
- Third-party theme integration (Codigrate) may limit customization
- Submodule or link setup required for installation
- Limited light theme support (in development)
- Potential complexity for non-Unity 6 projects
Installation
FAQ
How do I install the design system in my Unity project?
The design system can be installed by copying the DesignSystem folder into your Assets/ directory, using a git submodule (recommended for updates), or adding it via Unity Package Manager with a Git URL. Detailed steps are in the Installation section.
What Unity version is required to use this design system?
Unity 6 (6000.x or newer) is required. For world-space panel support (PanelRenderer), Unity 6000.5+ is needed, but the flat-screen system works on Unity 6.0.0+.
How do I enable the mobile-responsive layout?
Add the `.mobile` class to your screen root element. This can be done via UXML or C# (e.g., `root.AddToClassList("mobile");` when screen width is below 768px).
How do I use an icon from the design system?
Use the `ds-icon` class with a specific icon class (e.g., `ds-icon--paw`). Icons are white-fill SVGs that tint via CSS, adapting to states like button hover. Example: `<ui:VisualElement class="ds-icon ds-icon--paw" />`.
How can I switch to a light theme?
Add the `.theme-light` class to your `.ds-root` element. This overrides the color tokens and animates the transition over 240ms via the var() cascade.
How does the design system work in world-space panels (Unity 6000.5+)?
The design system includes a `PanelRendererRuntime` backend that auto-attaches to every PanelRenderer. The same UXML and USS components render on 3D surfaces, as demonstrated in the showcase's walkable world-space gallery.
Featured in Videos
YouTube tutorials and walkthroughs for unity-ui-document-design-system
Alternatives
Similar projects ranked by category, topics, and text overlap.