Use for Roblox UI composition, hierarchy, visual systems, style inheritance, accessibility, and design review.

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 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 Use one restrained surface and border language, one display role, one body role, and one accent. Let game content, artwork, and action importance create identity. Prefer readable contrast and clear grouping over thick outlines, ornamental depth, or genre assumptions. Anti patterns Oversized shells, guessed offsets in managed layouts, drifting actions, blank item boxes, color only state, mouse only feedback, decoration before hierarchy, and a familiar simulator skin pasted over unrelated art direction. Style inference, optional simulator recipe, composition, interaction states, and QA: [references/full.md](references/full.md)

roblox-ui-design