---
version: alpha
name: "MSI"
description: "MSI is the Taipei-headquartered gaming hardware brand built around the **dragon mascot** that has anchored the brand since the 1986 founding. The marketing site reflects the lineage: a jet-black `#000000` canvas overlaid with **MSI Red** (`#ff0000`), the pure saturated red of a dragon's scales — brighter and more saturated than ASUS ROG's deeper `#cd0000`. The MSI dragon logomark — angular, fierce, scales-rendered — anchors every gaming product page. Type runs custom display sans **Bebas-style condensed** for headlines paired with Roboto for body, deploying uppercase tracked dragon-aggression on every CTA. Where Razer is neon green and ASUS ROG is cinematic-deep red, MSI is **pure-saturated dragon-red**: brighter, brasher, more direct. Hardware categories — gaming laptops, motherboards, GPUs, monitors — all share the same dragon-red-on-black canvas with CTAs that flash brighter on hover."
colors:
  bg: "#000000"
  bg-deep: "#0a0a0a"
  bg-darkest: "#000000"
  surface: "#111111"
  surface-soft: "#1a1a1a"
  surface-strong: "#262626"
  surface-elevated: "#1f1f1f"
  surface-product-band: "#0a0a0a"
  surface-input: "#1a1a1a"
  text: "#ffffff"
  text-strong: "#ffffff"
  text-soft: "#b3b3b3"
  text-faint: "#7a7a7a"
  text-disabled: "#4a4a4a"
  text-link: "#ff0000"
  brand: "#ff0000"
  brand-bright: "#ff3333"
  brand-deep: "#cc0000"
  brand-darkest: "#990000"
  brand-glow: "rgba(255,0,0,0.4)"
  brand-aero-blue: "#00bfff"
  brand-prestige-rose-gold: "#b87333"
  on-brand: "#ffffff"
  cta-primary: "#ff0000"
  cta-primary-hover: "#ff3333"
  link-default: "#ff0000"
  link-visited: "#ff0000"
  link-hover: "#ffffff"
  border: "#262626"
  border-soft: "#1a1a1a"
  border-strong: "#ff0000"
  scrim: "rgba(0,0,0,0.85)"
  shadow-card: "rgba(0,0,0,0.6)"
  shadow-elev: "rgba(0,0,0,0.8)"
  shadow-msi-glow: "rgba(255,0,0,0.4)"
  badge-new: "#ff0000"
  badge-pre-order: "transparent"
  badge-msi-best-of-the-best: "#ff0000"
  badge-out-of-stock: "#7a7a7a"
  price: "#ffffff"
  price-discount: "#ff0000"
  rating-star: "#ffaa00"
  success: "#00cc66"
  warning: "#ffaa00"
  danger: "#ff0000"
  info: "#00bfff"
typography:
  display:
    fontFamily: "Bebas Neue"
    fontSize: "96px"
    lineHeight: 1.6
    letterSpacing: "0.02em"
  body:
    fontFamily: "Bebas Neue"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "Roboto Mono"
rounded:
  button: "4px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "48px"
---

## Overview

## Overview

MSI — Micro-Star International — is the Taipei-headquartered gaming hardware brand founded in 1986 around a dragon mascot that has anchored the brand identity for nearly four decades. The marketing site reflects the lineage: a **jet-black** (`#000000`) canvas overlaid with **MSI Red** (`#ff0000`), the pure saturated red of a dragon's scales. The red is intentionally brighter and more saturated than ASUS ROG's deeper `#cd0000` — MSI's red is direct, primary-aggressive, the colour of warning lights and racing-stripe decals.

The MSI dragon mascot — angular, fierce, scales-rendered with chiselled wing-tips — is the brand's most-recognised mark. It appears on every gaming product page hero, often pulsing subtle red glow on hover. Where ASUS has the cybernetic-eye, where Razer has the triple-snake, MSI has the dragon — and the dragon is more anatomical, more illustrative, more old-school heavy-metal-album-art than its competitors' abstract symbols.

