Mission-Control Review

# Mission-Control Review

## Philosophy

Mission-Control Review merges aerospace telemetry dashboards with Swiss editorial pacing, framing dense operational data as a long-form review surface rather than a consumer app. It privileges calm dark contrast, disciplined annotation, and publication-grade hierarchy over neon spectacle.

### Values

- Operational clarity over cinematic clutter
- Editorial hierarchy that turns telemetry into readable narrative
- High-contrast dark surfaces with accessibility-aware restraint
- Evidence-first annotation and timestamped decision making

### Anti-Values

- Arcade cyberpunk glow without information structure
- Soft generic SaaS cards that erase technical gravity
- Overloaded color coding that sacrifices readability

### Visual Character

- A strict multi-column Swiss grid sits on a charcoal field, with oversized left-aligned deck headings and narrow telemetry rails that make the page feel like a mission dossier spread.
- Every major panel uses hairline inner rules, top-edge status bars, and clipped corner notches so containers read like technical review sheets instead of generic rounded cards.
- Monospaced numeric clusters are paired with restrained grotesk headlines and serif-free annotation captions, creating a contrast between narrative hierarchy and instrument readouts.
- Accent color is used as measured signal ink—cyan, amber, and red appear in thin rules, coordinate ticks, and active indicators rather than filling large surfaces.
- Long-form notes, figure labels, and evidence callouts are integrated directly into the dashboard composition so the interface feels half editorial review document and half live console.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#9BE7FF` |
| secondary | `#7C8EA3` |
| accent | `#F6B756` |
| background | `#081017` |
| surface | `#101A24` |
| text | `#E7F1F7` |
| muted | `#8A9BAE` |
| border | `#233545` |
| error | `#FF6D6D` |
| success | `#79E3A0` |
| warning | `#F6B756` |
| info | `#67C6FF` |

### Typography

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

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 6px
- **Md**: 10px
- **Lg**: 16px
- **Full**: 9999px

### Shadows

- **Sm**: 0 0 0 1px rgba(103,198,255,0.08)
- **Md**: 0 14px 40px rgba(0,0,0,0.28)
- **Lg**: 0 28px 80px rgba(0,0,0,0.42)

### Surfaces

- **Treatment**: gradient
- **Card Style**: Dark graphite panels use subtle vertical gradients with translucent overlays, making information layers feel stacked like instrument glass over printed briefing stock.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Borders are precise aerospace drafting lines: faint outer frames, brighter top rules, and occasional accent ticks that imply measured calibration rather than decoration.

### Motion

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

## Rules

### Composition

Compose screens like review boards: a narrative headline zone, a central evidence field, and flanking telemetry columns that support the main decision thread without competing for dominance.

### Hierarchy

Use large grotesk titles and compact monospace labels so operators can instantly distinguish story-level conclusions from metric-level evidence and procedural metadata.

### Density

High density but heavily gridded; clusters can be tight as long as labels, separators, and contrast maintain scanability.

### Signature Patterns

- All major modules use a clipped top-right or bottom-left notch created with pseudo-elements so the dashboard feels engineered from technical review plates rather than soft rectangles.
- Section headers pair uppercase monospace overlines with a long horizontal rule that continues into the grid, turning every panel title into a measured coordinate reference.
- Numeric readouts are grouped into bordered telemetry strips with evenly spaced cells, thin separator lines, and tiny status dots that reinforce instrument-panel rhythm.
- Editorial annotations appear as narrow side notes with rule-connected pointers into charts and tables, making explanatory commentary part of the structural layout instead of floating helper text.

## Layout

### Grid

Desktop uses a 14-column grid with a persistent left dossier column, a dominant central review span, and a right telemetry rail; tablet collapses to 8 columns and mobile to a single stacked narrative stream.

### Breakpoints

Desktop 1440+, tablet 768-1023, mobile 375-767 with modules reflowing from spread-like composition to sequential report blocks.

### Whitespace

Whitespace is intentional and editorial: tight within telemetry strips, generous around chapter transitions, and used to separate evidence clusters from narrative conclusions.

## Guidance

### Do

- Use accent color only to mark status, thresholds, and active coordinates.
- Frame dense data with clear labels, rules, and timestamps before adding visual flair.
- Let long-form annotations and summary findings coexist with charts inside the same grid logic.

### Don't

- Do not flood charts or panels with full-surface neon gradients.
- Do not use rounded consumer-product cards or playful iconography.
- Do not hide operational metadata behind overly minimal presentation.