Roblox UI Visual Design

When to Load

Load for UI design or review. Existing style and art direction take priority. Otherwise derive a restrained system from the game fantasy and screen job. Load roblox-gui for mechanics.

Quick Reference

Establish the visual system

1. Inspect existing surfaces, type roles, borders, depth, icons, spacing, and action colors. Reuse consistent tokens.
2. If no style exists, name the screen job and game fantasy before choosing colors, fonts, or decoration.
3. Define a small token set: background, surface, raised surface, text, muted text, accent, danger, border, radius, spacing, and type roles.
4. Choose density from the task and device. A HUD, inventory grid, settings list, and purchase prompt should not share one topology.
5. Use simulator styling only when the game or art direction calls for it. The full reference keeps an optional recipe.

Core principles