---
version: alpha
name: "Roblox"
description: "Roblox's design system is a high-contrast dark canvas built for a generation of creators — crisp white Builder Sans typography, an electric cobalt action blue, and a backdrop of saturated game-world thumbnails that make the interface feel like a portal into infinite worlds."

colors:
  # Surface / canvas
  background: "#121215"           # near-black primary canvas — the app and signup backdrop
  surface: "#1a1a1f"             # slightly lifted panels, card surfaces
  surface-elevated: "#27293a"    # raised dark panels, modal chrome

  # Ink / text
  ink: "#f7f7f8"                 # near-white primary text on dark canvas
  ink-secondary: "#d5d7dd"       # supporting copy, input labels, muted navigation
  ink-muted: "#bcbec8"           # captions, metadata, placeholder text
  on-dark: "#ffffff"             # pure white — logo, prominent headings on dark

  # Light surface ink (marketing / account pages)
  ink-light: "#272930"           # body text on light/white surfaces
  on-light: "#121215"            # strong headings on white backgrounds

  # Brand accent — action blue
  primary: "#335fff"             # primary CTA, focus ring, action emphasis
  primary-hover: "#1446ff"       # button hover / pressed state (from --startmode-light-color-content-link)
  on-primary: "#ffffff"          # text on primary CTA

  # Secondary surfaces
  surface-input: "#d0d9fb"       # was rgba(208,217,251,0.08) flattened — Google format requires hex; original transparent blue tint on dark
  on-input: "#d5d7dd"            # input text color

  # Semantic
  error: "#df281f"               # alert red — (from --startmode-light-color-system-alert and _raw palette)
  error-dark: "#e75750"          # kids/dark mode alert variant
  success: "#39c582"             # success green (from --startmode-light-color-system-success)
  warning: "#f2ba2a"             # warning amber (from --startmode-dark-color-system-warning)

  # Borders
  border: "#707070"              # input and element outlines on dark surfaces
  border-soft: "#494d5a"         # subtle dividers (from --color-content-default)

  # Shadow tint
  shadow-soft: "#000000"         # was rgba(0,0,0,0.075) inset — Google format requires hex

typography:
  display-hero:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.3px
  heading-section:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav-link:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  overline:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 2.75
    letterSpacing: 0px
  caption:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  micro:
    fontFamily: "Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 9px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 9px 24px

  button-cta:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 9px 24px
  button-cta-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 9px 24px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 9px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 9px 24px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
  card-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 5px 12px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 5px 12px
    borderColor: "{colors.primary}"

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  tag:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 24px
---

# Roblox Design System

## Overview

Roblox's design language is built around a single organizing idea: the platform is a portal. The canvas is a deep near-black (`{colors.background}`), and behind every interaction lies a mosaic of game-world thumbnails — vivid, saturated, each one a window into a different universe. Against that explosive backdrop, the interface itself is calm and deliberate: crisp `{colors.ink}` type, an 8px radius geometry that reads as friendly but not childish, and one electric action color (`{colors.primary}`) that reserves itself exclusively for the moments that matter. The design doesn't compete with the content; it frames it.

Builder Sans — Roblox's custom grotesque typeface, self-hosted across four weights — does the typographic heavy lifting. At display scale it runs at weight 700 with slight negative tracking, projecting confidence and platform authority. At UI scale (weight 500) it shifts to an uppercase label mode for buttons and navigation, a nod to the gaming vernacular where ALL-CAPS = status. At body weight (300–400), the same typeface relaxes into legibility without losing its architectural precision. No serif, no decorative contrast — one family, one job, done exceptionally.

What distinguishes Roblox most from other gaming platforms is its restraint with color. Where competitors pile in neons and gradients, Roblox's marketing and product surfaces hold to a near-monochromatic dark palette, letting the user-generated content supply the color. The `{colors.primary}` cobalt blue appears on exactly the right targets — the "Sign Up" CTA, focus rings, emphasis states — and carries real urgency because it's the only saturated color the interface claims as its own. Even the error red (`{colors.error}`) and success green (`{colors.success}`) are controlled, drawn from a proper semantic system rather than sprinkled decoratively.

**Key Characteristics:**
- Deep near-black canvas (`{colors.background}`) makes game thumbnails pop as the primary visual element
- Builder Sans — a custom grotesque — across weights 300 to 700; single typeface, no contrasting pair
- Electric cobalt `{colors.primary}` as the sole saturated UI color; everything else is neutral
- 8px radius (`{rounded.md}`) is the system default — modern and friendly without being cartoonishly round
- `{colors.ink}` near-white text at high contrast, with a careful secondary/muted hierarchy below it
- Near-monochromatic palette strategy: the user-generated content supplies color, not the chrome
- Uppercase `{typography.button-ui}` weight 500 on buttons and labels — gaming-native status language
- Semantic color system (`{colors.error}`, `{colors.success}`, `{colors.warning}`) drawn from a full extended palette
- Motion is tight: 0.15s `ease-in-out` on all interactive transitions — responsive, not flashy
- Light and dark surface modes coexist: dark for the app canvas, light for marketing pages

