--- version: alpha name: Bloomberg description: "Terminal-heritage financial media system — pure black masthead, paper-white editorial canvas, a single high-voltage Bloomberg Orange accent, and BWHaasGroteskWeb carrying every surface from headline to data ticker." colors: # Surface / canvas background: "#ffffff" # paper-white editorial page canvas surface: "#f5f5f5" # light section bands, data-table rows, sidebar fills surface-dark: "#000000" # masthead, breaking-news bar, footer inversion surface-muted: "#f2f2f2" # softest tier — muted section backgrounds /* extracted */ # Ink / text ink: "#000000" # headlines, primary body text, nav labels ink-secondary: "#333333" # article body copy — softened from pure black ink-muted: "#666666" # bylines, timestamps, metadata captions ink-disabled: "#999999" # inactive states, placeholder text # Brand accent — Bloomberg Orange primary: "#fa6300" # Terminal-heritage orange: subscribe CTAs, live badges, focus rings /* Bloomberg brand orange */ primary-hover: "#d95500" # darkened 14% for CTA hover state /* estimated */ primary-container: "#fff3e8" # tinted orange wash for alert banners /* estimated */ on-primary: "#ffffff" # white text on orange surfaces # Data / financial semantic data-positive: "#00a050" # green for positive market moves, gains /* estimated */ data-negative: "#e40000" # red for losses, negative market data data-neutral: "#666666" # flat/neutral financial data # State / interaction focus-ring: "#fa6300" # brand orange focus ring, matching primary text-hover: "#fa6300" # inline link hover colour, orange underline # Borders & dividers border: "#e0e0e0" # standard hairline between stories and sections border-strong: "#000000" # heavy editorial rule under masthead, data table borders # Shadow tints shadow-soft: "#cccccc" # was rgba(0,0,0,0.12) — Google format requires hex typography: display-hero: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 60px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1px display: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.05 letterSpacing: -0.5px heading-section: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px heading-sub: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 19px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px body-large: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px button-ui: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px data-ticker: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.5px caption: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px eyebrow: fontFamily: "BWHaasGroteskWeb, Helvetica Neue, Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 700 lineHeight: 1.0 letterSpacing: 1px spacing: xs: 4px sm: 9px md: 18px lg: 24px xl: 30px 2xl: 48px 3xl: 64px rounded: none: 0px sm: 8px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 18px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 18px 24px button-secondary: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 18px 24px button-secondary-hover: backgroundColor: "{colors.ink-secondary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 18px 24px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 18px 24px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 18px card-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 18px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px badge-live: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.eyebrow}" rounded: "{rounded.none}" padding: 4px 8px badge-section: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-primary}" typography: "{typography.eyebrow}" rounded: "{rounded.none}" padding: 4px 10px nav-main: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-primary}" typography: "{typography.nav-link}" padding: 0px 18px nav-link-hover: textColor: "{colors.primary}" data-cell-positive: textColor: "{colors.data-positive}" typography: "{typography.data-ticker}" padding: 4px 8px data-cell-negative: textColor: "{colors.data-negative}" typography: "{typography.data-ticker}" padding: 4px 8px --- # Bloomberg Design System ## Overview Bloomberg's homepage is a newsroom floor translated into pixels — dense, authoritative, and relentlessly functional. The page operates on a strict two-tone ground: a pure-black (`{colors.surface-dark}`) masthead bar sits above a paper-white (`{colors.background}`) editorial canvas, and every typographic weight decision reads as a hierarchy call rather than a stylistic one. There are no rounded surfaces, no decorative gradients, and no ambient shadows — depth comes from news priority, ink weight, and the contained flash of Bloomberg Orange (`{colors.primary}`). That orange is the system's only colour that earns the word "brand." It is the amber of the Bloomberg Terminal — the device that made the company — and on the web it surfaces exactly where authority demands attention: the SUBSCRIBE CTA sitting at 24px bold in a borderless black rectangle, the "LIVE" badge marking a breaking broadcast, the active state on a focused input. The rest of the palette is a controlled grayscale newsroom: black headlines in BWHaasGroteskWeb weight 700, secondary copy in soft charcoal (`{colors.ink-secondary}`), muted metadata in `{colors.ink-muted}`, and data values coloured by market direction — `{colors.data-positive}` green for gains, `{colors.data-negative}` red for losses. The typography is a single-family system. BWHaasGroteskWeb — a web-optimised cut of Linotype's Haas Grotesk, the typeface that predates and inspired Helvetica — does every job from 60px display headlines to 11px UPPERCASE data kickers. The discipline in this choice is total: Bloomberg trusts the scale and weight axes of one grotesk to carry financial wire speed and editorial authority simultaneously. Dense news grids, live market tickers, article decks, and subscription modules all speak in the same voice, differentiated only by size and weight. The result is a page that feels less like a designed website and more like a structured instrument panel. **Key Characteristics:** - Pure-black masthead (`{colors.surface-dark}`) over paper-white editorial canvas (`{colors.background}`) — no mid-tone backgrounds - Bloomberg Orange (`{colors.primary}`) is the single brand accent — Terminal amber applied only to CTAs, live badges, and focus rings - BWHaasGroteskWeb at weight 700 for every display headline, weight 400 for all body and metadata - Strictly square corners across all containers, buttons, and images (`{rounded.none}`) - No decorative shadows — story tiles and cards are flat, separated by hairline rules (`{colors.border}`) - Data typography (`{typography.data-ticker}`) uses weight 700 + 0.5px letter-spacing — distinct from editorial type - Market direction colour semantics: `{colors.data-positive}` green / `{colors.data-negative}` red for financial data values - Dense 3–4 column editorial grid with compressed 9px–18px gutters — information density over breathing room - UPPERCASE eyebrow labels (`{typography.eyebrow}`) with 1px letter-spacing mark every story section - Subscribe CTA is the page's most architecturally prominent orange moment — the terminal heritage surfaces in commerce ## Colors ### Primary Surface - **Paper White** (`{colors.background}`): The editorial page canvas — uninterrupted newsprint, the ground for all reading. Never tinted. - **Light Surface** (`{colors.surface}`): Muted section bands, data-table alternating rows, sidebar wells. Keeps editorial zones visually separated without introducing color. - **Terminal Black** (`{colors.surface-dark}`): The masthead, live-ticker bar, inverted section headers, and footer. The system's loudest structural surface. - **Softest Ground** (`{colors.surface-muted}`): The most neutral band — used for ad slots and minimal module backgrounds. ### Brand Accent - **Bloomberg Orange** (`{colors.primary}`): The defining chromatic signature. Terminal amber applied to the primary subscribe CTA, live broadcast badges, focus rings, and interactive hover underlines. Used nowhere as a decorative surface. - **Orange Hover** (`{colors.primary-hover}`): The pressed-state darkening — approximately 14% darker for CTA active/hover. Preserves orange legibility at all states. - **Orange Container** (`{colors.primary-container}`): A very pale orange wash for alert banners and promotional blocks that need warmth without full orange aggression. ### Ink / Text - **Headline Black** (`{colors.ink}`): Pure ink for every H1/H2 display headline and primary navigation label. - **Body Ink** (`{colors.ink-secondary}`): Near-black body copy — `#333333` removes the harshness of pure black for sustained reading. - **Metadata Gray** (`{colors.ink-muted}`): Bylines, timestamps, photo credits — the system's secondary register. - **Disabled Gray** (`{colors.ink-disabled}`): Inactive, placeholder, and low-priority label states. ### Data Semantics - **Positive Green** (`{colors.data-positive}`): Market gains, positive percentage moves, portfolio growth. Never used outside financial data contexts. - **Negative Red** (`{colors.data-negative}`): Market losses, negative moves. The financial industry's red/green convention, followed exactly. - **Neutral** (`{colors.data-neutral}`): Flat data — no move, unchanged. ### Borders & Depth - **Hairline** (`{colors.border}`): Standard editorial divider between story tiles, data-table rows, and module boundaries. - **Hard Rule** (`{colors.border-strong}`): Heavy editorial rules under the masthead, data-table header borders. The system's printing heritage. ## Typography ### Font Family - **Primary / Only**: `BWHaasGroteskWeb` — a web-optimised digital cut of Linotype Haas Grotesk (the typeface from which Helvetica descends). Self-hosted at `assets.bwbx.io`. Weights: 400 (Roman) and 700 (Bold). Fallback stack: `Helvetica Neue, Helvetica, Arial, sans-serif`. - **Google Font substitute**: `IBM Plex Sans` (closest match — shares the rational Swiss-Modernist DNA without the exact Haas cuts). Second choice: `Source Sans 3`. - **No secondary typeface**: Bloomberg runs a strict single-family system. No serif display face, no editorial monospace, no editorial italic alternate. Weight and scale carry all voice differentiation. ### Hierarchy The complete type scale lives in the `typography:` token block above. | Token | Use | |---|---| | `display-hero` | 60px feature headlines, homepage hero story | | `display` | 40px prominent section leads, feature blocks | | `heading-section` | 24px section module headers, major story tiles | | `heading-sub` | 19px mid-grid story headlines, sub-section titles | | `body-large` | 18px article leads, deck copy, major body paragraphs | | `body` | 16px standard article body, sidebar copy | | `nav-link` | 14px navigation category labels in the masthead | | `button-ui` | 24px bold — the CTA face, conspicuously oversized for the brand's commercial voice | | `data-ticker` | 13px bold with 0.5px tracking — market ticker values, index prices, percentages | | `caption` | 12px regular — photo credits, footnotes, correction notices | | `eyebrow` | 11px bold UPPERCASE, 1px tracking — section kickers above headlines | ### Principles - **Single typeface, maximum authority**: BWHaasGroteskWeb at two weights spans every use case. No face changes signal a register shift — only size and weight do. - **Terminal-grade readability**: Haas Grotesk at small sizes was built for screen legibility before digital screens existed. At 12–14px it remains crisp; at 60px it carries headline weight without flourish. - **Compressed line-heights for display**: Hero headlines run at 1.0 line-height (`{typography.display-hero}`) — text stacks dense, like a wire service print edition. Body opens to 1.5 for sustained reading. - **The CTA is oversized by design**: The 24px bold button label on the subscribe CTA is larger than most editorial headings at the same tier. This is a deliberate commercial signal — the same logic as a newsstand cover price in large type. - **Data type carries its own register**: `{typography.data-ticker}` uses weight 700 + `0.5px` letter-spacing — the same face as editorial, but spaced for numeral legibility in dense rows. ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. Base unit: 9px (dembrandt-confirmed dominant spacing value). Bloomberg's spacing is news-dense rather than generous. Editorial gutters between story tiles run at `{spacing.sm}` (9px) to `{spacing.md}` (18px) — tight enough to maximise stories-per-viewport, wide enough to keep tiles from merging. The market-data ticker and financial tables compress further, to `{spacing.xs}` (4px) internal padding for scan-speed. ### Grid & Container - Max content width: approximately 1280px on desktop, centered - Homepage: 3–4 column story grid; dedicated markets section collapses to a dense 2-column data layout - Column gutters: `{spacing.md}` (18px), with `{spacing.sm}` (9px) compressed zones in financial data modules - Masthead: full-bleed `{colors.surface-dark}` strip, max-width container inside ### Whitespace Philosophy - **Information density over breath**: Bloomberg is a financial wire service, not a magazine. Story grids fill the viewport aggressively — whitespace is earned, not generous. - **Masthead compression**: The black navigation bar carries category labels at 14px with minimal vertical padding — 30px height or less. Navigation is functional, not spacious. - **Data zones have zero editorial padding**: Market ticker rows use `{spacing.xs}` internal padding; financial tables go to zero horizontal padding at the cell boundary. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no border | Default story-tile surface — text on paper | | Hairline (Level 1) | `1px solid {colors.border}` | Between story tiles, module boundaries, data rows | | Rule (Level 2) | `2px solid {colors.border-strong}` | Editorial section boundaries, masthead underline | | Masthead Bar | `{colors.surface-dark}` fill, no shadow | Top navigation and live ticker — pure inversion | | CTA Surface | `{colors.primary}` fill | Subscribe button — orange, no shadow, no border | | Focus Ring | `2px solid {colors.focus-ring}` + 2px offset | Keyboard focus on interactive elements | **Shadow Philosophy**: Bloomberg has no `box-shadow` tokens. The page is flat by conviction — a financial instrument panel does not cast ambient shadows. Depth is communicated entirely through typographic weight, colour inversion (black nav over white page), and hairline rule weight. The terminal heritage shows: in Bloomberg's original context, screens had no compositing; everything had to read in tone and contrast alone. That discipline has migrated intact to the web. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Everything: buttons, cards, inputs, images, containers — the system default | | `sm` | 8px | Low-confidence detected only on one button element — treated as an edge case | | `pill` | 9999px | Rare — pill-style live badges in breaking-news contexts only | Bloomberg is a **strict square-corner system**. The 8px radius detected by dembrandt on the subscribe button appears to be a site-section variant, not the design system's primary shape language. The prevailing system is rectilinear: containers are rectangular because Bloomberg's information design descends from financial terminal screens and newspaper layout grids, not from the rounded-rect conventions of consumer apps. ## Components The complete component spec lives in the `components:` token block above. ### Buttons - **`button-primary`** — Bloomberg Orange (`{colors.primary}`) fill, white text, 24px bold BWHaasGroteskWeb, `{rounded.none}` corners, `18px 24px` padding. The subscribe CTA. Hover darkens to `{colors.primary-hover}`. - **`button-secondary`** — Terminal Black fill (`{colors.surface-dark}`), white text, same typographic treatment. Used for secondary CTAs in dark zones (the masthead's "Sign In" or footer CTAs). - **`button-ghost`** — White background, black text, same spec. Inline ghost CTAs where orange would be too loud. ### Cards & Story Tiles **Story Tile (flat)** - Background: `{colors.background}` (white) - Border: none at rest; `1px solid {colors.border}` as a separator between tiles - Border-radius: `{rounded.none}` - Padding: `{spacing.md}` (18px) internal - Hover: background shifts to `{colors.surface}` (light gray), no lift or shadow - Typography: `{typography.heading-sub}` headline above a `{typography.caption}` metadata row (section kicker + timestamp) **Inverted Section Header** - Background: `{colors.surface-dark}` (pure black) - Text: `{colors.on-primary}` (white) - Typography: `{typography.eyebrow}` uppercase label - Padding: `{spacing.sm}` vertical, `{spacing.md}` horizontal ### Inputs & Search - **`input`** — white background, `1px solid {colors.border}` at rest, `{rounded.none}` corners, BWHaasGroteskWeb 16px regular, `12px 16px` padding - **`input-focus`** — border shifts to `{colors.focus-ring}` (Bloomberg Orange), `2px` weight. No glow, no offset ring — the orange border IS the focus signal. ### Badges - **`badge-live`** — Bloomberg Orange fill, white UPPERCASE text, square corners, `{typography.eyebrow}` spec. Appears on live broadcast thumbnails and breaking-news bars. - **`badge-section`** — Terminal Black fill, white UPPERCASE text, same spec. Section category labels above story headlines (e.g., "MARKETS", "POLITICS", "TECHNOLOGY"). ### Navigation **Masthead** - Background: `{colors.surface-dark}` (black) - Logo: Bloomberg logotype in white, left-aligned (~140px wide) - Category labels: `{typography.nav-link}` in white, horizontal row - Right cluster: search, notifications, account, subscribe (orange CTA) - Hover: category label transitions to `{colors.primary}` (orange) - Border-bottom: `1px solid {colors.border-strong}` where masthead meets editorial canvas **Live Market Ticker** (secondary nav band) - Background: `{colors.surface-dark}` or `{colors.surface-muted}` - Ticker values: `{typography.data-ticker}`, coloured by direction (`{colors.data-positive}` / `{colors.data-negative}` / `{colors.data-neutral}`) ### Financial Data Tables - Header row: `{colors.surface-dark}` fill, `{colors.on-primary}` text, `{typography.data-ticker}` uppercase - Alternating rows: `{colors.background}` / `{colors.surface}` zebra striping - Positive values: `{colors.data-positive}`, negative: `{colors.data-negative}` - Cell padding: `{spacing.xs}` vertical, `{spacing.sm}` horizontal ## Do's and Don'ts ### Do - Use Bloomberg Orange (`{colors.primary}`) only for the primary subscribe CTA, live badges, focus rings, and link hover states — it is the brand's rarest chromatic moment and its authority depends on scarcity - Run BWHaasGroteskWeb weight 700 for all headlines and weight 400 for all body — the system has exactly two weight registers - Keep all corners square (`{rounded.none}`) on buttons, cards, images, and inputs — the rectilinear grid is Bloomberg's fingerprint - Use `{colors.data-positive}` and `{colors.data-negative}` exclusively for financial direction values — never repurpose these semantic colours for UI states - Separate story tiles with `1px solid {colors.border}` hairline rules — no shadows, no cards with chrome - Use `{typography.eyebrow}` in uppercase with `1px` letter-spacing for all section kicker labels above story headlines - Apply the black masthead (`{colors.surface-dark}`) for navigation only — never as a section background inside the editorial canvas - Size the subscribe CTA button label at 24px bold — its oversized weight is the commercial register, not a mistake ### Don't - Don't apply any `border-radius` other than `{rounded.none}` to editorial surfaces — round corners belong to consumer apps, not financial media - Don't add `box-shadow` to any element — Bloomberg's depth system is entirely flat (rules and inversion, no lighting simulation) - Don't introduce a secondary typeface — BWHaasGroteskWeb is the system's only voice; competing faces fragment the terminal authority - Don't use `{colors.primary}` as a section background or decorative fill — orange is a punctuation mark, not a canvas - Don't soften `{colors.surface-dark}` to gray for navigation — the masthead is pure black or it loses its architectural role - Don't apply `{colors.data-positive}` or `{colors.data-negative}` outside of actual financial data — semantic colours in UI contexts create false financial signals - Don't use the orange CTA for secondary actions — it carries commercial meaning and should appear once per page section at most - Don't replace hairline rules with card shadows to separate story tiles — the editorial flat grid is the system's integrity --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single column, masthead collapses to logo + hamburger + subscribe pill | | Mobile | 375–759px | Single column editorial feed, market data below fold, ticker scrolls horizontal | | Tablet | 760px–1023px | 2-column story grid (breakpoint confirmed by dembrandt at 760px), condensed nav | | Desktop | 1024–1279px | 3-column story grid, full horizontal nav, market data sidebar restored | | Large Desktop | ≥1280px | 4-column hero grid, full market data panels, max-width container active | ### Touch Targets - Primary CTA: 18px vertical padding + 24px font = ~60px tall — exceeds WCAG minimum - Nav category labels: compressed at ~40px — borderline on mobile, acceptable on desktop - Data ticker values: tappable rows at minimum 44px tall via touch-area extension ### Collapsing Strategy - **Masthead**: Full horizontal category nav → hamburger drawer under 760px; subscribe CTA persists as an orange pill - **Story grid**: 4-column → 3-column → 2-column → 1-column as viewport narrows; tile images switch to 16:9 aspect ratio throughout - **Market ticker**: Scrolls horizontally on mobile as a single-row strip; collapses to a "Markets" summary link in the smallest breakpoint - **Typography**: Display hero scales from 60px → 40px → 28px across breakpoints; body copy stays locked at 16px ### Image Behavior - Story thumbnails maintain 16:9 ratio across all breakpoints via `object-fit: cover` - Hero photographs run full-bleed within the story tile column, no art-direction swap - Market charts are responsive SVG/canvas — they resize but maintain aspect ratio - No image border-radius at any breakpoint (`{rounded.none}` applies to all imagery) --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Text (headlines): `{colors.ink}` - Text (body): `{colors.ink-secondary}` - Text (metadata): `{colors.ink-muted}` - Brand accent: `{colors.primary}` - Border / divider: `{colors.border}` - Masthead / nav: `{colors.surface-dark}` - CTA: `{colors.primary}` - Positive data: `{colors.data-positive}` - Negative data: `{colors.data-negative}` ### Example Component Prompts 1. "Build a Bloomberg-style article hero on `{colors.background}`. UPPERCASE BWHaasGroteskWeb `{typography.eyebrow}` section kicker in `{colors.ink-muted}` above a 60px weight 700 headline in `{colors.ink}` at 1.0 line-height. Below: a 16px weight 400 deck in `{colors.ink-secondary}` at 1.5 line-height. Full-width 16:9 image below the headline stack, `{rounded.none}` corners. Separate from the next tile with `1px solid {colors.border}`." 2. "Create a Bloomberg subscribe CTA button: `{colors.primary}` orange background, `{colors.on-primary}` white text, BWHaasGroteskWeb 24px weight 700, `{rounded.none}` corners, `18px 24px` padding. Hover state darkens background to `{colors.primary-hover}`. No shadow, no border." 3. "Design a Bloomberg masthead navigation bar: full-bleed `{colors.surface-dark}` black background, left-aligned Bloomberg logotype in white, horizontal category labels in `{typography.nav-link}` white across the center, and a `{colors.primary}` orange subscribe button right-aligned. Hover on category labels transitions text to `{colors.primary}`. Bottom edge: `1px solid {colors.border-strong}` where bar meets the editorial canvas." 4. "Create a financial data table: `{colors.surface-dark}` header row with white `{typography.data-ticker}` uppercase column labels. Alternating `{colors.background}` and `{colors.surface}` data rows, `{spacing.xs}` vertical padding per cell. Positive percentage values in `{colors.data-positive}`, negative in `{colors.data-negative}`, flat values in `{colors.data-neutral}`. No border-radius, 1px `{colors.border}` between rows." 5. "Build a Bloomberg live-event badge: `{colors.primary}` orange fill, `{colors.on-primary}` white text, BWHaasGroteskWeb 11px weight 700 UPPERCASE 'LIVE', `{rounded.none}` corners, `4px 8px` padding. Position it as an overlay in the top-left corner of a story thumbnail image." 6. "Design a story tile grid row: 3-column layout on white (`{colors.background}`). Each tile: full-bleed 16:9 image with `{rounded.none}` corners, a `{typography.eyebrow}` UPPERCASE section kicker in `{colors.ink-muted}` below, a `{typography.heading-sub}` headline in `{colors.ink}` at 1.2 line-height, and a `{typography.caption}` timestamp + byline row in `{colors.ink-muted}`. Separate tiles with `1px solid {colors.border}` vertical dividers. No shadows." ### Iteration Guide 1. **Start with the two-zone canvas**: paper-white editorial page (`{colors.background}`) with a pure-black masthead (`{colors.surface-dark}`) — the inversion is the architecture. 2. **Reserve orange for one purpose at a time**: `{colors.primary}` is the subscribe CTA or the live badge or the focus ring — never more than one orange moment per visual zone. 3. **Use weight as the only voice change**: BWHaasGroteskWeb 700 shouts, 400 reads. Never introduce a third face or a third weight. 4. **Keep corners square**: If any `border-radius` other than `{rounded.none}` appears on a container or button, remove it. 5. **Separate with rules, not shadows**: Story tile boundaries are `1px solid {colors.border}` hairlines. No `box-shadow` anywhere in the system. 6. **Eyebrow before headline**: Every story section should have an UPPERCASE `{typography.eyebrow}` kicker — "MARKETS", "TECHNOLOGY", "LIVE" — before the `{typography.heading-sub}` headline. 7. **Data colours are semantic only**: `{colors.data-positive}` and `{colors.data-negative}` appear only next to actual market data values — never on UI states, success messages, or decorative elements. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Bloomberg. Brand names and trademarks belong to their respective owners.