# XrossMediaBar (XMB) (クロスメディアバー)

> Sony's trademarked interface language for its consoles and televisions. As the official manual puts it, the horizontal row shows system features in categories and the vertical column shows the items available under each category, and the single point where the two cross lights up gold to say where you are. Everything else stays pale blue on a dark field.

- IndexStyle No.523 — https://indexstyle.org/styles/xmb
- Kind: Layout · Family: Platform Screen Languages · Era: 2003–2013
- Mood: Technology, Calm, Luxury
- Color cues: #223442 / #BEE3F5 / #E0BA73 (cues taken from reference works, not a fixed palette)

## Defining characteristics

- A horizontal row and a vertical column cross slightly left of center, and only the item at that crossing glows gold
- Text labels appear for the selected item alone; the rest of the rows are icons only
- The ground is one near black navy and the icons are thin pale blue outlines rather than filled shapes
- Left and right move through categories, up and down through items, but it is the rows that slide while the crossing stays put

## Best used for

- Building a television or set top interface that must be reachable end to end with a four way pad alone
- Making a top level menu for a screen viewed from across a room, where the number of categories will keep growing

## Composition recipe

- Typography & lettering: A light sans at a size readable from across a room; only the selected item carries a name, the rest stay as icons.
- Layout & structure: Fix the crossing point slightly left of center, run categories out horizontally and items vertically from it, and slide the rows under a stationary crossing rather than moving a highlight.
- Material & texture: Thin pale blue outline icons on a near black ground; emphasis comes only from lighting the one item at the crossing in gold, never from filling an area.

## What to avoid

Move a highlight instead of holding the crossing still and the viewer loses their place the moment a row grows long.

## Application checklist

Before calling a piece an application of this style, check it against the defining characteristics:

- [ ] A horizontal row and a vertical column cross slightly left of center, and only the item at that crossing glows gold
- [ ] Text labels appear for the selected item alone; the rest of the rows are icons only
- [ ] The ground is one near black navy and the icons are thin pale blue outlines rather than filled shapes
- [ ] Left and right move through categories, up and down through items, but it is the rows that slide while the crossing stays put
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Metro (メトロ)** — Windows Phone's flat language, which cast type rather than icons in the lead role. Large typography, flat-color live tiles and layouts that run off the edge of the screen transplanted the clarity of transit signage into UI, opening the flat era ahead of iOS 7. → https://indexstyle.org/styles/metro
- **Aero (エアロ)** — The translucent glass UI of Vista and 7: frosted window frames, live thumbnails and GPU-composited depth making 'through glass' the OS's standard vocabulary. → https://indexstyle.org/styles/aero

## Further study

- PS3公式オンラインマニュアルのXMBの節（横列と縦列の役割の定義）
- 同じXMBがテレビと携帯機でどう縮んだか、実機の画面写真を並べて見る
- 交点が画面のどこに置かれているか、機種ごとに実測して比べる

## Reference works

- Tatcher《ブラビアの XMB》2010年 — Wikimedia Commons / CC BY-SA 3.0 — https://commons.wikimedia.org/wiki/File:Xmb-Bravia2.jpg
- CommandProMC《Sony BRAVIA KDL の XMB》2022年 — Wikimedia Commons / CC0 — https://commons.wikimedia.org/wiki/File:XrossMenuBar%20on%20a%20Sony%20BRAVIA%20TV.jpg

## Source of record

- PlayStation®3 公式オンラインマニュアル — About the XMB™ (XrossMediaBar) menu — https://manuals.playstation.net/document/en/ps3/current/basicoperations/xmb.html

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/xmb
- Image-generation prompt (legally clean): https://indexstyle.org/styles/xmb/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compose_styles; prompts: image-prompt, apply-style)