Type runs **Bebas Neue / Roboto Condensed** for headlines paired with **Roboto** for body. Hero headlines hit 96/700 in Bebas Neue uppercase with 0.02em positive tracking — the extreme condensed silhouette gives MSI a more vertical, more brutalist proportion than Saira (ASUS) or Roboto Black (Razer). The positive tracking on display is unusual — most gaming brands compress with negative tracking; MSI lets the condensed letterforms breathe slightly. The result is a more "racing decal" headline voice.

Spec density is heavy. MSI gaming laptop product pages routinely list 15–20 specs in stacked monospace cards: GPU model · CPU · RAM · Display refresh rate · panel type · NVMe storage · cooling solution · keyboard switch · battery · ports. The density is core to the brand position — MSI customers are component-level technical buyers (motherboard tuners, GPU comparison shoppers, BIOS-tweaking gamers) and the marketing serves them first.

Photography is dramatic: gaming laptops shot at low-angle with red light bleeding from RGB-illuminated keyboards, motherboards rendered at 3/4 angle showing every heatsink and capacitor, GPUs in product-shot studios with fan blades caught mid-spin. MSI photographs hardware like other brands photograph cars — engineering as performance art.

The brand position: "TRUE GAMING. TRUE PERFORMANCE." The hero copy across the site repeats variations of this core promise. Where Razer's "FOR GAMERS. BY GAMERS." is identity-positioning, MSI's "TRUE GAMING" is performance-positioning — about benchmarks, frame rates, thermal headroom.

Sub-brands carry distinct sub-aesthetics within the dragon-red-on-black system:
- **MSI Gaming** (laptops/desktops/peripherals): canonical red + black + dragon
- **MSI Mystic Light** (RGB ecosystem): adds the 8-stop RGB gradient strip on feature pages
- **MSI Pro / Prestige** (business/creator): flips to light canvas with rose-gold or aero-blue accents
- **MSI Aero** (creator): light + cyan `#00bfff`

**Key Characteristics:**
- Pure jet-black `#000000` canvas with `#262626` charcoal hairline borders
- MSI Red `#ff0000` — pure saturated dragon-red, brighter than ASUS ROG's `#cd0000`
- MSI dragon mascot logomark — angular, fierce, scales-rendered, stamped on every gaming product
- Bebas Neue / Roboto Condensed display at 96/700 with 0.02em positive tracking — racing-decal voice
- Dragon-red glow halos on hovered cards: `0 0 24px rgba(255,0,0,0.3)` — Razer's playbook in pure red
- Spec density: 15–20 specs per gaming laptop product page in mono spec cards
- "TRUE GAMING. TRUE PERFORMANCE." — the brand's repeated hero promise
- 2–4px-radius sharp rectangular cards — MSI is sharper-edged than even Razer
- 2px-thick white outline ghost buttons — heavier than Razer/ASUS
- MSI Pro / Prestige sub-brand flips to light + rose-gold for business/creator pivot

## Colors

### Primary
- **Canvas** (`#000000`): pure jet-black gaming page floor
- **Bg Deep** (`#0a0a0a`): near-black header / footer band
- **Card Surface** (`#111111`): default card on dark
- **Surface Soft** (`#1a1a1a`): raised popover, hovered card lift, input fill
- **Surface Strong** (`#262626`): selected sidebar, deeply hovered border
- **Surface Elevated** (`#1f1f1f`): elevated panel
- **Product Band** (`#0a0a0a`): full-bleed darker band

### Brand
- **MSI Red** (`#ff0000`): pure saturated dragon-red — every CTA, every focused border, brand badge, dragon mascot fill
- **MSI Red Bright** (`#ff3333`): hovered red on CTAs
- **MSI Red Deep** (`#cc0000`): deeper red for gradient stops
- **MSI Red Darkest** (`#990000`): darkest red — gradient end
- **MSI Red Glow** (`rgba(255,0,0,0.4)`): glow halo
- **MSI Gradient** (`linear-gradient(135deg, #ff3333 0%, #ff0000 50%, #990000 100%)`): three-stop dragon gradient on flagship hero bands

