UI styling

UI styling is a Roblox solution to stylesheets, similar to CSS, that lets you declare and globally apply overrides to UI instance properties. This engine‑level support is the foundation for the Style Editor and the end‑to‑end token pipeline.

Concepts

Style rules (part of a StyleSheet) apply to every instance that matches the rule's Selector definition to match characteristics such as class name, instance name, and hierarchy relationships. See the Selector documentation for details.

Style tokens, defined through attributes of a token StyleSheet, represent UI property variables that can be used across styles and components, for example a common color for a Frame.BackgroundColor3, TextLabel.TextColor3, and UIStroke.Color. Tokens are comparable to CSS variables.

Style themes, configured through attributes of a theme StyleSheet, consist of sets of specific tokens that can be swapped, for example color tokens that define a "light" and "dark" theme. Related themes must have the same set of tokens to work correctly.

Rule propagation

A StyleLink instance links a StyleSheet and its associated rules to a parent ScreenGui and all of the GuiObjects within it. Only one StyleSheet can apply to a given tree.

Selector definitions

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 GuiObject class, for example Frame, ImageLabel, TextButton, etc.
• Instance tags applied to specific UI objects through CollectionService.
• Instance name selection according to the value of the UI object's Instance.Name.
• Instance modifiers, similar to CSS pseudo-elements, applied through phantom UIComponents such as UICorner or UIStroke.
• GuiObject state selectors, similar to CSS pseudo-class selectors, which correspond to one of the four GuiState enum values such as Hover.

The following setup shows how size and color tokens, a theme, and a class selector of "Frame" produce a magenta Frame of size 200×200 pixels.

UI Class Selector
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- Tokens
local tokens = Instance.new("StyleSheet")
tokens.Name = "Tokens"
tokens.Parent = ReplicatedStorage
tokens:SetAttribute("SquareS", UDim2.fromOffset(50, 50))
tokens:SetAttribute("SquareM", UDim2.fromOffset(100, 100))
tokens:SetAttribute("SquareL", UDim2.fromOffset(200, 200))
tokens:SetAttribute("Fit", UDim2.fromScale(1, 1))
tokens:SetAttribute("Magenta", Color3.fromHex("FF0099"))
tokens:SetAttribute("Gold", Color3.fromHex("FFCC00"))
tokens:SetAttribute("Aqua", Color3.fromHex("0093F0"))

-- ThemeA
local themeA = Instance.new("StyleSheet")
themeA.Name = "ThemeA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Derive global tokens
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- ThemeB
local themeB = Instance.new("StyleSheet")
themeB.Name = "ThemeB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Derive global tokens
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- DesignSheet
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- Derive from ThemeB
themeDerive.Parent = designSheet

-- Link DesignSheet to ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Configure rule
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Class selector
rule.Parent = designSheet

-- Set rule properties
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

local frame = Instance.new("Frame")
frame.Parent = screenGui

Modified properties

Instance properties affected by styling are flagged with a ⚠ in the Properties window, and hovering over an affected property shows which style is influencing it. For example, if a style rule tells a tagged Frame to use an AnchorPoint of 0.5, 0.5, that object property will show the default value of 0, 0 but its actual AnchorPoint will use the rule's styled value.

When a default or styled property value is further modified for a specific UI object, it becomes bold to indicate an overridden value. For example — assuming a default AnchorPoint of 0, 0 — setting that property to 1, 1 for a specific instance reveals an override in bold:

For any overridden property value, you can right-click it in the Properties window and select Reset to Default to revert it to the styled value, or to the default property value if it hasn't been styled.