---
version: alpha
name: MrBeast Shop
description: High-energy creator-commerce — a clean white canvas detonated by MrBeast's signature electric blue and shock-yellow, bold heavy-weight sans headlines in all-caps, chunky rounded CTAs, and loud limited-drop badges that turn merch into an event.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f6f6"
  ink: "#111111"
  ink-pure: "#000000"
  ink-secondary: "#555555"
  ink-muted: "#888888"

  # Brand accents
  primary: "#1d6bf3"        # MrBeast electric blue — primary CTA
  primary-hover: "#1656cc"
  beast-yellow: "#ffd400"   # shock yellow — highlights, sale flags
  beast-yellow-ink: "#111111"

  # Status / commerce
  success: "#1aa251"        # back in stock
  sale-red: "#e02424"       # price drops, limited release
  badge-new-bg: "#1d6bf3"
  badge-new-text: "#ffffff"
  badge-stock-bg: "#e6f4ec"
  badge-stock-text: "#147a3c"

  # Neutral scale
  gray-900: "#111111"
  gray-700: "#333333"
  gray-600: "#555555"
  gray-400: "#888888"
  gray-200: "#e5e5e5"
  gray-100: "#f0f0f0"
  gray-50: "#f6f6f6"

  # Borders
  border: "#e5e5e5"
  border-strong: "#111111"

  # On-color
  on-primary: "#ffffff"
  on-yellow: "#111111"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -1px
  section-heading:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.5px
  product-title:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  card-title:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  price:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.3px
  badge:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: 0.8px
  caption:
    fontFamily: "Archivo, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  # Primary blue CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Black secondary CTA (add to cart)
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Yellow loud promo CTA
  button-yellow:
    backgroundColor: "{colors.beast-yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Outline button
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  # New / limited badge
  badge-new:
    backgroundColor: "{colors.badge-new-bg}"
    textColor: "{colors.badge-new-text}"
    typography: "{typography.badge}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

  # Back-in-stock badge
  badge-stock:
    backgroundColor: "{colors.badge-stock-bg}"
    textColor: "{colors.badge-stock-text}"
    typography: "{typography.badge}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

  # Sale flag
  badge-sale:
    backgroundColor: "{colors.sale-red}"
    textColor: "{colors.on-ink}"
    typography: "{typography.badge}"
    rounded: "{rounded.xs}"
    padding: 4px 8px

  # Product card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 12px
    borderColor: "{colors.border}"

  # Promo / free-shipping banner
  banner-promo:
    backgroundColor: "{colors.beast-yellow}"
    textColor: "{colors.beast-yellow-ink}"
    typography: "{typography.eyebrow}"
    padding: 10px 16px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.primary}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  # Price display
  price-tag:
    textColor: "{colors.ink}"
    typography: "{typography.price}"
---

# MrBeast Shop Design System

## Overview

MrBeast Shop is creator-commerce dialed to maximum energy. The interface borrows the visual language of the world's biggest YouTube channel and pours it into a Shopify storefront: a clean white canvas that exists mostly to make the brand's electric blue (`{colors.primary}`) and shock yellow (`{colors.beast-yellow}`) hit harder. Where a luxury merch store whispers, this one shouts — loud headlines, chunky pill buttons, and limited-drop badges that frame every product as an event you might miss.

The typographic voice is heavy and confident. Headlines run in an extended geometric sans at weight 800, frequently all-caps, with tight tracking that gives product names a billboard quality. This is type meant to be read from across a room — or across a thumbnail. Body copy drops to a calm weight 400 of the same family, keeping the system cohesive while letting the loud weights carry the personality.

The color strategy is deliberately binary at rest and explosive on contact. Most of the page is achromatic — black ink (`{colors.ink}`) on white — so the brand colors read as pure signal. Blue marks the primary path to purchase, yellow flags promotions and savings ("ADD $75 MORE TO GET FREE SHIPPING"), red marks limited drops, and green confirms restocks. Color here is functional commerce signage, not decoration.

