rojo/.cursor/rules/roblox/ui/styling/editor.md

title	description
Style Editor	Explore the built-in Style Editor, a comprehensive tool that allows you to create, manage, and apply UI styles for Roblox experiences.

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.

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 `Class.ReplicatedStorage`. This base sheet syncs specific engine‑level defaults like the `Datatype.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 Class.StyleDerive to the base style sheet. If you choose to remove that Class.StyleDerive, unstyled values for Class.GuiObject|GuiObjects may become unexpected values, for example a default Class.GuiObject.Size|Size of 0, 0, 0, 0.

Style tokens

Style tokens, defined through attributes of a token Class.StyleSheet, represent UI property variables that can be used across styles and components; for example, there could be a common color for a Class.Frame.BackgroundColor3, Class.TextLabel.TextColor3, and Class.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.

1. Create a new token style sheet:

   1. In the left column of the Style Editor, hover over Tokens, click the ⊕, and select New Token StyleSheet.
   2. Rename the new sheet to TokenSheet.
   

2. 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`	`Datatype.Color3`	`#ffcc00`
   `Magenta`	`Datatype.Color3`	`#ff0099`
   `Orange`	`Datatype.Color3`	`#dd6030`
   `Oswald`	`Datatype.Font`	`Oswald`
   `Rad20`	`Datatype.UDim`	`0, 20`
   `RectL`	`Datatype.UDim2`	`0, 300, 0, 160`
   `SquareL`	`Datatype.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 Class.DataModel trees to apply style properties to UI instances. Only one Class.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 Class.Frame and Class.TextLabel. It also contains two Class.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.

1. Hover over Class.StarterGui in the Explorer and insert a Class.ScreenGui.

2. Confirm that a new Class.StyleLink instance appears under the Class.ScreenGui with its Class.StyleLink.StyleSheet|StyleSheet property set to the StyleSheet design sheet.

   If the `Class.StyleLink` is not created, you can quickly create one by selecting the `Class.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

Style rules apply to every instance that matches the rule's Class.StyleRule.Selector|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 Class.StyleRule.Selector|Selector definition operates through:

• Roblox class selectors which target all instances of a given UI class, for example Class.Frame, Class.ImageLabel, Class.TextButton, etc.
• Instance tag selectors that target specific UI objects tagged through Class.CollectionService.
• Instance modifiers applied through phantom Class.UIComponent|UIComponents such as Class.UICorner or Class.UIStroke.
• Class.GuiObject state selectors which correspond to one of the four Enum.GuiState enum values such as Enum.GuiState.Hover|Hover.
• Instance name selection according to the value of the UI object's Class.Instance.Name.

Class rule

A style class selector targets all instances of a given UI class. The following rule setup styles all Class.Frame|Frames with a uniform background color and size.

1. In the left column of the Style Editor, select Frame in the UI Elements branch.

   

2. Link two previously created style tokens to two Class.Frame properties:

   Property	Style Token
   `Class.Frame.BackgroundColor3|BackgroundColor3`	`$Magenta`
   `Class.Frame.Size|Size`	`$SquareL`

   1. 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.
   2. Instead of entering a static value, click the ⋮ button and select Link Token.
   3. Click the $ which appears in the value field and select the proper associated token.

   
   

   

3. Insert a new Class.Frame into the Class.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 Class.CollectionService. The following rule setup styles a Class.TextButton tagged as ButtonPrimary with a custom background color, font, and text size.

1. In the left column of the Style Editor, hover over the StyleSheet sheet, click the ⋮ button, and navigate through to New ⟩ Tag.

   

2. Rename the new tag rule .ButtonPrimary (note the leading .).

   

3. Link three previously created style tokens to three Class.TextButton properties:

   Property	Style Token
   `Class.TextButton.BackgroundColor3|BackgroundColor3`	`$Gold`
   `Class.TextButton.FontFace|FontFace`	`$Oswald`
   `Class.TextButton.TextSize|TextSize`	`$Text32`

   1. 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.
   2. Instead of entering a static value, click the ⋮ button and select Link Token.
   3. Click the $ which appears in the value field and select the proper associated token.

   
   

   

