Cinematic Data Editorialism

# Cinematic Data Editorialism

## Philosophy

Cinematic Data Editorialism merges prestige science-fiction interface graphics with rigorous magazine pacing: telemetry is organized like a feature spread, annotations read like captions, and dark control-room surfaces are disciplined by a Swiss-style typographic grid rather than neon chaos.

### Values

- editorial hierarchy before decorative futurism
- dense information made legible through pacing and annotation
- dark-mode atmosphere with accessibility-aware contrast
- cinematic worldbuilding expressed through measured typographic restraint

### Anti-Values

- arcade neon overload without information structure
- generic SaaS dashboard cards with a sci-fi palette pasted on top
- skeuomorphic cockpit clutter that defeats reading flow

### Visual Character

- A dark graphite page field is segmented by hairline modular grid rules and inset panel strokes, so every zone feels typeset on a measured publication baseline rather than floating as isolated cards.
- Oversized high-contrast serif headlines sit against compact grotesk metadata columns, creating a prestige-editorial tension between cinematic narrative copy and operational telemetry readouts.
- Panels use transparent smoked surfaces with subtle radial glows and scanline noise, but the effects stay restrained and clipped inside severe rectangular frames instead of amorphous glass blobs.
- Numeric readouts, timestamps, and section indexes are rendered in mono with wide tracking and tabular rhythm, turning machine data into a visible secondary texture across the composition.
- Long horizontal dividers, side captions, and footnote-like callouts choreograph the page as if it were a mission dossier or museum wall text, not a component showroom.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#C9D8FF` |
| secondary | `#7FA4FF` |
| accent | `#5FF2D6` |
| background | `#070B11` |
| surface | `#101722` |
| text | `#F3F5F8` |
| muted | `#8D98AA` |
| border | `#2A3445` |
| error | `#FF6E7C` |
| success | `#7DFFB2` |
| warning | `#FFD36A` |
| info | `#6FC3FF` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Space Grotesk
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.55
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;700&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 6px
- **Md**: 12px
- **Lg**: 20px
- **Full**: 9999px

### Shadows

- **Sm**: 0 0 0 1px rgba(201,216,255,0.04), 0 10px 24px rgba(0,0,0,0.22)
- **Md**: 0 0 0 1px rgba(201,216,255,0.07), 0 18px 48px rgba(0,0,0,0.34)
- **Lg**: 0 0 0 1px rgba(95,242,214,0.08), 0 28px 80px rgba(0,0,0,0.42)

### Surfaces

- **Treatment**: noise
- **Card Style**: Smoked charcoal panels with layered linear gradients, restrained radial highlights, inset border lines, and clipped overflow that keeps atmospheric glow controlled inside the frame.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Borders are architectural and editorial: hairline separators for pacing, brighter accent rules for key modules, and inset framing that makes every pane feel plated into a larger instrument wall.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: deliberate

## Rules

### Composition

Build pages as editorial spreads with one dominant narrative column, one or two narrow metadata rails, and modular telemetry panes anchored to a visible baseline of horizontal rules.

### Hierarchy

Lead with a literary serif headline, then descend into grotesk summaries, mono metrics, and caption-scale annotations so information feels authored and sequenced rather than dumped.

### Density

High density, but controlled through compartmentalization: every dense data cluster must be paired with whitespace, labels, and dividers that preserve reading order.

### Signature Patterns

- Every major panel carries an inset top rule and a bottom metadata strip, making modules feel like dossier pages or screen captures mounted into a report.
- Section labels, timestamps, and quantitative chips use uppercase mono with expanded tracking and tabular numerals, creating a repeated machine-led typographic texture.
- Hero and feature blocks pair oversized serif titles with a narrow right-aligned factual column separated by a vertical rule, echoing magazine pull-quote structures inside the interface.
- Charts, maps, and progress bands sit over faint gridline scaffolds and scanline overlays so data appears instrumented without resorting to cartoon sci-fi chrome.
- Interactive controls reveal themselves through precise border brightening, underlines, and measured glow instead of soft fills, preserving the publication-like austerity.

## Layout

### Grid

Use a 12-column desktop grid with asymmetric spans, a two-column tablet reduction, and a single-column mobile stack while preserving side labels and sectional dividers wherever possible.

### Breakpoints

Desktop 1440 and above; tablet around 768; mobile around 375 with full-width modules and stacked control groups.

### Whitespace

Whitespace is deliberate and editorial: generous outer margins, compact internal panel padding, and larger inter-section gaps that mimic spread pacing between chapters.

## Guidance

### Do

- Pair narrative copy with telemetry so data never loses context.
- Use serif display moments sparingly but boldly against disciplined sans and mono systems.
- Keep glow, gradients, and noise clipped inside rigid frames and rule systems.

### Don't

- Do not flood the page with neon accents on every component.
- Do not collapse all information into identical dashboard cards.
- Do not use rounded consumer-app controls that break the instrumented editorial tone.