# Bloomberg Refresh 2024 — Visual Style & Component Guide

> Источник: `European, Middle Eastern & African Stocks - Bloomberg - Bloomberg Markets.html`
> Дата анализа: 2026-06-21

---

## 1. CSS Architecture

Bloomberg использует **CSS-variables через `@layer`** (`phx.components`). Все цвета и стили — через переменные, нет хардкода.

```css
@layer phx.components {
  /* Font system */
  --atomics-text-font-size: var(--_atomics-Text-font-size)
  --atomics-text-font-family: var(--_atomics-Text-font-family)
  --atomics-text-color: var(--_atomics-Text-color)
  
  /* Skeleton/placeholder */
  --atomics-skeleton-background-color: var(--phx-color-background-secondary)
}
```

Ключевая особенность: шрифты подгружаются через Google Fonts (Noto Sans JP для японских индексов). Для остальных — системный стек.

---

## 2. Table Structure

### Columns (left → right)

| # | Column      | Content              | Alignment | Class prefix              |
|---|-------------|----------------------|-----------|---------------------------|
| 1 | Follow      | Button (toggle)      | center    | `style_column__qFboh style_stickyCol__8nZn2` |
| 2 | Ticker ID   | `SPEURO:IND` etc.    | left      | `style_column__qFboh`     |
| 3 | Index Name  | `S&P EUROPE 350 INDEX` | left    | `style_column__qFboh`     |
| 4 | Value       | `2,581.91`           | right     | `style_column__qFboh style_end__Ug4Cn` |
| 5 | Change      | `▲ 1.85`             | right     | `style_column__qFboh style_end__Ug4Cn` |

### Row structure

Each row is wrapped in `style_tableRow__YAQry style_row__rMjqo`.

The table has 3 main wrapper classes:
- `style_tableWrapper__Q1HVo style_table__SrH5K` — outer table
- `style_tableHeader__XgkzK style_header__VSpHj` — header row
- `style_tableRow__YAQry style_row__rMjqo` — data rows

### Cell classes

- `style_cell__1UrwH style_start__T_7tE` — left-aligned cell
- `style_cell__1UrwH style_end__0XcYw` — right-aligned cell (value + change)
- `style_cell__1UrwH style_stickyCol__8nZn2 style_start__L8R9v` — sticky column (Follow + ID)

### Section titles (region headers)

```
styles_sectionTitle__Vr2RB typography_coreHeadlineSm__9qq05
styles_sectionTitle__xBh4H
styles_sectionTitle__z1_bK typography_coreHeadlineSm__9qq05
```

Three sections in the page:
1. **Today in the Markets**
2. **Compare to Benchmarks**
3. **Market Summaries**

---

## 3. Change Component

### Three states

```css
media-ui-Change_positive-il7qv0BctMg-
media-ui-Change_negative-rQGvYj5WMsM-
media-ui-Change_neutral-nBYyHHGgsdY-
```

### Shared modifier classes

All change elements share these classes:
- `media-ui-Change_change-lMq4LV-1csY-` — wrapper
- `media-ui-Change_default-8hphe2lFPJo-` — default theme
- `media-ui-Change_refresh2024-EajM9IkrlnU-` — "refresh2024" design system

### Value display

- `media-ui-Change_changeValue-cRzdGNve3oU-` — numeric value
- `media-ui-Change_priceChange-OgFOGsx-jKI-` — price change (absolute points)
- Separate class for percentage change (appears in different context)

### Arrow SVG

```html
<!-- UP (positive) -->
<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arrow Up">
  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 0L24 20L0 20L12 0Z"/>
</svg>

<!-- DOWN (negative) -->
<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Arrow Down" role="img">
  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 20L0 0L24 0L12 20Z"/>
</svg>

<!-- NEUTRAL -->
<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arrow Up">
  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 0L24 20L0 20L12 0Z"/>
</svg>
```

Key: **`fill="currentColor"`** — arrow inherits text color from parent.

---

## 4. Typography

### Name column (`style_stockName__8SqkX`)

- Font: system sans-serif (Inter-like)
- Size: ~14px
- Weight: 500 (medium)
- Color: `--atomics-text-color` (white/light gray)
- Behavior: ellipsis on overflow (truncates long names)

### Value column (`style_stockValue__fsPwb`)

- Font: monospace / tabular-nums
- Size: ~14-16px
- Weight: 500
- Alignment: right
- Number format: `1 234,56` (space = thousands separator, comma = decimal)

### Change column (`media-ui-Change_priceChange-*`)

- Size: ~12-13px (smaller than value)
- Weight: 400 (regular)
- Color: green (positive) / red (negative) / gray (neutral)
- Arrow: 12x10px, inherits color

