Bloomberg Design System
Dark · Generated 18/04/2026 · 24 colors · 42 type tokens · 33 spacing steps · 20 breakpoints · 11 motion tokens
v1.0.0
Color Palette
Background Colors
Black
#000000
Dark Gray 4
#141414
Dark Gray
#1C1C1C
Dark Gray 2
#3C3C3C
Dark Gray 3
#545454
Dark Blue
#2B333F
White
#FFFFFF
Light Gray 4
#EFEFEF
Text Colors
Light Gray 2
#B3B3B3
Light Gray 5
#F3F4EF
Light Gray 3
#CCCCCC
Mid Gray 2
#999999
Mid Gray
#767676
White 2
#F8F8F8
Brand & Status Colors
Red (Brand)
#E51503
Red 2
#F34F4E
Yellow
#FFCD1E
Orange
#FFA028
Blue
#0064FA
Cyan
#04ACCC
Light Gray (border)
#E5E7EB
Typography
Grotesque UI · BWHaasGroteskWeb / BWHaasHead
BWHaas Grotesk
Markets · Technology · Politics · Business · Finance · Opinion · Wealth
Light · 300 Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Editorial Serif · PublicoText / PublicoHead
Publico
Fed Signals Pause as Inflation Eases Toward Target. Global equities rally on dovish pivot expectations.
Regular · 400 Bold · 700 Italic
Fed Holds Rates Steady as Officials Weigh Inflation Data
Headline XL · 28px · Bold · PublicoHead · line-height: 30px · letter-spacing: 0.14px
Markets Rally on Rate Cut Hopes
Headline LG · 24px · Bold · PublicoHead · line-height: 24px · letter-spacing: 0.14px
Asia Equities Jump as Dollar Weakens
Section Head · 20px · Semibold · BWHaasHead · line-height: 21.6px · letter-spacing: 0.14px
The S&P 500 climbed 1.2% Tuesday as traders digested Federal Reserve commentary suggesting the central bank may be nearing the end of its tightening cycle.
Article Body · 16px · Regular · PublicoText · line-height: 22.5px · letter-spacing: 0.14px
By James Chen and Sarah Kim · Updated April 18, 2026, 2:41 PM HKT
Byline / Meta · 14px · Regular · BWHaasGroteskWeb · line-height: 19.6px
MARKETS · FINANCE · BLOOMBERG TECHNOLOGY
Section Label / Category · 12px · Semibold · caps · letter-spacing: 1px
SPONSORED · ADVERTISEMENT · LEGAL DISCLAIMER
Micro · 10px · Medium · caps · letter-spacing: 0.48px
Line Heights
Tight
12px
Snug
14px
Normal
14.7px
Relaxed
16px
Loose
16.8px
LH-6
18px
LH-9
21px
LH-11
22.5px
LH-12
24px
LH-14
29.4px
LH-15
30px
Letter Spacing
Markets
Tight · 0.14px
--letter-spacing-tight · headlines, display
Finance
Wide · 0.20px
--letter-spacing-wide · body UI text
ASIA
Widest · 0.48px
--letter-spacing-widest · uppercase nav
TECHNOLOGY
LS-6 · 1px
--letter-spacing-ls-6 · category labels
Spacing
Spacing Scale
33 tokens — 1px → 370.5px · Dense news grid with fractional sub-pixel values
1
2
3
3.7
4
5
6
7
8
11
12
15
16
17
18
19
20
22
23
24
27
30
32
34
35
40
44
52
76.5
198
Bloomberg's spacing scale is notably dense — most tokens cluster between 1–22px, reflecting a data-rich news grid that packs maximum information density per viewport. The largest values (198px, 370.5px) are structural layout spacers, not UI padding.
Borders
Border Radii
SM (asymmetric)
0 8px 8px 0
MD
2px
LG
4px
R8
8px
R9
12px
R11
28px
Circle
50%
Pill
9999px
The --radius-sm: 0px 8px 8px 0px asymmetric token is Bloomberg's signature category label — flush left, rounded right — used for story section tags that sit flush against a red left border. Also notable: --radius-r15: 13986px (larger than the browser's max-pill) appears in video UI components.
Border Widths
--border-width-hairline
1px · dividers, card borders, table rows
--border-width-thin
1.5px · selected states, tab indicators
--border-width-base
8px · category section accents, alert left borders, page header bar
The thick 8px base border is the most visually distinctive Bloomberg element — it appears as the red underline on the page header (seen above), and as left-border accents on alerts and section headers.
Shadow / Elevation
Shadow Tokens
3 tokens — hairline to glow
--shadow-lg
Card surface lift
rgba(0,0,0,0.05) 0px 1px 2px — barely visible lift for article cards, used when light backgrounds need card separation
--shadow-sm
Dropdowns, popovers
rgba(0,0,0,0.1) 0px 1px 3px + rgba(0,0,0,0.1) 0px 1px 2px -1px — standard two-layer drop shadow for floating elements
--shadow-md
Video player, modals
rgb(0,0,0) 0px 0px 8px — hard black glow used for video player controls and full-black overlays on dark surfaces
Z-Index
LayerValueUsage
--z-1 → --z-31 – 3Fine-grained stacking within content areas (article cards, inline widgets)
--z-410Sticky components — ticker bar, section navigation
--z-530Elevated panels — sidebars, overlay panels
--z-640Dropdowns, tooltips, popovers
--z-750Drawers, menus, notification banners
--z-8100Top navigation bar, site header
--z-914,678Critical overlays (paywalls, cookie consent, emergency alerts) — chosen to override all third-party elements
Breakpoints
📱
--breakpoint-xs / sm
470 / 480px
Mobile (paired)
📱
--breakpoint-md / lg
600 / 620px
Mobile-tablet
💻
--breakpoint-xl
675px
Phablet / large phone
💻
--breakpoint-2xl / 3xl
759 / 760px
Tablet (paired)
💻
--breakpoint-bp-8 / bp-9
767 / 768px
Tablet MD (paired)
💻
--breakpoint-bp-10 / bp-11
900 / 911px
Tablet LG (paired)
🖥️
--breakpoint-bp-12 / bp-13
1019 / 1020px
Small desktop
🖥️
--breakpoint-bp-14 / bp-15
1122 / 1123px
Desktop (paired)
🖥️
--breakpoint-bp-16 / bp-17
1279 / 1280px
Desktop LG
🖥️
--breakpoint-bp-18
1300px
Wide desktop
🖥️
--breakpoint-bp-19 / bp-20
1334 / 1335px
XL desktop (paired)
Bloomberg uses 20 breakpoints (470px → 1335px) with the same paired max/min pattern as Spotify (759/760, 767/768, 1019/1020) — upper max-width paired immediately with the lower min-width to create seamless layout transitions without overlap. The grid supports dense multi-column financial data layouts that need fine-grained responsive control.
Opacity
Opacity Tokens
5 tokens — non-standard values including 0.73 and 0.83
--opacity-30
30% · overlay scrim
--opacity-40
40% · dim
--opacity-73
73% · video control
--opacity-83
83% · hover state
--opacity-85
85% · modal backdrop
Bloomberg's opacity tokens are at non-standard values — 0.73 and 0.83 are unusual in this series, suggesting they were fine-tuned for specific video player or overlay use cases rather than following a mathematical progression.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-light-gray-2--color-black10.02:1AAA
--color-light-gray-2--color-dark-gray8.13:1AAA
--color-light-gray-2--color-dark-gray-25.26:1AA
--color-light-gray-2--color-white2.1:1Fail
--color-light-gray-5--color-black19.0:1AAA
--color-light-gray-5--color-dark-gray15.42:1AAA
--color-light-gray-5--color-dark-gray-29.98:1AAA
--color-light-gray-5--color-white1.11:1Fail
--color-red--color-white4.73:1AA
--color-red--color-black4.44:1AA Large
--color-red--color-dark-gray3.6:1AA Large
--color-yellow--color-black14.0:1AAA
--color-yellow--color-dark-gray11.36:1AAA
--color-orange--color-black10.31:1AAA
--color-orange--color-dark-gray-25.42:1AA
--color-yellow--color-white1.5:1Fail
--color-orange--color-white2.04:1Fail
CSS Variables Reference
Background Colors16 tokens
Black--color-black#000000
Dark Gray 4--color-dark-gray-4#141414
Dark Gray--color-dark-gray#1C1C1C
Dark Gray 2--color-dark-gray-2#3C3C3C
Dark Gray 3--color-dark-gray-3#545454
Mid Gray--color-mid-gray#767676
Mid Gray 2--color-mid-gray-2#999999
Light Gray 3--color-light-gray-3#CCCCCC
Dark Blue--color-dark-blue#2B333F
White--color-white#FFFFFF
White 2--color-white-2#F8F8F8
Light Gray 4--color-light-gray-4#EFEFEF
White 3--color-white-3#F2F7FF
Blue--color-blue#0064FA
Dark Gray 5 (overlay)--color-dark-gray-5rgba(28,28,28,0.8)
Blue 2 (overlay)--color-blue-2rgba(115,133,159,0.5)
Text & Brand Colors8 tokens
Light Gray 2--color-light-gray-2#B3B3B3
Light Gray 5--color-light-gray-5#F3F4EF
Light Gray (border)--color-light-gray#E5E7EB
Red (Bloomberg Brand)--color-red#E51503
Red 2--color-red-2#F34F4E
Yellow (alert)--color-yellow#FFCD1E
Orange--color-orange#FFA028
Cyan--color-cyan#04ACCC
Typography42 tokens
Grotesque UI--font-family-baseBWHaasGroteskWeb
Avenir UI--font-family-2AvenirNextPForBBG
Editorial Serif--font-family-3PublicoText
Video Player--font-family-4VideoJS
Fallback--font-family-5Arial
Display Head--font-family-6BWHaasHead
Serif Head--font-family-7PublicoHead
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
Micro--font-size-2xs10px
Caption--font-size-xs12px
Body SM--font-size-sm14px
Body Base--font-size-base15px
Body LG--font-size-lg16px
Section Head--font-size-xl18px
Heading MD--font-size-2xl20px
Headline LG--font-size-3xl24px
Headline XL--font-size-4xl28px
Tight--letter-spacing-tight+0.14px
Wider--letter-spacing-wider+0.4192px
LS-6 (caps)--letter-spacing-ls-6+1px
Motion, Opacity & Layers17 tokens
Instant--duration-instant100ms
Fast--duration-fast150ms
Normal--duration-normal200ms
Slow--duration-slow250ms
Slower--duration-slower300ms
Long--duration-duration-7500ms
Ease Out--easing-ease-outease-out
Ease In-Out--easing-ease-in-outease-in-out
Scrim--opacity-3030%
Video--opacity-7373%
Modal--opacity-8585%
Content--z-1 → --z-31–3
Sticky--z-410
Dropdown--z-640
Nav--z-8100
Paywall / Top--z-914,678
Design System Preview · Bloomberg (Dark) · Generated 18/04/2026 · 24 color tokens · 9 font-size · 7 font-family · 5 font-weight · 15 line-height · 6 letter-spacing · 33 spacing · 15 radius · 3 border-width · 3 shadow · 9 duration · 2 easing · 9 z-index · 20 breakpoints · 5 opacity