RBLX design system

Every component, live.

The building blocks behind instant Robux top-ups. Toggle, select, and hover — it all works.

Actions

Buttons and controls

Variants

Sizes

Icons, loading, full width

Icon buttons

Forms

Inputs and toggles

Text inputs

Roblox username

Promo code

Optional — applied at checkout

That email looks off

Select

Game

Where your Robux lands

Switches

Instant deliveryEmail me a receiptDisabled

Checkboxes

Save this usernameI agree to the termsDisabled

Data display

Surfaces and status

Cards

Light surface

White card for high contrast.

Dark surface

Elevated charcoal. Hover to lift.

Brand hero

Gradient panel with glow.

Badges

NeutralBrandDeliveredPendingFailedInfo

Tags (selectable)

FastestCheapestBonus Robux

Tags (removable)

CardPayPalCrypto

Avatars

ARSLJKRF

Feedback

Progress and notifications

Progress

Delivering Robux72%

Spinners

Toasts

Robux delivered

1,700 R$ landed in your account.

Bonus unlocked

You earned +120 bonus Robux.

Almost there

Confirm your username to continue.

Payment failed

Your card was declined. Try another.

RBLX

Top-up flow

Robux amount cards

Payment methods

Delivery status

Paid

Delivering

3Delivered