Every app Studio generates is built on a design system. Until now, understanding that system meant reading the XAML or piecing it together from the running app, one screen at a time. Studio 3.2 gives the design system a workspace of its own, so you can see the system as a whole instead of reconstructing it from the UI.

In 3.2What it does
Themes workspaceSee your app’s controls, color pairs, and type scale in one place, rendered in light and dark.
Live theme updatesWhen Hot Reload changes a theme resource, the Themes item on the navigation rail shows a dot.
Signed-out StudioBrowse the samples gallery, open a sample, and edit it in Hot Design without an account.
Hot Design per appPanel layout, visual mode, and window sizes are remembered for each app.
Table 1The four changes in Studio 3.2.

The Themes workspace

Open an app in Studio and choose Themes on the navigation rail, under Application. The workspace lists three sections down the left side.

Theme
Primary#6542C8 · 6.6 : 1
On Primary#FFFFFF · 6.6 : 1
Primary Container#E6DDFF · 12.8 : 1
On Primary Container#200465 · 12.8 : 1
Secondary#845A08 · 6.1 : 1
On Secondary#FFFFFF · 6.1 : 1
Secondary Container#F7E1B2 · 13.5 : 1
On Secondary Container#291700 · 13.5 : 1
Tertiary#9F436A · 6.0 : 1
On Tertiary#FFFFFF · 6.0 : 1
Error#AE1715 · 7.2 : 1
On Error#FFFFFF · 7.2 : 1
Error Container#FADAD6 · 13.5 : 1
On Error Container#3C0001 · 13.5 : 1
Primary#DFAE6B · 8.6 : 1
On Primary#281605 · 8.6 : 1
Primary Container#664826 · 6.4 : 1
On Primary Container#E8DDFF · 6.4 : 1
Secondary#D9A86B · 6.1 : 1
On Secondary#3D2E00 · 6.1 : 1
Secondary Container#584300 · 7.4 : 1
On Secondary Container#F7E1B2 · 7.4 : 1
Tertiary#F7B1C9 · 7.8 : 1
On Tertiary#581038 · 7.8 : 1
Error#F6B4AA · 7.9 : 1
On Error#620002 · 7.9 : 1
Error Container#8A0005 · 7.7 : 1
On Error Container#FADAD6 · 7.7 : 1
Fig. 1The Themes workspace, recreated from Studio 3.2. Switch between Controls, Colors, and Typography in the Theme panel; each section is covered below. The palette and type scale belong to a sample app; your app shows its own.

Controls

The Controls section renders a set of common controls the way your design system styles them. It shows only controls the design system defines a style for, so everything in the section reflects your theme and nothing falls back to a framework default. The section is drawn twice, once in the light theme and once in the dark theme.

Buttons
Input fields
Card
Card Title
Supporting text for the card
Basic
Status & Info
Buttons
Input fields
Card
Card Title
Supporting text for the card
Basic
Status & Info
Fig. 2One set of controls, drawn in both themes. Flip a switch, tick a box, drag the slider, or type in a field, and its twin in the other theme follows.

Colors

The Colors section shows the palette as seven pairs: primary, primary container, secondary, secondary container, tertiary, error, and error container, each with its On counterpart. Every swatch is labeled in its counterpart color, so Primary is written in OnPrimary and On Primary is written in Primary. A pair with poor contrast is visible at a glance, without comparing hex values. Like Controls, the palette is shown in light and dark.

Primary#6542C8 · 6.6 : 1
On Primary#FFFFFF · 6.6 : 1
Primary Container#E6DDFF · 12.8 : 1
On Primary Container#200465 · 12.8 : 1
Secondary#845A08 · 6.1 : 1
On Secondary#FFFFFF · 6.1 : 1
Secondary Container#F7E1B2 · 13.5 : 1
On Secondary Container#291700 · 13.5 : 1
Tertiary#9F436A · 6.0 : 1
On Tertiary#FFFFFF · 6.0 : 1
Error#AE1715 · 7.2 : 1
On Error#FFFFFF · 7.2 : 1
Error Container#FADAD6 · 13.5 : 1
On Error Container#3C0001 · 13.5 : 1
Primary#DFAE6B · 8.6 : 1
On Primary#281605 · 8.6 : 1
Primary Container#664826 · 6.4 : 1
On Primary Container#E8DDFF · 6.4 : 1
Secondary#D9A86B · 6.1 : 1
On Secondary#3D2E00 · 6.1 : 1
Secondary Container#584300 · 7.4 : 1
On Secondary Container#F7E1B2 · 7.4 : 1
Tertiary#F7B1C9 · 7.8 : 1
On Tertiary#581038 · 7.8 : 1
Error#F6B4AA · 7.9 : 1
On Error#620002 · 7.9 : 1
Error Container#8A0005 · 7.7 : 1
On Error Container#FADAD6 · 7.7 : 1
0 %
Fig. 3Seven pairs in each theme, each label written in its counterpart color. Hover or focus a pair for its hex value and contrast ratio. Drift one pair and watch its labels sink into their swatches; ✕ marks a ratio below 4.5 : 1.