### ID/Ticker column (`style_displayId__ZrwVL`)

- Size: ~11px
- Font: monospace
- Color: muted (#888)

---

## 5. Complete Component Hierarchy

```
style_tableWrapper__Q1HVo style_table__SrH5K
 └── style_tableRow__YAQry style_row__rMjqo (header)
 └── style_tableRow__YAQry style_row__rMjqo (data)
     ├── style_column__qFboh style_stickyCol__8nZn2 style_start__L8R9v
     │   ├── style_stockId__blFSc (ticker like "SPEURO:IND")
     │   └── Follow button
     ├── style_column__qFboh
     │   └── style_stockName__8SqkX ("S&P EUROPE 350 INDEX")
     ├── style_column__qFboh style_end__Ug4Cn
     │   └── style_stockValue__fsPwb ("2,581.91")
     └── style_column__qFboh style_end__Ug4Cn
         └── media-ui-Change_change-lMq4LV-1csY- media-ui-Change_default-* media-ui-Change_refresh2024-*
             ├── media-ui-Change_changeValue-* media-ui-Change_(positive|negative|neutral)-*
             │   └── number (e.g. "1.85")
             └── media-ui-Change_marketArrow-* media-ui-Change_(positive|negative|neutral)-*
                 └── <svg> arrow
```

---

## 6. Data Extracted from File

- **Total rows:** 91 indices
- **Sections:** 3 ("Today in the Markets", "Compare to Benchmarks", "Market Summaries")
- **Regions covered:** Europe, UK, Nordics, DACH, Eastern Europe, Iberia, Baltics, Middle East, Africa
- **Change distribution:** ~70% positive, ~25% negative, ~5% neutral (at time of snapshot)

### Sample indices

| Ticker | Name | Value | Change |
|--------|------|-------|--------|
| SPEURO:IND | S&P EUROPE 350 INDEX | 2,581.91 | +1.85 |
| SXXP:IND | STXE 600 (EUR) Pr | 635.61 | +1.68 |
| SX5E:IND | Euro Stoxx 50 Pr | 6,293.13 | +4.55 |
| UKX:IND | FTSE 100 INDEX | 10,363.27 | +0.98 |
| DAX:IND | DAX INDEX | 24,985.82 | +0.39 |
| CAC:IND | CAC 40 INDEX | 8,421.14 | +3.76 |

### Key ticker prefixes

| Prefix | Market |
|--------|--------|
| `UKX:IND` | FTSE 100 (London) |
| `DAX:IND` | DAX (Frankfurt) |
| `CAC:IND` | CAC 40 (Paris) |
| `SX5E:IND` | Euro Stoxx 50 |
| `XU100:IND` | BIST 100 (Istanbul) |
| `TA-35:IND` | TA-35 (Tel Aviv) |
| `TOP40:IND` | FTSE/JSE Africa Top 40 |
| `ATXPRIME:I` | ATX Prime (Vienna) |

---

## 7. Implementation Notes for ROI24

### Replicating the Change component (minimal)

```css
.change-positive { color: #16a34a; }
.change-negative { color: #e21d1d; }
.change-neutral { color: #a6a6a6; }

.change-arrow {
  width: 12px;
  height: 10px;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
```

```html
<div class="change change-positive">
  <svg class="change-arrow" viewBox="0 0 24 20">
    <path d="M12 0L24 20L0 20L12 0Z"/>
  </svg>
  1.85
</div>
```

### Key differences from ROI24 style

| Aspect | Bloomberg | ROI24 |
|--------|-----------|-------|
| Background | Very dark (#0a0a0a) | Dark (#050505) |
| Border | Minimal/none on cells | 1px solid |
| Font | System + Google Fonts | Inter + JetBrains Mono |
| Accent | Green (#16a34a) / Red (#e21d1d) | Green (#00ff9d) |
| Numbers | Tabular-nums, 1 234,56 | Comma decimal for RU locale |
| Cards | Flat rows, no card bg | Bordered cards |
| Radius | 0 (sharp) | 8-16px (rounded) |

### Recommended adaptation

Use Bloomberg's **table structure + change component** but apply ROI24's design tokens:
- Replace Bloomberg's green `#16a34a` with ROI24 accent `#00ff9d`
- Keep monospace for values (JetBrains Mono)
- Keep right-align for value/change columns
- Keep arrow SVG pattern (fill="currentColor")
- Add `border-radius: 12px` to rows or use card-style (ROI24 prefers cards)
- Use `gap: 14px` between cells (Bloomberg uses 1px gaps)

---

*Generated from Bloomberg HTML snapshot — 1.3MB minified React SPA. Data extracted via regex parsing of rendered DOM.*