Bloomberg Terminal Dense Data

---
name: bloomberg-terminal
description: Apply the Bloomberg Terminal Dense Data visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Bloomberg Terminal Dense Data, mentions terminal UI, amber terminal, financial terminal, or describes amber on pure black, 11–13px monospace everything, semantic up-blue / down-red data colors — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Bloomberg Terminal Dense Data Design System

Hyper-dense amber-on-black financial terminal aesthetic: pure #000000 panels packed edge-to-edge with 11–13px monospace data, amber #ffa028 for labels and emphasis, semantic blue #3b82f6 up-ticks and red #ff433d down-ticks, zero radii, zero shadows, zero whitespace — a keyboard-driven instrument, not a website.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Bloomberg Terminal Dense Data.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (terminal UI, amber terminal, financial terminal, market data density, trading screen), or describes its traits: amber on pure black; 11–13px monospace everything; semantic up-blue / down-red data colors; extreme density, 2–4px gaps; multi-panel tabbed grid; keyboard-first command line.

## Design tokens

### Color palette

- Pure black — every panel and the app frame: `#000000` (--color-bg)
- Primary data values, white monospace: `#ffffff` (--color-text)
- Bloomberg amber — labels, headers, highlights, selection: `#ffa028` (--color-accent)
- Positive ticks and gains (Bloomberg uses blue, not green, for up): `#3b82f6` (--color-data-up)
- Negative ticks, losses, alerts: `#ff433d` (--color-data-down)

### Typography

- Display / headings: IBM Plex Mono (fallback: Consolas, Menlo, monospace) (ideal: Bloomberg Prop, premium — use IBM Plex Mono as the free substitute)
- Body: IBM Plex Mono (fallback: Consolas, Menlo, monospace) (ideal: Bloomberg Prop, premium — use IBM Plex Mono as the free substitute)
- Mono / data: IBM Plex Mono (fallback: Consolas, Menlo, monospace)
- Type scale: 1.125 ratio, base 12px — computed steps: 12px / 14px / 15px / 17px / 19px / 22px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing 0.02em, uppercase
- Body: line-height 1.2, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 6, 8, 12, 16 — Extreme: 2–4px cell padding, 1.2 leading, panels butted directly against each other; the design goal is maximum data per pixel, and any whitespace is treated as waste.
- Border radius: none 0px — Nothing is rounded, ever. Panels, buttons, tabs, and cells are all hard rectangles.
- Border treatment: none — Panels separate by black gaps and uppercase amber header bars; where rules are needed use 1px solid #333333 hairlines or a 1px amber rule under headers.

### Shadows

- none: `none` — No elevation anywhere — the surface is a single flat plane like a CRT

### Layout

- Max content width: 2560px
- Full-bleed multi-panel grid: 2–6 independent tabbed panels tiled edge to edge, built for multi-monitor spans
- A command line sits at the top of each panel — functions are typed (mnemonic + <GO>), not clicked
- Tables dominate: dozens of columns, right-aligned numerals, uppercase amber column headers
- Function-key strip and numbered menu lists stand in for conventional navigation

### Effects

- Tick flashes: a cell's background blinks blue or red for one frame when its value updates
- Inverse-video selection: focused rows render black text on an amber bar
- Optional faint phosphor glow on amber text for CRT pastiche — the real terminal is flat

### Motion

- Easing: steps(1, end); durations 0ms / 80ms / 160ms
- State changes are instantaneous — panels swap, they never slide or fade
- The only 'animation' is data itself: flashing tick cells and scrolling news lines
- Cursor and selection moves are discrete jumps, mirroring keyboard navigation

## CSS variables (drop-in)

```css
:root {
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-accent: #ffa028;
  --color-data-up: #3b82f6;
  --color-data-down: #ff433d;
  --radius-none: 0px;
  --border-default: none;
  --font-display: "IBM Plex Mono", Consolas, Menlo, monospace;
  --font-body: "IBM Plex Mono", Consolas, Menlo, monospace;
  --font-mono: "IBM Plex Mono", Consolas, Menlo, monospace;
  --text-base: 12px;
  --leading-heading: 1.2;
  --leading-body: 1.2;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: steps(1, end);
  --duration-fast: 0ms;
  --duration-base: 80ms;
  --duration-slow: 160ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** No navbar: a black command bar with a blinking amber cursor where users type ticker + function mnemonics; below it, an amber uppercase panel title bar and numbered menu items
- **Hero:** There is no hero — a landing surface in this style opens straight into a live data grid with one amber headline line on top, exactly like a terminal panel
- **Card:** A 'panel': black region with a full-width amber uppercase header bar (black text on amber, or amber text with a 1px amber underline), data table inside at 2–4px cell padding
- **Button (primary):** Amber #ffa028 fill, black uppercase monospace label, 0px radius, 20–24px tall; keyboard shortcut shown in the label (e.g. 1) GO)
- **Button (secondary):** Black fill, 1px #333333 border, amber uppercase label; hover inverts to amber-on-black text emphasis, focus renders inverse video
- **Form fields:** Inline black field with amber monospace input text and a blinking block cursor; no visible box until focus, which adds a 1px amber underline — labels are uppercase amber prefixes on the same line

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Wall-to-wall data tables in glowing amber monospace on true black, every panel headed by an uppercase amber label bar, with price changes flashing blue or red in place — no chrome, no whitespace, no mouse required. Spend boldness here; keep everything else quiet.

## Do

- Set every character in the monospace stack and right-align all numeric columns
- Use amber for labels/emphasis, white for values, and blue/red strictly for directional data
- Pack tables to 2–4px padding and let density itself be the visual identity
- Make every action keyboard-reachable and show the shortcut in the UI

## Don't

- Don't add whitespace, rounded corners, shadows, or gradients — one soft card destroys the idiom
- Don't use green for gains; Bloomberg's up color is blue, and mixing conventions confuses traders
- Don't use amber for body data — it is a signal color, and overuse erases the hierarchy
- Don't animate transitions; anything slower than instant reads as broken on a terminal

## Accessibility notes

- Contrast is excellent by construction: white on black 21:1, amber #ffa028 on black ~11:1, blue #3b82f6 ~5.7:1 and red #ff433d ~6.1:1 — but 11–12px monospace is below comfortable reading size, so offer a font-size toggle
- Blue/red directional coding must be paired with +/- signs or arrows for color-blind users (Bloomberg itself shows signed values)
- Tick-flash effects should throttle under prefers-reduced-motion, and inverse-video selection must remain visible at high-contrast OS settings

## Reference sites

- Bloomberg Terminal: https://www.bloomberg.com/professional/products/bloomberg-terminal/
- Bloomberg UX design overview: https://www.bloomberg.com/company/values/tech-at-bloomberg/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip bloomberg-terminal.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/bloomberg-terminal.json

Settings → Capabilities → Skills → Upload skill → bloomberg-terminal.zip