What is Bloomberg's primary brand color?

Bloomberg Orange (#f05143) is the signature accent, but it does not behave like a brand button color. It appears in 22 of 470 text-color occurrences extracted from the homepage, used as the Live TV pulse dot, an editorial keyword highlight inside the lead ad creative, and rare emphasis marks. It never paints a button fill, a card background, or a hover state. The CTA color is black (#000000) on white, and the chromatic chrome of the page is carried by red (#e51503) for ticker-down and live indicators, green (#338736) for ticker-up, blue (#0064fa) for the Opinion column, and yellow (#ffcd1e) for warnings — each color tied to a market or editorial function rather than decoration.

What typography does Bloomberg use, and what should I substitute?

Three families do the work. BWHaasGroteskWeb (a Bloomberg-licensed web cut of the Haas Unica/Grotesk lineage) carries 14–16px UI work across weights 400/500/700 — nav links, story decks, table rows, byline metadata. BWHaasHead handles the rare 28–32px display tier with 0.42–0.48px positive tracking. AvenirNextPForBBG appears only at 12px weight 600 for the small UPPERCASE footer kicker. If BWHaas is unavailable, Neue Haas Grotesk, Helvetica Now, or Inter substitute cleanly at the published sizes — Bloomberg's type is deliberately neutral, not voicey, so the substitutes preserve the wire-service tone. The 14px line-height runs tight at 14–21px depending on context.

Why is the Sign In button square-cornered?

The primary Sign In pill is a 30px-tall black rectangle at 0px border-radius — flat corners on a black fill. This contradicts the rounded-button convention every consumer publisher in 2026 follows, and the choice is deliberate: the square corner reads as terminal-chrome rather than SaaS-chrome. Card containers and tile thumbnails use 4–12px radii, the Live TV indicator dot uses 50% for the circle, and a small set of subscription-ad tiles uses 28px pill geometry. The 0px CTA is the load-bearing shape decision — round it and the page stops looking like a newsroom.

Why are there green and red colors if they're never used as fills?

The markets palette is chromatic semantic, not chromatic decoration. Green #338736 is bound to --phx-color-markets-up and only paints up-tick arrows and percentage values in the ticker table; red #e51503 is bound to --phx-color-markets-down, the live indicator, and form-validation error states — never used as a hero background or CTA fill. Blue #0064fa is reserved for the Opinion column and never appears outside it. The discipline here is unusual: most design systems let red and green leak into general UI as 'success' and 'danger', but Bloomberg keeps them pinned to specific editorial functions so a reader scanning the page can map color directly to meaning.

Does Bloomberg have a dark mode for this surface?

The marketing homepage extracted here is light-only. The top nav strip is a dark surface (#1c1c1c near-black with white labels) sitting on a white canvas, which is a partial inversion rather than a global dark theme. Logged-in terminal-style reading surfaces on subscriber pages use a darker variant tuned for screen fatigue, but that surface is not part of the extracted spec. If you derive a dark variant from these tokens, invert canvas to #1c1c1c (matching the existing dark nav), shift ink to #ffffff, and keep Bloomberg Orange #f05143 pinned at the same value — the orange reads correctly against both #ffffff and #1c1c1c without retuning.

Can I use this DESIGN.md to build a financial-news React app?

Yes. Feed the file to Claude, Cursor, or any agent that reads structured design tokens and it reproduces Bloomberg's voice — white canvas, near-black ink, BWHaasGroteskWeb 14px workhorse, single-accent orange editorial highlight, chromatic market semantics, and the square-corner CTA. The 18 component entries cover the dark top nav, news cards, markets table with up/down arrow rows, Live TV indicator, color-block ad tile, footer kicker, and the Sign In pill. Article-detail reading surfaces, video player chrome, Businessweek long-form, and the Terminal-subscriber dashboard are out of scope — they live on different pages with their own type ladders.

Bloomberg Design System

Bloomberg.com as a DESIGN.md file.

About Bloomberg DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source bloomberg.com

News & Publishing

Bloomberg.com reads less like a magazine and more like a trading terminal that learned to carry photography. The canvas is white, the ink is near-black, and the entire chrome is paced by 14px BWHaasGroteskWeb running across nav links, story decks, table rows, and ticker rails. Bloomberg Orange — #f05143 — exists in only 22 of 470-odd text-color occurrences on the page; it never paints a button or a background, only the "Live TV" pulse dot and the editorial keyword highlight ("Excellence in fixed income execution has a new name") that the brand inherited from print. The primary CTA is a square-cornered 30px black pill labelled "Sign In" — a deliberate refusal of the rounded-button convention every other consumer publisher in 2026 follows.

This DESIGN.md file packages the homepage into a structured spec. Inside: 23 color tokens organised into chromatic-semantic groups — markets-up green #338736, markets-down red #e51503, Opinion blue #0064fa, warning yellow #ffcd1e, plus the cream-and-near-black neutrals; 12 typography tokens spanning BWHaasGroteskWeb 10–20px UI work, the rare BWHaasHead 28–32px display tier, and the AvenirNextPForBBG 12px kicker; an 8-step radius scale dominated by 4/8/12px corners and a 0px square-corner pill; a 12-step spacing scale built on 2/4/8/12px units; and 18 component specifications covering the dark top nav, news cards, markets table, color-block ad slot, and the Sign In pill. The format follows the Google Labs DESIGN.md specification.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Bloomberg's information-first voice — white canvas, near-black ink, single-accent orange editorial highlight, chromatic market semantics, square-corner CTAs, and the 14px workhorse leading. Reference the tokens directly to paste hex values into Tailwind config, or use the spec as an audit checklist against any financial-news surface that needs to feel like a wire service rather than a SaaS landing. Where most consumer publishers commit the first viewport to a 64–107px headline, Bloomberg holds nearly every text token at 14–16px and lets the chromatic ticker chrome carry the brand — that restraint is the design.

What makes it distinct

Single-accent voltageBloomberg Orange #f05143 used as a text-only highlight in 22 of 81 color slots, never as a button fill or background wash
14px workhorse typeBWHaasGroteskWeb at 14–16px carries 460+ of the 470 text instances, where most editorial brands burn 107px on a hero shout
Square-corner primary CTAthe Sign In pill is 30px tall at 0px radius, contradicting the pill-rounded convention every consumer publisher follows
Chromatic market semanticsred #e51503 for ticker-down and live, green #338736 for ticker-up, blue #0064fa for Opinion, each color tied to a function rather than decoration
Three-family stackBWHaasGroteskWeb for UI, BWHaasHead for the rare 28–32px display moments, AvenirNextPForBBG for the 12px footer kicker

Live at bloomberg.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

bloomberg.com

Explore Bloomberg

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Bloomberg design system FAQ

Common questions about Bloomberg's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Bloomberg — official site

The financial newsroom itself — read the homepage to see the 14px workhorse and orange Live TV pulse in motion.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Bloomberg in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→