Colors, text styling, rounded corners, and transparency — the properties that turn boxes into an interface.
A plain gray box isn't an interface. The properties in this lesson are the difference between "something appeared" and "something looks like a game."
button.BackgroundColor3 = Color3.fromRGB(80, 200, 120)
button.TextColor3 = Color3.fromRGB(255, 255, 255)
Color3 is a color. fromRGB(red, green, blue) makes one from three numbers, 0–255 each. Set BackgroundColor3 for the fill and TextColor3 for the label.
Want a transparent background? button.BackgroundTransparency = 1 makes it invisible (1 = fully see-through). You'll see this used for floating text labels.
Make a color that is full red, no green, no blue using Color3: local red = Color3.(255, 0, 0)
Every part of a GUI can have rounded corners by adding a UICorner child:
local corner = Instance.new("UICorner")
corner.CornerRadius = UDim.new(0, 12)
corner.Parent = button
UDim.new(0, 12) is a 12-pixel radius — same scale/offset idea as UDim2, minus the second dimension. A radius of 12 makes a soft, modern corner.
What makes a GUI element's corners rounded?
label.Text = "Coins: 12"
label.TextSize = 28
label.Font = Enum.Font.GothamBold
label.TextColor3 = Color3.fromRGB(255, 255, 255)
Text — what it says.TextSize — the size in points.Font — the typeface. Enum.Font.GothamBold is the chunky Roblox standard.Text can have a shadow or stroke too — TextStrokeTransparency = 0.2 puts a subtle outline around the letters so they read over bright backgrounds.
Make a TextLabel that says 'Click!' in bold, 30-point white text. Write the three lines that set Text, TextSize, and Font.
-- style the label