Roblox

---
name: Roblox
tagline: Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform.
author: webdesignhot
source_url: https://www.roblox.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [media, marketplace]
tags: [light, bold, friendly, gaming, ugc, youth, playful, marketplace]
preview_swatch: ['#ffffff', '#ed1d24', '#191b1f']
related: [discord, youtube, twitch]
description: 'Roblox is the canonical youth-coded UGC gaming platform — a bright white `#ffffff` canvas anchored on warm-near-black `#191b1f`, accented by the unmistakable **Roblox Red** (`#ed1d24`) that carries the wordmark, every primary CTA, and the Robux purchase button. Type runs **Builder Sans** (Roblox''s commissioned humanist sans) at confident 600–800 weights — display 32–56px with subtle negative tracking, body 14/400 with comfortable 1.5 leading. The page reads as a friendly playground browser: 1:1 square experience tiles in 4-up rails, vivid illustrative cover art (avatars in costumes, pixel-block worlds, magenta neon dancefloors), green `#00b06f` Robux balance pills, and a cyan-blue `#00a2ff` "free" badge that signals the platform''s open-economy. The brand position is **block-builder playground**: confident, accessible to a 7-year-old, capable of supporting a 25-million-CCU concurrency.'

colors:
  bg: '#ffffff'                   # canvas — bright white, the playground default
  bg-alt: '#f7f8fa'               # secondary band, alternate row
  bg-deep: '#ffffff'
  surface: '#ffffff'              # default card surface
  surface-soft: '#f7f8fa'         # hovered card, dropdown floor
  surface-strong: '#eaecf0'       # selected sidebar, divider band
  surface-elevated: '#ffffff'     # popover, modal
  surface-dark: '#191b1f'         # dark sections (mobile drawer, footer)
  surface-dark-soft: '#232529'    # dark card surface
  text: '#191b1f'                 # primary ink — warm near-black
  text-strong: '#000000'          # display only, max punch
  text-soft: '#3b4248'            # secondary copy
  text-muted: '#5c6770'           # tertiary metadata
  text-faint: '#8b96a0'           # captions, timestamps
  text-link: '#ed1d24'            # link red — same as brand
  text-disabled: '#a8b3bd'
  text-on-dark: '#ffffff'
  text-on-dark-soft: '#cdd2d8'
  text-on-dark-muted: '#9ba3ab'
  brand: '#ed1d24'                # Roblox Red — wordmark, primary CTA
  brand-hover: '#d11017'          # darker red on hover
  brand-active: '#a30c11'         # pressed state
  brand-pale: '#fcd1d3'           # disabled CTA tint
  brand-deep: '#7a0a0d'           # archived deep red
  on-brand: '#ffffff'
  robux-green: '#00b06f'          # Robux balance pill, "Buy Robux" button
  robux-green-hover: '#008f59'
  robux-green-deep: '#006d44'
  free-badge-blue: '#00a2ff'      # "Free" cyan-blue badge on items / experiences
  premium-purple: '#b08aff'       # Roblox Premium subscription badge
  premium-purple-deep: '#7e5cd6'
  builders-club: '#ffd000'        # legacy Builders Club gold (still appears on profile)
  online-green: '#00b06f'         # online indicator
  voice-blue: '#00a2ff'           # voice-chat indicator
  link-default: '#ed1d24'
  link-hover: '#d11017'
  link-visited: '#ed1d24'
  border: '#e4e7eb'               # default 1px hairline
  border-soft: '#eaecf0'          # divider between rows
  border-strong: '#ed1d24'        # focused input
  border-input: '#cdd2d8'         # default form-input outline
  scrim: 'rgba(0,0,0,0.6)'
  shadow-card: 'rgba(25,27,31,0.08)'
  shadow-elev: 'rgba(25,27,31,0.16)'
  shadow-modal: 'rgba(25,27,31,0.24)'
  experience-thumb-1: '#0095da'   # signature blue cover-art accent
  experience-thumb-2: '#ff8a00'   # orange cover-art accent
  experience-thumb-3: '#9b30ff'   # magenta cover-art accent
  rating-thumbs-up: '#00b06f'     # thumbs-up rating fill
  rating-thumbs-down: '#5c6770'
  success: '#00b06f'
  warning: '#ff8a00'              # advisory orange
  danger: '#ed1d24'               # validation red — same hex as brand
  info: '#00a2ff'

