The built-in Style Editor is a comprehensive tool that allows you to create, manage, and apply UI styles for Roblox experiences through a combination of tokens, design sheets, style rules, and themes.
Access the Style Editor via the UI tab (if it isn't visible, access it from the Home 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.
Style tokens
Style tokens, defined through attributes of a token StyleSheet, represent UI property variables that can be used across styles and components; for example, there could be a common color for a Frame.BackgroundColor3, TextLabel.TextColor3, and UIStroke.Color. Tokens are comparable to CSS variables.
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.
Token Name Type Value Gold Color3 #ffcc00 Magenta Color3 #ff0099 Orange Color3 #dd6030 Oswald Font Oswald Rad20 UDim 0, 20 RectL UDim2 0, 300, 0, 160 SquareL UDim2 0, 200, 0, 200 Text24 number 24 Text32 number 32 
Design sheets
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.
Once you have a design sheet, you can set up a test on‑screen container to use with the Style Editor, or an in‑experience container if desired.
Hover over StarterGui in the Explorer and insert a ScreenGui.
Confirm that a new StyleLink instance appears under the ScreenGui with its StyleSheet property set to the StyleSheet design sheet.
Style rules
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:
- Roblox class selectors which target all instances of a given UI class, for example Frame, ImageLabel, TextButton, etc.
- GuiObject state selectors which correspond to one of the four Enum.GuiState enum values such as Hover.
- Instance name selection according to the value of the UI object's Instance.Name.
Class rule
A style class selector targets all instances of a given UI class. The following rule setup styles all Frames with a uniform background color and size.
In the left column of the Style Editor, select Frame in the UI Elements branch.
Link two previously created style tokens to two Frame properties:
Property Style Token BackgroundColor3 $Magenta Size $SquareL - 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.
Tag rule
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 .).
Link three previously created style tokens to three TextButton properties:
Property Style Token BackgroundColor3 $Gold FontFace $Oswald TextSize $Text32 - 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.
Insert a new TextButton into the ScreenGui you previously created and linked and tag it as ButtonPrimary. A convenient shortcut is as follows:
- Make sure the new TextButton is selected in the Explorer.
- 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.
UI modifier
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.
Link a previously created style token to the TextSize property:
- 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.
Insert a new TextLabel into the ScreenGui you previously created and linked. The styles you defined should automatically apply to it.
State rule
GuiObject state 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 themes
Style themes consist of sets of specific tokens that can be swapped, for example color tokens that define a "light" and "dark" theme.
Theme creation
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.
- Rename it to ThemeA.
Theme tokens
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:
Property Theme Token BackgroundColor3 $BackColor FontFace $ButtonFont TextSize $ButtonTextSize - 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).
Theme duplication
Once you have a theme generally established, you can duplicate it and change various tokens to define a unique theme style.
In the left column of the Style Editor, hover over the ThemeA theme, click the ⋮ button, and select Duplicate.
Rename the duplicated theme to ThemeB.
Link two of the theme's tokens to two different style tokens:
Theme Token Style Token BackColor $Magenta ButtonTextSize $Text24 - To the right of the property's value field, click the ⋮ button and select Unlink Token.
- Click ⋮ again and select Link Token.
- In its value field, click the $ and select the new associated style token.
Theme swapping
Once you have multiple themes, you can swap between them via the theme's folder, or via a script as outlined in SetDerives().
In the left column of the Style Editor, select the General folder in the Themes branch.
In the main panel, swap between the themes using the radio buttons.