### Sub-Brand Accents
- **Aero Blue** (`#00bfff`): MSI Aero (creator) sub-brand cyan — only on Aero product pages
- **Prestige Rose-Gold** (`#b87333`): MSI Prestige (creator) accent — sophisticated business pivot

### Interactive
- **Link** (`#ff0000`): same as brand
- **Link Hover** (`#ffffff`): hover flips to white on dark
- **Link Visited** (`#ff0000`): unchanged
- **Disabled** (`#4a4a4a`)
- **Selected** (`#ff0000`)

### Neutral Scale
- **Text** (`#ffffff`) — primary body, pure white on jet-black
- **Text Strong** (`#ffffff`) — display headlines
- **Text Soft** (`#b3b3b3`) — secondary metadata
- **Text Faint** (`#7a7a7a`) — tertiary captions
- **Text Disabled** (`#4a4a4a`) — disabled labels
- **Border** (`#262626`) — 1px charcoal hairline
- **Border Soft** (`#1a1a1a`) — softer divider
- **Border Strong** (`#ff0000`) — focused / hovered card border

### Surface & Borders
MSI's depth ladder runs `#000000` → `#0a0a0a` → `#111111` → `#1a1a1a` → `#1f1f1f` → `#262626` — six near-blacks within 15% lightness. The narrowest tonal range among gaming hardware brands. The brand position: stay maximum-dark, let the dragon-red and the hardware photography carry all the contrast.

### Shadow Colors
**Neutral shadows + MSI-red glows.** Same dual-vocabulary as Razer/ASUS but in pure saturated red. The glow halo `0 0 24px rgba(255,0,0,0.3)` reads as "this card has dragon-fire inside it."

### Semantic
- **Success** (`#00cc66`): green
- **Warning** (`#ffaa00`): amber
- **Danger** (`#ff0000`): MSI red doubles as danger
- **Info** (`#00bfff`): Aero cyan

## Typography

### Font Family

**Display**: `Bebas Neue` — the open-source extreme-condensed display sans by Ryoichi Tsunekawa. Falls back to `Oswald, "Arial Narrow", "Roboto Condensed", sans-serif`. Bebas Neue's tall narrow proportions give MSI a more vertical, more "racing-decal" silhouette than Saira (ASUS) or Roboto Black (Razer). Weights: 400 / 700.

**Heading**: `Roboto Condensed` for headings between 24px and 48px where Bebas Neue's all-caps-only feels too constrained. Weights 400 / 700.

**Body**: `Roboto` — same humanist sans Dell uses. Pragmatic and ships universally.

**Mono**: `Roboto Mono` for spec values, BIOS surfaces, technical documentation.

