roblox-ui-design

name	roblox-ui-design
description	Roblox UI design with simulator default and existing-style inheritance. Use with `roblox-gui`.
last_reviewed	"2026-07-13T00:00:00.000Z"
sources	["https://create.roblox.com/docs/production/publishing/adaptive-design","https://create.roblox.com/docs/production/publishing/accessibility","https://create.roblox.com/docs/ui/styling",["original"]]

Roblox UI Visual Design

When to Load

Load for Roblox UI design/review. No style source: use the simulator default. Existing UI/reference: preserve its style while applying these rules. Load roblox-gui for mechanics.

Quick Reference

Style

Existing UI/reference > explicit art direction > default.

For existing style, inspect surfaces, fonts, borders, depth, icons, spacing, and action colors. Reuse those tokens. Borrow style, not broken geometry. Do not import conflicting simulator conventions.

Core Principles

• Topology: choose composition from the job: single-focus, collection, compare, HUD, list, or another justified shape. Do not force every task into one modal.
• Hierarchy: one focal 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. Do not mix layout objects with guessed offsets.
• Density: size the complete panel around useful content. Do not stretch shells or add metadata to fill space.
• Bounds: sum widths, gaps, padding, borders, and minimums. Keep content, strokes, and backings inside parents.
• Alignment: use shared layouts, fixed icon slots, and matching anchors. Do not independently offset paired icons and labels.
• State: active, available, locked, completed, and disabled states need structural/textual differences. Color is not the only signal.
• Verification: inspect the target viewport for clipping, overflow, dead space, type, and hierarchy. A valid tree is not proof of good composition.

Default

Default: bold, layered, toy-like UI over 3D gameplay.

• Base: charcoal/warm brown. Green = claim/buy; red = danger/close; yellow = premium; blue = navigation/currency; purple = rare.
• Display: FredokaOne (cute) or Oswald (action); body: BuilderSans.
• Display type covers titles, section labels, item names, and key stats. Secondary values stay clean and smaller. Outline title and primary CTA only.
• Use one neutral outline per surface. Backings share the radius or stay inset. Put color in fills, active insets, or small cues, not every perimeter.
• Content cards need a centered focal icon/art placeholder. Do not leave item grids blank.

Anti-Patterns

Oversized shells, wide panels around narrow stacks, fixed offsets in auto-sized flows, drifting actions, colored outlines on every card, blank item boxes, independent icon/label offsets, or simulator styling pasted over an existing identity.

Full specs and QA checklist: references/full.md