typography:
  display:
    family: '"Builder Sans", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600, 700, 800]
    opentype-features: ['kern', 'ss01']
  body:
    family: '"Builder Sans", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600, 700]
  mono:
    family: '"Source Code Pro", Menlo, Consolas, "Courier New", monospace'
    weights: [400, 600]
  scale:
    display-hero:    { size: 56, weight: 800, lineHeight: 1.05, tracking: '-0.02em', family: display, opentype: ['ss01'], notes: 'Marketing landing hero' }
    display-xl:      { size: 44, weight: 800, lineHeight: 1.1,  tracking: '-0.01em', family: display, notes: 'Big section headline' }
    display-lg:      { size: 32, weight: 700, lineHeight: 1.15, tracking: '-0.005em',family: display, notes: 'Page title' }
    display-md:      { size: 24, weight: 700, lineHeight: 1.2,  tracking: '0',       family: display, notes: 'Section header "Popular"' }
    display-sm:      { size: 20, weight: 700, lineHeight: 1.25, tracking: '0',       family: display, notes: 'Carousel rail title' }
    title-md:        { size: 18, weight: 600, lineHeight: 1.3,  tracking: '0',       family: display, notes: 'Card title, panel title' }
    title-sm:        { size: 16, weight: 600, lineHeight: 1.3,  tracking: '0',       family: display, notes: 'Experience tile title' }
    body-md:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',       family: body, notes: 'Default body, descriptions' }
    body-sm:         { size: 13, weight: 400, lineHeight: 1.4,  tracking: '0',       family: body, notes: 'Sidebar metadata' }
    body-xs:         { size: 12, weight: 400, lineHeight: 1.4,  tracking: '0',       family: body, notes: 'Caption, footer micro' }
    nav-link:        { size: 14, weight: 600, lineHeight: 1.0,  tracking: '0',       family: body, notes: 'Top nav links' }
    sub-nav-link:    { size: 13, weight: 500, lineHeight: 1.0,  tracking: '0',       family: body, notes: 'Sub-nav anchors' }
    button-cta:      { size: 16, weight: 700, lineHeight: 1.0,  tracking: '0',       family: body, notes: 'Play, Buy Robux, Sign Up' }
    button-md:       { size: 14, weight: 600, lineHeight: 1.0,  tracking: '0',       family: body, notes: 'Secondary CTAs' }
    button-sm:       { size: 13, weight: 600, lineHeight: 1.0,  tracking: '0',       family: body, notes: 'Inline pills, filters' }
    robux-pill:      { size: 14, weight: 700, lineHeight: 1.0,  tracking: '0',       family: body, opentype: ['tnum'], notes: 'Robux price text "R$ 80"' }
    metadata:        { size: 13, weight: 400, lineHeight: 1.3,  tracking: '0',       family: body, opentype: ['tnum'], notes: 'Player counts "12.4M Active"' }
    badge:           { size: 11, weight: 700, lineHeight: 1.0,  tracking: '0.04em',  family: body, transform: uppercase, notes: 'FREE, NEW, PREMIUM' }
    chat-message:    { size: 13, weight: 400, lineHeight: 1.4,  tracking: '0',       family: body, notes: 'In-experience chat' }
    avatar-username: { size: 14, weight: 600, lineHeight: 1.0,  tracking: '0',       family: body, notes: 'Display name with verified glyph' }
    code:            { size: 13, weight: 400, lineHeight: 1.4,  tracking: '0',       family: mono, notes: 'Studio docs inline code' }

radius:
  none: 0
  micro: 2
  sm: 4
  md: 8           # default cards, experience tiles
  lg: 12          # input fields, modal
  xl: 16          # hero panels, large feature
  pill: 9999      # CTAs, Robux balance pill, filter chips

spacing:
  base: 4
  scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96]

layout:
  page-width: 1408
  prose-width: 720
  header-height: 64
  main-nav-height: 64
  sub-nav-height: 48
  experience-tile: '150x150'   # 1:1 square thumbnail
  experience-tile-lg: '300x300'

components:
  button-cta:
    bg: '#ed1d24'
    color: '#ffffff'
    radius: 9999
    padding: '12px 24px'
    height: 44
    font: button-cta
    use: 'Sign Up, Play, Buy — universal Roblox Red pill CTA.'
  button-cta-hover:
    bg: '#d11017'
    color: '#ffffff'
    radius: 9999
    use: 'Hover — deeper red.'
  button-buy-robux:
    bg: '#00b06f'
    color: '#ffffff'
    radius: 9999
    padding: '10px 20px'
    height: 40
    font: button-md
    use: 'Robux green CTA — "Buy Robux", in-game purchases.'
  button-secondary:
    bg: '#ffffff'
    color: '#191b1f'
    radius: 9999
    border: '1px solid #cdd2d8'
    padding: '11px 23px'
    height: 44
    use: 'Outline secondary CTA on light surfaces.'
  button-text-link:
    bg: 'transparent'
    color: '#ed1d24'
    use: 'Inline red link — body prose, footer.'
  experience-tile:
    bg: '#ffffff'
    color: '#191b1f'
    radius: 8
    padding: 0
    width: 150
    height: 226   # 150 thumb + ~76 metadata
    use: '1:1 square cover art + title/active count beneath in 8px-radius card.'
  experience-tile-hover:
    bg: '#ffffff'
    color: '#191b1f'
    radius: 8
    use: 'Hover — soft shadow lift `rgba(25,27,31,0.16) 0 6px 16px`.'
  catalog-tile:
    bg: '#ffffff'
    color: '#191b1f'
    radius: 8
    padding: 0
    width: 200
    use: 'Avatar item / clothing tile — square thumbnail with Robux price beneath.'
  free-badge:
    bg: '#00a2ff'
    color: '#ffffff'
    radius: 4
    padding: '2px 8px'
    font: badge
    use: '"FREE" cyan-blue badge anchored to free experiences and free items.'
  premium-badge:
    bg: '#b08aff'
    color: '#ffffff'
    radius: 4
    padding: '2px 8px'
    font: badge
    use: 'Roblox Premium subscription badge.'
  active-count-pill:
    bg: 'transparent'
    color: '#5c6770'
    radius: 0
    padding: 0
    font: metadata
    use: '"12.4M Active" count text beneath each experience tile — green dot prefix.'
  rating-pill:
    bg: 'transparent'
    color: '#5c6770'
    radius: 0
    padding: 0
    use: '"95% 1.2M" thumbs-up rating + total votes inline metadata.'
  robux-balance-pill:
    bg: '#191b1f'
    color: '#ffffff'
    radius: 9999
    padding: '6px 12px'
    font: robux-pill
    use: 'Top-bar Robux balance — black pill with R$ icon + balance "R$ 240".'
  robux-buy-pill:
    bg: '#00b06f'
    color: '#ffffff'
    radius: 9999
    padding: '6px 12px'
    use: 'Robux purchase pill on store — green fill, R$ amount.'
  text-input:
    bg: '#ffffff'
    color: '#191b1f'
    radius: 8
    height: 44
    padding: '12px 16px'
    border: '1px solid #cdd2d8'
    font: body-md
    use: 'Form input — slim hairline, focus thickens to 2px Roblox Red.'
  search-bar:
    bg: '#f7f8fa'
    color: '#191b1f'
    radius: 9999
    height: 40
    padding: '10px 16px'
    use: 'Top-bar pill search — soft grey fill with magnifier icon at left.'
  primary-nav:
    bg: '#ffffff'
    color: '#191b1f'
    height: 64
    border: '1px solid #e4e7eb'
    use: 'Top nav: Roblox red wordmark + Discover / Marketplace / Create / Robux. Search bar centred. Robux balance + avatar flush right.'
  sub-nav:
    bg: '#ffffff'
    color: '#3b4248'
    height: 48
    use: 'Discover sub-nav anchors: Featured · Popular · Top Rated · Up-and-Coming.'
  filter-chip:
    bg: '#f7f8fa'
    color: '#191b1f'
    radius: 9999
    padding: '8px 16px'
    use: 'Filter pill on Discover page — soft grey toggles for genres.'
  filter-chip-active:
    bg: '#ed1d24'
    color: '#ffffff'
    radius: 9999
    use: 'Active filter chip — Roblox Red fill.'
  carousel-paddle:
    bg: '#ffffff'
    color: '#191b1f'
    radius: 9999
    width: 40
    height: 40
    border: '1px solid #e4e7eb'
    use: 'Round white paddle with hairline border — fades in on hover-over rail.'
  modal:
    bg: '#ffffff'
    color: '#191b1f'
    radius: 16
    use: 'Centred dialog, 16px radius (extra soft).'
  toast:
    bg: '#191b1f'
    color: '#ffffff'
    radius: 8
    padding: '12px 16px'
    use: 'Bottom-centre dark pill notification.'
  avatar-circle:
    bg: '#ffffff'
    radius: 9999
    use: 'Circular user avatar 32–48px in nav and chat.'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-playful: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  tile-hover: 'experience tile shadow `rgba(25,27,31,0.16) 0 6px 16px` fades in over 240ms + image scale 1.0 → 1.02'
  cta-press: 'CTA bg deepens #ed1d24 → #a30c11 over 150ms on :active'
  robux-spend: 'Robux pill flashes green-on-red on spend over 320ms playful — celebratory feedback'
  carousel-slide: 'horizontal carousel slides 240ms standard'
  reduced-motion: 'respects prefers-reduced-motion: reduce — tile scale and Robux flash suppressed.'