Typography

The Typography section lists the semantic type scale: display, headline, title, body, and label, each in large, medium, and small. Every entry is set in its own style and states its font family, weight, and size over line height. The type scale is the same in both themes, so this section is shown once.

Display
Display Largems-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • Bold • 38/44 px
Display Mediumms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • Bold • 29/35 px
Display SmallInter • Regular • 36 px
Headline
Headline LargeInter • Regular • 32 px
Headline Mediumms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • SemiBold • 25/31 px
Headline SmallInter • Regular • 24 px
Title
Title Largems-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • Bold • 22/28 px
Title Mediumms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • SemiBold • 18/24 px
Title Smallms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • SemiBold • 15/20 px
Body
Body Largems-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • Regular • 15/22 px
Body Mediumms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • Regular • 14/21 px
Body Smallms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • Regular • 12.5/18 px
Label
Label LargeInter • Medium • 14 px
Label Mediumms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • SemiBold • 13/16 px
Label Smallms-appx:///Uno.Fonts.OpenSans/Fonts/OpenSans.ttf • SemiBold • 11/14 px
Fig. 4Fifteen styles, each set in itself, with its font, weight, and size over line height. Type in the preview field to set every sample in your own words.

Updates as you work

When Hot Reload rebuilds your app’s global resources, the Themes item on the navigation rail shows a dot, so you know the design system changed while you were in another workspace. The Agent panel is hidden while the Themes workspace is open, which leaves the full width for the design system.

Hot Reload · rebuilding resourcesResources rebuilt
Fig. 5A loop: Hot Reload rebuilds the app’s resources while you work in the App workspace, and Themes shows a dot. Opening Themes clears the dot, and the Agent panel steps aside. The App workspace and the rebuild notice are drawn as placeholders.

The Themes workspace is read-only in 3.2. Editing the theme is the next step.

Explore Studio through sample apps

Studio 3.2 makes it easier to see what Studio can do before starting a project of your own. Open the CRM, Brewhouse, Fitness, or any other app in the samples gallery, run it, and start making changes with Hot Design.

You don’t need an account to try them. Sign-in is only required when you move into account-based actions such as working with the agent, creating a new app, saving, or exporting.

ActionAccount
Browse the samples galleryNot needed
Open and run a sampleNot needed
Make changes with Hot DesignNot needed
Work with the agentSign in
Create a new appSign in
Save or exportSign in
Table 2Where sign-in starts.

Smaller fixes

Studio 3.2 also includes a set of quality-of-life improvements across Hot Design, sign-in, the Agent panel, and project creation.

AreaChange
Hot DesignHot Design now remembers each app’s layout. Visual mode, panel layout, window sizes, and app mode are stored per app, so changing the workspace for one app no longer changes it for another.
Sign-inSigning out on iOS no longer opens the system Sign In consent alert.
An identity provider timeout no longer blocks the sign-in page.
Agent panelSelection chips behave correctly: the X in a chip’s flyout closes it, and removing one chip no longer removes every chip of the same type.
ShellEsc is handled by the Studio shell only when there is something to dismiss.
New projectsNew projects are created using the same Uno.Templates version the workspace was built with.
Table 3Fixes in Studio 3.2, by area.

Thanks for building with us

Thank you to everyone who reported issues, shared feedback, and helped shape Studio 3.2. We’d love to see what you build next, so share your projects with us on GitHub or Discord.

Available now

Studio 3.2 is available now.

Start your 15-day free trial and, for a limited time, save 25% on Uno Platform Studio at checkout.

Monthly plansUNO25M
Annual plansUNO25A