Literary Future Monograph

# Literary Future Monograph

## Philosophy

A dark editorial interface language that treats science-fiction data as if it were typeset for a prestige literary monograph: measured Swiss grid logic, long-form reading comfort, restrained telemetry overlays, and cinematic worldbuilding expressed through annotation rather than neon spectacle.

### Values

- Rational editorial pacing over arcade futurism
- Readable dark surfaces with disciplined contrast and long-form typography
- Evidence-rich interfaces where captions, footnotes, and marginalia carry narrative weight

### Anti-Values

- Chaotic HUD clutter without hierarchy
- Glow-heavy cyberpunk styling that sacrifices reading comfort

### Visual Character

- Wide asymmetric publication grid with a fixed left metadata rail, a dominant central text column, and a narrow right marginalia column that behaves like printed scholarly notes translated into CSS grid.
- Hairline cyan and amber telemetry rules intersect large blocks of near-black space, while oversized serif pull quotes and chapter numerals create a monograph-like rhythm inside the dashboard.
- Panels use layered double borders, inset rule lines, and small uppercase labels in mono to make every module feel archived, catalogued, and cross-referenced rather than app-like.
- Data visualizations and controls are embedded inside editorial spreads, with captions, issue numbers, timestamps, and provenance stamps placed as deliberate typographic furniture.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#8EE7FF` |
| secondary | `#E7D7A2` |
| accent | `#F26B8A` |
| background | `#071015` |
| surface | `#0E1A21` |
| text | `#F2ECDD` |
| muted | `#8A989E` |
| border | `#2A414B` |
| error | `#FF6B6B` |
| success | `#73E2A7` |
| warning | `#F2C572` |
| info | `#68C7FF` |

### Typography

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

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 0 0 0 1px rgba(142,231,255,0.06)
- **Md**: 0 18px 50px rgba(0,0,0,0.32)
- **Lg**: 0 30px 90px rgba(0,0,0,0.42)

### Surfaces

- **Treatment**: gradient
- **Card Style**: Layered charcoal panels with vertical gradients, faint radial telemetry blooms, and translucent top washes that preserve long-form reading contrast.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Borders are archival and instrument-like: fine outer strokes, inset inner rules, and selective cyan or amber spines that feel indexed rather than decorative.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: deliberate

## Rules

### Composition

Compose screens as editorial spreads instead of component shelves: a masthead, chapter framing, narrative body copy, evidence modules, and compact telemetry all sharing one publication grid.

### Hierarchy

Lead with monumental chapter titling and deck copy, then descend through mono section labels, annotated charts, and dense but carefully spaced metadata tables.

### Density

High information density, but ventilated by generous gutters, caption bands, and repeated rule lines that keep dense modules readable on dark surfaces.

### Signature Patterns

- Every major panel carries a double-frame treatment: one outer border plus an inset rule created with pseudo-elements, giving the sense of a catalogued plate in an archive.
- Section headings pair a large serif or grotesk title with a small uppercase mono kicker and a horizontal telemetry rule that continues beyond the text into adjacent empty space.
- Metric cards use oversized numerals aligned to the bottom edge, with compact provenance labels and timestamp stamps positioned in opposing corners like editorial folios.
- Interactive controls and tables are embedded inside captioned figure blocks, with footnote numbers, tiny divider dots, and border spines reinforcing a scholarly publication mood.

## Layout

### Grid

A 14-column desktop grid with dedicated metadata and marginalia rails; collapses to 8 columns on tablet and a single reading column with stacked evidence modules on mobile.

### Breakpoints

Desktop 1440+, tablet 768-1023, mobile 375-767. Preserve reading order: masthead, synopsis, figures, metrics, notes, controls.

### Whitespace

Use oversized top and side margins around chapter openings, then tighten inside evidence panels; whitespace should feel like page architecture, not empty app padding.

## Guidance

### Do

- Use annotation, captions, and timestamps as first-class visual material.
- Balance luminous accent lines with large calm fields of charcoal and warm text.
- Let dashboards read like a report or exhibition catalogue spread before they read like SaaS UI.

### Don't

- Do not use rainbow neon gradients or excessive blur as a substitute for hierarchy.
- Do not collapse everything into equally weighted cards with generic UI spacing.
- Do not remove long-form reading comfort in pursuit of cinematic density.