breakpoints:
  mobile: 600
  tablet: 1024
  desktop: 1280
  wide: 1408

shadows:
  ambient: 'rgba(25,27,31,0.04) 0 1px 2px'
  card-soft: 'rgba(25,27,31,0.08) 0 2px 8px'
  card-hover: 'rgba(25,27,31,0.16) 0 6px 16px'
  modal: 'rgba(25,27,31,0.24) 0 8px 32px'
  ring: '0 0 0 2px #ed1d24'

accessibility:
  contrast-text-on-bg: 14.6        # #191b1f on #ffffff — AAA
  contrast-cta-text: 4.6           # #ffffff on #ed1d24 — AA
  contrast-link-on-bg: 4.5         # #ed1d24 on #ffffff — AA
  contrast-soft-on-bg: 9.5         # #3b4248 on #ffffff — AAA
  contrast-muted-on-bg: 6.4        # #5c6770 on #ffffff — AA
  contrast-robux-green: 3.1        # #00b06f on #ffffff — AA Large only — Roblox uses 16/700 to compensate
  focus-ring: '2px solid #ed1d24 + 2px outline offset (Roblox Red ring)'
  reduced-motion-honored: true
  touch-target-min: 44
  keyboard-nav: 'Tab traverses top nav → search → genre filters → experience grid → footer; Esc closes modals.'

dark-mode: optional   # Roblox web has a dark-mode toggle in Settings; defaults to light.
---

## 1. Visual Theme & Atmosphere

Roblox is the canonical youth-coded UGC gaming platform — a bright **white** `#ffffff` canvas anchored on warm-near-black `#191b1f`, accented by the unmistakable **Roblox Red** (`#ed1d24`) that carries the wordmark, every primary CTA, and the focus ring. The page reads as a friendly playground browser: 1:1 square experience tiles in 4-up rails, vivid illustrative cover art (avatars in costumes, pixel-block worlds, magenta neon dancefloors), green `#00b06f` Robux balance pills sitting on the masthead, and a cyan-blue `#00a2ff` "FREE" badge that signals the platform's open-economy.

Type runs **Builder Sans** — Roblox's commissioned humanist sans, replacing the earlier Source Sans Pro circa 2022. Display copy renders at 32–56px / 700–800 with subtle negative tracking, body settles at 14/400 with comfortable 1.5 leading. Section heads run uppercase-on-title-case with positive tracking, giving the chrome a bold-but-not-aggressive voice that reads accessible to a 7-year-old without feeling babyish.

The chromatic identity is **white-and-red with green-and-blue accents**. Roblox Red carries the brand. Robux Green (`#00b06f`) carries the in-platform economy (Robux balance pill, "Buy Robux" CTA, online indicator). Free Badge Blue (`#00a2ff`) signals free items and free experiences — the platform's open-economy hook. Premium Purple (`#b08aff`) marks Roblox Premium subscribers. The colour vocabulary is wide because the platform serves multiple economy roles, but each colour is rationed to a specific function so the whole reads coherent.

Cards round at **8px**, CTAs are pill (9999px) at 44px height, and the entire surface is engineered to feel like browsing a friendly mall arcade: each experience tile is a different developer's aesthetic, but the consistent Roblox-Red chrome and Builder Sans typography stitch them into a unified storefront. Photography is the design — every tile leans on developer-supplied cover art that ranges from pixel-block worlds to anime-styled key art to photorealistic skyboxes.

The brand position is **block-builder playground** — confident, accessible, family-friendly, but capable of supporting concurrent user counts in the tens of millions. Roblox rejects the gritty/cinematic aesthetic of competitors (Steam's engineering room, Epic's cinematic poster) in favour of a friendly, saturated, beginner-welcoming visual language that scales from a 7-year-old's first login to a teenager's UGC studio.

**Key Characteristics:**
- Bright `#ffffff` canvas with warm-near-black `#191b1f` ink — the playground's friendly default
- Roblox Red (`#ed1d24`) is the universal brand and primary CTA — single voltage carrying wordmark, sign-up, play
- Robux Green (`#00b06f`) for the in-platform economy: balance pill, Buy Robux button, online indicator
- Free Badge Blue (`#00a2ff`) signals free experiences and free items — open-economy hook
- Builder Sans (commissioned humanist sans) at 600–800 weights
- 1:1 square experience tiles in 4-up rails with developer-supplied cover art occupying 80% of every tile
- 9999px pill CTAs at 44px height; 8px-radius cards with soft shadow on hover
- Dark masthead-Robux pill (`#191b1f`) sits among the otherwise white chrome — Roblox's chromatic counterweight

