roi24/bloomberg-refresh2024-style-guide.md

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). Все цвета и стили — через переменные, нет хардкода.

@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

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

<!-- 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)

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

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