**Key Characteristics:**
- White canvas with near-black `{colors.ink}` text — neutral stage for brand color
- MrBeast electric blue (`{colors.primary}`) as the primary purchase signal
- Shock yellow (`{colors.beast-yellow}`) for promos, savings, and high-energy CTAs
- Heavy extended sans (weight 800) headlines, often all-caps, billboard tracking
- Fully rounded pill CTAs with chunky 14px vertical padding
- Loud commerce badges: New (blue), Limited (red), Back in Stock (green)
- High-contrast product grid, generous whitespace between drops

## Colors

### Primary
- **Ink** (`{colors.ink}`): Headlines, product titles, body text, dark CTAs.
- **White** (`{colors.background}`): Page background, card surfaces, button text on color.
- **Electric Blue** (`{colors.primary}`): The primary CTA and the brand's signal color.

### Brand Accents
- **Beast Yellow** (`{colors.beast-yellow}`): Promo banners, savings flags, loud secondary CTAs.
- **Primary Hover** (`{colors.primary-hover}`): Darker blue for CTA hover.

### Commerce / Status
- **Success Green** (`{colors.success}`): Back-in-stock confirmation.
- **Sale Red** (`{colors.sale-red}`): Price drops, limited-release flags.
- **Badge New** (`{colors.badge-new-bg}` / `{colors.badge-new-text}`): New-drop tag.
- **Badge Stock** (`{colors.badge-stock-bg}` / `{colors.badge-stock-text}`): Restock tag.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary ink.
- **Gray 600** (`{colors.gray-600}`): Secondary copy, descriptions.
- **Gray 400** (`{colors.gray-400}`): Muted/placeholder text.
- **Gray 200** (`{colors.gray-200}`): Borders, dividers.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Borders
- **Border** (`{colors.border}`): Card outlines, dividers, inputs.
- **Border Strong** (`{colors.border-strong}`): Outline buttons, emphasis edges.

## Typography

### Font Family
- **Primary**: `Archivo`, with fallbacks: `Arial, sans-serif`. Archivo's extended grotesque proportions and heavy weights match the storefront's billboard energy.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero — drop announcements, billboard impact |
| `section-heading` | 36px section titles ("New Arrivals", "Best Sellers") |
| `product-title` | Product names on detail pages |
| `card-title` | Product names in grid cards |
| `eyebrow` | All-caps labels, promo banner copy |
| `body-large` | Lead paragraphs, product descriptions |
| `body` | Standard reading text |
| `body-small` | Compact UI text, captions |
| `price` | Price display — weight 700 |
| `button-ui` | Buttons, CTAs |
| `badge` | Drop/status badges |
| `caption` | Metadata, fine print |

### Principles
- **Heavy = loud**: Weight 800 carries all headlines; the storefront leans on weight, not size, for hierarchy.
- **All-caps for energy**: Section eyebrows and promo banners run uppercase with positive tracking.
- **One family, many voices**: Archivo from 400 to 800 keeps the whole system cohesive while spanning calm body to billboard hero.
- **Price reads bold**: Prices use weight 700 so the commercial value never gets lost in the grid.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale jumps from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) to give product sections breathing room.

### Grid & Container
- Max content width: approximately 1280px
- Hero: full-width banner imagery, edge-to-edge
- Product grid: 3–4 columns desktop, consistent card sizing
- Promo banner: sticky full-width strip above or below nav

### Whitespace Philosophy
- **Stage for color**: Generous white space keeps the brand blue and yellow reading as pure signal.
- **Drop rhythm**: Large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) separate product collections so each drop feels distinct.
- **Card calm, chrome loud**: Cards stay quiet and uniform; the loudness lives in badges and CTAs.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Electric blue, white text, full pill. The default purchase CTA.
- **`button-dark`** — Black pill for "Add to Cart" secondary actions.
- **`button-yellow`** — Shock yellow for loud promo CTAs.
- **`button-outline`** — White with strong black border for tertiary actions.