## 2. Color Palette & Roles

### Primary
- **Canvas** (`#ffffff`): default page floor across Discover, Marketplace, Create, profile pages
- **Bg Alt** (`#f7f8fa`): alternate band for "Featured" / "Popular" rotation, search-bar floor
- **Surface** (`#ffffff`): card surfaces — Roblox is mostly flat-on-canvas
- **Surface Soft** (`#f7f8fa`): hovered card, dropdown floor
- **Surface Strong** (`#eaecf0`): selected sidebar, divider band
- **Surface Dark** (`#191b1f`): dark sections — mobile drawer, footer, Robux balance pill

### Brand
- **Roblox Red** (`#ed1d24`): the wordmark, primary CTA, link, focus ring, danger semantic
- **Roblox Red Hover** (`#d11017`): deeper hover
- **Roblox Red Active** (`#a30c11`): pressed
- **Roblox Red Pale** (`#fcd1d3`): disabled CTA tint
- **Roblox Red Deep** (`#7a0a0d`): archived deep red

### Accent (Economy)
- **Robux Green** (`#00b06f`): Robux balance pill, "Buy Robux" CTA, online indicator
- **Robux Green Hover** (`#008f59`): hover deepen
- **Free Badge Blue** (`#00a2ff`): "FREE" badge — the platform's open-economy signal
- **Premium Purple** (`#b08aff`): Roblox Premium subscription badge
- **Builders Club Gold** (`#ffd000`): legacy Builders Club gold (still appears on profile chrome)

### Interactive
- **Link** (`#ed1d24`): same hex as brand
- **Link Hover** (`#d11017`): deepens
- **Link Visited** (`#ed1d24`): unchanged
- **Disabled** (`#a8b3bd`): muted ink
- **Selected** (`#ed1d24`): selected radio / checkbox

### Neutral Scale
- **Text** (`#191b1f`) — primary ink, warm near-black
- **Text Strong** (`#000000`) — display only, max punch
- **Text Soft** (`#3b4248`) — secondary copy
- **Text Muted** (`#5c6770`) — tertiary metadata
- **Text Faint** (`#8b96a0`) — captions, timestamps
- **Text Disabled** (`#a8b3bd`) — disabled
- **Border** (`#e4e7eb`) — default 1px hairline
- **Border Soft** (`#eaecf0`) — divider
- **Border Strong** (`#ed1d24`) — focused input
- **Border Input** (`#cdd2d8`) — default form-input outline

### Surface & Borders
- **Bg** (`#ffffff`)
- **Bg Alt** (`#f7f8fa`)
- **Surface** (`#ffffff`)
- **Surface Soft** (`#f7f8fa`)
- **Surface Strong** (`#eaecf0`)
- **Surface Dark** (`#191b1f`) — for the Robux balance pill and the dark mobile drawer
- **Surface Dark Soft** (`#232529`) — dark card

### Shadow Colors
Roblox stays mostly flat with soft single-layer shadows on hovered cards. Shadow tints are warm-near-black `rgba(25,27,31,...)` rather than pure black to read warmer.

- `rgba(25,27,31,0.04) 0 1px 2px` — ambient
- `rgba(25,27,31,0.08) 0 2px 8px` — card soft
- `rgba(25,27,31,0.16) 0 6px 16px` — card hover lift
- `rgba(25,27,31,0.24) 0 8px 32px` — modal

### Semantic
- **Success Green** (`#00b06f`): "Successfully purchased", in-stock — same hex as Robux Green
- **Warning Orange** (`#ff8a00`): advisory orange
- **Danger Red** (`#ed1d24`): validation red — same hex as brand
- **Info Blue** (`#00a2ff`): info — same hex as Free Badge

## 3. Typography Rules

### Font Family

**Primary**: `Builder Sans` — Roblox's custom humanist sans commissioned circa 2022. Falls back to `Source Sans Pro`, `"Helvetica Neue"`, `Helvetica`, `Arial`, `sans-serif`. Builder Sans is geometric-leaning with humanist warmth — slightly rounder terminals than Inter, slightly more open apertures than Helvetica. It carries weights 400 (regular), 500 (medium), 600 (semibold), 700 (bold), 800 (extrabold).

**Mono**: `"Source Code Pro"` for Studio docs and Lua code blocks.

**OpenType features**: `kern` enabled by default; `tnum` on Robux prices and player counts; `ss01` on display sizes.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| display-hero | Builder Sans | 56 | 800 | 1.05 | -0.02em | ss01 | Marketing landing hero |
| display-xl | Builder Sans | 44 | 800 | 1.1 | -0.01em | — | Big section headline |
| display-lg | Builder Sans | 32 | 700 | 1.15 | -0.005em | — | Page title |
| display-md | Builder Sans | 24 | 700 | 1.2 | 0 | — | Section header "Popular" |
| display-sm | Builder Sans | 20 | 700 | 1.25 | 0 | — | Carousel rail title |
| title-md | Builder Sans | 18 | 600 | 1.3 | 0 | — | Card title |
| title-sm | Builder Sans | 16 | 600 | 1.3 | 0 | — | Experience tile title |
| body-md | Builder Sans | 14 | 400 | 1.5 | 0 | — | Default body |
| body-sm | Builder Sans | 13 | 400 | 1.4 | 0 | — | Sidebar metadata |
| body-xs | Builder Sans | 12 | 400 | 1.4 | 0 | — | Caption, footer |
| nav-link | Builder Sans | 14 | 600 | 1.0 | 0 | — | Top nav links |
| sub-nav-link | Builder Sans | 13 | 500 | 1.0 | 0 | — | Sub-nav anchors |
| button-cta | Builder Sans | 16 | 700 | 1.0 | 0 | — | Play, Buy Robux, Sign Up |
| button-md | Builder Sans | 14 | 600 | 1.0 | 0 | — | Secondary CTAs |
| button-sm | Builder Sans | 13 | 600 | 1.0 | 0 | — | Inline pills, filters |
| robux-pill | Builder Sans | 14 | 700 | 1.0 | 0 | tnum | Robux price text "R$ 80" |
| metadata | Builder Sans | 13 | 400 | 1.3 | 0 | tnum | Player counts "12.4M Active" |
| badge | Builder Sans | 11 | 700 | 1.0 | 0.04em | uppercase | "FREE", "NEW", "PREMIUM" |
| chat-message | Builder Sans | 13 | 400 | 1.4 | 0 | — | In-experience chat |
| avatar-username | Builder Sans | 14 | 600 | 1.0 | 0 | — | Display name with verified glyph |
| code | Source Code Pro | 13 | 400 | 1.4 | 0 | — | Studio docs inline code |