**OpenType features**: `kern`. `tnum` on price and spec values.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| display-hero | Bebas Neue | 96 | 700 | 0.95 | 0.02em | uppercase | "TRUE GAMING" — extreme condensed |
| display-xl | Bebas Neue | 72 | 700 | 1.0 | 0.02em | uppercase | Product launch hero |
| display-lg | Bebas Neue | 48 | 700 | 1.05 | 0.02em | uppercase | Section banner |
| display-md | Roboto Condensed | 36 | 700 | 1.1 | 0.01em | uppercase | Product detail H1 |
| display-sm | Roboto Condensed | 24 | 700 | 1.2 | 0 | — | Card title |
| section-head | Roboto Condensed | 14 | 700 | 1.2 | 0.2em | uppercase | Section bands |
| sub-section | Roboto | 18 | 500 | 1.3 | 0 | — | Sub-heading |
| body-lg | Roboto | 18 | 400 | 1.6 | 0 | — | Hero supporting copy |
| body-md | Roboto | 16 | 400 | 1.6 | 0 | — | Default body |
| body-sm | Roboto | 14 | 400 | 1.5 | 0 | — | Sidebar copy |
| body-xs | Roboto | 12 | 400 | 1.4 | 0 | — | Caption |
| nav-link | Roboto Condensed | 13 | 700 | 1.0 | 0.15em | uppercase | "LAPTOPS · DESKTOPS" |
| sub-nav-link | Roboto Condensed | 12 | 400 | 1.0 | 0.05em | uppercase | Sub-nav |
| button-cta | Roboto Condensed | 14 | 700 | 1.0 | 0.15em | uppercase | "BUY NOW" |
| button-md | Roboto Condensed | 13 | 700 | 1.0 | 0.1em | uppercase | "COMPARE" |
| badge | Roboto Condensed | 11 | 700 | 1.0 | 0.2em | uppercase | "NEW", "PRE-ORDER" |
| price | Roboto Condensed | 22 | 700 | 1.0 | 0 | tnum | Product price |
| spec-label | Roboto Condensed | 11 | 700 | 1.2 | 0.15em | uppercase | "GPU", "CPU" |
| spec-value | Roboto Mono | 16 | 500 | 1.4 | 0 | — | "RTX 4080" |
| code | Roboto Mono | 13 | 400 | 1.5 | 0 | — | BIOS surface |

### Principles

- **Bebas Neue at 96/700 with 0.02em positive tracking is the manifesto voice.** The extreme-condensed letterforms give MSI a more vertical, more racing-decal silhouette than its competitors. The positive tracking is unusual — Razer/ASUS compress with negative tracking, MSI breathes slightly.
- **Roboto Condensed bridges the gap.** Where Bebas Neue is uppercase-only, Roboto Condensed handles 24–48px display in mixed case.
- **Heavier 2px white border on ghost buttons.** MSI's ghost outline buttons use 2px borders (vs Razer's 1px) — a more brutalist outline weight.
- **All caps tracked uppercase ladder.** Display-hero at 0.02em (positive); section-head at 0.2em; spec-label at 0.15em; badge at 0.2em. The widest tracking on section heads (0.2em) reads as MSI brutalist.
- **Spec values in mono.** Roboto Mono for every GPU / CPU / Hz / GB value.
- **Body in pure white on dark.** No softening.
- **Open-source typography stack.** Bebas Neue, Roboto Condensed, Roboto, and Roboto Mono are all free — MSI uses zero proprietary faces.

## Layout

### Spacing System
- Base unit: **8px**
- Scale: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128`
- Section gap: **80–128px**
- Card padding: **24–32px**
- Gutters: **16–24px**

### Grid & Container
- Max content width: **1440px**
- Product grid: 4 → 3 → 2 → 1
- Hero band: full-bleed gradient with content centred at 1280px

### Whitespace Philosophy

MSI runs **dense-cinematic**. Marketing pages breathe at 80–128px between bands; product detail pages are dense with 15–20 specs stacked. Hero photography fills full-bleed bands.

### Section Cadence

Pages alternate `#000000` canvas with `#0a0a0a` darker product bands, occasional spec card bands, and one dragon-red gradient hero per page. Red gradient strips appear between sections on Mystic Light pages.

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Nav collapses; product grid 1-up; hero text scales 96→48 |
| Tablet | 600–960px | 2-up grid |
| Desktop | 960–1280px | 3-up grid |
| Wide | 1280px+ | 4-up grid, 1440 cap |

### Touch Targets
- CTAs: 44–48px
- Card: full tile

### Collapsing Strategy

- Nav: utilities collapse; primary becomes hamburger
- Product grid: 4 → 3 → 2 → 1
- Spec strip: 4-cell → 2-cell stacked
- Hero: 2-column → stacked
- Section padding: 128px → 80px → 48px

### Image Behavior

`<picture>` with WebP/AVIF. Hero photography uses video loops with still fallback.

