MSI

---
name: MSI
tagline: Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand.
author: webdesignhot
source_url: https://www.msi.com
spec: design.md/v1.5
quality: curated
featured: false
categories: [marketplace, media]
tags: [dark, gaming, hardware, taiwan, dragon, esports, bold, technical]
preview_swatch: ['#000000', '#ff0000', '#ffffff']
related: [asus, nvidia, steam]
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'                  # canvas — pure jet black
  bg-deep: '#0a0a0a'             # near-black header / footer
  bg-darkest: '#000000'          # modal scrim base
  surface: '#111111'             # default card surface
  surface-soft: '#1a1a1a'        # raised card / popover
  surface-strong: '#262626'      # hovered card, selected
  surface-elevated: '#1f1f1f'    # elevated panel
  surface-product-band: '#0a0a0a' # full-bleed product band
  surface-input: '#1a1a1a'       # form input fill
  text: '#ffffff'                # primary body
  text-strong: '#ffffff'         # display headlines
  text-soft: '#b3b3b3'           # secondary metadata
  text-faint: '#7a7a7a'          # tertiary captions
  text-disabled: '#4a4a4a'
  text-link: '#ff0000'           # link red
  brand: '#ff0000'               # MSI Red — dragon-saturated red
  brand-bright: '#ff3333'        # brighter MSI red on hover
  brand-deep: '#cc0000'          # deeper MSI red
  brand-darkest: '#990000'       # darkest MSI red
  brand-glow: 'rgba(255,0,0,0.4)' # MSI red glow halo
  brand-gradient: 'linear-gradient(135deg, #ff3333 0%, #ff0000 50%, #990000 100%)' # MSI dragon gradient
  brand-aero-blue: '#00bfff'     # MSI Aero (creator/business) sub-brand cyan
  brand-prestige-rose-gold: '#b87333' # MSI Prestige creator brand rose-gold
  on-brand: '#ffffff'
  cta-primary: '#ff0000'         # MSI red CTA
  cta-primary-hover: '#ff3333'
  link-default: '#ff0000'
  link-visited: '#ff0000'
  link-hover: '#ffffff'
  border: '#262626'              # 1px charcoal hairline
  border-soft: '#1a1a1a'         # softer divider
  border-strong: '#ff0000'       # focused input
  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)' # MSI red glow halo
  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:
    family: '"Bebas Neue", "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif'
    weights: [400, 700]
    opentype-features: ['kern']
  heading:
    family: '"Roboto Condensed", "Oswald", "Arial Narrow", sans-serif'
    weights: [400, 700]
  body:
    family: '"Roboto", "Helvetica Neue", Arial, sans-serif'
    weights: [300, 400, 500, 700]
  mono:
    family: '"Roboto Mono", "Consolas", monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 96, weight: 700, lineHeight: 0.95, tracking: '0.02em',  family: display, transform: uppercase, notes: 'Hero "TRUE GAMING" — extra-condensed display' }
    display-xl:      { size: 72, weight: 700, lineHeight: 1.0,  tracking: '0.02em',  family: display, transform: uppercase, notes: 'Product launch hero' }
    display-lg:      { size: 48, weight: 700, lineHeight: 1.05, tracking: '0.02em',  family: display, transform: uppercase, notes: 'Section banner' }
    display-md:      { size: 36, weight: 700, lineHeight: 1.1,  tracking: '0.01em',  family: heading, transform: uppercase, notes: 'Product detail H1' }
    display-sm:      { size: 24, weight: 700, lineHeight: 1.2,  tracking: '0',       family: heading, notes: 'Card title (uppercase or sentence)' }
    section-head:    { size: 14, weight: 700, lineHeight: 1.2,  tracking: '0.2em',   family: heading, transform: uppercase, notes: 'Section bands' }
    sub-section:     { size: 18, weight: 500, lineHeight: 1.3,  tracking: '0',       family: body, notes: 'Sub-heading' }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.6,  tracking: '0',       family: body, notes: 'Hero supporting copy' }
    body-md:         { size: 16, weight: 400, lineHeight: 1.6,  tracking: '0',       family: body, notes: 'Default body' }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',       family: body, notes: 'Sidebar copy, spec' }
    body-xs:         { size: 12, weight: 400, lineHeight: 1.4,  tracking: '0',       family: body, notes: 'Caption' }
    nav-link:        { size: 13, weight: 700, lineHeight: 1.0,  tracking: '0.15em',  family: heading, transform: uppercase, notes: 'Top nav: LAPTOPS · DESKTOPS' }
    sub-nav-link:    { size: 12, weight: 400, lineHeight: 1.0,  tracking: '0.05em',  family: heading, transform: uppercase, notes: 'Sub-nav' }
    button-cta:      { size: 14, weight: 700, lineHeight: 1.0,  tracking: '0.15em',  family: heading, transform: uppercase, notes: 'BUY NOW, ADD TO CART' }
    button-md:       { size: 13, weight: 700, lineHeight: 1.0,  tracking: '0.1em',   family: heading, transform: uppercase, notes: 'COMPARE, WISHLIST' }
    badge:           { size: 11, weight: 700, lineHeight: 1.0,  tracking: '0.2em',   family: heading, transform: uppercase, notes: '"NEW", "PRE-ORDER"' }
    price:           { size: 22, weight: 700, lineHeight: 1.0,  tracking: '0',       family: heading, opentype: ['tnum'], notes: 'Product price' }
    spec-label:      { size: 11, weight: 700, lineHeight: 1.2,  tracking: '0.15em',  family: heading, transform: uppercase, notes: 'Spec table label' }
    spec-value:      { size: 16, weight: 500, lineHeight: 1.4,  tracking: '0',       family: mono, notes: 'Spec value' }
    code:            { size: 13, weight: 400, lineHeight: 1.5,  tracking: '0',       family: mono, notes: 'BIOS, dev surface' }