### Principles

- **Display goes confident, not aggressive.** Hero copy at 44–56px / 800 with subtle -0.01 to -0.02em — Roblox is bold without being brutal. The character distinguishes the brand from Epic's loud cinematic display.
- **Body at 14/400 with 1.5 leading.** Comfortable density — Roblox skews slightly more breath than Steam (14/1.4) because the audience includes young readers.
- **CTAs at 16/700 — large for an accessible-to-7-year-olds standard.** Most platforms use 13–14 for CTAs; Roblox bumps it to 16/700 so the Play / Sign Up reads big and welcoming.
- **Tabular numerals on every economy figure.** `tnum` on Robux prices, player counts, ratings.
- **Source Sans Pro as fallback.** When Builder Sans isn't available, the older Source Sans Pro renders nearly identical at body sizes — display sizes lose subtle character but stay legible.
- **No serifs.** Roblox refuses serif typography — the brand is humanist-sans throughout.
- **Mid-positive tracking on uppercase badges only.** Body never tracks; badges run 0.04em uppercase.

## 4. Component Stylings

### Buttons

**`button-cta`** — Roblox Red (`#ed1d24`) fill, white 16/700 text, 9999px pill, 12×24px padding, 44px height. The universal CTA: "Play", "Sign Up", "Continue", "Save". Hover deepens to `#d11017`. Active to `#a30c11`.

**`button-buy-robux`** — Robux Green (`#00b06f`) fill, white 14/600 text, 9999px pill, 10×20px padding, 40px height. Used for "Buy Robux" + in-app purchases. The chromatic counterweight to red — green and red are both bright but each is rationed to its function.

**`button-secondary`** — white fill, 1px `#cdd2d8` outline, ink text in 16/700. Same pill, same 44px height. Used for "Cancel", "Save for later", inverse CTAs.

**`button-text-link`** — plain Roblox-Red text in `#ed1d24`, no surface. Hover deepens to `#d11017`.

### Cards

**`experience-tile`** — 1:1 square cover art + title/active count beneath. White surface, 8px radius, no internal padding around the image (image fills to corners), 12px below for metadata. Stack: 150×150 cover art, 16/600 title (single line, ellipsis on overflow), thumbs-up percentage + "12.4M Active" count in 13/400 muted, FREE badge if applicable. Hover: 6×16 shadow lift + image scale 1.0 → 1.02.

**`experience-tile-lg`** — 300×300 large featured tile in "Featured" rail.

**`catalog-tile`** — avatar item / clothing tile. Square thumbnail with Robux price beneath in green pill. Used in Marketplace.

**`game-detail-card`** — game detail page — left side hero video / image carousel, right side title + creator + thumbs rating + Play button + favourites + Robux purchase if monetised. White surface, 16px radius on the right-rail card.

### Badges, Tags, Pills

**`free-badge`** — `#00a2ff` cyan-blue rectangle with white "FREE" text in 11/700 uppercase 0.04em, 4px radius, 2×8px padding. Anchored top-left of free experiences/items. The platform's most-recognised merchandising signal — every free item gets it.

**`premium-badge`** — `#b08aff` purple rectangle, same shape, "PREMIUM" text. Roblox Premium subscription badge.

**`new-badge`** — `#ed1d24` red rectangle, "NEW" text — the brand-red badge for newly-released experiences.

**`active-count-pill`** — inline metadata "🟢 12.4M Active" with green dot prefix and `#5c6770` muted text.

**`rating-pill`** — inline metadata "👍 95% (1.2M)" with thumbs-up glyph and percent rating.

**`robux-balance-pill`** — top-bar Robux balance: black `#191b1f` pill with white text and the R$ icon, 9999px radius, 6×12px padding. The dark counterweight to the otherwise-white masthead.

**`robux-buy-pill`** — green `#00b06f` pill on store items, 9999px radius. White text "R$ 80" with R$ icon prefix.

### Inputs / Forms

**`text-input`** — white surface, 1px `#cdd2d8` hairline, 8px radius, 44px height, 12×16px padding. On focus, border thickens to 2px Roblox Red.

**`search-bar`** — top-bar pill search. `#f7f8fa` soft-grey fill, 9999px radius, 40px height, magnifier icon at left in `#5c6770`. Width ~400px on the masthead; expands on focus.

### Navigation

**`primary-nav`** — full-width white bar with thin 1px `#e4e7eb` bottom border, 64px height. Roblox red wordmark anchored left in custom display variant of Builder Sans. Nav links "Discover · Marketplace · Create · Robux" in 14/600 ink centred. Search bar centred. Robux balance pill + avatar + notifications cluster anchored right.

**`sub-nav`** — 48px tall sub-band on Discover: white floor with hairline bottom. "Featured · Popular · Top Rated · Up-and-Coming" in 13/500 muted ink with `:hover` flipping to red.

**`filter-chip`** + **`filter-chip-active`** — pill toggles for genre filters ("Action", "Adventure", "Roleplay", "Anime"). Default `#f7f8fa` floor with ink text; active flips to `#ed1d24` red.

