Roblox

Overview

Roblox is a platform-agnostic metaverse engine serving millions of creators and players globally. The design system embraces a 'Dark-Centric Maximalism' aesthetic: a near-black canvas (rgb(25, 26, 31)) acts as a neutral stage, while vibrant accent colors—electric blue (#335fff), vivid green (#39c582), and pure white (#ffffff)—punctuate the interface to signal interactivity, success, and primary actions. The emotional response is energetic yet controlled: the dark background reduces cognitive load during extended play sessions, while the saturated accent palette creates moments of visual delight and clear affordance hierarchy.

The brand voice is youthful, direct, and action-oriented. Vocabulary emphasizes creation ('build', 'imagine', 'create'), community ('friends', 'together', 'global'), and possibility ('infinite', 'anything', 'experience'). Example sentence in brand voice: 'Imagine, create, and play together with millions of people across an infinite variety of immersive, user-generated 3D worlds.'

Colors

The color system is built on a dark-first foundation with high-contrast accents. Surface (#191a1f) and its container variants (surface-dim #121215 through surface-container-highest #35363d) provide the foundational palette, ensuring text legibility at 16px body size with on-surface (#f7f7f8) achieving WCAG AAA contrast ratios. Primary (#ffffff) is reserved exclusively for the most prominent CTA (Log In button, 48px height, 8px border-radius, 9px vertical padding) and high-emphasis interactive states. Secondary (#70a0ff) and its container (#335fff) drive secondary actions, progress indicators, and focus states—applied at 8px border-radius with 1px inset focus rings (box-shadow: inset 0 0 0 1px #335fff). Tertiary (#39c582) and error (#e75750) are used for success confirmations and destructiv

Typography

The typography system uses Builder Sans exclusively across all scales, from display (60px, 700 weight, -0.02em letter-spacing) down to label-sm (12px, 500 weight, 0.02em letter-spacing). The hierarchy is built on a 4px baseline grid: display and headline-lg use tighter letter-spacing (-0.02em, -0.01em) to create visual compression and authority, while body-md (16px, 400 weight, 24px line-height) and body-lg (18px, 400 weight, 28px line-height) maintain 1.5x line-height ratios for readability over dark backgrounds. All labels use 500 weight to ensure legibility at small sizes; apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on label-sm elements placed over busy game-preview backgrounds. Title-lg (20px, 600 weight) is used for card headers and section titles, with 28px line-height providing

Layout

The layout system uses a 12-column grid with a 1280px max-width container, centered with equal gutters (24px on each side). Page rhythm is established through lg spacing (40px) between major sections (hero, sign-up form, device download section), md spacing (24px) between cards and form groups, and sm spacing (12px) between list items and inline elements. The sign-up form occupies a centered column (approximately 416px wide) with 24px padding on all sides, creating a focal point against the full-bleed background image. Input fields use 40px height with 5px vertical padding and 12px horizontal padding, maintaining touch-target minimums. The footer uses a 4-column layout at desktop, collapsing to 2 columns at tablet (768px breakpoint) and 1 column on mobile (375px breakpoint).

Elevation & Depth

Depth is conveyed through layered semi-transparent overlays and subtle shadows rather than sharp elevation jumps. Level 1 (Base): full-bleed background image with rgba(0, 0, 0, 0.5) overlay, creating a darkened canvas. Level 2 (Cards & Modals): rgba(0, 0, 0, 0.5) background with 1px border at rgba(208, 217, 251, 0.1), paired with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated Modals & Popovers): rgba(0, 0, 0, 0.6) background with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25). Hover states on cards transition to rgba(0, 0, 0, 0.6) with the Level 2 shadow, creating a subtle lift. Focu

Shapes

The shape system follows 'Soft-Technical Precision': a blend of sharp utility and approachable curves. Buttons and inputs use 8px border-radius (DEFAULT), creating a modern, slightly rounded aesthetic that feels contemporary without being overly organic. Cards and containers use 12px (md) for secondary surfaces, and 16px (lg) for elevated modals, increasing radius as elevation increases. The full radius (9999px) is reserved for badges and pill-shaped elements (tertiary-container background with 4px vertical padding). The 3px (sm) radius is used sparingly for micro-interactions like focus rings

Components

Action Elements Buttons are the primary interaction primitive. button-primary uses white (#ffffff) background with 191a1f text, 40px height, 8px border-radius, and 9px vertical padding (total 24px horizontal). On hover, the background transitions to primary-fixed-dim (#e6e7ea) with a 150ms ease-out timing function. button-secondary mirrors the primary structure but uses surface-container-high (#2a2b32) background with on-surface text; on hover, it shifts to surface-container-highest (#35363d). button-accent applies secondary (#70a0ff) background with on-secondary text for high-emphasis secondary actions; hover state uses secondary-fixed-dim (#335fff). All buttons use font-weight: 500 and label-md typography (14px, 20px line-height, 0.01em letter-spacing). Focus states apply outline: 2p

Do's and Don'ts

**Do**

• Do use primary (#ffffff) exclusively for the most prominent CTA on each page—typically a single Log In or Sign Up button at 40px height with 8px radius.
• Do apply secondary (#70a0ff) and tertiary (#39c582) as accent colors for secondary actions, progress indicators, and success states; never use them for body text.
• Do maintain 24px gutter spacing on desktop, reducing to 16px on tablet and 12px on mobile, to preserve the visual rhythm across breakpoints.
• Do use Builder Sans at 500 weight for all labels and buttons to ensure legibility at small sizes over dark backgrounds.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on card hover states to create a subtle depth transition without introducing new colors.

**Don't**

• Don't use primary (#ffffff) for body text or secondary UI elements; reserve it for high-emphasis CTAs and focus states only.
• Don't apply border-radius values outside the defined scale (3px, 8px, 12px, 16px, 24px, 9999px); arbitrary radii break the visual system.
• Don't use outline-width greater than 2px on focus states; the secondary (#70a0ff) 2px outline with 2px offset is the standard.
• Don't layer more than two semi-transparent overlays (e.g., rgba(0, 0, 0, 0.5) + rgba(0, 0, 0, 0.1)) on the same surface; use discrete opacity values instead.
• Don't apply letter-spacing greater than 0.02em on body text; tighter spacing (0em to -0.02em) is reserved for display and headline scales.