# Roblox

> `roblox@1.0.0`

Roblox is the San Mateo-headquartered user-generated-content gaming platform — covering the Roblox client across PC, mobile, Xbox, PlayStation, and Meta Quest; the Roblox Studio creator IDE; the Robux virtual currency and Marketplace; and the hundreds of millions of player-created "experiences" hosted on the platform. The brand voice under the recent "Foundation" design-system rebrand is platform-confident and creator-first: the chrome carries the developer / creator surfaces while the in-experience artwork inside individual games provides chromatic variety. Visually, Roblox is dual-mode with a strong dark-mode default on the consumer site: a deep ink canvas (#121215 / #191A1F) carries the page chrome, with the "System Emphasis" blue (#335FFF) as the calibrated primary action across both modes. The earlier red-orange Roblox identity has been retired under Foundation in favor of this blue-centered palette.
Typography is the proprietary Builder Sans family.


**Tags:** `roblox`, `gaming`, `platform`, `ugc`, `creator`, `blue`, `dual-mode`

## Atoms

### Palette

**Roblox** · `roblox@1.0.0` · Proprietary — All Rights Reserved

> Roblox's brand palette as captured from the live roblox.com "Foundation" design-system tokens (--color-extended-*, --color- surface-*, --color-content-*, --color-system-*, --light-mode-*, --dark-mode-* token families). The brand is dual-mode by construction with a strong dark-mode default on the consumer site: a near-black "Surface 0" canvas (#121215 dark / #FFFFFF light) carries the chrome, with the "System Emphasis" blue (#335FFF, light variant #1446FF, dark variant #528BFF) as the primary identifying action color. The brand has moved away from its earlier red-orange identity toward this calibrated blue palette under the recent Foundation rebrand. A complete extended ramp covers every hue (blue, green, red, yellow, orange, magenta, pink, purple, turquoise, gray) in 14 steps — this atom captures the most-used identity stops and the documented system roles. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `emphasis-blue` | Emphasis Blue | `#335FFF` |
| `emphasis-blue-link` | Emphasis Blue Link | `#1446FF` |
| `emphasis-blue-bright` | Emphasis Blue Bright | `#528BFF` |
| `emphasis-blue-pale` | Emphasis Blue Pale | `#8FB4FF` |
| `emphasis-blue-light` | Emphasis Blue Light | `#EBF1FF` |
| `emphasis-blue-deep` | Emphasis Blue Deep | `#002DD6` |
| `emphasis-blue-deepest` | Emphasis Blue Deepest | `#00145C` |
| `ink` | Ink | `#121215` |
| `ink-elevated` | Ink Elevated | `#191A1F` |
| `ink-surface` | Ink Surface | `#202227` |
| `ink-card` | Ink Card | `#272930` |
| `paper` | Paper | `#FFFFFF` |
| `paper-elevated` | Paper Elevated | `#F7F7F8` |
| `paper-divider` | Paper Divider | `#EEEFF1` |
| `paper-line` | Paper Line | `#E6E7EA` |
| `content-emphasis` | Content Emphasis | `#202227` |
| `content-default` | Content Default | `#494D5A` |
| `content-muted` | Content Muted | `#6A6F81` |
| `content-soft` | Content Soft | `#BCBEC8` |
| `content-soft-light` | Content Soft Light | `#D5D7DD` |
| `system-success` | System Success | `#39C582` |
| `system-warning` | System Warning | `#F2BA2A` |
| `system-alert` | System Alert | `#DF281F` |
| `system-alert-dark` | System Alert Dark | `#F04433` |
| `accent-magenta` | Accent Magenta | `#C00AE8` |
| `accent-purple` | Accent Purple | `#9348F0` |
| `accent-turquoise` | Accent Turquoise | `#127D98` |
| `accent-orange` | Accent Orange | `#C05014` |
| `accent-pink` | Accent Pink | `#CD377B` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `paper` | `#FFFFFF` |
| `surface` | `paper-elevated` | `#F7F7F8` |
| `surface-elevated` | `paper` | `#FFFFFF` |
| `text-primary` | `content-emphasis` | `#202227` |
| `text-secondary` | `content-default` | `#494D5A` |
| `text-tertiary` | `content-muted` | `#6A6F81` |
| `primary` | `emphasis-blue` | `#335FFF` |
| `primary-hover` | `emphasis-blue-deep` | `#002DD6` |
| `accent` | `emphasis-blue-link` | `#1446FF` |
| `accent-hover` | `emphasis-blue-deep` | `#002DD6` |
| `warning` | `system-warning` | `#F2BA2A` |
| `warning-hover` | `accent-orange` | `#C05014` |
| `error` | `system-alert` | `#DF281F` |
| `success` | `system-success` | `#39C582` |
| `border` | `paper-line` | `#E6E7EA` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `ink-elevated` | `#191A1F` |
| `surface` | `ink-surface` | `#202227` |
| `surface-elevated` | `ink-card` | `#272930` |
| `text-primary` | `paper-elevated` | `#F7F7F8` |
| `text-secondary` | `content-soft-light` | `#D5D7DD` |
| `text-tertiary` | `content-soft` | `#BCBEC8` |
| `primary` | `emphasis-blue` | `#335FFF` |
| `primary-hover` | `emphasis-blue-bright` | `#528BFF` |
| `accent` | `emphasis-blue-bright` | `#528BFF` |
| `accent-hover` | `emphasis-blue-pale` | `#8FB4FF` |
| `warning` | `system-warning` | `#F2BA2A` |
| `warning-hover` | `accent-orange` | `#C05014` |
| `error` | `system-alert-dark` | `#F04433` |
| `success` | `system-success` | `#39C582` |
| `border` | `ink-card` | `#272930` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `ink-elevated` | `#191A1F` |
| `on-identity` | `emphasis-blue` | `#335FFF` |
| `primary` | `emphasis-blue` | `#335FFF` |
| `primary-hover` | `emphasis-blue-deep` | `#002DD6` |
| `accent` | `emphasis-blue-link` | `#1446FF` |
| `accent-hover` | `emphasis-blue-deep` | `#002DD6` |
| `mark` | `paper-elevated` | `#F7F7F8` |
| `success` | `system-success` | `#39C582` |
| `warning` | `system-warning` | `#F2BA2A` |
| `error` | `system-alert` | `#DF281F` |
| `text-primary-light` | `content-emphasis` | `#202227` |
| `text-primary-dark` | `paper-elevated` | `#F7F7F8` |
| `background-light` | `paper` | `#FFFFFF` |
| `background-dark` | `ink-elevated` | `#191A1F` |
| `surface-light` | `paper-elevated` | `#F7F7F8` |
| `surface-dark` | `ink-surface` | `#202227` |
| `text-secondary-light` | `content-default` | `#494D5A` |
| `text-tertiary-light` | `content-muted` | `#6A6F81` |
| `border-light` | `paper-line` | `#E6E7EA` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `colorChoice` → `roles.colors.primary`

- **allowed:** emphasis-blue, emphasis-blue-link, emphasis-blue-bright, emphasis-blue-deep
- **forbidden:** system-success, system-warning, system-alert, accent-magenta, accent-purple, accent-orange, accent-pink

> Under the Foundation design system, Roblox's primary action color is --color-system-emphasis (#335FFF) — a calibrated blue that carries the brand across both light and dark modes. The extended accents (magenta, purple, orange, pink) are content-tag affordances inside the design system, not brand actions. Substituting any of them — or the status colors (success green, warning amber, alert red) — for the primary inverts the Foundation system's documented action hierarchy. 

#### `colorChoice` → `roles.colors.mark`

- **allowed:** paper-elevated, paper, content-emphasis, ink
- **forbidden:** emphasis-blue, accent-magenta, accent-purple, system-alert, accent-orange

> The Roblox wordmark renders in monochrome — white on dark surfaces, content-emphasis (#202227) on light surfaces. The emphasis blue is the *action* color, not the mark fill; the extended accents are content-tag affordances. Recoloring the wordmark in any of them misrepresents the Foundation rebrand's monochrome wordmark posture. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined, distorted

> Roblox's wordmark under the Foundation rebrand is a fixed- proportion identity. The brand's press kit distributes approved logo files only; gradient-filling, drop- shadowing, skewing, rotating, or placing the mark on a busy photo conflicts with the brand's reductive Foundation identity. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Content Emphasis (#202227) on Paper (#FFFFFF) measures ~16:1 and Paper Elevated (#F7F7F8) on Ink Elevated (#191A1F) measures ~14:1 — both clear WCAG AA decisively. Roblox's platform surfaces carry dense product information (experience cards, creator pages, Robux pricing, moderation surfaces); AA is the floor across both modes. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Roblox's platform serves a global, often-young audience and ships dense product information across mobile, console, and PC; AA is the body-text floor. The brand's moderation surfaces specifically (which carry safety- critical information) earn this floor. 

### ⚠️ warning (2)

#### `contextRestriction` → `roles.colors.accent`

- **forbiddenContexts:** logo, hero-headline, error-state, destructive-action
- **allowedContexts:** inline-link, focus-ring, active-state, selection

> The emphasis blue carries inline links, focus rings, active-state highlights, and selection — declared as --color-content-link and --color-selection-start / selection-end. It must not stand in for the Roblox logo fill (which is monochrome) or appear in error / destructive contexts (those use --color-system-alert). 

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 600, 700, 800

> Roblox's Foundation typography declares Builder Sans at SemiBold (600) for labels (--typography-label-* fonts), Bold (700) for headings, titles, and displays (--typography-heading-*, --typography-title-*, --typography-display-*), with Heavy (800) reserved for special display contexts. Lighter heading weights (400, 500) appear only in body / caption roles, not display. 

### 💡 recommendation (2)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** ink, ink-elevated, paper, paper-elevated
- **doesNotPairWith:** accent-magenta, accent-purple, accent-orange, accent-pink

> The emphasis blue reads cleanest against the ink or paper canvases. Placing it directly adjacent to the extended accent stops (magenta, purple, orange, pink) — which are content-tag affordances used inside experience-card chrome — introduces chromatic conflict and collapses the separation between "brand action" and "content tag." 

#### `fontPairing` → `typography.display`

- **requires:** `prose`
- **minSizeRatio:** `1.5`

> Roblox's Foundation system uses Builder Sans for both display and body, distinguished by weight (Bold for display, Regular for body) and size. The deployed token ratios put display-large at ~80px and body-medium at ~14px — well above a 1.5× floor. Maintain at least this ratio when one family carries both roles. 

## Provenance

- **Source:** <https://www.roblox.com/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Roblox Corporation — visual identity captured from the deployed "Foundation" design-system tokens on roblox.com (--color-system-emphasis, --color-surface-*, --color-content-*, --light-mode-*, --dark-mode-*, --typography-*, --config-text- font CSS custom-property families). Roblox, the Roblox logo, Robux, Roblox Studio, and associated marks are trademarks of Roblox Corporation. 
- **Imported:** `2026-05-19`
- **Notes:** Derived from live site CSS at https://www.roblox.com/ on 2026-05-19; Roblox's published press-kit page (https://about.roblox.com/press-kit/, formerly corp.roblox.com/press-kit) provides logo downloads but no hex color specifications. The captured tokens come from the deployed "Foundation" design-system theme (--config-theme- name: "Foundation"). The display typeface is Builder Sans (proprietary, declared via --config-text-font as "Builder Sans" with Helvetica Neue / Helvetica / Arial fallbacks) and is not publicly distributed. This atom references inter@1 as the open-source rendering substitute. The Robux icon is a central identity element but is not enumerated as a separate asset variant per the encyclopedia's trademark-redistribution policy. assets: [] applies. 

---

*Generated by the brand-atoms converter. Source: `roblox@1.0.0` from the encyclopedia.*