W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Roblox
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.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/roblox/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/roblox/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Roblox
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Roblox
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Roblox
A clear hierarchy in Roblox's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ emphasis-blue-link #1446FF accent-hover
→ emphasis-blue-deep #002DD6 background-dark
→ ink-elevated #191A1F background-light
→ paper #FFFFFF border-light
→ paper-line #E6E7EA error
→ system-alert #DF281F identity
→ ink-elevated #191A1F mark
→ paper-elevated #F7F7F8 on-identity
→ emphasis-blue #335FFF primary
→ emphasis-blue #335FFF primary-hover
→ emphasis-blue-deep #002DD6 success
→ system-success #39C582 surface-dark
→ ink-surface #202227 surface-light
→ paper-elevated #F7F7F8 text-primary-dark
→ paper-elevated #F7F7F8 text-primary-light
→ content-emphasis #202227 text-secondary-light
→ content-default #494D5A text-tertiary-light
→ content-muted #6A6F81 warning
→ system-warning #F2BA2A Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from roblox)
Light mode (15 roles)
accent
→ emphasis-blue-link accent-hover
→ emphasis-blue-deep background
→ paper border
→ paper-line error
→ system-alert primary
→ emphasis-blue primary-hover
→ emphasis-blue-deep success
→ system-success surface
→ paper-elevated surface-elevated
→ paper text-primary
→ content-emphasis text-secondary
→ content-default text-tertiary
→ content-muted warning
→ system-warning warning-hover
→ accent-orange Dark mode (15 roles)
accent
→ emphasis-blue-bright accent-hover
→ emphasis-blue-pale background
→ ink-elevated border
→ ink-card error
→ system-alert-dark primary
→ emphasis-blue primary-hover
→ emphasis-blue-bright success
→ system-success surface
→ ink-surface surface-elevated
→ ink-card text-primary
→ paper-elevated text-secondary
→ content-soft-light text-tertiary
→ content-soft warning
→ system-warning warning-hover
→ accent-orange Rules (9 typed constraints)
error · 5 rules
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 rules
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 rules
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.