## Colors

### Surface & Canvas
- **App Black** (`{colors.background}`): The primary near-black canvas behind the app and signup flow. Game thumbnails render against this surface, making the player-created content the dominant visual presence.
- **Panel Dark** (`{colors.surface}`): Slightly lifted from the canvas for card surfaces and form containers. The 5-unit distinction keeps depth without strong visual break.
- **Elevated Dark** (`{colors.surface-elevated}`): Raised panels, modals, and hover-state card fills. The third dark tier completes the elevation stack.

### Ink / Text
- **Near-White** (`{colors.ink}`): Primary text at near-full contrast against the dark canvas. Roblox avoids pure `#ffffff` to reduce harshness.
- **Silver** (`{colors.ink-secondary}`): Supporting copy, input text, and navigation labels. The most common text color in UI density.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, and placeholders. The system neutral.

### Brand Accent
- **Action Blue** (`{colors.primary}`): The brand's sole saturated UI color. Used for primary CTAs, focus rings, and emphasis states. Its selectivity is what gives it authority.
- **Blue Hover** (`{colors.primary-hover}`): The button pressed/hover state — slightly brighter, maintaining brand continuity.

### Semantic
- **Error Red** (`{colors.error}`): Destructive actions, validation errors, alert states.
- **Success Green** (`{colors.success}`): Confirmation states, positive feedback.
- **Warning Amber** (`{colors.warning}`): Caution indicators and warning banners.

### Borders & Shadow
- **Border Mid** (`{colors.border}`): Input outlines and component separators on dark surfaces.
- **Border Soft** (`{colors.border-soft}`): Subtle dividers and metadata separators.

## Typography

### Font Family
- **Primary**: `Builder Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif`
- **Custom**: Builder Sans is Roblox's self-hosted proprietary grotesque, available in four woff2 weights. Not available on Google Fonts.
- **Google Fonts substitute**: `Nunito` (geometric, friendly weight range) or `DM Sans` (clean grotesque); closest match to Builder Sans's rounded-terminal character.
- **OpenType Features**: uppercase transform on UI labels (weight 500, `text-transform: uppercase`); no stylistic alternates detected.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px / 700 — campaign headlines, platform hero sections |
| `display` | 48px / 700 — section headers, feature page leads |
| `heading-section` | 32px / 700 — in-page section titles |
| `heading-sub` | 20px / 700 — subheads, card titles (with uppercase transform in UI contexts) |
| `body-large` | 18px / 400 — lead paragraphs, feature descriptions |
| `body` | 16px / 400 — standard reading copy, form labels |
| `nav-link` | 16px / 500 — navigation links and secondary UI text |
| `button-ui` | 16px / 500 — button labels, interactive controls |
| `overline` | 16px / 500 / uppercase / 2.75 line-height — section category labels |
| `caption` | 12px / 400 — metadata, help text, timestamps |
| `micro` | 10px / 500 — the densest badges and tag chips |

### Principles
- Single typeface for all roles — Builder Sans handles display through micro without a secondary face
- Uppercase at weight 500 for all interactive controls — this is the gaming-native label convention
- Display weights push to 700 and hold negative tracking for authority; body weights relax to 300–400 for legibility
- Body size floors at 12px; UI density in the app can push 14px captions but never below 10px

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (with a 12px and 16px primary rhythm).

Roblox spacing is moderately generous: form elements breathe at `{spacing.lg}` gaps, section stacks at `{spacing.3xl}` or `{spacing.4xl}`. The app canvas packs tiles tightly (`{spacing.sm}` gutters between game thumbnails) while marketing pages expand to full-section breathing room.

### Grid & Container
- Max content width: ~1200px for centered marketing pages
- Thumbnail grid: dense repeating tiles (3–5 columns at desktop), with consistent `{spacing.sm}`–`{spacing.md}` gutters
- Form layouts: centered single-column with max-width ~320px for signup/login, keeping focus on the CTA
- Navigation: horizontal bar with wordmark left, links center/right, platform download CTAs right