radius:
  none: 0
  micro: 1
  sm: 2            # buttons, badges
  md: 4            # cards, inputs
  lg: 8            # featured product card, modal
  pill: 9999       # rare — MSI is sharp-edged

spacing:
  base: 8
  scale: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128]

layout:
  page-width: 1440
  prose-width: 720
  header-height: 64
  main-nav-height: 64
  sub-nav-height: 48
  product-card: '320x440'
  hero-banner: '1920x800'

components:
  button-primary:
    bg: '#ff0000'
    color: '#ffffff'
    radius: 2
    padding: '14px 32px'
    font: button-cta
    border: 'none'
    hover-bg: '#ff3333'
    hover-shadow: '0 0 24px rgba(255,0,0,0.5)'
    use: '"BUY NOW" / "ADD TO CART" — MSI Red CTA. White uppercase 0.15em tracked label on red rectangle. Hover brightens + glow halo.'
  button-secondary:
    bg: 'transparent'
    color: '#ffffff'
    radius: 2
    padding: '14px 32px'
    font: button-cta
    border: '2px solid #ffffff'
    hover-bg: '#ffffff'
    hover-color: '#000000'
    use: 'Ghost outline secondary — "LEARN MORE". 2px white border (heavier than Razer''s 1px). Inverts on hover.'
  button-tertiary:
    bg: 'transparent'
    color: '#ff0000'
    radius: 0
    padding: '12px 0'
    font: button-md
    border-bottom: '1px solid #ff0000'
    use: 'Inline text-link with red underline.'
  product-card:
    bg: '#111111'
    color: '#ffffff'
    radius: 4
    padding: '24px'
    border: '1px solid #262626'
    hover-border: '1px solid #ff0000'
    hover-shadow: '0 0 24px rgba(255,0,0,0.3)'
    width: 320
    use: 'Standard product card on dark — `#111111` floor, charcoal hairline. Stack: product hero with optional MSI dragon mascot overlay, "NEW" red badge, product name in Roboto Condensed 24/700 uppercase tracked, mono spec strip, "BUY NOW" red CTA. Hover lights red border + glow halo.'
  product-card-flagship:
    bg: 'linear-gradient(135deg, #111111 0%, #1a1a1a 100%)'
    color: '#ffffff'
    radius: 8
    padding: '32px'
    border: '1px solid #ff0000'
    box-shadow: '0 0 32px rgba(255,0,0,0.25)'
    use: 'Flagship product card — already lit with red border + glow at rest. Used on "Best of the Best" carousels.'
  hero-card:
    bg: 'linear-gradient(135deg, #ff3333 0%, #ff0000 50%, #990000 100%)'
    color: '#ffffff'
    radius: 0
    padding: '64px 48px'
    use: 'Full-bleed dragon-red gradient hero — three-stop red diagonal, white headline in Bebas Neue display, hardware photography right.'
  spec-card:
    bg: '#111111'
    color: '#ffffff'
    radius: 4
    padding: '32px 24px'
    border: '1px solid #262626'
    use: 'Spec highlight card — large 32/700 spec value in red Roboto Mono, 11/700 uppercase 0.15em tracked label.'
  badge-new:
    bg: '#ff0000'
    color: '#ffffff'
    radius: 2
    padding: '4px 10px'
    font: badge
    use: '"NEW" red rectangle.'
  badge-best-of-the-best:
    bg: 'linear-gradient(135deg, #ff0000 0%, #ff3333 100%)'
    color: '#ffffff'
    radius: 2
    padding: '4px 10px'
    font: badge
    use: '"MSI BEST OF THE BEST" red gradient pill — flagship merchandising.'
  text-input:
    bg: '#1a1a1a'
    color: '#ffffff'
    radius: 4
    height: 48
    padding: '12px 16px'
    border: '1px solid #262626'
    focus-border: '1px solid #ff0000'
    font: body-md
    use: 'Form input on dark — charcoal floor, focus lights red border.'
  primary-nav:
    bg: '#000000'
    color: '#ffffff'
    height: 64
    border-bottom: '1px solid #1a1a1a'
    use: 'Top nav — MSI dragon mascot logomark anchored left, "LAPTOPS · DESKTOPS · MOTHERBOARDS · GRAPHICS · MONITORS · COMPONENTS" labels in 13/700 uppercase 0.15em tracking.'
  msi-dragon:
    use: 'MSI dragon mascot logomark — angular, fierce, scales-rendered. Stamped on every gaming product page hero. Rendered in `#ff0000` red on dark or pure white on red. The brand''s most-recognised mark.'
  modal-surface:
    bg: '#000000'
    color: '#ffffff'
    radius: 8
    border: '1px solid #262626'
    box-shadow: '0 32px 64px rgba(0,0,0,0.8)'
    use: 'Modal floor on dark.'
  rgb-strip:
    bg: 'linear-gradient(90deg, #ff0000 0%, #ff3333 50%, #990000 100%)'
    height: 4
    use: 'Decorative red gradient strip — used as section divider on Mystic Light feature pages. Different from Razer''s 8-stop spectrum (MSI sticks to red shades).'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 120
  duration-standard: 240
  duration-slow: 400
  card-hover: 'product card lights `#ff0000` red border + `0 0 24px rgba(255,0,0,0.3)` glow halo over 240ms'
  cta-press: 'button gradient deepens + 2px scale-down on :active over 120ms'
  dragon-pulse: 'MSI dragon mascot logomark on hero pulses subtle red glow over 3s linear infinite (suppressed under reduced-motion)'
  carousel-slide: '400ms ease-emphasized'
  reduced-motion: 'respects prefers-reduced-motion: reduce — dragon glow pulse freezes; card glow remains static; transitions become opacity-only.'

