Data Visualization as Aesthetic / Living Dashboard

# Typography System

## Display Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Clean, neutral sans-serif — labels and structure, no personality |
| **Examples** | Geist, Inter, IBM Plex Sans, Söhne |
| **Weight** | 500-600 (medium — confident but not heavy) |
| **Tracking** | 0.01em-0.03em (slightly closed, dense) |
| **Size** | `clamp(1.25rem, 2.5vw, 2.25rem)` — big but bounded by the dashboard frame |
| **Transform** | Sentence case for section titles, UPPERCASE for panel headers |

**Why neutral sans:** The numbers are the hero. Display type must be structurally clear and quiet so it acts as a label system, not a voice. A high-personality display face competes with the data — use a dependable sans that reads instantly at dashboard scale.

---

## Body Typeface

| Property | Specification |
|----------|--------------|
| **Register** | Same sans family as display, regular weight |
| **Examples** | Geist Regular, Inter Regular, IBM Plex Sans Text |
| **Weight** | 400 |
| **Tracking** | 0.005em-0.015em (standard) |
| **Size** | `clamp(0.875rem, 1vw, 1rem)` — 14-16px |
| **Line Height** | 1.4-1.5 (compact — dense cockpit text) |

**Why regular weight:** Body text in a dashboard is contextual — descriptions, annotations, callouts. Regular weight keeps it legible at small sizes on dark panels without the noise of a light weight receding into the background.

---

## Data & Numbers Typeface (THE DATA)

| Property | Specification |
|----------|--------------|
| **Register** | Monospace — every number, everywhere, always |
| **Examples** | JetBrains Mono, IBM Plex Mono, Geist Mono |
| **Weight** | 400 (mid) / 600 (headline metrics) |
| **Size** | `clamp(1rem, 1.5vw, 1.5rem)` for primary metrics; 12-13px for data-point labels |
| **Feature** | Tabular figures, fixed-width digits, zero `0` with slash or clear forms |
| **Transform** | Numeric values only — never uppercase/transform on a number |

**Why monospace everywhere:** Numbers align vertically. Sums, decimals, and counters must have identical digit widths regardless of content — this is the tabular-figures rule. JetBrains Mono and IBM Plex Mono both ship true tabular forms; do not fall back to a proportional font for "prettier" metrics. A chart with proportional digits reads as imprecise even when the values are exact.

---

## Micro / Label Type

| Property | Specification |
|----------|-------------|
| **Register** | Same sans family, regular weight, medium tracking |
| **Examples** | Geist Sans, Inter Regular |
| **Weight** | 400 |
| **Tracking** | 0.04em-0.08em (roomy, tick-label friendly) |
| **Size** | 10-11px |
| **Transform** | UPPERCASE for axis/category labels |

**Usage:** Axis values, legend labels, data-point captions, tooltip keys. The tight 10-11px labels are the texture of the cockpit — dense, precise, and legible only because their tracking and case are controlled.

---

## Type Scale

```
Display:   clamp(1.25rem, 2.5vw, 2.25rem)  — section titles
Body:      clamp(0.875rem, 1vw, 1rem)       — 14-16px, annotations
Metric:    clamp(1rem, 1.5vw, 1.5rem)       — monospace headline values
Data:      12-13px                           — monospace point labels
Micro:     10-11px                           — axis ticks, legend, captions
```

The scale is flat and precise — 10px to 36px. The range is deliberately narrow so every numerical value on screen is readable at a glance. Hierarchy comes from weight and monospace vs. sans, not from loud size jumps.

---

## Font Pairing Logic

**The two-voice system:** A clean sans for labels and prose + a monospace for every number. The pairings below are the sanctioned combinations.

| Role | Face |
|------|------|
| Sans (all structure/labels) | Geist Sans, Inter, IBM Plex Sans |
| Mono (all data/numbers) | JetBrains Mono, IBM Plex Mono, Geist Mono |

**Why this pairing:** Sans provides readability and modern neutrality; mono provides alignment and precision. They are the two registers of an instrument panel — letterforms describe, digits measure.

**Never:** Display serifs (too editorial), decorative/display gimmick fonts (compete with data), proportional-gap numerals without tabular features (breaks digit alignment), or mixing more than one mono family.