**`carousel-paddle`** — 40×40 white round paddle with 1px hairline border. Fades in on hover-over rail.

**`mobile-drawer`** — full-screen dark `#191b1f` drawer slides from left at <1024px. White text, large 16/700 nav rows.

### Modals & Toasts

**`modal`** — centred dialog over `rgba(0,0,0,0.6)` scrim. White surface, 16px radius (extra soft — Roblox softens modals more than cards), 1px hairline, modal shadow. Close X anchored top-right.

**`toast`** — bottom-centre dark `#191b1f` pill notification, 8px radius, 12×16px padding, white text.

### Decorative

**`avatar-circle`** — 32–48px circular user avatar in nav and chat. Fully rounded. The R6/R15 avatar render is the single most recognisable Roblox visual element.

## 5. Layout Principles

### Spacing System

- Base unit: **4px**
- Scale: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96`
- Section padding (vertical): **64–96px** between major bands; **48–64px** between rails within Discover
- Card internal padding: **0** around the cover image (image fills to corners), **12px** below for metadata
- Gutters: **16px** between experience tiles in grid view; **64–96px** between major page bands

### Grid & Container

- Max content width: **1408px** centred
- Discover homepage: editorial mosaic — Featured hero rail (2-up `experience-tile-lg`), Popular rail (6-up `experience-tile`), genre rails (Action / Roleplay / Anime), Continue Playing rail
- Marketplace: 6-up catalog grid at desktop with 16px gutters
- Game detail: 2-column with hero image carousel left (~58%), buy box right (~36%)
- Footer: 4-column link list

### Whitespace Philosophy

Roblox runs **moderate density** — tighter than Epic's cinematic-breath (160px between hero and rail) but looser than Steam's 24–48px. The homepage gives each rail 48–64px breath, with 16px gutters between tiles. The visual rhythm is **rail → rail → editorial banner → rail**, mimicking a friendly mall directory.

### Section Cadence

Roblox alternates between **default canvas bands** (`#ffffff`) and **soft-grey bands** (`#f7f8fa`) for visual relief. The grey is subtle — designed to give the eye a pause between dense rails without breaking the bright playground feel.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|------|-------|-----|
| None | 0px | Page bands, hero, footer |
| Micro | 2px | Dense table corners (rare) |
| Small | 4px | Free badge, premium badge, dropdown trigger |
| Medium | 8px | Experience tiles, catalog tiles, dropdowns, inputs |
| Large | 12px | Modal containers, larger feature cards |
| XL | 16px | Hero panels, modal — extra-soft |
| Pill | 9999px | CTAs, search bar, Robux balance pill, filter chips, avatars |

The radius vocabulary is **8/pill-dominant**. Cards round at 8px; CTAs are pills. Modals soften further to 16px to read more dialog-like.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow | Default body, masthead, footer (~80% of surfaces) |
| 1 — Ambient | `rgba(25,27,31,0.04) 0 1px 2px` | Resting tile (subtle, keeps the friendly feel) |
| 2 — Card Soft | `rgba(25,27,31,0.08) 0 2px 8px` | Card resting elevated |
| 3 — Hover Lift | `rgba(25,27,31,0.16) 0 6px 16px` | Hovered tile |
| 4 — Modal | `rgba(25,27,31,0.24) 0 8px 32px` | Centred dialog |
| 5 — Scrim | `rgba(0,0,0,0.6)` | Modal backdrop |

### Shadow Philosophy

Roblox uses warm-near-black-tinted shadows (`rgba(25,27,31,...)`) instead of pure black. The single-layer hover lift is the most prominent depth signal — tiles "pop" 6×16 on hover, telling the eye "this is clickable." No multi-layer atmospheric shadows; depth is friendly, not dramatic.

## 8. Interaction & Motion

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry
- **Playful**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — Robux spend feedback, celebratory motion

### Durations

| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | Hover colour swap, button press deepen |
| Standard | 240ms | Tile hover shadow + image scale |
| Slow | 320ms | Modal enter, Robux celebrate |

### Per-Component Recipes

- **Tile hover**: shadow `rgba(25,27,31,0.16) 0 6px 16px` fades in over 240ms + image scale 1.0 → 1.02 inside the rounded clip.
- **CTA press**: red bg deepens `#ed1d24` → `#a30c11` over 150ms on `:active`.
- **Robux spend feedback**: when a purchase completes, the Robux balance pill animates a brief green flash + the new balance counts up over 320ms with playful easing — celebratory feedback for the user.
- **Carousel slide**: horizontal carousel slides 240ms standard.
- **Search-bar focus**: 2px Roblox Red ring fades in over 200ms.
- **Filter chip toggle**: bg transitions `#f7f8fa` → `#ed1d24` over 200ms with text colour flip.
- **Modal enter**: scrim fades in 200ms, dialog translates `translateY(8px) opacity(0) → 0/1` over 240ms emphasized.

### Page Transitions

Page-to-page navigation uses a short `200ms` opacity crossfade — the friendly playground voice avoids hard-cut jarringness.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. Tile image scale + shadow lift suppress to a colour-only hover. Robux spend flash becomes an instant balance update. Modal slide degrades to opacity-only.

## 9. Accessibility & A11y

### Contrast Pairs

| Pair | Ratio | Level |
|------|-------|-------|
| #191b1f text on #ffffff canvas | 14.6 | AAA |
| #ffffff on #ed1d24 CTA | 4.6 | AA |
| #ed1d24 link on #ffffff | 4.5 | AA |
| #3b4248 soft on #ffffff | 9.5 | AAA |
| #5c6770 muted on #ffffff | 6.4 | AA |
| #00b06f Robux Green on #ffffff | 3.1 | AA Large only — Roblox uses 16/700 |
| #ffffff on #00b06f Robux Green | 3.1 | AA Large only — same compensation |
| #ffffff on #00a2ff Free badge | 3.0 | AA Large only — badge runs 11/700 uppercase |

The Robux Green and Free Badge Blue pairs sit at AA Large only — Roblox compensates with 16/700 button labels and 11/700 uppercase badge text to meet the large-text threshold. The brand-red CTA pair sits cleanly at AA.