## Elevation & Depth

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow | Default for body, hero, most surfaces |
| 1 — Soft glow | `0 0 16px rgba(255,0,0,0.25)` | Hovered link, focused interactive |
| 2 — Card | `rgba(0,0,0,0.6) 0 8px 24px` | Card on hover |
| 3 — Strong glow | `0 0 32px rgba(255,0,0,0.5)` | Flagship card, CTA hover |
| 4 — Modal | `rgba(0,0,0,0.8) 0 32px 64px` | Modal surface |
| 5 — Scrim | `rgba(0,0,0,0.85)` | Modal backdrop |

### Shadow Philosophy

**Neutral shadows + dragon-red glows.** Same dual-vocabulary as Razer/ASUS — neutral for ambient depth, red for interactive states.

## Shapes

| Tier | Value | Use |
|------|-------|-----|
| None | 0px | Hero bands, full-bleed photography |
| Micro | 1px | Inset surfaces |
| Small | 2px | Buttons, badges |
| Medium | 4px | Cards, inputs |
| Large | 8px | Modal, flagship card |
| Pill | 9999px | Rare — MSI is sharp-edged |

MSI is the **sharpest-edged** of the gaming hardware brands. 2px on buttons, 4px on cards. Pills appear only on profile avatars.

## Components

### Buttons

**`button-primary`** — MSI Red rectangle: `#ff0000` solid fill, white label in 14/700 uppercase 0.15em tracking, 14×32px padding, 2px radius. Hover brightens to `#ff3333` and adds `0 0 24px rgba(255,0,0,0.5)` red glow halo.

**`button-secondary`** — ghost outline: transparent fill, white label in 14/700 uppercase, **2px white border** (heavier than Razer/ASUS 1px), 14×32px padding. Hover inverts to white fill with black label.

**`button-tertiary`** — inline link with red underline: `#ff0000` text, 1px `#ff0000` bottom border.

### Cards

**`product-card`** — `#111111` floor, 1px `#262626` charcoal border, 4px radius, 24px padding. Stack: product hero with optional MSI dragon mascot overlay, "NEW" red badge, product name in Roboto Condensed 24/700 uppercase, mono spec strip, "BUY NOW" red CTA. Hover lights `#ff0000` red border + `0 0 24px rgba(255,0,0,0.3)` glow halo.

**`product-card-flagship`** — already lit at rest with red border + glow. Used on "Best of the Best" carousels.

**`hero-card`** — full-bleed dragon-red gradient `linear-gradient(135deg, #ff3333 0%, #ff0000 50%, #990000 100%)`, no border-radius, 64×48px padding.

**`spec-card`** — `#111111` floor, 1px `#262626` border, 4px radius, 32×24px padding. Stack: 32/700 spec value in `#ff0000` red Roboto Mono (e.g. "RTX 4090"), 11/700 uppercase 0.15em tracked label, 14/400 muted supporting copy.

### Badges

**`badge-new`** — `#ff0000` red rectangle, "NEW" white label.

**`badge-best-of-the-best`** — red gradient pill, "MSI BEST OF THE BEST" — flagship merchandising.

### Inputs / Forms

**`text-input`** — `#1a1a1a` charcoal floor on dark, white text, 1px `#262626` border, 4px radius, 48px height. Focus lights 1px `#ff0000` red border.

### Navigation

**`primary-nav`** — 64px tall on `#000000` with 1px `#1a1a1a` bottom border. MSI dragon mascot logomark anchored left in `#ff0000` red. "LAPTOPS · DESKTOPS · MOTHERBOARDS · GRAPHICS · MONITORS · COMPONENTS · MONITORS · NETWORKING · ACCESSORIES" labels in Roboto Condensed 13/700 uppercase 0.15em tracking white.

### Decorative

**`msi-dragon`** — the iconic dragon mascot logomark, angular and fierce, scales-rendered. Stamped on every gaming product page hero. Often pulses subtle red glow on hover.