breakpoints:
  mobile: 600
  tablet: 960
  desktop: 1280
  wide: 1440

shadows:
  ambient: 'rgba(0,0,0,0.4) 0 2px 8px'
  card: 'rgba(0,0,0,0.6) 0 8px 24px'
  elevated: 'rgba(0,0,0,0.8) 0 24px 48px'
  modal: 'rgba(0,0,0,0.85) 0 32px 64px'
  msi-glow-soft: '0 0 16px rgba(255,0,0,0.25)'
  msi-glow-strong: '0 0 32px rgba(255,0,0,0.5)'
  ring: '0 0 0 2px #ff0000'

accessibility:
  contrast-text-on-bg: 21.0         # #ffffff on #000000 — AAA
  contrast-soft-on-bg: 9.4          # #b3b3b3 on #000000 — AAA
  contrast-link-on-bg: 5.3          # #ff0000 on #000000 — AA
  contrast-cta-text: 4.6            # #ffffff on #ff0000 — AA
  contrast-faint-on-bg: 4.7         # #7a7a7a on #000000 — AA
  focus-ring: '2px solid #ff0000 with 2px offset'
  reduced-motion-honored: true
  touch-target-min: 44
  keyboard-nav: 'Tab traverses logo → primary nav → search → utilities → main → footer; Esc closes; Enter activates.'