### Focus Indicators

Focus ring is **2px solid `#ed1d24`** with 2px outline-offset — Roblox Red ring around buttons, inputs, links. Inputs gain a thicker border + ring on `:focus-visible`.

### ARIA Patterns

- **Search bar**: `role="search"`, input `aria-label="Search experiences and items"`
- **Experience tile**: entire tile wrapped in `<a>` with verbose `aria-label` — "Adopt Me, 95 percent thumbs up, 12.4 million active players, free to play"
- **Robux balance pill**: `aria-label="Robux balance: 240"`
- **Free badge**: `aria-label="Free to play"`
- **Carousel paddle**: `aria-label="Previous"` / "Next"
- **Avatar circle**: `aria-label="[Username] profile picture"`

### Keyboard Navigation

- Tab traverses: top nav → search → genre filters → experience grid → footer
- Inside carousel rail: arrow keys cycle horizontally
- Esc closes modals
- Robux shortcut: `r` opens Buy Robux modal
- Avatar shortcut: `a` opens avatar editor

### Screen Reader Hints

Verbose `aria-label` on icon-only buttons. Robux balance pill includes the actual numeric value. Free badge clearly states "Free to play" not just "Free." Active count is read as the full number not abbreviated ("12.4 million active players" not "12.4M").

### Reduced Motion

Tile lift + image scale degrade to colour-only. Robux spend flash becomes instant. Modal slide degrades to opacity-only. Carousel slide → opacity crossfade.

## 10. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Top nav collapses to logo + hamburger; experience grid 2-up; hero scales 56px → 32px |
| Tablet | 600–1024px | Full masthead; experience grid 3–4-up |
| Desktop | 1024–1280px | Sub-nav with full anchors; experience grid 5–6-up |
| Wide | 1280–1408px | Content caps at 1408px; experience grid 6-up |

### Touch Targets

- Primary CTAs: 44px height — meets AAA
- Tile entire 150×226 tap target
- Robux balance pill: 32×120
- Avatar circle: 32–48px
- Carousel paddle: 40×40 (under AAA, compensated by edge-anchored swipe)

### Collapsing Strategy

- Top nav: utilities (notifications, cart) collapse first; hamburger drawer at <1024px
- Sub-nav: horizontal scroll with edge fade
- Experience grid: 6 → 5 → 4 → 3 → 2; 16px gutters compress to 12px → 8px
- Game detail: 2-column splits to single-column stack
- Section padding: 96px desktop → 64px tablet → 48px mobile

### Image Behavior

Experience tile cover art uses fixed aspect-ratio 1:1 with `object-fit: cover` — developer-supplied art rarely is exactly square so the cover crop centres the subject. Catalog tile uses 1:1 (avatar items) or 3:4 (clothing) depending on item type.

### Container Queries

Used in the right-rail buy box on game detail: when the rail narrows below ~340px, edition selectors collapse to dropdown.

## 11. Content & Voice

### Tone

Friendly, playful, accessible. Roblox's voice is "the helpful older sibling who shows you which mini-games are fun." Headlines lead with discovery ("Today's Picks", "What's Popular Now") rather than aspiration. Section heads use sentence case with confident weight — never aggressive uppercase.

### Microcopy Patterns

- **Button verbs**: "Play", "Buy Robux", "Sign Up", "Continue", "Save", "Edit Avatar" — outcome-named, friendly
- **Error message recipe**: warm + actionable — "Oops! We couldn't process that. Please try again or check your internet connection."
- **Success confirmations**: celebratory but not babyish — "You got it! [Item] is now in your inventory."
- **Field labels**: short — "Email", "Username", "Password", "Birthday"
- **Stock urgency**: rare — Roblox doesn't fake scarcity; limited items show "Limited" badge

### Empty States

Empty inventory: "Your inventory is empty. Check out the Marketplace to find avatar items, gear, and more."

Empty wishlist: "You haven't favourited anything yet. Tap the heart on any experience or item to save it."

Empty search: "We couldn't find anything for [query]. Try different keywords or browse by genre."

### CTA Verb Conventions

- Primary: **"Play"** (universal experience CTA), **"Sign Up"**, **"Buy Robux"**, **"Continue"**
- Save: **"Add to Favourites"** (heart-first vocabulary, British-spelling on global locales)
- Tertiary: **"View Profile"**, **"See Reviews"**, **"More Info"**
- Avoided: "Submit", "Click here", "Get started" — too generic for Roblox's friendly voice

## 12. Dark Mode & Theming

**Optional dark mode.** Roblox web has a dark-mode toggle in user settings; defaults to light. The dark-mode token swap is straightforward:

- `bg`: `#ffffff` → `#191b1f`
- `surface`: `#ffffff` → `#232529`
- `surface-soft`: `#f7f8fa` → `#2a2c30`
- `text`: `#191b1f` → `#ffffff`
- `text-soft`: `#3b4248` → `#cdd2d8`
- `text-muted`: `#5c6770` → `#9ba3ab`
- `border`: `#e4e7eb` → `#3a3d42`
- `brand`, `robux-green`, `free-badge-blue`, `premium-purple`: unchanged across modes

The mobile app respects system dark-mode by default. The desktop client inherits browser preference.

## 13. Lineage & Influences