### Badges
- **`badge-new`** — Blue chip flagging new drops.
- **`badge-sale`** — Red chip for limited release / price drops.
- **`badge-stock`** — Soft green chip confirming restocks.

### Cards
- **`card`** — White surface, light border, `{rounded.lg}` corners, product image + bold title + bold price.

### Banner
- **`banner-promo`** — Yellow full-width strip, uppercase eyebrow copy ("ADD $75 MORE TO GET FREE SHIPPING").

### Inputs
- **`input`** — White, light border, `{rounded.md}`. Focus shifts border to brand blue.

### Navigation
- **`nav-bar`** — White sticky header, bold uppercase links, cart icon, bottom border.

## Do's and Don'ts

### Do
- Keep the canvas white so blue and yellow read as signal
- Use electric blue for the primary purchase path only
- Use yellow for promotions, savings, and high-energy moments
- Run headlines heavy (800) and often all-caps
- Use full pill radius on CTAs with chunky padding
- Treat product drops as events — lead with bold badges

### Don't
- Don't dilute the canvas with tinted backgrounds — white is the stage
- Don't use blue and yellow decoratively where they don't signal action or savings
- Don't run headlines below weight 700 — the brand is loud
- Don't use sharp corners on buttons — pills are the brand shape
- Don't let prices render in a light weight — value stays bold
- Don't pile multiple accent colors on one element — one signal per element

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single-column grid, stacked hero, hamburger nav |
| Tablet | 600–1024px | 2-column product grid |
| Desktop | 1024–1280px | 3–4 column grid, full nav |
| Large | >1280px | Centered, generous margins |

### Touch Targets
- Pill CTAs use 14px vertical padding for comfortable tapping
- Nav links and cart icon sized for thumb reach on mobile
- Product cards are fully tappable

### Collapsing Strategy
- Hero: 56px headline scales down, banner imagery crops to focal point
- Product grid: 4-col → 3-col → 2-col → single column
- Navigation: horizontal links → hamburger
- Promo banner: maintains full-width, text may wrap

### Image Behavior
- Product images fill card width, consistent aspect ratio
- Hero banners span full width edge-to-edge
- Drop imagery maintains focal crop across breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Electric Blue `{colors.primary}`
- Background: White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Promo / savings: Beast Yellow `{colors.beast-yellow}`
- Sale / limited: Sale Red `{colors.sale-red}`
- Border: `{colors.border}`

### Example Component Prompts
- "Create a hero on white. Headline 56px Archivo weight 800, all-caps, letter-spacing -1px, color `{colors.ink}`. Blue pill CTA (`{colors.primary}`, white text, 9999px radius, 14px 28px padding)."
- "Design a product card: white surface, 1px `{colors.border}`, 16px radius, product image, title 18px Archivo weight 700, price 16px weight 700. Top-left blue 'NEW' badge (`{colors.badge-new-bg}`, white text, 4px radius)."
- "Build a promo banner: full-width yellow strip (`{colors.beast-yellow}`), 12px uppercase Archivo weight 700, black text, letter-spacing 1.5px — 'ADD $75 MORE TO GET FREE SHIPPING'."
- "Create nav: white sticky header, bold uppercase Archivo links in `{colors.ink}`, cart icon right, 1px bottom `{colors.border}`."

### Iteration Guide
1. White canvas first — brand color is signal, never wallpaper
2. Blue = buy, yellow = save, red = limited, green = restock
3. Headlines heavy (800) and often uppercase; prices always bold
4. Pills everywhere for CTAs — full 9999px radius with chunky padding
5. Each product drop is an event: lead with a bold badge

---

## 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 MrBeast Shop. Brand names and trademarks belong to their respective owners.