dark-mode: only   # MSI is dark-only across web, MSI Center desktop software, and Mystic Light. Light variant exists only for MSI Pro / Prestige business sub-brand.

lineage:
  summary: |
    MSI''s visual lineage runs through Taipei PC engineering / motherboard heritage (founded 1986, originally a motherboard manufacturer that expanded to gaming laptops, GPUs, monitors), dragon mascot heritage (the dragon has anchored the brand since 1986 — predating Razer''s snake by 14 years and ASUS''s ROG eye by 20), and heavy-metal / racing-decal aesthetic (angular illustrative dragon, pure-saturated red, extreme-condensed Bebas Neue display drawing from heavy-metal album art and motorsport racing-decal trade dress). The current site solidified around 2018 with Bebas Neue display and standardised `#ff0000` red. Brand position: dragon performance — gaming hardware engineered like a racing car, marketed like a heavy-metal album.
  influences:
    - name: MSI founding (1986)
      role: Taipei motherboard engineering culture — component-level technical credibility predates the gaming brand.
      url: https://www.msi.com/about/about-us
    - name: MSI dragon mascot (1986)
      role: Established 1986 — predates Razer snake (1999) and ROG eye (2006). The brand''s anchoring identity.
      url: https://www.msi.com/Landing/dragon
    - name: Razer
      role: Competitive gaming trade dress — neon green parallel.
      url: https://www.razer.com
    - name: ASUS Republic of Gamers
      role: Competitive deeper-red parallel that MSI countered with brighter saturated red.
      url: https://rog.asus.com
    - name: Bebas Neue (Ryoichi Tsunekawa)
      role: Open-source extreme-condensed display sans for racing-decal headline voice.
      url: https://fonts.google.com/specimen/Bebas+Neue
    - name: Heavy-metal album art
      role: Angular illustrative monsters and dragons — visual lineage for the dragon mascot.
      url: https://www.metal-archives.com
    - name: Motorsport racing decals
      role: Pure saturated red on jet black — the trade dress lineage of MSI Red on canvas.
      url: https://www.formula1.com
---

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### 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

## 3. Typography Rules

### 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.

## 4. Component Stylings

### 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).

## 5. Layout Principles

### 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.

## 6. Shapes & Radius Scale

| 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.

## 7. Depth & Elevation

| 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.

## 8. Interaction & Motion

### 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.

## 9. Accessibility & A11y

### 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.

## 10. Responsive Behavior

### 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.

## 11. Content & Voice

### 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"

## 12. Dark Mode & Theming

**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.

## 13. Lineage & Influences

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

## 14. 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

## 15. Agent Prompt Guide

### 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.