4. Insert a new Class.TextButton into the Class.ScreenGui you previously created and linked and tag it as ButtonPrimary. A convenient shortcut is as follows:

   1. Make sure the new Class.TextButton is selected in the Explorer.
   2. 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 Class.UIComponent|UIComponents such as Class.UICorner or Class.UIStroke to further style an object. The following rule setup styles a Class.TextLabel with a custom text size and rounded corners.

1. In the left column of the Style Editor, select TextLabel in the UI Elements branch.

   

2. Link a previously created style token to the Class.TextLabel.TextSize|TextSize property:

   1. Click Add a Property… in the main panel and select the Class.TextLabel.TextSize|TextSize property. Remember that you can type keywords to more quickly find properties in the dropdown menu.
   2. Instead of entering a static value, click the ⋮ button and select Link Token.
   3. 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:

1. 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.

   

2. With the new UICorner instance selected in the left column, link a previously created style token to the Class.UICorner.CornerRadius|CornerRadius property:

   1. Click Add a Property… in the main panel and select the Class.UICorner.CornerRadius|CornerRadius property.
   2. Instead of entering a static value, click the ⋮ button and select Link Token.
   3. Click the $ which appears in the value field and select the $Rad20 token.
   

3. Insert a new Class.TextLabel into the Class.ScreenGui you previously created and linked. The styles you defined should automatically apply to it.

   

State rule

Class.GuiObject state selectors correspond to one of the four Enum.GuiState|GuiState enum values such as Enum.GuiState|Hover, letting you automatically configure style changes for interactive states. The following rule setup creates a hover state of -4 degrees rotation for all Class.ImageButton|ImageButtons.

1. In the left column of the Style Editor, select ImageButton in the UI Elements branch.

   

2. 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.

   

3. With the new Hover modifier selected in the left column, click Add a Property… in the main panel and select Class.ImageButton.Rotation|Rotation. Remember that you can type keywords to more quickly find properties in the dropdown menu.

4. Enter -4 in the property's value field.

   

5. Insert a new Class.ImageButton into the Class.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.

1. Create a new theme folder:

   1. In the left column of the Style Editor, hover over Themes, click the ⊕, and select New Theme.
   2. Rename the new Folder item to General.
   

2. Create a new theme style sheet:

   1. Hover over the new General folder, click the ⋮ button, and select New Theme StyleSheet.
   2. Rename it to ThemeA.
   

Theme tokens

Once a theme is constructed, you can link its tokens to various UI object properties such as the Class.TextButton.BackgroundColor3|BackgroundColor3 of a Class.TextButton. Theme sheets must use a common set of tokens to work correctly.

With ThemeA selected in the left column of the Style Editor:

1. Link three previously created style tokens to three new theme tokens:

   Theme Token	Style Token
   `BackColor`	`$Gold`
   `ButtonFont`	`$Oswald`
   `ButtonTextSize`	`$Text32`

   1. Click Add a Token… in the main panel and enter the theme token's name.
   2. Click the $ which appears in the value field and select the associated style token.
   

2. In the left column of the Style Editor, select TextButton in the UI Elements branch.

   

3. Link the theme's tokens to three new Class.TextButton properties:

   Property	Theme Token
   `Class.TextButton.BackgroundColor3|BackgroundColor3`	`$BackColor`
   `Class.TextButton.FontFace|FontFace`	`$ButtonFont`
   `Class.TextButton.TextSize|TextSize`	`$ButtonTextSize`

   1. Click Add a Property… in the main panel and select the necessary property.
   2. Instead of entering a static value, click the ⋮ button and select Link Token.
   3. 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.

1. In the left column of the Style Editor, hover over the ThemeA theme, click the ⋮ button, and select Duplicate.

2. Rename the duplicated theme to ThemeB.

   

3. Link two of the theme's tokens to two different style tokens:

   Theme Token	Style Token
   `BackColor`	`$Magenta`
   `ButtonTextSize`	`$Text24`

   1. To the right of the property's value field, click the ⋮ button and select Unlink Token.
   2. Click ⋮ again and select Link Token.
   3. 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 Class.StyleSheet:SetDerives()|SetDerives().

1. In the left column of the Style Editor, select the General folder in the Themes branch.

2. In the main panel, swap between the themes using the radio buttons.