Roblox UI Visual Design

When to Load

roblox-gui

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

• Topology: choose single-focus, collection, compare, HUD, list, or another justified shape. Do not force every task into a centered modal.
• Hierarchy: one object, state, or action gets the strongest contrast and scale. Quiet secondary content.
• Flow: each repeated flow has one owner:

  UIListLayout

  ,

  UIGridLayout

  , or shared-column math.
• Density: size the complete panel around useful content. Do not stretch shells or add metadata to occupy space.
• Bounds: sum widths, gaps, padding, borders, and minimums. Keep strokes and backings inside parents.
• Alignment: use shared layouts, fixed icon slots, and matching anchors.
• State: active, available, locked, completed, selected, and disabled states need more than color.
• Input: design hover only where it exists. Touch, gamepad focus, keyboard, and reduced motion need equivalent feedback.
• Verification: inspect representative target viewports for clipping, overflow, dead space, type, hierarchy, and focus order.

Neutral fallback

Anti-patterns

Style inference, optional simulator recipe, composition, interaction states, and QA: references/full.md