### Whitespace Philosophy
- Thumbnail density is the app's defining characteristic — gutters stay tight so more worlds fit per screen
- Marketing pages run opposite: generous vertical spacing lets the dark canvas and the illustration system breathe
- Form flows strip back to minimum — one clear hierarchy, no visual distractions from the game backdrop

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.background}` canvas | Page backdrop, game thumbnail tiles |
| Subtle (Level 1) | `{colors.surface}` fill, no shadow | Card surfaces, form containers |
| Raised (Level 2) | `{colors.surface-elevated}` fill | Hover states, active panels |
| Input (Level 3) | `inset 0 1px 1px rgba(0,0,0,0.075)`, `{rounded.md}` border | Form inputs — subtle inset to signal editability |
| Focus Ring | `inset 0 0 0 1px {colors.primary}` | Keyboard focus on interactive elements |

**Shadow Philosophy**: Roblox's elevation is almost entirely color-based, not shadow-based. The three dark surface tiers (`{colors.background}` → `{colors.surface}` → `{colors.surface-elevated}`) create spatial hierarchy through fill value, not drop shadows. This choice is deliberate: strong drop shadows would compete with the luminous game thumbnails. The one exception is the subtle `inset` shadow on form inputs — a thin inner edge that gives the text field a tactile sense of depth without adding visual noise to the composition.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Flush game thumbnails at viewport edges |
| `sm` | 4px | Small badges, compact tag chips |
| `md` | 8px | Default: buttons, inputs, cards, game tiles |
| `lg` | 12px | Larger panels, modal containers |
| `xl` | 16px | Hero containers, oversized feature cards |
| `pill` | 9999px | Avatar crops, status indicators, rounded tag chips |

The system centers on 8px. This is modern and approachable — friendlier than a sharp corporate system, less cartoonish than a 16px+ consumer bubble. The `{rounded.md}` reads as "Roblox": clean, platform-confident, accessible to a young audience without condescending to it.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — White fill (`{colors.on-dark}`) on the dark canvas, near-black text. This is the default signup/login CTA at the darkest surface. Padding is compact: `9px 24px`. Hover shifts to `{colors.ink}`.
- **`button-cta`** — Action blue (`{colors.primary}`) fill, white text. The highest-emphasis CTA — "Download", "Get Started", platform-acquisition moments.
- **`button-secondary`** — Dark surface fill (`{colors.surface}`), silver text. Low-emphasis actions alongside primary buttons.

### Cards
Game tiles and feature cards share `{rounded.md}` and `{colors.surface}` fill. Hover deepens to `{colors.surface-elevated}` — a color-shift affordance, no transform required. Thumbnail tiles render at fixed aspect ratios; the image is the card.

### Inputs
Form inputs use a translucent dark fill with `{colors.border}` outline and `{rounded.md}`. Focus state replaces the neutral outline with `{colors.primary}` — the only blue in the form, signaling exactly where you are. Inset shadow (`{components.input}`) adds tactile depth.

### Badges / Tags
- **`badge`** — Action blue fill, white text, pill radius. Used for "new" markers, featured labels, announcement chips.
- **`tag`** — Elevated-dark fill, silver text, pill radius. Game genre tags, metadata chips, category selectors.

### Navigation
Top nav is `{colors.background}`, with `{colors.ink}` and `{colors.ink-secondary}` text for wordmark and links respectively. The platform download CTAs (App Store, Google Play, Xbox, PlayStation, Meta Quest, Microsoft Store) render as small platform-badge icons in the footer — a dense informational row, not styled buttons.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for the highest-emphasis CTA and focus ring — its singularity is its power
- Keep the canvas dark (`{colors.background}`) so user-generated game content supplies the color energy
- Use Builder Sans weight 700 for all display and heading moments — do not lighten display to weight 400
- Apply `text-transform: uppercase` with `{typography.button-ui}` weight 500 on all button labels
- Use `{rounded.md}` (8px) as the default radius — it covers buttons, inputs, cards, and tiles consistently
- Layer dark surfaces (`{colors.background}` → `{colors.surface}` → `{colors.surface-elevated}`) for depth hierarchy — avoid drop shadows on non-transient elements
- Keep game thumbnails at full bleed in tiles — never add inner padding that reduces the art
- Use the full semantic color set (`{colors.error}`, `{colors.success}`, `{colors.warning}`) from the design system; never reach for off-palette reds/greens

### Don't
- Don't add a second saturated UI color alongside `{colors.primary}` — the monocolor strategy is the brand
- Don't use gradient backgrounds in the interface chrome — Roblox reserves visual richness for game content, not UI decoration
- Don't set body copy in weight 700 — the heavy weight belongs to display; 300–400 handles reading
- Don't strip the uppercase from button labels — it signals interactive intent in the gaming context
- Don't use radii below `{rounded.md}` (8px) on interactive elements — the system has no sharp corners in its component layer
- Don't add decorative drop shadows to resting cards or panels — Roblox's depth language is color, not shadow
- Don't place high-saturation decorative elements in the UI chrome — they compete with the game thumbnails
- Don't use `{colors.error}` red for anything except error states — it carries a semantic meaning that must stay exclusive

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column thumbnail feed; nav collapses to hamburger; display text scales to ~36px |
| Mobile | 375–767px | 2-column thumbnail grid; compact form layout; platform badge row wraps |
| Tablet | 768–1023px | 3-column tiles; nav links visible; hero text scales to ~48px |
| Desktop | 1024–1280px | Full layout: 4–5 tile columns, horizontal nav, hero at 64–72px |
| Large Desktop | >1280px | Max 1200px content container; wider tile gutter; hero at full 72px display |

### Touch Targets
- Primary buttons: 38px effective height (`9px` padding + 16px type + `9px` padding) — meets minimum 44px on mobile via increased padding in responsive breakpoints
- Game tiles: full card is the tap target; thumbnail + label + metadata as one touchable unit
- Nav links: 44px vertical touch zone maintained on mobile

### Collapsing Strategy
- **Navigation**: Horizontal links collapse to hamburger on mobile; the platform CTAs (Roblox mobile download) remain most prominent
- **Thumbnail grid**: Steps from 5 → 4 → 3 → 2 columns; tiles maintain fixed aspect ratio, never collapse to 1 column
- **Hero section**: Display text scales progressively; game backdrop image maintains full bleed
- **Form layout**: Signup/login form stays center-column and compresses gracefully at small widths
- **Spacing**: Section gaps scale down (`{spacing.4xl}` → `{spacing.2xl}`) but tile gutters stay tight

### Image Behavior
- Game thumbnail art: 16:9 fixed ratio, always full-bleed within the tile frame
- Platform badge row: icon-based, wraps to 2–3 columns on mobile
- Logo/wordmark: scales but maintains minimum 24px height; does not reduce to icon-only

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#121215)
- Primary text: `{colors.ink}` (#f7f7f8)
- Secondary text: `{colors.ink-secondary}` (#d5d7dd)
- Brand CTA: `{colors.primary}` (#335fff)
- CTA hover: `{colors.primary-hover}` (#1446ff)
- Card surface: `{colors.surface}` (#1a1a1f)
- Border: `{colors.border}` (#707070)

### Example Component Prompts

- "Build a Roblox-style signup card: `{colors.surface}` (#1a1a1f) background, `{rounded.md}` (8px) radius, 24px padding. Heading in Builder Sans (fallback: DM Sans) 20px/700, `{colors.ink}` color. Inputs with `{colors.surface}` fill, 1px `{colors.border}` outline, `{rounded.md}` radius, `5px 12px` padding, `{colors.ink-secondary}` placeholder. Primary button: white fill, near-black text, `{rounded.md}` radius, `9px 24px` padding, Builder Sans 16px/500 uppercase."
- "Create a game thumbnail tile grid: 5 columns at desktop with `{spacing.sm}` (8px) gaps, all on `{colors.background}` (#121215) canvas. Each tile is a fixed 16:9 image with `{rounded.md}` (8px) radius and a bottom label row — game title in `{colors.ink}` 14px/500, player count in `{colors.ink-muted}` 12px/400. Hover shifts tile background to `{colors.surface-elevated}` (#27293a)."
- "Design a Roblox primary CTA button: `{colors.primary}` (#335fff) background, `{colors.on-primary}` (#ffffff) text, Builder Sans (fallback: Nunito) 16px/500 uppercase, `{rounded.md}` (8px) radius, `9px 24px` padding. Hover: `{colors.primary-hover}` (#1446ff) background with 0.15s ease-in-out transition."
- "Build a navigation bar: `{colors.background}` (#121215) fill spanning full width, Roblox wordmark left, navigation links center in `{colors.ink-secondary}` 16px/500, primary CTA button right. Sticky on scroll. Mobile: wordmark + hamburger only, links in full-screen overlay."
- "Create a Roblox-style announcement badge: `{colors.primary}` (#335fff) fill, `{colors.on-primary}` (#ffffff) text, Builder Sans 12px/500 uppercase, `{rounded.pill}` radius, `4px 10px` padding. Use alongside a game tile title to mark featured or new releases."

### Iteration Guide

1. Start with `{colors.background}` (#121215) as the canvas — never use white or gray as the primary app surface
2. Game thumbnails are the color — keep UI chrome near-monochromatic; `{colors.primary}` is the only saturated UI element
3. All display text at weight 700, Builder Sans (or Nunito/DM Sans); all button/label text at weight 500, uppercase
4. Default radius is `{rounded.md}` (8px) — apply universally to buttons, inputs, cards, and tiles
5. Depth through fill value: `{colors.background}` → `{colors.surface}` → `{colors.surface-elevated}` — no resting drop shadows
6. `{colors.primary}` on the primary CTA and focus ring only; do not use it for decorative accents
7. Semantic colors (`{colors.error}`, `{colors.success}`, `{colors.warning}`) from the system palette only — no off-palette reds or greens

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Roblox. Brand names and trademarks belong to their respective owners.