What is Roblox's primary brand color?

Roblox's CSS declares an electric cobalt (#335fff) as --color-action-emphasis-background and --color-system-emphasis — the emphasis-action fill that would appear on a prominent CTA button. However, it renders zero times in the captured marketing page. The marketing site has no colored CTA: the primary sign-up action uses a near-white (#f7f7f8) fill 'Sign Up' button with dark ink text, and the 'Log In' button in the upper-right is also white-on-black. The brand color is present only inside the product (game pages, dashboard, selection states). For the marketing surface, the color system is effectively achromatic with an electric cobalt waiting in reserve.

What typeface does Roblox use, and what should I use as a substitute?

Roblox's marketing site and product system run Builder Sans — a custom proprietary sans-serif family loaded via CSS. The CSS variables expose its full scale: typography-display-large-font through typography-caption-small-font, all in Builder Sans. The marketing page renders Builder Sans at weight 500 for interactive labels (nav links, button text, form labels) and weight 700 for the uppercase 'SIGN UP AND START HAVING FUN!' section heading. Body text in the form card is weight 300-400. The closest open-source substitute is Inter or Geist — match the exact weight and size values. Builder Sans has similar proportions to Inter at the 14-20px range.

What does Roblox's primary button look like?

The 'Sign Up' submit button on the registration form is a 36px-height element with 8px border-radius, a near-white (#f7f7f8) fill, dark charcoal (#121215) text in Builder Sans at 16px / weight 500, and 9px padding. It is not a pill; it is a near-square rounded button — the same 8px radius used on all form elements. The 'Log In' button in the upper-right uses the same near-white fill but sits against the black canvas as a higher-contrast element. No colored primary button appears anywhere in the marketing surface.

Why does Roblox use a game-mosaic rather than a designed hero background?

The game-mosaic approach solves a product-positioning problem: Roblox is a platform, not a game. A single game's artwork would misrepresent the breadth of the catalog. By filling the entire viewport with dozens of game thumbnails in overlapping diamond tiles, the page communicates scale and variety in a single glance without describing any single experience. Epic Games and Steam both use hero artwork for featured titles; Roblox inverts this by showing the collection itself. The mosaic requires no design effort that ages — it auto-refreshes as the game library evolves, making the marketing surface perpetually current.

Does Roblox have a full design token system?

Yes — the CSS custom properties exposed on roblox.com include a comprehensive Foundation token system covering light-mode, dark-mode, inverse, kids-mode, and startmode variants for every semantic role. Tokens follow the pattern --{mode}-{role} (e.g., --light-mode-action-emphasis-background, --dark-mode-surface-0, --kids-dark-color-action-standard-foreground). Builder Sans is referenced in every typography token as a computed calc() expression (e.g., 700 calc(4px * 4) / calc(140%) 'Builder Sans'). The marketing site renders only a small subset of this system; the full token vocabulary is exposed in the product app and game experiences.

Roblox Design System

Roblox's marketing-site design system as a DESIGN.md file.

About Roblox DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source roblox.com

Gaming & Entertainment
Social & Community

Roblox's home page is not a marketing site — it is a registration gate. The full viewport is filled with a mosaic of game thumbnails from the platform's user-generated library: Adopt Me!, Doors, The Mimic, Tower Heroes, Jailbreak, Bedwars, and dozens more, each in a rounded tile arranged at overlapping angles. The "ROBLOX" logotype floats centered above this content wall in white, and directly below it sits a near-white registration card (signup form, birthday picker, username and password fields, a "Sign Up" button) with 8px rounding. One "Log In" pill button lives in the upper right. That is the entire marketing surface. Where gaming platforms like Epic Games build extensive marketing narratives and Steam presents content grids, Roblox skips the narrative entirely: the game library IS the pitch, rendered edge-to-edge behind the sign-up form.

This DESIGN.md file captures 14 color tokens from the near-monochromatic marketing surface — near-white (#f7f7f8) carrying the card and canvas, a cool gray scale for borders and muted text (#d5d7dd, #707070, #494d5a), the cobalt emphasis voltage (#335fff) declared in CSS but not rendered on any marketing element, and a small alert red (#df281f). Typography tokens span Builder Sans (Roblox's custom proprietary sans) at 12 sizes from 20px uppercase section heading down to 10px fine-print caption. The CSS variables expose a comprehensive token system covering display-large through caption-small, all in Builder Sans at weights 400, 500, 600, and 700. Thirteen components cover the sign-up form, the white Log In button, the registration card, the platform badge row, and the footer strip.

Feed this file to Claude or Cursor and it will reproduce Roblox's specific approach: pure-black canvas with user-generated content as the background, near-white surface card over it, weight-500 Builder Sans for all interactive labels, 8px corner radius on forms and inputs, and the cobalt voltage reserved entirely for selection states and system emphasis inside the product. The marketing surface declares none of its brand color — the game library does that work.

What makes it distinct

Game-mosaic as herothe entire above-fold background is a collage of user-created game thumbnails, making user content the brand hero rather than any brand-designed asset
Single-screen conversion focusthe page has no scroll narrative; it is a registration gate with logo, sign-up form, and platform badges
Builder Sans at modest weights500 for interactive labels and body, 700 for the uppercase section callout; no display-tier headline exists in the marketing chrome
Cobalt voltage declared but invisible#335fff is wired as --color-action-emphasis-background but appears zero times in the captured marketing chrome
Near-white not whitethe registration card and canvas use #f7f7f8 (merged with #ffffff), a barely-visible cool tint that separates surface from pure white

Live at roblox.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

roblox.com

Explore Roblox

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Roblox design system FAQ

Common questions about Roblox's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Roblox — official site

Roblox's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.