---
version: alpha
name: "Roblox"
website: "https://www.roblox.com"
description: >-
  A user-generated gaming platform whose marketing site is a single-screen sign-up gate — a pure-black canvas filled
  edge-to-edge with animated thumbnails of community-made games (Adopt Me!, Doors, The Mimic, Tower Heroes), a
  white "ROBLOX" logotype centered above a registration form in a near-white (#f7f7f8) card, and a lone white
  pill "Log In" button in the upper-right corner. The system runs Builder Sans — a custom proprietary sans — at
  weight 500 for interactive labels and 700 for uppercase section headings; its electric cobalt (#335fff) is the
  selection-state and system-emphasis voltage wired into CSS but absent from the page chrome; and the entire
  experience orients toward conversion, not brand storytelling.

seo:
  title: "Roblox Design System for React — Builder Sans, black game-mosaic canvas, 13 components"
  metaDescription: "Roblox's marketing-site design system as a DESIGN.md file. Black game-mosaic canvas, Builder Sans at weight 500-700, near-white card with 8px rounding, 14 color tokens. For React, Next.js, and AI tools."
  highlights:
    - "Game-mosaic as hero — the 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 focus — the page has no scroll narrative; it is a registration gate with logo, sign-up form, and platform badges"
    - "Builder Sans at modest weights — 500 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 white — the registration card and canvas use #f7f7f8 (merged with #ffffff), a barely-visible cool tint that separates surface from pure white"
  tags:
    - "Gaming & Entertainment"
    - "Social & Community"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.roblox.com"
      title: "Roblox — official site"
      description: "Roblox's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Roblox's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typeface does Roblox use, and what should I use as a substitute?"
      answer: "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."
    - id: "button-style"
      title: "What does Roblox's primary button look like?"
      answer: "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."
    - id: "canvas"
      title: "Why does Roblox use a game-mosaic rather than a designed hero background?"
      answer: "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."
    - id: "token-system"
      title: "Does Roblox have a full design token system?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "chat-conversation"

colors:
  ink: "#121215"
  ink-soft: "#212326"
  ink-muted: "#494d5a"
  ink-light: "#707070"
  canvas: "#f7f7f8"
  canvas-deep: "#191a1f"
  hairline: "#d5d7dd"
  hairline-light: "#d0d9fb"
  system-emphasis: "#335fff"
  system-alert: "#df281f"
  system-success: "#39c582"
  system-warning: "#f2ba2a"
  link-light: "#70a0ff"
  shadow: "#000000"

typography:
  display-lg:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 700
    lineHeight: 96px
    letterSpacing: "-0.8px"
  display-md:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 67.2px
    letterSpacing: "-0.56px"
  heading-lg:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 33.6px
    letterSpacing: "-0.28px"
  heading-md:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 28.8px
    letterSpacing: "-0.24px"
  heading-sm:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: "-0.2px"
  section-callout:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: 0
  body-md:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 19.6px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0
  label-md:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 12px
    letterSpacing: 0
  caption:
    fontFamily: "\"Builder Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 15px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "6px"
  base: "8px"
  md: "10px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"

components:
  button-primary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "9px"
    height: "36px"
    border: "1px solid {colors.canvas}"
  button-login:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: "9px"
    height: "36px"
    border: "1px solid {colors.canvas}"
  top-nav:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "16px 24px"
    height: "64px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.section-callout}"
    padding: "0"
  registration-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "20px 24px"
  card-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.section-callout}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  text-input:
    backgroundColor: "{colors.hairline-light}"
    textColor: "{colors.hairline}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "5px 12px"
    height: "38px"
    border: "1px solid {colors.ink-light}"
  dropdown-select:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "0px 32px 0px 8px"
    height: "36px"
    border: "1px solid {colors.ink-light}"
  platform-badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "6px 16px"
    height: "44px"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.hairline}"
    typography: "{typography.caption}"
    padding: "16px 24px"
  legal-caption:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.caption}"
    padding: "0"
  canvas-background:
    backgroundColor: "{colors.shadow}"
    textColor: "{colors.canvas}"
    rounded: "{rounded.none}"
    padding: "0"
---

## Overview

Roblox's home page is the design-system equivalent of a keyhole: the brand shows you everything through a narrow opening. **Content-as-canvas.** The full viewport is tiled edge-to-edge with game thumbnails from the user library — angled diamond tiles of Adopt Me!, Doors, Tower Heroes, Jailbreak, Bayside, Sponge Bob — and a centered registration card sits on top of this mosaic as if pinned to a corkboard. The brand invests zero pixels in designed hero art. Unlike Epic Games, which commissions hero artwork for each featured release, or Steam, which surfaces an algorithmic editorial grid, Roblox lets the user-generated library serve as every hero image simultaneously.

