Explore the built-in Style Editor, a comprehensive tool that allows you to create, manage, and apply UI styles for Roblox games.
The built-in Style Editor is a comprehensive tool that allows you to create, manage, and apply UI styles for Roblox games through a combination of tokens, design sheets, style rules, and themes.
Access the Style Editor via the UI tab.
Once open, click the Create Design button to generate a base style set.
Creating a design style set through the Style Editor generates a BaseStyleSheet inside a Design folder within ReplicatedStorage. This base sheet syncs specific engine‑level defaults like the Color3 default of [163, 162, 165] with defaults that come from insertion workflows in Studio. It's highly recommended that you do not delete or attempt to modify the base style sheet — instead, build tokens and style rules around a design sheet to match your UI goals.
Additionally, a StyleSheet sheet is generated in the Design folder which contains a StyleDerive to the base style sheet. If you choose to remove that StyleDerive, unstyled values for GuiObjects may become unexpected values, for example a default Size of 0, 0, 0, 0.
Although not required for UI styling, tokens are highly recommended for extensible UI design and style updates over time. You should begin by creating the following tokens to understand how they tie into other aspects of universal styling.
Create a new token style sheet:
In the left column of the Style Editor, hover over Tokens, click the ⊕, and select New Token StyleSheet.
Rename the new sheet to TokenSheet.
With the new token sheet selected, create several tokens by clicking Add a Token… in the main panel. These tokens will be used throughout this guide for both rules and themes.
A design style sheet aggregates style rules and can be linked to DataModel trees to apply style properties to UI instances. Only one StyleSheet can apply to a given tree, although you can use themes to swap related styles across your UI, a concept covered later in this guide.
A prepopulated design sheet named StyleSheet is created via the Create Design button. It contains class rules for common UI objects such as Frame and TextLabel. It also contains two StyleDerive instances which derive (inherit) tokens and styles from the base style sheet for use in your custom styling configurations.
Confirm that a new StyleLink instance appears under the ScreenGui with its StyleSheet property set to the StyleSheet design sheet.
If the StyleLink is not created, you can quickly create one by selecting the ScreenGui in the Explorer as well as the StyleSheet design sheet in the left column of the Style Editor. Then, click the Insert StyleLink button in the upper‑right section of the editor's main panel.
Style rules apply to every instance that matches the rule's Selector definition to match characteristics such as class name, instance tag, and hierarchy relationships. At a high level, instance matching and modification via a rule's Selector definition operates through:
Click Add a Property… in the main panel and select the necessary property. Note that you can type keywords to more quickly find properties in the dropdown menu.
Instead of entering a static value, click the ⋮ button and select Link Token.
Click the $ which appears in the value field and select the proper associated token.
Insert a new Frame into the ScreenGui you previously created and linked. The styles you defined should automatically apply to it.
Instance tag selectors target specific UI objects tagged through CollectionService. The following rule setup styles a TextButton tagged as ButtonPrimary with a custom background color, font, and text size.
In the left column of the Style Editor, hover over the StyleSheet sheet, click the ⋮ button, and navigate through to New ⟩ Tag.
Rename the new tag rule .ButtonPrimary (note the leading .).
Click Add a Property… in the main panel and select the necessary property. Remember that you can type keywords to more quickly find properties in the dropdown menu.
Instead of entering a static value, click the ⋮ button and select Link Token.
Click the $ which appears in the value field and select the proper associated token.
With the .ButtonPrimary tag rule selected in the left column of the Style Editor, click Apply Tag in the main panel. The styles you defined should automatically apply to the button.
Instance modifier selectors apply phantom UIComponents such as UICorner or UIStroke to further style an object. The following rule setup styles a TextLabel with a custom text size and rounded corners.
In the left column of the Style Editor, select TextLabel in the UI Elements branch.
Click Add a Property… in the main panel and select the TextSize property. Remember that you can type keywords to more quickly find properties in the dropdown menu.
Instead of entering a static value, click the ⋮ button and select Link Token.
Click the $ which appears in the value field and select the $Text32 token.
A pseudo instance is required to configure and apply rounded corners to other elements. To create one:
In the left column, hover over TextLabel, click the ⋮ button, and navigate through to New ⟩ Pseudo Instance ⟩ UICorner.
A new UICorner pseudo instance appears under the TextLabel element in the left column.
With the new UICorner instance selected in the left column, link a previously created style token to the CornerRadius property:
Click Add a Property… in the main panel and select the CornerRadius property.
Instead of entering a static value, click the ⋮ button and select Link Token.
Click the $ which appears in the value field and select the $Rad20 token.
GuiObjectstate selectors correspond to one of the four GuiState enum values such as Hover, letting you automatically configure style changes for interactive states. The following rule setup creates a hover state of -4 degrees rotation for all ImageButtons.
In the left column of the Style Editor, select ImageButton in the UI Elements branch.
Click the ⋮ button and navigate through to New ⟩ GuiState ⟩ Hover.
A new Hover state modifier instance appears under the ImageButton element in the left column.
With the new Hover modifier selected in the left column, click Add a Property… in the main panel and select Rotation. Remember that you can type keywords to more quickly find properties in the dropdown menu.
Enter -4 in the property's value field.
Insert a new ImageButton into the ScreenGui you previously created and linked. When you hover over the button in the viewport, it should rotate 4 degrees counterclockwise.
Style queries, similar to CSS container and media queries, allow you to apply conditional logic to your UI based on container size, input type, or other factors. The Style Editor provides a streamlined workflow to create both the query logic (conditions) and the resulting styles as a unified set.
Some StyleQuery conditions are very common, such as changing properties based on the ViewportDisplaySize. To simplify this, the Style Editor includes built‑in queries which allow you to create conditional rules without needing a pseudo or real instance of a StyleQuery; instead, you simply use a query rule with a predefined selector like ViewportDisplaySizeSmall.
The following steps demonstrate how to generate built‑in queries for a TextLabel to handle Small, Medium, and Large viewport sizes.
In the left column of the Style Editor, hover over TextLabel, click the ⋮ button, and navigate through to New ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.
This creates a Queries folder under the TextLabel rule containing three query rules:
@ViewportDisplaySizeLarge — Define properties that apply when the viewport is Large.
@ViewportDisplaySizeMedium — Define properties that apply when the viewport is Medium.
@ViewportDisplaySizeSmall — Define properties that apply when the viewport is Small.
Click Add a Property… under each query rule and set the specific Text string that should display when that query is active:
You can add a style query to any existing rule to create responsive UI that adapts to its container. The following setup configures a TextLabel to automatically change its appearance only when it expands to a width of 400 pixels or more.
In the left column of the Style Editor, hover over TextLabel, click the ⋮ button, and navigate through to New ⟩ StyleQuery ⟩ Custom.
This action creates a Queries folder under the TextLabel rule containing two linked items:
::StyleQuery pseudo-instance rule where you define the Conditions.
@StyleQuery rule where you define the Properties to apply when those conditions are met.
Select the parent TextLabel rule in the main panel and define the following default properties:
To tween many UI properties with the same parameters, you can set a default transition that applies to all properties unless another transition is explicitly set for a specific property.
Select TextButton in the UI Elements branch and then, in the main panel, add three new properties with the following values:
Hover over the parent TextButton row, click the ⋮ button, and navigate through to Insert ⟩ Transition.
A default transition of 1, Quad, Out, 0 inserts directly under the TextButton rule, indicating a transition of 1 second, easing style Quad, easing direction Out, and no delay.
Hover over the parent TextButton row, click the ⋮ button, and navigate through to New ⟩ GuiState ⟩ Hover.
For the new Hover modifier, add two new properties as the targets for the hover state.
Insert a new TextButton into the ScreenGui you previously created and linked. When you hover over the button in the viewport, it should gradually brighten and rotate 5 degrees counterclockwise.
To reuse transition behaviors across multiple rules, you can define tokens representing the TweenInfo data type. The following rule setup creates a hover state to transition all TextButtons to/from -5 degrees rotation and a lighter background color.
If you haven't already, create a token style sheet named TokenSheet.
With the new token sheet selected, create two new tokens by clicking Add a Token… in the main panel.
For each new property except for AutoButtonColor, hover over its row, click the ⋮ button, and select Insert ⟩ Transition.
Hover over the new Transition row under each property, click the ⋮ button, and select Link Token. Then, instead of entering a static value, click the $ which appears in the value field and select the proper transition token.
Insert a new TextButton into the ScreenGui you previously created and linked. When you hover over the button in the viewport, it should gradually brighten and rotate 5 degrees counterclockwise.
For extensibility, themes are organized into folders. While a single folder may suffice for most purposes, you're free to organize themes in folders like "colors" or "fonts" if desired.
Create a new theme folder:
In the left column of the Style Editor, hover over Themes, click the ⊕, and select New Theme.
Rename the new Folder item to General.
Create a new theme style sheet:
Hover over the new General folder, click the ⋮ button, and select New Theme StyleSheet.
Once a theme is constructed, you can link its tokens to various UI object properties such as the BackgroundColor3 of a TextButton. Theme sheets must use a common set of tokens to work correctly.
With ThemeA selected in the left column of the Style Editor:
Link three previously created style tokens to three new theme tokens:
Theme Token
Style Token
BackColor
$Gold
ButtonFont
$Oswald
ButtonTextSize
$Text32
Click Add a Token… in the main panel and enter the theme token's name.
Click the $ which appears in the value field and select the associated style token.
In the left column of the Style Editor, select TextButton in the UI Elements branch.
Link the theme's tokens to three new TextButton properties:
Click Add a Property… in the main panel and select the necessary property.
Instead of entering a static value, click the ⋮ button and select Link Token.
Click the $ which appears in the value field and select the proper theme token.
When linking the theme's tokens, look for $[Token] in ThemeA in the hover‑over to know the token is coming from the theme and not from the global token sheet (remember that the theme already derives the global tokens).