Roblox's visual lineage runs through three traditions: **late-90s/early-2000s kid-MMO interfaces** (Habbo Hotel, Club Penguin, Toontown — friendly playgrounds with bright primaries and avatar customisation); **bright web-platform marketplaces** (Etsy, eBay's category-tile pattern translated to UGC gaming); and **iOS App Store editorial layout** (Today tab's editorial card-and-rail pattern, adapted to a 1:1 square experience tile).

The current Roblox visual system rolled out in two waves: a 2017 brand refresh that simplified the wordmark and locked in `#ed1d24` as the primary, and a 2022 typography migration to Builder Sans replacing Source Sans Pro. The 1:1 square experience tile pattern dates to the 2014 launch of Mobile Roblox; the chrome adapted to web in 2016 with the Discover redesign.

What Roblox rejects: dark-by-default storefronts (the brand position is friendly playground), serif typography, narrow content columns (Roblox uses the full 1408px), gradient mesh backgrounds, expressive display typefaces, and any chrome that competes with developer-supplied cover art. The brand position is **the platform fades, the experience shines**.

**Influences:**
- Habbo Hotel / Club Penguin / Toontown — bright kid-MMO interface trade dress
- Etsy / eBay marketplace — category tiles on light canvas
- iOS App Store Today tab — editorial card-and-rail merchandising
- Builder Sans (Roblox commission) — humanist sans
- Discord — youth-coded social platform with overlapping audience
- YouTube — the dominant attention-economy aesthetic for Gen Z, white canvas + red brand
- Source Sans Pro (Adobe) — the older typography that Builder Sans replaced

## 14. Do's and Don'ts

**Do**
- Anchor the page on bright `#ffffff` canvas with warm-near-black `#191b1f` ink
- Use Roblox Red (`#ed1d24`) for the wordmark, every primary CTA, link, and focus ring
- Use Robux Green (`#00b06f`) exclusively for the in-platform economy: balance pill, Buy Robux, online indicator
- Use Free Badge Blue (`#00a2ff`) on free experiences and free items — the open-economy hook
- Render experience tiles as 1:1 square cover art in 8px-radius cards with hover shadow lift
- Use Builder Sans at 600–800 weights with subtle -0.01 to -0.02em negative tracking on display
- Render CTAs as 9999px pills at 44px height with 16/700 white-on-red labels
- Keep the dark Robux balance pill (`#191b1f`) on the masthead — the chromatic counterweight
- Run sentence-case section heads — never aggressive uppercase like Epic
- Apply hover lift `rgba(25,27,31,0.16) 0 6px 16px` to experience tiles
- Use playful celebratory easing on Robux spend feedback only

**Don't**
- Don't introduce a dark-mode default — Roblox is light by default; dark mode is opt-in
- Don't pluralise "Robux" — Robux is both singular and plural
- Don't swap the brand red for orange or pink — `#ed1d24` is precise
- Don't use Robux Green for non-economy actions — green is reserved for Buy Robux / balance / online
- Don't use uppercase CTAs — Roblox is sentence-case throughout
- Don't run experience-tile gutters tighter than 12px — the playful breath is the brand
- Don't use serifs anywhere — Builder Sans is the only family
- Don't make Free Badge red — `#00a2ff` cyan-blue keeps it distinct from brand red
- Don't soften experience-tile corners past 8px — the geometric pattern is canonical
- Don't replace the warm `#191b1f` ink with pure black — warmth is the playground voice
- Don't use playful easing on every transition — celebratory motion is reserved for Robux spend

## 15. Agent Prompt Guide

### Quick Color Reference

```
Canvas:           #ffffff
Bg Alt:           #f7f8fa
Ink:              #191b1f
Roblox Red:       #ed1d24
Brand Hover:      #d11017
Robux Green:      #00b06f
Free Badge Blue:  #00a2ff
Premium Purple:   #b08aff
Text Soft:        #3b4248
Text Muted:       #5c6770
Border:           #e4e7eb
Builders Gold:    #ffd000
```

### Example Component Prompts

- "Create a Roblox Sign Up button: 9999px pill with Roblox Red `#ed1d24` fill, white Builder Sans 16/700 'Sign Up' text, 12×24px padding, 44px height. Hover deepens to `#d11017`. Active to `#a30c11`."
- "Build a Roblox experience tile: 150×150 square cover art with `object-fit: cover`, 8px radius, no internal padding. Beneath: title in Builder Sans 16/600 ink (single line, ellipsis), thumbs-up percentage + active count in 13/400 muted ('👍 95% · 12.4M Active'), optional cyan `#00a2ff` 'FREE' badge top-left of cover. On hover: shadow `rgba(25,27,31,0.16) 0 6px 16px` fades in + image scale 1.0 → 1.02."
- "Design a Roblox top nav: full-width white bar with 1px `#e4e7eb` bottom border, 64px tall. Roblox red wordmark anchored left. Nav items 'Discover · Marketplace · Create · Robux' in Builder Sans 14/600 ink centred. Search bar centred (~400px wide, `#f7f8fa` floor, 9999px radius, 40px tall). Robux balance pill (black `#191b1f` fill, white text 'R$ 240' with R$ icon prefix) + avatar circle + notifications anchored right."
- "Build a Roblox Robux balance pill: 9999px black `#191b1f` pill with white Builder Sans 14/700 text 'R$ 240' (with `tnum`) and a small R$ icon prefix in `#ffd000` gold. 6×12px padding."
- "Create a Roblox Buy Robux button: 9999px Robux Green `#00b06f` pill with white Builder Sans 14/600 'Buy Robux' label, 10×20px padding, 40px height. Hover deepens to `#008f59`."
- "Design a Roblox Free badge: `#00a2ff` cyan-blue rectangle with white Builder Sans 11/700 uppercase 0.04em 'FREE' text, 4px radius, 2×8px padding. Anchor top-left of free experience tiles or marketplace items."

### Iteration Guide

1. **Start with white and warm-ink.** If your canvas is pure black or cool grey, it isn't Roblox. `#ffffff` + `#191b1f` is the foundation.
2. **Roblox Red is the only red.** `#ed1d24` for everything brand. No secondary red.
3. **Robux Green is for the economy only.** `#00b06f` for balance, Buy Robux, online indicator. Never use for other actions.
4. **Free Badge Blue is for free items only.** `#00a2ff` cyan-blue. Don't reach for green or yellow.
5. **Pill CTAs at 44px / 16/700.** 9999px radius, bold weight, 12×24px padding. Larger than typical because the audience is young.
6. **1:1 square experience tiles.** 8px radius, full-bleed cover art, metadata stacked beneath.
7. **Sentence case throughout.** Builder Sans bold, never aggressive uppercase.
8. **Friendly motion.** 240ms hover lift, playful easing on Robux spend only. Don't over-animate.