Retro-Futurist Systems Journalism

# Retro-Futurist Systems Journalism

## Philosophy

Retro-Futurist Systems Journalism merges mission-control instrumentation, late-20th-century speculative interface fiction, and rigorous editorial page architecture into a dark, information-forward publishing system. It treats every screen as a spread from a future-facing investigative magazine: annotated, gridded, data-dense, and cinematic, yet disciplined enough that long-form reading, telemetry scanning, and evidence comparison can coexist without chaos.

### Values

- Editorial legibility under data density
- Worldbuilding through structured annotation
- Cinematic futurism constrained by publishing discipline
- High-contrast accessibility in dark environments

### Anti-Values

- Pure neon spectacle without reading hierarchy
- Soft consumer SaaS minimalism that erases narrative texture
- Chaotic cyberpunk clutter with no rational grid

### Visual Character

- A dark graphite field carries razor-thin cyan grid lines and inset panel seams, making the full composition feel like a printed investigative spread overlaid on a mission-control plotting surface.
- Display headlines use a condensed uppercase grotesk with generous tracking while long-form annotation uses a readable serif, creating a deliberate tension between newsroom authority and speculative instrumentation.
- Every major module is framed by asymmetrical rule systems: one heavy vertical accent rail, multiple fine horizontal dividers, and corner metadata labels that simulate archival dossier indexing.
- Data points, badges, and callouts glow with restrained amber and electric cyan against matte charcoal surfaces, using luminous accents as navigational punctuation rather than immersive full-screen neon wash.
- Charts, cards, and article excerpts sit on a strict editorial grid with visible column logic, but selected panels break the rectangle through clipped corners and circular telemetry overlays to signal retro-futurist machinery.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#7ce7ff` |
| secondary | `#ffb86b` |
| accent | `#ff6b8f` |
| background | `#070b11` |
| surface | `#111923` |
| text | `#edf3f7` |
| muted | `#8e9aa7` |
| border | `#30404f` |
| error | `#ff6b6b` |
| success | `#79e2a2` |
| warning | `#f3c969` |
| info | `#69c8ff` |

### Typography

- **Heading Font**: Barlow Condensed
- **Body Font**: Cormorant Garamond
- **Mono Font**: Space 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=Barlow+Condensed:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Space+Mono:wght@400;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(124,231,255,0.05), 0 8px 24px rgba(0,0,0,0.28)
- **Md**: 0 0 0 1px rgba(124,231,255,0.08), 0 16px 40px rgba(0,0,0,0.36)
- **Lg**: 0 0 0 1px rgba(124,231,255,0.12), 0 24px 72px rgba(0,0,0,0.45)

### Surfaces

- **Treatment**: gradient
- **Card Style**: Matte charcoal panels with subtle top-to-bottom tonal gradients, inset seams, fine grid overlays, and occasional radial illumination behind priority telemetry modules.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Borders feel like technical drafting rules: mostly thin and cool-toned, interrupted by emphatic vertical accent rails and occasional clipped machine corners.

### Motion

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

## Rules

### Composition

Compose pages as editorial investigations rather than component inventories: a headline deck, evidence-led hero, telemetry summaries, analytical sidebars, and data modules all aligned to a visible multicolumn publishing grid.

### Hierarchy

Use condensed uppercase display type for navigation, labels, and numerical framing; reserve the serif face for summaries, notes, and long-form reading so information can scan quickly without losing narrative authority.

### Density

High density but never crowded: every zone contains multiple informational layers separated by rules, labels, spacing bands, and contrast shifts rather than empty minimalist whitespace.

### Signature Patterns

- Every major panel uses a heavy left accent rail paired with thin full-perimeter borders and at least two internal rule dividers, producing a dossier-like stack of indexed information.
- Section headers combine an overline metadata label in monospace, a condensed uppercase title, and a trailing horizontal rule that extends across the remaining grid column width.
- Selected cards and hero modules use clipped corner geometry with circular radar or reticle overlays created through pseudo-elements, signaling retro-futurist machinery without overwhelming readability.
- Tables, stat blocks, and annotation callouts include small uppercase index codes in monospace positioned at corners or margins, making the screen feel archived, cataloged, and editorialized.
- Interactive controls glow through border, shadow, and background shifts only at focus or hover, keeping the base state restrained and publication-like instead of permanently neon-saturated.

## Layout

### Grid

A 12-column desktop editorial grid with persistent gutters, collapsing to 8 columns on tablet and a single-column stack on mobile; key modules span 3, 4, 5, or 8 columns to preserve publication rhythm.

### Breakpoints

Desktop ≥ 1200px, tablet 768-1199px, mobile < 768px. Horizontal data areas may scroll within framed containers, but primary reading flow must re-stack without page-level overflow.

### Whitespace

Whitespace appears as calibrated bands between sections and within panels, more like magazine pacing than airy app minimalism; tight internal clusters are balanced by strong outer margins and separators.

## Guidance

### Do

- Use luminous cyan and amber as precise navigational accents against matte dark surfaces.
- Keep editorial reading zones intact with serif body copy and generous line height.
- Reveal the grid through rules, aligned edges, and consistent metadata placement.
- Layer annotations and telemetry so worldbuilding enriches rather than interrupts comprehension.

### Don't

- Do not flood full surfaces with neon gradients that reduce reading contrast.
- Do not replace the serif reading voice with generic UI sans body copy everywhere.
- Do not use soft cards, playful rounding, or consumer-dashboard emptiness.
- Do not let decorative sci-fi chrome break the underlying editorial order.