---

# Color Architecture

## Ground

The ground is darkness — the interface lives on near-black surfaces so the data is the brightest thing on screen. This is a cockpit: dark instrument panel, luminous readouts.

```css
--color-ground-dark: #0A0A0A;     /* Deepest black for page backgrounds */
--color-ground-panel: #111827;    /* Dark slate for data cards and panels */
--color-ground-panel-raised: #1F2937; /* Slightly lighter, for hovered/active cards */
```

**Why dark slate:** Pure black (#0A0A0A) reads as cockpit black; #111827 adds a cool slate undertone that keeps the palette from feeling sterile. Data hues render at their best contrast on near-black — the palette is engineered so series colors pop without needing saturation tricks.

---

## Categorical Data Scale

```css
--series-01: #1F77B4;   /* Tableau 10 blue — primary series */
--series-02: #FF7F0E;   /* Tableau 10 orange — secondary series */
--series-03: #2CA02C;   /* Tableau 10 green — growth/positive */
--series-04: #D62728;   /* Tableau 10 red — decline/negative */
--series-05: #9467BD;   /* Tableau 10 purple — categorical */
--series-06: #8C564B;   /* Tableau 10 brown — categorical */
--series-07: #E377C2;   /* Tableau 10 pink — categorical */
--series-08: #7F7F7F;   /* Tableau 10 gray — neutral/reference */
```

**Each series has a distinct hue.** Series identity comes from a categorical scale (Tableau 10 / Okabe-Ito style), never from lightness alone. When more series are needed, the Okabe-Ito alternatives (#D55E00, #0072B2, #009E73, #CC79A7) extend the family while preserving hue discrimination.

**Rule:** Assignment must be stable and semantic. Green is growth, red is decline, blue is the primary series. Reusing the same hue for two series is a data-error, not a style choice.

---

## Gridlines & Axes

```css
--color-gridline: rgba(148, 163, 184, 0.15);   /* Subtle slate gray — always present, never loud */
--color-axis: rgba(148, 163, 184, 0.35);       /* Axis lines and ticks — slightly stronger */
--color-data-ink: rgba(255, 255, 255, 0.92);   /* Near-white for data labels and annotations */
--color-gridline-strong: rgba(148, 163, 184, 0.3); /* Emphasis gridlines (major intervals only) */
```

**Why subtle gridlines:** The grid organizes the data; it should never compete with it. Grid values render at 15% opacity — visible enough to read the scale, faint enough that the chart reads as clean lines on dark, not a pattern.

---

## Text

```css
--color-text-primary: rgba(255, 255, 255, 0.92);  /* Near-white, for headings and data labels */
--color-text-secondary: rgba(148, 163, 184, 0.9); /* Slate gray, for labels and axis titles */
--color-text-muted: rgba(148, 163, 184, 0.6);    /* Faded, for secondary axis ticks and captions */
```

**Why translucent text:** Text sits on dark panels, not on a white canvas. Slightly translucent blue-gray text (slate #94A3B8 at 60-90%) recedes so data colors stay the visual signal. Full-opacity white is reserved for the data itself and primary headings.

---

## Active Data & Glow

```css
--color-active-point: #FDE047;              /* Amber highlight — the hovered/focused data point */
--color-glow: rgba(029, 199, 111, 0.35);   /* Subtle glow wash behind the active point */
}

--color-clicked-series: #FF7F0E;             /* Series highlight on interaction */
--color-selected-range: rgba(255, 255, 255, 0.12); /* Brush selection tint across the axis */
```

**Purpose:** One luminous accent — amber for the single active point — signals "read this now." The glow is a soft radial that sits behind the data, never over it. Every other color stays in the neutral-data family so the active point is unambiguous.

---

## Color Don'ts

| Don't | Do Instead |
|-------|------------|
| Light backgrounds (white/off-white) | Dark ground #0A0A0A to #111827 panels |
| Gradients across chart areas | Flat, categorical, distinguishable hues |
| More than two hues sharing shape/size | One hue per series — stable, distinguishable |
| Red-green as the only contrast | Colorblind-safe pairs, plus data ink (labels, lumance cues) with encoded value |
| Thick, heavy gridlines | Subtle gridlines at 15% opacity |
| Decorative color blocks | Color that carries data meaning — every hue means something |
| Muted/pastel data series | High-contrast, distinct-hue series — precision over decoration |

# Motion Principles

## Philosophy

Motion in Data Visualization Aesthetic is **informational and precise**. Every animation exists to show a change in data — nothing moves for decoration. Bar heights grow, lines draw themselves, numbers count up — each transition encodes the story the data is telling. The motion is fast enough to feel live, smooth enough to read, and never theatrical. This is a living dashboard: the data is always arriving, and motion is how the eye is told it arrived.

---

## Data Transitions (The Core)

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Bar growth | Height scale from baseline `scaleY(0)→1`, transform-origin bottom | 400-600ms | `cubic-bezier(0.22, 1, 0.36, 1)` |
| Line draw | Stroke-dashoffset from full to 0 (or `pathLength` draw) | 700-900ms | `ease-in-out` |
| Count-up | Integer rolls from previous value to new value | 500-900ms | `ease-out`, single tick at end |
| Area fill | Opacity 0→1 + clip-path reveal | 500ms | `ease-out` |
| Point pop-in | Scale 0→1 on data points, after line arrives | 200ms each, 50-80ms stagger | `ease-out` |

**The rules of data motion:** Animate the data, not the chart chrome. The transform should be driven by the value — a bar grows from zero, a line draws along its path, a number counts toward its target. Never animate a chart element to an arbitrary position; the motion must mirror the data change. Easing follows the "snappy but smooth" band: nothing slower than 900ms for a transition, nothing bouncy — spring overshoot reads as measurement error.

---

## Real-Time Updates

| Element | Animation | Duration | Easing |
|---------|-----------|----------|--------|
| Live series append | New point slides in from the right edge, path redraws | 300-400ms | `ease-out` |
| Value change | Crossfade + count-up roll on the metric | 400ms | `ease-out` |
| New data flash | Panel border or glow pulse, single beat | 300ms | `ease-in-out` |
| Disconnect / stale | Slow opacity fade to 60% | 1500ms | `ease-in-out` |

**Purpose:** When live data arrives, the change must be noticed but not alarming. A single subtle pulse on the panel that received data — never a full-screen flash, never a shake. The count-up roll is the signature move: the number visibly counts from its previous value to the new one, so the user perceives the magnitude of the change, not just its existence.

---

## Scroll-Triggered Chart Animations

| Element | Animation | Trigger |
|---------|-----------|---------|
| Bar chart | Bars grow from baseline (staggered 60ms per bar) | 25% of section visible |
| Line chart | Path draws left-to-right | 25% of section visible |
| Scatter plot | Points pop in (staggered 40ms) | 25% of section visible |
| Metrics row | Count-up + opacity 0→1 | 25% of section visible |
| Axis/grid | Fade in after data settles | 200ms after data animation |

**Key:** Charts animate **once**, on first scroll into view — a chart that redraws on every scroll is a nausea generator, not a dashboard. After the entrance pass, the chart is static (or live-updating, if it's a real-time panel). Entrance should read as "this chart is being rendered," not "this chart is showing off."

---

## Sparkline Micro-Animations

```css
.sparkline-path {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  transition: stroke-dashoffset 800ms ease-in-out;
}

.sparkline-value {
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease-in-out;
}
```

| Effect | Specification |
|--------|--------------|
| Sparkline draw | Path draws over 800ms on view, then idles |
| Value update | Tabular number swaps instantly (no count-up at micro scale) |
| Trend color | Green/red swap at 300ms when the sign of the trend flips |
| Live tick | 2px dot pulses on the latest point, every new data tick |

**Purpose:** Sparklines live in dense card grids where motion must be economical. The draw-once entrance keeps the cockpit calm; only the live tick repeats. At micro scale, count-up animation is noise — the value just updates, and the color change carries the trend information.

---

## Interaction States

| Element | Hover State | Active State |
|---------|------------|-------------|
| Data point | Scales 1→1.25, glow appears, crosshair guides snap to point | — |
| Bar / column | Brightness up 5%, value label fades in | — |
| Panel / card | Border brightens to gridline-strong, shadow lifts | Press: scale 0.99 |
| Legend item | Opacity 0.6→1; dims all other series | Click: toggles series visibility with 400ms fade |
| Axis labels | No hover motion — labels are static | — |

**Key rules:** Hover states are fast (100-200ms) and precise — a crosshair that snaps to a point is the correct "tooltip" motion. Hovering a legend item should fade the **other** series to 30% opacity so the hovered series stands out; dim the rest, never animate the target.

---

## Reduced Motion

When `prefers-reduced-motion: reduce`:
- Bar growth, line draw, count-up: jump to final value (no transition)
- Live update pulse: disabled
- Sparkline draw: instant
- Hover scale: disabled (brightness/color change only)

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

**Data integrity note:** Reduced motion must never change the data itself — the chart still shows the correct final values, just without the animated journey. The information is preserved; only the theater is removed.

---

## What NOT to Animate

| Never | Why |
|-------|-----|
| Decorative chart animations (bouncing bars, spinning donuts) | Motion encodes data; decoration lies about it |
| Bounce or spring overshoot on data | Overshoot past the true value reads as imprecision |
| Auto-rotating carousels of charts | The user reads at their own pace; a rotating chart forces a pace |
| Continuous idle motion on charts | Idle motion fakes "live data" when nothing changed |
| Animation on every scroll re-entry | Charts animate once on first view, then stay put |
| Camera/depth parallax | The dashboard is a flat instrument panel, not a scene |

# Layout Grammar

## Grid System

**Dense, organized, cockpit-like.** The layout is a dashboard grid — metrics, charts, and data cards arranged in a tight but readable system. Internally:

- Page background: dark (`#0A0A0A` to `#111827`)
- Metric grid: 12-column system, cards with 12-16px gutters
- Data cards: bordered by hairline gridlines in subtle gray, no heavy shadows
- Content width: max-width 1440px (cockpit density, not editorial whitespace)
- Alignment: strict left-aligned labels, right-aligned numerals, tabular figures throughout

---

## Hero Section

| Property | Specification |
|----------|--------------|
| Height | Full viewport — `min-h-[100dvh]` |
| Background | Dark `#0A0A0A`, subtle grid background pattern |
| Content | Live KPI strip + headline, all numbers in monospace |
| Headline size | `clamp(2rem, 4vw, 4.5rem)` — large, precise |
| Numbers | Count-up on load, tabular figures, right-aligned |
| Data points | Subtle glow on the active/latest data point |

```
┌─────────────────────────────────────────┐
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│  [grid background pattern]              │
│                                         │
│  1,284,392   ▸ 24.7%  ▸ 0.042s  ▸ $92.1 │
│  active    growth   latency   price     │
│                                         │
│  LIVE MARKET DATA                       │
│  Real-time metrics as the primary       │
│  visual language of the page            │
│  [ENTER COCKPIT]                        │
│                                         │
│  ── 12:00 ── 12:30 ── 13:00 ──         │
└─────────────────────────────────────────┘
```

**The hero is the data.** A live KPI strip with count-up numbers establishes the cockpit aesthetic immediately. The headline and supporting metrics share the viewport — nothing decorative.

---

## Section Spacing

```css
--section-padding-y: clamp(2rem, 6vh, 5rem);
--content-max-width: 1440px;
--grid-gutter: 12px;
--card-padding: 1.25rem;
```

**Spacing is dense but disciplined.** Sections feel like cockpit panels — information-rich, tightly packed, but with consistent rhythm. The density communicates "everything here is measured." Whitespace is used to organize, not to decorate.

---

## Layout Patterns

### Pattern 1: KPI Metric Strip
```
┌─────────────────────────────────────────┐
│  [Metric] [Metric] [Metric] [Metric]    │
│  1,284,392  24.7%   0.042s   $92.10     │
│  ──────     ──────  ──────  ──────     │
│  label      label   label   label       │
└─────────────────────────────────────────┘
```

### Pattern 2: Chart + Annotation Split
```
┌──────────────────┬──────────────────────┐
│                  │  ANNOTATION          │
│  [Line chart]    │  +24.7% growth       │
│  [gridlines]     │  Q3 vs Q2            │
│  [two series]    │  ──────────────────  │
│                  │  breakdown by        │
│                  │  segment, 10-11px    │
│                  │  micro-labels        │
└──────────────────┴──────────────────────┘
```

### Pattern 3: Live Dashboard Grid
```
┌──────────┬──────────┬───────────────────┐
│ [Spark]  │ [Spark]  │  [Bar chart]      │
│ ▁▃▅▂▇▄▁  │ ▇▆▃▅▂▄▇  │  ▃▅▇▂▄▆▃        │
├──────────┼──────────┤  (animated        │
│ [Count]  │ [Count]  │   growth)         │
│ 92,410   │ 18,332   ├───────────────────┤
├──────────┼──────────┤  [Donut]          │
│  ████░░  │  ██░░░░  │  ◔ ◕ ◕            │
└──────────┴──────────┴───────────────────┘
```

---

## Responsive Behavior

| Breakpoint | Layout Change |
|------------|--------------|
| **Desktop (1200px+)** | Full cockpit grid — KPI strip, multi-series charts, sidebar annotations |
| **Tablet (768px)** | Grid collapses to 2 columns, charts stack, micro-labels stay 10-11px |
| **Mobile (375px)** | Single column, KPI strip scrolls horizontally, sparklines above labels |

**On mobile:** The density compresses but never disappears — this style is information-rich at every size. Numbers stay monospace and tabular; charts reduce to their most essential series rather than growing decorative. Annotations drop below charts instead of beside them.

---

## Layout Don'ts

| Don't | Do Instead |
|------|------------|
| Decorative hero imagery | Live KPI strip with count-up numbers |
| Whitespace-heavy editorial layout | Dense, organized cockpit grid |
| Isolated floating cards | Connected grid of metrics and charts |
| Centered numerals | Right-aligned numerals, tabular figures |
| Rounded, consumer-style cards | Hairline-bordered panels on grid |
| Multiple overlapping layers | Flat, precise grid — depth comes from glow |
| Charts as page decoration | Charts and metrics as the primary content |

# Texture & Surface

## Primary Texture: Data Ink & Grid

The texture IS the chart system itself — gridlines, tick marks, axis rulers, and data marks. Texture comes from the visual grammar of measurement, not from decorative materials:

| Quality | Description |
|---------|-------------|
| **Gridline rhythm** | Repeating 1px gridlines on dark panels — the texture of the coordinate plane |
| **Tick marks** | Small 4-6px ticks along axes — the texture of measurement |
| **Data marks** | Dots, bars, and line segments — the texture of the data itself |
| **Panel borders** | 1px hairlines, slightly brighter than gridlines — the texture of instrument panels |
| **Monospace digits** | Tabular numerals repeating in aligned columns — the texture of precision |

**The goal:** Every surface should feel like it was machined from a coordinate system — as if the interface is the inside of a measuring instrument. The grid is the ground, and the data sits on top of it.

---

## Grid Backgrounds

```css
.grid-panel {
  background-color: #111827;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
}
```

| Scale | Use |
|-------|-----|
| 24px grid | Full-bleed chart backgrounds and hero metric panels |
| 12px grid | Dense data cards where finer measurement is implied |
| No grid | Text/content panels — grid only where data lives |

**Why grid backgrounds:** A faint Cartesian grid is the signature surface of the style — it makes every element on top of it read as a data element. Keep gridlines at 15% opacity; the grid should be felt more than seen.

---

## Chart Element Surfaces

```css
.data-point {
  fill: var(--series-01);
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4));
}

.axis-line {
  stroke: rgba(148, 163, 184, 0.35);
  stroke-width: 1px;
}
```

| Surface | Treatment |
|---------|-----------|
| Data points | Flat fills + subtle glow (`drop-shadow` 0 0 6px, 40% series color) |
| Bars/columns | Flat fill, 2-4px corner radius, no gradient |
| Lines | 2px stroke, crisp joins, no drop shadow |
| Gridlines | 1px, rgba slate at 15% |
| Axis rulers | 1px, rgba slate at 35% |
| Active point | Amber fill + stronger glow + white halo ring |

**Purpose:** The glow is the only "soft" surface in the style, and it is reserved for data — the active point and hovered series. Bars and lines stay flat and hard-edged: precision is communicated by clean geometry, not material rendering.

---

## Panel & Card Surfaces

| Panel | Treatment |
|-------|-----------|
| Page background | Flat #0A0A0A |
| Data card | #111827, 1px border rgba(148, 163, 184, 0.15), 8px radius |
| Raised/hovered card | #1F2937, border brightens to 0.3 |
| Metric header | 1px bottom hairline, 12px padding, mono value below |
| Tooltip | #1F2937 solid, 1px border, 6px radius, mono values |
| Divider | 1px hairline at 15% opacity — never a shadow |

**No gradients, no glass, no skeuomorphic materials.** Panels are flat, hairline-bordered, slightly separated by tone (#111827 on #0A0A0A). Depth is expressed by value (lighter panel = closer) and by border brightness — exactly how an instrument panel is layered.

---

## Surface Rules

| Rule | Specification |
|------|---------------|
| Hairlines everywhere | All borders and dividers are 1px — never thicker chrome |
| Radius ceiling | 8px max; charts and data marks stay at 2-4px |
| Glow budget | Glow only on active data points, hovered series, live-update pulse |
| No shadows | Panels separate by tone and hairline, not drop shadows |
| No gradients | Flat fills — gradients suggest uncertainty in the value |
| Monospace alignment | All numeric surfaces use tabular figures, right-aligned in columns |

**The texture is the data.** If a surface has no information on it — no number, no grid, no tick — it should be almost invisible. The interface is a set of measuring instruments, and the chrome should never out-shine the measurement.

---

## Texture Don'ts

| Don't | Do Instead |
|-------|------------|
| Decorative backgrounds (noise, grain, gradients) | Clean #0A0A0A with faint gridlines where data lives |
| Thick borders and heavy chrome | 1px hairlines, tone-separated panels |
| Rounded card blobs (16px+ radius) | 8px max radius, chart marks at 2-4px |
| Glassmorphism / frosted panels | Flat, opaque dark panels — precision reads on opaque |
| Drop shadows for depth | Tone steps (#0A0A0A → #111827 → #1F2937) |
| Embellished chart elements (3D bars, glossy pies) | Flat, precise 2D data marks |
| Subtle patterns competing with data | Gridlines at 15% — felt, never loud |

# Vocabulary Bank

## Primary Terms

| Term | Why It Matters |
|------|---------------|
| `sparkline` | A tiny inline chart that shows a trend at a glance — the heartbeat of a dashboard |
| `data-ink ratio` | The meaningful ink divided by total ink — every pixel must earn its place |
| `tabular figures` | Numerals where each digit column aligns — the foundation of readable data |
| `categorical color scale` | A distinct hue per data series so eyes can separate categories instantly |
| `cockpit layout` | Dense, organized grid of metrics, charts, and data cards — information-rich but ordered |
| `live data` | Real-time values that interpolate smoothly — data the page is always updating |

---

## Secondary Terms

| Term | Effect |
|------|--------|
| `gridlines` | Subtle reference lines in faint gray that anchor every chart |
| `axis labels` | Precise, clean labels at 10-11px that name every scale |
| `data labels` | Monospace callouts at series endpoints that state the exact number |
| `count-up` | Numbers that roll/tick from 0 to their value on mount or scroll |
| `bar growth` | Bars that animate scaleY/height from baseline to their full value |
| `line draw` | Path strokes that draw left-to-right, revealing the trend over time |
| `small multiples` | Repeated miniature charts side-by-side for comparing series with one scale |
| `tabular numerals` | Monospace figure alignment — decimals and thousand separators line up |
| `real-time interpolation` | Values easing between ticks instead of jumping — smooth data |
| `data card` | A dense metric block — label, big number, delta, mini sparkline |

---

## Context Terms

| Term | Mood |
|------|------|
| `fintech` | Money, risk, performance — numbers must read instantly |
| `analytical` | Rational, structured, information-dense |
| `cockpit` | Operator-grade density — everything at a glance |
| `information-rich` | Full of data but legible at a distance |
| `metrics` | The KPIs that drive decisions |
| `trends` | Movement over time made visible |
| `transparency` | Code-free, honest data — no decorative obfuscation |

---

## Banned Terms

| Term | Why It Breaks the Style |
|------|------------------------|
| `decorative charts` | Charts are content, not ornament — every mark must decode data |
| `imprecise numbers` | Data is exact; rounded floats destroy the aesthetic |
| `cluttered layout` | Cockpit density must stay organized — clutter is the failure mode |
| `non-monospace data` | Every number must use tabular monospace figures |
| `random/placeholder data` | Fake data reads as slop — series must be coherent and meaningful |
| `3D / skeuomorphic charts` | Fake depth and chrome chart junk, not precision |
| `wall of text` | Data carries the message — text is annotation, not the payload |
| `smooth gradients` | Flat, categorical colors — gradients make any series unreadable |
| `glossy dashboards` | Plastic gloss is the anti-aesthetic of cockpit precision |
| `missing axes` | Every chart needs readable axes and labels — unlabeled is broken |

---

## Prompt-Ready Phrases

```
"charts and metrics as the primary visual content — data ink over decoration"
"every number in a tabular monospace font with decimal-aligned digits"
"categorical color scale (Tableau 10 / Okabe-Ito) — one distinct hue per data series"
"subtle gray gridlines and precise axis labels at 10-11px"
"data labels in monospace at series endpoints"
"numbered roll-ups (count-up) tied to scroll; bars scale in from baseline"
"lines draw left to right on a 1200ms path animation"
"sparkline micro-animations that update with smooth interpolation"
"dense cockpit layout — grid of metrics, charts, and data cards, dark #0A0A0A"
"organized density — information-rich but never cluttered"
"clean sans-serif for label text, monospace for all numbers and data"
"no decorative charts, no imprecise numbers, no non-monospace data"
```

# When to Use

## Perfect For

| Context | Why This Style Works |
|---------|---------------------|
| **Fintech & trading platforms** | Charts and metrics are the product — precision and speed are the brand promise |
| **Analytics / BI dashboards** | Cockpit density (axis: 6) turns dense data into organized, readable surfaces |
| **Crypto / blockchain** | Real-time market data, live tickers, and sharp number updates embody the category |
| **Climate & science communication** | Data as hero communicates rigor and evidence (axis: 3 color, 4 typography) |
| **Sports analytics** | Stats, standings, and performance tracking are inherently chart-first |
| **Annual reports / investor relations** | Financial figures demand monospace precision and clean gridlines |
| **Dev tools / infrastructure** | Metrics, logs, and uptime dashboards already speak this visual language |
| **Unlimited authentic content** | Live updating numbers roll and interpolate — perpetual micro-motion with zero added visual load |

## Brand Personality Match

This style reinforces brands that are:
- **Precise** — tabular figures, exact decimal alignment, no fuzzy numbers
- **Analytical** — information-rich, evidence-led, trustworthy
- **Dense but organized** — cockpit information density, never clutter
- **Live** — real-time updates, counting numbers, animated transitions
- **Transparent** — data as hero means nothing to hide

This builds trust for brands that must **prove** their claims with numbers.

## Avoid When

| Context | Why It Fails |
|---------|-------------|
| **Emotive consumer brands** | Charts feel corporate and cold next to storytelling-led creative |
| **Fashion & lifestyle** | The analytical, cockpit aesthetic fights sensual, image-led branding |
| **Hero-driven campaigns** | The data grid leaves no room for big imagery or narrative flow |
| **Luxury / prestige** | Works against slow, minimalist, quiet-benefit positioning (see luxury-refined-restraint) |
| **Brands that can't back claims with numbers** | Charts expose the absence of real metrics — decorative charts are banned vocabulary |
| **Minimal editorial sites** | Dense cockpit layouts contradict spacious, typographic-first calm (see quiet-editorial) |

## Related Sibling Styles

- **dark-tech-terminal** — if you want the dark, technical, low-level system feel without the data-as-hero layout; pair names, do not blend the two.
- **swiss-mono-precision** — if you want monospace rigor driving layout and typography instead of living data; this style layers persistent computation on top.

## How to Decide

Ask: **"Is my product genuinely and visibly data-first — do metrics carry the narrative or just decorate it?"**

If yes → Data Visualization as Aesthetic / Living Dashboard.
If no → Consider swiss-mono-precision (if you want precision in typography and layout without live data), data-as-texture (if you want charts as background texture rather than content), or dark-tech-terminal (if you want an earthy, command-line feel).

# Reference Gallery

## Live Sites

### Financial Times Graphics (ft.com, ft.com/chartbook)
- **What works:** The gold standard for editorial data design — restrained categorical color, hairline gridlines, impeccable annotation, and data-ink ratio discipline
- **URL:** ft.com — Visual & Data Journalism section

### The Pudding (pudding.cool)
- **What works:** Essays where charts ARE the storytelling — scroll-triggered chart animations, bespoke interactive data narratives
- **URL:** pudding.cool

### Bloomberg Professional (bloomberg.com/professional)
- **What works:** The ultimate cockpit-density reference — four-panel layouts, terminal-grade precision, monospace numerals, dense-but-organized information
- **URL:** bloomberg.com/professional

### Observable (observablehq.com)
- **What works:** Chart-maker with self-confidence — data-driven layout, precise axes, sample-heavy composition that treats charts as design content
- **URL:** observablehq.com

### Stripe Dashboard (stripe.com)
- **What works:** Premium commercial data design — dark surfaces (#0A0A0A to #111827 range), distinct series hues, smooth number transitions, micro-labels at 10-11px
- **URL:** stripe.com — Dashboard documentation and product pages

### Our World in Data (ourworldindata.org)
- **What works:** Scientific credibility through clarity — every chart precise, labeled, sourced; categorical color scales done responsibly
- **URL:** ourworldindata.org

### TradingView (tradingview.com)
- **What works:** Real-time data with smooth interpolation, sparkline micro-animations, rolling/counting numbers, live updates as the primary visual content
- **URL:** tradingview.com

### GitHub Contribution Graph (github.com)
- **What works:** A single grid reading as data art — categorical density scales, tabular alignment, familiar at a glance
- **URL:** github.com — profile activity view

## Key Visual References

### Chart & Grid Style
- **Data ink ratio** — remove every mark that isn't data; gridlines subtle gray, never dominant
- **Hairline borders** — 1px rules, precise scale marks, consistent axis padding
- **Sparklines** — micro-charts inline with text, no axes, just the trend
- **Categorical color scales** — each series a distinct hue, high contrast on dark, never gradient-filled decorative charts
- **Number formatting** — tabular figures, decimal alignment, consistent precision per metric

### Color References
- **Dark backgrounds** — #0A0A0A base, up to #111827 for raised surfaces
- **Data hues** — high-contrast distinct series colors (e.g., cyan, amber, magenta, lime) on near-black
- **Gridlines** — subtle gray at low opacity, present but secondary
- **Accents** — glow on active data points only, restrained

### Typography References
- **Monospace for all numbers** — JetBrains Mono, IBM Plex Mono, Geist Mono
- **Clean sans for labels** — neutral grotesk, never decorative
- **Micro-labels** — 10-11px, precise, uppercase or tracked as needed
- **Tabular figures everywhere** — columns of numbers align vertically

### Motion References
- **Live data interpolation** — smooth tweening on each update, no jumps
- **Scroll-triggered chart draw** — axes and lines animate in on entry
- **Sparkline micro-animations** — small, constant, subtle
- **Number counting/rolling** — values roll to new figures, 300-600ms, ease-out

## Screenshot Notes

> When capturing references for this style, look for:
> - The data (charts, metrics, sparklines must be primary visual content — not decoration)
> - The numbers (must be monospace, tabular, decimal-aligned)
> - The grid (subtle gray gridlines, hairline rules, organized density — not clutter)
> - The color (dark backgrounds, distinct series hues, restrained accents)
> - The motion (smooth interpolation, scroll-triggered draw, counting numbers)
> - The labels (micro 10-11px, precise, never imprecise or rounded casually)
> - The overall mood (must feel analytical, precise, cockpit-like — a living dashboard)