The surface chrome is achromatic by function. The "ROBLOX" logotype floats in white above the mosaic. The registration card uses near-white (#f7f7f8) — not pure white — with 8px rounded inputs, dark charcoal text, and a "Sign Up" button that is also near-white with dark text. One "Log In" pill button occupies the top-right corner. The cobalt emphasis voltage (#335fff) that Roblox uses throughout its product — for selection states, active button backgrounds, and system emphasis — is absent from every rendered element in the marketing surface. The marketing page declares brand color without displaying it. Where Spline makes the product the hero, Roblox makes the community's output the hero.

Builder Sans — Roblox's custom proprietary sans-serif — runs at weight 500 for all interactive labels (button text, nav links, form labels) and weight 700 for the one uppercase editorial moment ("SIGN UP AND START HAVING FUN!"). The CSS variable system exposes a comprehensive typographic scale with display-large (80px) through caption-small (10px), all in Builder Sans.

**Key Characteristics:**
- Pure-black (#000000) canvas — not near-black; true black behind the game-thumbnail mosaic.
- Near-white (#f7f7f8) registration card and button fills — merged from #f7f7f8 and #ffffff, a cool-tinted surface rather than pure white.
- Cobalt emphasis (#335fff) in 21 CSS custom properties — zero rendered occurrences on the marketing surface.
- Builder Sans across every typographic tier — weights 300, 400, 500, 600, 700 all declared; marketing surface uses 300, 500, and 700.
- 8px as the sole corner radius in the captured interface — applies to all form inputs, dropdowns, and buttons uniformly.
- Platform badge row (App Store, Google Play, PlayStation, Xbox, Meta Quest, Microsoft, Amazon, Samsung) below the registration card.
- No navigation menu — top-nav has only the Roblox logo and a single "Log In" button.
- Comprehensive Foundation token system in CSS covering light, dark, inverse, kids, and startmode variants.

## Colors

### Surface

- **Canvas** (`{colors.canvas}` — #f7f7f8): frequency 172. Used as text (85) and border (85). The near-white surface for the registration card, input fills, and button fills. Merged from #f7f7f8 and #ffffff — the slight cool tint is consistent and intentional.
- **Hairline** (`{colors.hairline}` — #d5d7dd): frequency 49. Used as text (27), background (1), border (21). The separator and muted-text color — appears on the footer legal text and subtle card dividers.
- **Hairline Light** (`{colors.hairline-light}` — #d0d9fb): frequency 7, all as background (6) and border (1). The input field background fill — a barely-visible cool blue tint that distinguishes editable fields from static surfaces.

### Text

- **Ink** (`{colors.ink}` — #121215): frequency 4. Pure near-black — the darkest surface value, used for the canvas-background overlay and the deepest text contexts. Wired as `--dark-mode-surface-0`.
- **Ink Soft** (`{colors.ink-soft}` — #212326): frequency 2. Dark near-black for the registration card's heading text. Wired as `--color-system-contrast` and `--color-action-standard-foreground`.
- **Ink Muted** (`{colors.ink-muted}` — #494d5a): frequency 1 border. Default body text and subtle interactive borders. Wired as `--color-content-default` and `--color-action-subtle-border`.
- **Ink Light** (`{colors.ink-light}` — #707070): frequency 4, all as border. Input field border in resting state. Wired as `--color-content-muted`.

### Brand / System

- **System Emphasis** (`{colors.system-emphasis}` — #335fff): frequency 0 rendered. Declared across 21 CSS custom properties as `--color-action-emphasis-background`, `--color-system-emphasis`, `--color-selection-start/end`. The cobalt CTA color that would appear on a primary "Play" button in the product. Not rendered on the marketing surface.
- **Link Light** (`{colors.link-light}` — #70a0ff): frequency 4. Used as text (2) and border (2). The inline link color for dark-mode surfaces (wired as `--kids-dark-color-content-link` and `--color-extended-blue-500`).

### Semantic

- **System Alert** (`{colors.system-alert}` — #df281f): frequency 6. Used as text (3) and border (3). Error and alert states across the registration form.
- **System Success** (`{colors.system-success}` — #39c582): declared as `--color-system-success` — validation success feedback.
- **System Warning** (`{colors.system-warning}` — #f2ba2a): declared as `--color-system-warning` — age-gating or parental-consent warnings.

## Typography

### Font Family

**Builder Sans** is Roblox's custom proprietary sans-serif. Every CSS typography token on the page references it: `typography-display-large-font` through `typography-caption-small-font`, using computed calc() expressions to build size from the 4px base unit (e.g., `700 calc(4px * 20) / calc(120%) "Builder Sans"`). The marketing page renders only a thin slice of this scale — weight 300 for body fine print, weight 500 for button labels and nav, weight 700 for the uppercase section callout.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-lg}` | 80px | 700 | 96px | Not rendered on marketing — product display tier |
| `{typography.display-md}` | 56px | 700 | 67.2px | Not rendered on marketing — product display tier |
| `{typography.heading-lg}` | 28px | 700 | 33.6px | Section headings in product surfaces |
| `{typography.heading-md}` | 24px | 700 | 28.8px | Card headings |
| `{typography.heading-sm}` | 20px | 700 | 24px | Sub-section labels |
| `{typography.section-callout}` | 20px | 700 | 28px | "SIGN UP AND START HAVING FUN!" (uppercase) |
| `{typography.body-md}` | 16px | 400 | 22.4px | Form field body text |
| `{typography.body-sm}` | 14px | 300 | 19.6px | Secondary text in registration card |
| `{typography.button-md}` | 16px | 500 | 16px | "Log In" button, "Sign Up" button |
| `{typography.label-md}` | 12px | 500 | 12px | Form field labels ("Birthday," "Username") |
| `{typography.caption}` | 10px | 500 | 15px | Footer legal text |

### Note on Substitutes

Builder Sans is proprietary. **Inter** at matched weights and sizes is the closest open-source substitute for the body and button tiers. For the display scale (80px / 56px), **Geist** from Vercel has similar aperture and spacing. The display sizes are not rendered on the marketing surface but are present in the CSS token system.

## Layout

- **Base unit:** 4px (--platform-base: 4). The typography and spacing system is built entirely on multiples of 4px via calc() expressions.
- **Registration card:** centered at approximately 415px width, with 20×24px internal padding, 8px corner radius.
- **Background mosaic:** full-viewport cover, black base, diamond-angled game thumbnails at approximately 60-degree rotations.
- **Platform badges:** full-width row of 8 black-pill badges (App Store, Google Play, PlayStation, Xbox, Meta Quest, Microsoft, Amazon, Samsung) below the registration card.
- **Top nav:** transparent over the mosaic, with the Roblox logotype centered and "Log In" button flush right.

## Elevation

The system has a shadow token (`{colors.shadow}` — #000000 at various opacity values) declared across multiple CSS properties. The registration card reads as elevated against the black mosaic through surface-color contrast alone — the near-white (#f7f7f8) card reads off the pure-black (#000000) background without any box-shadow. No explicit shadow is applied to the card in the captured surface. The CSS variables include `--color-common-shadow: rgba(0,0,0,0.5)` and `--fui-future-alpha-color-shadow-subtle: rgba(0,0,0,0.08)` for product contexts.

## Shapes

The marketing surface uses a single radius value:

- `{rounded.none}` 0px — the full-bleed mosaic background.
- `{rounded.md}` 8px — form inputs, dropdowns, the "Sign Up" button, the registration card itself (8px is the `--radius-medium` value in the Foundation system: `calc(4px * 2)`).
- `{rounded.full}` 9999px — platform badges row (black pills for each app store), the "Log In" button in the top-right corner.

The CSS Foundation system declares additional radii: `--radius-small: calc(1px * 4)` (4px), `--radius-large: calc(4px * 4)` (16px), `--radius-circle: calc(1px * 9999)`. Only 8px is rendered in the marketing surface.

## Components

**`button-primary`** — Near-white (#f7f7f8) fill, dark-charcoal (#121215) text, Builder Sans at 16px / 500, 8px radius, 9px all-around padding, 36px height. The "Sign Up" form-submit button — not a colored CTA.

**`button-login`** — Same near-white fill and geometry as button-primary — used for the "Log In" button in the top-right corner over the black mosaic. The near-white against pure black gives it strong contrast without any brand color.

**`top-nav`** — Transparent background over the mosaic, 64px height. Roblox logotype centered, "Log In" button right-aligned. No menu links, no search, no account dropdown.

**`hero-heading`** — White text on transparent overlay, Builder Sans at 20px / 700 in uppercase. "SIGN UP AND START HAVING FUN!" is the only editorial text on the marketing surface.

**`registration-card`** — Near-white (#f7f7f8) fill over the black mosaic, 8px corner radius, 20×24px padding. Contains birthday picker, username field, password field, gender selector, terms text, and the "Sign Up" button.

**`card-heading`** — Near-black (#212326) text at Builder Sans 20px / 700 — the "Sign up and start having fun!" heading inside the registration card.

**`body-paragraph`** — Ink-muted (#494d5a) text at Builder Sans 14px / 300 — the form terms-of-service paragraph and secondary descriptive text.

**`text-input`** — Cool-blue-tinted (#d0d9fb) fill, muted-gray (#d5d7dd) placeholder text, Builder Sans at 16px / 400, 8px radius, 5×12px padding, 38px height, 1px mid-gray (#707070) border. The username and password input fields.

**`dropdown-select`** — Near-white fill, ink-muted text, 8px radius, 0×32px right / 0×8px left padding compound, 36px height, 1px mid-gray border. Birthday month, day, and year picker dropdowns.

**`platform-badge`** — Black fill, near-white text, fully-rounded pill, 6×16px padding, 44px height. App Store / Google Play / PlayStation / Xbox / Meta Quest / Microsoft Store / Amazon / Samsung Galaxy Store badges.

**`footer`** — Black canvas, muted-gray (#d5d7dd) text, Builder Sans at 10px / 500, 16×24px padding.

**`legal-caption`** — Muted-gray (#d5d7dd) text at Builder Sans 10px / 500. The footer copyright string.

**`canvas-background`** — Pure-black (#000000) fill behind the game-thumbnail mosaic. No padding — full-viewport cover.

## Do's and Don'ts

**Do** use the near-white (#f7f7f8) rather than pure white (#ffffff) for any surface that sits above the black mosaic background. The slight cool tint reads as intentional design rather than uncorrected white-balance; pure #ffffff alongside the mosaic tiles reads as rendered differently.

**Do** reserve the cobalt (#335fff) for action-emphasis states — primary "Play" buttons, selection fills, progress indicators — inside the product. On the marketing surface it should remain invisible; introducing it into the registration card or nav strip breaks the monochromatic restraint.

**Do** apply 8px corner radius uniformly across all form elements. The system has exactly one interactive radius value on the marketing surface — mixing in 4px or 12px on specific inputs creates an inconsistency the eye reads as a bug.

**Don't** use the input background fill color (#d0d9fb) for any non-input surface. The cool-blue tint signals "editable field" in the near-monochrome form context; applying it to cards, badges, or section backgrounds defeats that signal.

**Don't** introduce a navigation menu into the marketing hero. The single-screen conversion approach is a deliberate choice — adding product nav links to the top bar dilutes the registration focus that the page is built around.

**Don't** render the game-mosaic in a cropped or framed format. The mosaic reads as immersive because it bleeds to every viewport edge; constraining it to a contained hero region converts it from "you're inside the platform" to "here's an image of the platform."

**Don't** use Builder Sans at weight 400 for button labels. The marketing surface uses weight 500 for all interactive text (buttons, nav labels, form labels); weight 400 in an interactive context reads visually lighter than the near-white button surface expects.

## Known Gaps

- **Logged-in state:** the captured surface is the logged-out registration gate only. The authenticated home feed, game discovery grid, avatar customization, and Friends surfaces all carry richer token sets not captured here.
- **Cobalt voltage in context:** the primary-action button (#335fff fill) appears throughout the product — game pages, the Robux purchase flow, the catalog — but is absent from the marketing surface. The button-primary defined here (near-white) is marketing-only.
- **Dark-mode and kids-mode variants:** the CSS Foundation token system includes --dark-mode-*, --kids-dark-color-*, --kids-light-color-*, --inverse-*, and --startmode-* variants for every role. Only the light-mode canonical set is rendered on the captured page.
- **Motion:** the game thumbnail mosaic is animated (tiles reveal progressively); the CSS easing curves (--ease-expressive-out: cubic-bezier(.25,1.5,.5,1)) and timing tokens (--time-200 through --time-1000) are declared but not measurable from static capture.
- **Display typography in product:** the Foundation system declares display-large at 80px and display-medium at 56px, both in Builder Sans weight 700 — these appear on game landing pages and promotional surfaces inside the app, not on the marketing home page.
- **Icon system:** Roblox uses custom SVG icons throughout the product that are not exposed in the marketing surface extraction.