W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Bloomberg
Bloomberg is the financial-media and data-services powerhouse — the Bloomberg Terminal anchors the franchise, with Bloomberg News, Bloomberg Opinion, Businessweek, and Bloomberg Government extending the brand across consumer and B2B surfaces. The visual identity is engineered for data legibility: precise grays, terminal-black, and the unmistakable Bloomberg yellow (#FFCD1E) reserved for the ticker accent and editorial emphasis. Bloomberg Opinion uses a distinct deep blue link color (#0064FA). Type pairs Mecano (display) with Avenir Next (sans) and Publico Head / Publico Text (serif).
1 palette 4 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/bloomberg/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/bloomberg/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Bloomberg
Bloomberg is the financial-media and data-services powerhouse — the Bloomberg Terminal anchors the franchise, with Bloomberg News, Bloomberg Opinion, Businessweek, and Bloomberg Government extending the brand across consumer and B2B surfaces. The visual identity is engineered for data legibility: precise grays, terminal-black, and the unmistakable Bloomberg yellow (#FFCD1E) reserved for the ticker accent and editorial emphasis. Bloomberg Opinion uses a distinct deep blue link color (#0064FA). Type pairs Mecano (display) with Avenir Next (sans) and Publico Head / Publico Text (serif).
Tags: bloomberg, news, finance, journalism, brand, yellow, terminal, business, light-first
Atoms
Palette
Bloomberg · [email protected] · Proprietary — All Rights Reserved
The Bloomberg palette as deployed on bloomberg.com, captured from the published Phoenix ("phx") design-system tokens served alongside the consumer site. The identity is built on a precise, data-terminal feel: near-black on white, deep ink dark mode, and a signature Bloomberg yellow (#FFCD1E) reserved for the ticker accent and editorial emphasis. The system publishes a full 9-step ramp across gray, red, green, yellow, opinion blue, and subscription violet — designed for chart legibility on the terminal as much as the editorial page.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Source Serif 4 ([email protected]) |
OFL-1.1 | serif |
body |
Source Serif 4 ([email protected]) |
OFL-1.1 | serif |
sans |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
black |
Black | #000000 |
gray-1000 |
Gray 1000 | #1C1C1C |
gray-900 |
Gray 900 | #262626 |
gray-800 |
Gray 800 | #3C3C3C |
gray-700 |
Gray 700 | #545454 |
gray-600 |
Gray 600 | #767676 |
gray-500 |
Gray 500 | #999999 |
gray-400 |
Gray 400 | #B3B3B3 |
gray-300 |
Gray 300 | #CCCCCC |
gray-200 |
Gray 200 | #EFEFEF |
gray-100 |
Gray 100 | #F8F8F8 |
white |
White | #FFFFFF |
yellow-400 |
Bloomberg Yellow 400 | #FFCD1E |
yellow-300 |
Yellow 300 | #FFDA5D |
yellow-500 |
Yellow 500 | #E6B120 |
yellow-600 |
Yellow 600 | #C48600 |
red-500 |
Red 500 | #E51503 |
red-400 |
Red 400 | #F05143 |
red-600 |
Red 600 | #B20E01 |
green-500 |
Green 500 | #338736 |
green-400 |
Green 400 | #4DB250 |
green-600 |
Green 600 | #146917 |
opinion-500 |
Opinion Blue 500 | #0064FA |
opinion-600 |
Opinion Blue 600 | #004EC4 |
opinion-200 |
Opinion Blue 200 | #D4E5FF |
subscription-500 |
Subscription Violet 500 | #4F4FFF |
subscription-700 |
Subscription Violet 700 | #2800D7 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
gray-100 |
#F8F8F8 |
surface-elevated |
white |
#FFFFFF |
text-primary |
gray-1000 |
#1C1C1C |
text-secondary |
gray-700 |
#545454 |
text-tertiary |
gray-600 |
#767676 |
primary |
opinion-500 |
#0064FA |
primary-hover |
opinion-600 |
#004EC4 |
accent |
yellow-400 |
#FFCD1E |
accent-hover |
yellow-500 |
#E6B120 |
warning |
yellow-600 |
#C48600 |
error |
red-500 |
#E51503 |
success |
green-500 |
#338736 |
border |
gray-300 |
#CCCCCC |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
black |
#000000 |
surface |
gray-1000 |
#1C1C1C |
surface-elevated |
gray-900 |
#262626 |
text-primary |
white |
#FFFFFF |
text-secondary |
gray-200 |
#EFEFEF |
text-tertiary |
gray-400 |
#B3B3B3 |
primary |
opinion-500 |
#0064FA |
primary-hover |
opinion-200 |
#D4E5FF |
accent |
yellow-400 |
#FFCD1E |
accent-hover |
yellow-300 |
#FFDA5D |
warning |
yellow-300 |
#FFDA5D |
error |
red-400 |
#F05143 |
success |
green-400 |
#4DB250 |
border |
gray-700 |
#545454 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
black |
#000000 |
on-identity |
yellow-400 |
#FFCD1E |
primary |
opinion-500 |
#0064FA |
primary-hover |
opinion-600 |
#004EC4 |
accent |
yellow-400 |
#FFCD1E |
accent-hover |
yellow-500 |
#E6B120 |
mark |
yellow-400 |
#FFCD1E |
success |
green-500 |
#338736 |
warning |
yellow-600 |
#C48600 |
error |
red-500 |
#E51503 |
text-primary-light |
gray-1000 |
#1C1C1C |
text-primary-dark |
white |
#FFFFFF |
background-light |
white |
#FFFFFF |
background-dark |
black |
#000000 |
surface-light |
gray-100 |
#F8F8F8 |
surface-dark |
gray-1000 |
#1C1C1C |
text-secondary-light |
gray-700 |
#545454 |
text-tertiary-light |
gray-600 |
#767676 |
border-light |
gray-300 |
#CCCCCC |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
ui |
sans |
code |
mono |
Rules
🛑 error (6)
contrastRatio → text-primary
- against:
background - minRatio:
7 - standard:
WCAG-AAA
Gray 1000 (#1C1C1C) on white gives ~16:1 — past AAA. Bloomberg's editorial surfaces sit alongside dense data tables and chart legends. The AAA contrast target supports both the long-form journalism and the data-density that define the brand.
colorChoice → roles.colors.accent
- allowed: yellow-400, yellow-500, yellow-300
- forbidden: opinion-500, subscription-500, red-500
Bloomberg yellow is the singular brand identity color across the Terminal and consumer surfaces. The opinion blue is reserved for Bloomberg Opinion link affordances, and the subscription violet for subscription product accents — neither stands in for the accent role without breaking the brand's editorial taxonomy.
contextRestriction → roles.colors.primary
- forbiddenContexts: terminal-chrome, ticker-accent, subscription-marketing
- allowedContexts: opinion, default-link, editorial-cta
Opinion blue (#0064FA) is published in Phoenix tokens as a secondary-opinion color — it carries link semantics for Bloomberg Opinion content. Using it for terminal chrome or subscription marketing would conflict with the Phoenix-defined product hierarchy.
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.5
Bloomberg's editorial pages pair Mecano display headlines with Publico Text body. The display-to-prose hierarchy is part of the editorial voice; a 1.5× minimum ratio preserves it when open-source substitutes (Source Serif 4) stand in for the proprietary primaries.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo
The Bloomberg wordmark and the Terminal logotype are tightly governed brand assets. Recoloring (especially away from black or yellow), stretching, or applying gradients conflicts with the brand's data-precision voice.
contextRestriction → roles.colors.success
- forbiddenContexts: error-state, destructive-action
- allowedContexts: market-up, data-viz-positive, confirmation
In Bloomberg market data, green signals positive movement. Reusing it for failure states would conflict with the established market-color semantics that underpin every financial chart on the Terminal.
⚠️ warning (2)
accessibilityRequirement → *
- standard:
WCAG-AAA - criterion:
1.4.6
WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Bloomberg readers spend long sessions on data tables, chart legends, and dense prose; the enhanced contrast target supports that reading posture.
enumMembership → typography.heading.fontWeight
- allowed: 400, 500, 600, 700, 800
Mecano and Avenir Next on Bloomberg pages cover Regular through Extra-Bold. Heavier weights beyond the licensed cut are not represented in the live stylesheet; the Source Serif 4 / Inter substitutes should mirror the same range.
💡 recommendation (1)
compositionConstraint → roles.colors.accent
- pairsWith: black, gray-1000, white, gray-100
- doesNotPairWith: opinion-500, subscription-500, red-500
Bloomberg yellow reads cleanest against the terminal black or the white canvas. Placing it adjacent to the opinion blue or subscription violet introduces a chromatic collision between identity-yellow and product-accent colors that Phoenix treats as a hierarchy violation.
Provenance
- Source: https://www.bloomberg.com/
- License:
Proprietary — All Rights Reserved - Attribution: Bloomberg L.P. — visual identity captured from the deployed Phoenix design-system tokens (--phx-color-*) on assets.bwbx.io, the Next.js asset CDN that serves bloomberg.com. Bloomberg, the Bloomberg Terminal, Mecano, Avenir Next, and Publico Head / Publico Text are property of Bloomberg L.P.
- Imported:
2026-05-19 - Notes: Derived from live site CSS at https://www.bloomberg.com/ on 2026-05-19; no public brand guide located. The proprietary Bloomberg Mecano (display serif/sans), Avenir Next (sans), and Publico Head / Publico Text (serif) typefaces are declared in the live stylesheet but are not publicly distributed. Open-source substitutes — source-serif-4@1 for the serif role and inter@1 for the sans role — are referenced from this brand atom.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Bloomberg
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Bloomberg
A clear hierarchy in Bloomberg's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Bloomberg
[email protected]font · heading
Source Serif 4
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Source Serif 4
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · sans
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ yellow-400 #FFCD1E accent-hover
→ yellow-500 #E6B120 background-dark
→ black #000000 background-light
→ white #FFFFFF border-light
→ gray-300 #CCCCCC error
→ red-500 #E51503 identity
→ black #000000 mark
→ yellow-400 #FFCD1E on-identity
→ yellow-400 #FFCD1E primary
→ opinion-500 #0064FA primary-hover
→ opinion-600 #004EC4 success
→ green-500 #338736 surface-dark
→ gray-1000 #1C1C1C surface-light
→ gray-100 #F8F8F8 text-primary-dark
→ white #FFFFFF text-primary-light
→ gray-1000 #1C1C1C text-secondary-light
→ gray-700 #545454 text-tertiary-light
→ gray-600 #767676 warning
→ yellow-600 #C48600 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Source Serif 4 prose
→ body Source Serif 4 ui
→ sans Inter Palette mode mappings (from bloomberg)
Light mode (14 roles)
accent
→ yellow-400 accent-hover
→ yellow-500 background
→ white border
→ gray-300 error
→ red-500 primary
→ opinion-500 primary-hover
→ opinion-600 success
→ green-500 surface
→ gray-100 surface-elevated
→ white text-primary
→ gray-1000 text-secondary
→ gray-700 text-tertiary
→ gray-600 warning
→ yellow-600 Dark mode (14 roles)
accent
→ yellow-400 accent-hover
→ yellow-300 background
→ black border
→ gray-700 error
→ red-400 primary
→ opinion-500 primary-hover
→ opinion-200 success
→ green-400 surface
→ gray-1000 surface-elevated
→ gray-900 text-primary
→ white text-secondary
→ gray-200 text-tertiary
→ gray-400 warning
→ yellow-300 Rules (9 typed constraints)
error · 6 rules
contrastRatio text-primary against background minRatio 7 standard WCAG-AAA Gray 1000 (#1C1C1C) on white gives ~16:1 — past AAA. Bloomberg's editorial surfaces sit alongside dense data tables and chart legends. The AAA contrast target supports both the long-form journalism and the data-density that define the brand.
colorChoice roles.colors.accent allowed yellow-400, yellow-500, yellow-300 forbidden opinion-500, subscription-500, red-500 Bloomberg yellow is the singular brand identity color across the Terminal and consumer surfaces. The opinion blue is reserved for Bloomberg Opinion link affordances, and the subscription violet for subscription product accents — neither stands in for the accent role without breaking the brand's editorial taxonomy.
contextRestriction roles.colors.primary forbiddenContexts terminal-chrome, ticker-accent, subscription-marketing allowedContexts opinion, default-link, editorial-cta Opinion blue (#0064FA) is published in Phoenix tokens as a secondary-opinion color — it carries link semantics for Bloomberg Opinion content. Using it for terminal chrome or subscription marketing would conflict with the Phoenix-defined product hierarchy.
fontPairing typography.display requires prose minSizeRatio 1.5 Bloomberg's editorial pages pair Mecano display headlines with Publico Text body. The display-to-prose hierarchy is part of the editorial voice; a 1.5× minimum ratio preserves it when open-source substitutes (Source Serif 4) stand in for the proprietary primaries.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo The Bloomberg wordmark and the Terminal logotype are tightly governed brand assets. Recoloring (especially away from black or yellow), stretching, or applying gradients conflicts with the brand's data-precision voice.
contextRestriction roles.colors.success forbiddenContexts error-state, destructive-action allowedContexts market-up, data-viz-positive, confirmation In Bloomberg market data, green signals positive movement. Reusing it for failure states would conflict with the established market-color semantics that underpin every financial chart on the Terminal.
warning · 2 rules
accessibilityRequirement * standard WCAG-AAA criterion 1.4.6 WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced) — Level AAA. Bloomberg readers spend long sessions on data tables, chart legends, and dense prose; the enhanced contrast target supports that reading posture.
enumMembership typography.heading.fontWeight allowed 400, 500, 600, 700, 800 Mecano and Avenir Next on Bloomberg pages cover Regular through Extra-Bold. Heavier weights beyond the licensed cut are not represented in the live stylesheet; the Source Serif 4 / Inter substitutes should mirror the same range.
recommendation · 1 rule
compositionConstraint roles.colors.accent pairsWith black, gray-1000, white, gray-100 doesNotPairWith opinion-500, subscription-500, red-500 Bloomberg yellow reads cleanest against the terminal black or the white canvas. Placing it adjacent to the opinion blue or subscription violet introduces a chromatic collision between identity-yellow and product-accent colors that Phoenix treats as a hierarchy violation.
Provenance
- Source
- https://www.bloomberg.com/
- License
Proprietary — All Rights Reserved- Attribution
- Bloomberg L.P. — visual identity captured from the deployed Phoenix design-system tokens (--phx-color-*) on assets.bwbx.io, the Next.js asset CDN that serves bloomberg.com. Bloomberg, the Bloomberg Terminal, Mecano, Avenir Next, and Publico Head / Publico Text are property of Bloomberg L.P.
- Imported
2026-05-19- Notes
- Derived from live site CSS at https://www.bloomberg.com/ on 2026-05-19; no public brand guide located. The proprietary Bloomberg Mecano (display serif/sans), Avenir Next (sans), and Publico Head / Publico Text (serif) typefaces are declared in the live stylesheet but are not publicly distributed. Open-source substitutes — source-serif-4@1 for the serif role and inter@1 for the sans role — are referenced from this brand atom.