**`rgb-strip`** — red gradient strip used as section divider on Mystic Light feature pages. Different from Razer's 8-stop spectrum (MSI sticks to red shades).

### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)`
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)`

### Durations
| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 120ms | Button colour swap |
| Standard | 240ms | Card hover + glow |
| Slow | 400ms | Carousel, modal enter |

### Per-Component Recipes

- **Card hover**: red border fades + glow halo over 240ms.
- **CTA hover**: red brightens + glow halo over 120ms.
- **Dragon mascot pulse**: subtle red glow on hero pages, 3s linear loop. Suppressed reduced-motion.
- **Carousel slide**: 400ms emphasized.

### Reduced Motion

Dragon glow pulse freezes; card glow remains static; transitions become opacity-only.

### Contrast Pairs
| Pair | Ratio | Level |
|------|-------|-------|
| #ffffff text on #000000 | 21.0 | AAA |
| #b3b3b3 muted on #000000 | 9.4 | AAA |
| #ff0000 link on #000000 | 5.3 | AA |
| #ffffff on #ff0000 CTA | 4.6 | AA |
| #7a7a7a faint on #000000 | 4.7 | AA |

White-on-pure-red sits at 4.6 — borderline AA. MSI compensates with 14/700 button labels and uppercase 0.15em tracking that increases white surface area.

### Focus Indicators

2px solid `#ff0000` red ring with 2px outset offset.

### ARIA Patterns

- Search: `role="search"`
- Product card: full `<a>` with `aria-label`
- Dragon mascot: decorative `aria-hidden="true"`
- Mega-menu: `role="navigation"` with `aria-expanded`

### Keyboard Navigation

- Tab: logo → primary nav → search → utilities → main → footer
- Esc closes; Enter activates
- Arrow keys cycle product carousels

### Reduced Motion

Dragon pulse freezes; card glow remains static.

### Tone

Performance-aggressive. MSI's voice is **the dragon roaring** — "TRUE GAMING. TRUE PERFORMANCE.", "FORGED IN POWER.", "UNLEASH THE DRAGON". Headlines lead with capability claims, not lifestyle aspirations.

### Microcopy Patterns

- **Buttons**: "BUY NOW", "ADD TO CART", "PRE-ORDER", "VIEW SPECS", "COMPARE" — uppercase tracked
- **Errors**: terse-technical "Configuration unavailable. Please contact support."
- **Success**: punchy "Locked in." / "Ready to deploy."
- **Stock urgency**: "ONLY 3 LEFT" in red

### Empty States

Empty cart: "Your war chest is empty. Choose your weapon."

Empty wishlist: "Your wishlist is empty. Save the gear you're plotting for."

### CTA Verb Conventions

- Primary: **"BUY NOW"**, **"ADD TO CART"**, **"PRE-ORDER"**, **"CONFIGURE"**
- Secondary: **"VIEW SPECS"**, **"COMPARE"**, **"WATCH FILM"**
- Avoided: "Get started", "Discover", "Click here"

**Dark-only on gaming.** MSI Gaming pages, MSI Center desktop software, and Mystic Light all run dark-only. Light mode appears only on **MSI Pro** (business) and **MSI Prestige** (creator) sub-brand pages — these flip to white canvas with rose-gold or aero-blue accents.

The brand position: gaming is dark-canonical, business/creator is light-contextual.

MSI's visual lineage runs through three traditions: **Taipei PC engineering / motherboard heritage** (MSI founded 1986, originally a motherboard manufacturer that expanded to gaming laptops, GPUs, monitors — the brand's component-level technical credibility predates the gaming brand identity); **dragon mascot heritage** (the dragon has anchored the brand since 1986; MSI's dragon trade dress predates Razer's snake by 14 years and ASUS's ROG eye by 20); and **heavy-metal / racing-decal aesthetic** (the angular illustrative dragon, the pure-saturated red, the extreme-condensed Bebas Neue display all draw from heavy-metal album art and motorsport racing-decal trade dress).

The current site solidified around 2018 with the rollout of Bebas Neue display and the standardised `#ff0000` red. Subsequent updates have refined the dragon-mascot illustration and the Mystic Light RGB rollout but have not changed the colour or typographic foundations.

What MSI rejects: light mode on gaming, neon brights, soft pastel illustration, friendly serifs, sentence-case display, abstract logomarks (the dragon is anatomically illustrative, not abstract). The brand position: **dragon performance — gaming hardware engineered like a racing car, marketed like a heavy-metal album**.

**Influences:**
- MSI founding (1986) — Taipei motherboard engineering culture
- MSI dragon mascot — established 1986, predates Razer snake (1999) and ROG eye (2006)
- Razer competitive trade dress — neon green parallel
- ASUS ROG competitive trade dress — deeper red parallel
- Bebas Neue (Ryoichi Tsunekawa) — open-source extreme-condensed display sans
- Heavy-metal album art — angular illustrative monsters and dragons
- Motorsport racing decals — pure saturated red on jet black

## Do's and Don'ts

**Do**
- Anchor the page on `#000000` pure jet-black canvas with `#262626` charcoal hairline borders
- Use MSI Red `#ff0000` for every CTA, focused border, brand badge, dragon mascot
- Stamp the MSI dragon mascot logomark on every gaming product page
- Use Bebas Neue at 96/700 with 0.02em positive tracking for hero headlines uppercase
- Use Roboto Condensed for 24–48px display in mixed case
- Apply red glow halos `0 0 24px rgba(255,0,0,0.3)` on hovered cards and CTAs
- Use 2px-thick white outline ghost buttons (heavier than Razer/ASUS 1px)
- Show 15–20 specs per gaming laptop product page in mono spec cards
- Use 2–4px-radius sharp rectangular cards — MSI is the sharpest-edged gaming brand
- Render section heads in 14/700 uppercase 0.2em tracking — wider than ASUS
- Switch to MSI Prestige rose-gold `#b87333` or MSI Aero `#00bfff` only on those sub-brands
- Use the red gradient strip as section divider on Mystic Light pages

**Don't**
- Don't introduce a light mode on MSI Gaming — gaming is dark-canonical
- Don't substitute a softer red — MSI Red is pure saturated `#ff0000`, not deeper `#cd0000` (ASUS) or neon
- Don't use sentence-case display on gaming pages — uppercase is canonical
- Don't soften card corners past 8px on featured or 4px on default — MSI is sharp-rectangular
- Don't replace Bebas Neue with a wider face — the extreme condensed silhouette matters
- Don't replace the dragon mascot with an abstract symbol — the dragon is anatomically illustrative
- Don't write tech-marketing softness — MSI's voice is "TRUE GAMING", not "Discover gaming"
- Don't pair MSI Red with another saturated colour in the same module — red carries the brand alone
- Don't pad sections at 16px on marketing pages — MSI breathes at 80–128px
- Don't use serifs anywhere — Bebas Neue / Roboto Condensed / Roboto / Roboto Mono only
- Don't introduce 9999-radius pill CTAs on gaming pages — sharp 2px rectangles only

### Quick Color Reference

```
Canvas:           #000000
Bg Deep:          #0a0a0a
Card:             #111111
MSI Red:          #ff0000
MSI Red Bright:   #ff3333
MSI Red Deep:     #cc0000
MSI Red Darkest:  #990000
MSI Gradient:     linear-gradient(135deg, #ff3333 0%, #ff0000 50%, #990000 100%)
MSI Glow:         rgba(255,0,0,0.4)
Aero Blue:        #00bfff
Prestige Rose:    #b87333
Text:             #ffffff
Text Soft:        #b3b3b3
Border:           #262626
```

### Example Component Prompts

- "Create an MSI BUY NOW button: solid `#ff0000` pure-red rectangle, white label 'BUY NOW' in Roboto Condensed 14/700 uppercase 0.15em tracking, 14×32px padding, 2px radius. On hover, fill brightens to `#ff3333` and adds `0 0 24px rgba(255,0,0,0.5)` red glow halo. On active, fill deepens to `#cc0000` and scales 0.98."
- "Build an MSI product card: 320×440 with `#111111` near-black floor, 1px `#262626` charcoal border, 4px radius, 24px padding. Stack inside: product hero with optional MSI dragon mascot logo overlay top-right, `#ff0000` red 'NEW' badge top-left in Roboto Condensed 11/700 uppercase 0.2em tracking, product name in Roboto Condensed 24/700 uppercase tracked (e.g. 'STEALTH 14 STUDIO'), mono spec strip 'RTX 4090 · i9-14900HX · 32GB · 240Hz', `#ffffff` price 22/700, 'BUY NOW' red CTA. On hover, light `#ff0000` red border + `0 0 24px rgba(255,0,0,0.3)` glow halo over 240ms."
- "Design an MSI hero band: full-bleed dragon-red gradient `linear-gradient(135deg, #ff3333 0%, #ff0000 50%, #990000 100%)`, no border-radius, 64×48px padding. Headline in Bebas Neue Bold 700 at 96px / 0.95 line-height / 0.02em positive tracking, white, uppercase (e.g. 'TRUE GAMING'). MSI dragon mascot stamped centre or right with subtle red glow pulse 3s linear infinite. Hardware photography right with red-light bleed."
- "Create an MSI spec card: `#111111` near-black floor, 1px `#262626` border, 4px radius, 32×24px padding. Stack: large 32/700 spec value in `#ff0000` MSI red Roboto Mono (e.g. 'RTX 4090'), 11/700 uppercase 0.15em tracked spec label in white (e.g. 'GRAPHICS'), 14/400 muted supporting copy. Used in feature strips like 'GPU · CPU · RAM · DISPLAY · STORAGE · COOLING · KEYBOARD · BATTERY'."
- "Design an MSI ghost outline button: transparent fill, white label 'LEARN MORE' in Roboto Condensed 14/700 uppercase 0.15em tracking, **2px white border** (heavier than Razer/ASUS 1px), 14×32px padding, 2px radius. On hover, fill becomes white and label flips to `#000000` black."
- "Design an MSI top nav: 64px-tall `#000000` floor with 1px `#1a1a1a` bottom border. MSI dragon mascot logomark anchored left in `#ff0000` red at 32px. Sub-brand labels 'LAPTOPS · DESKTOPS · MOTHERBOARDS · GRAPHICS · MONITORS · COMPONENTS · MONITORS · NETWORKING · ACCESSORIES' centred in Roboto Condensed 13/700 uppercase 0.15em tracking white. Search trigger, account icon, cart count flush right. Hover lights `#ff0000` 2px underline beneath active nav item."

### Iteration Guide

1. **Start with pure jet-black `#000000`.** MSI is darker than ASUS ROG (`#0a0a0a`). Lock the canvas first.
2. **MSI Red `#ff0000` is pure saturated.** Brighter than ASUS ROG's `#cd0000`, more direct than Razer's neon green. Don't substitute.
3. **The dragon mascot is the brand mark.** Anatomically illustrative, scales-rendered. Stamped on every gaming product page.
4. **Bebas Neue at 96/700 with 0.02em positive tracking is the manifesto voice.** Extreme condensed proportions — racing-decal silhouette.
5. **2px-thick white ghost button outlines.** Heavier than Razer/ASUS 1px — MSI is more brutalist.
6. **Spec density 15–20 specs per gaming product.** Mono Roboto Mono values + uppercase tracked labels.
7. **Red glow halos on hovered cards and CTAs.** `0 0 24px rgba(255,0,0,0.3)`. Dragon-fire.
8. **Sharp rectangles everywhere.** 2px on buttons, 4px on cards. MSI is the sharpest-edged gaming brand. No pills on gaming pages.