Speculative Publishing Interfaces

# Speculative Publishing Interfaces

## Philosophy

A dark-mode design language that treats speculative interfaces as if they were prestige editorial artifacts: telemetry, annotations, and reports are arranged with Swiss grid discipline, literary pacing, and cinematic restraint rather than chaotic neon excess.

### Values

- Rational composition before spectacle
- Long-form readability inside dense technical scenes
- Speculative atmosphere carried by typography, labeling, and calibrated light

### Anti-Values

- Arcade-style clutter without hierarchy
- Generic SaaS cards with a sci-fi palette pasted on top

### Visual Character

- A rigid multi-column publication grid with oversized outer margins, hairline dividers, and sharply aligned baselines organizes dashboards, reports, and side annotations into one continuous reading surface.
- Large condensed serif or display headlines sit against disciplined grotesk body text and monospaced telemetry, creating a literary front-page hierarchy where data feels edited rather than merely dumped.
- Dark charcoal surfaces are interrupted by cool cyan and amber signal accents, luminous rule lines, and radial glows that stay trapped inside panels so the interface feels atmospheric but never neon-chaotic.
- Every major module reads like a dossier spread: stamped metadata bars, marginal notes, numbered sections, and caption rails make operational UI feel like a curated science-fiction publication.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#9FE9FF` |
| secondary | `#A6A0FF` |
| accent | `#FFB86C` |
| background | `#070B12` |
| surface | `#111824` |
| text | `#EAF2FF` |
| muted | `#93A0B8` |
| border | `#2A3A4E` |
| error | `#FF6E7A` |
| success | `#6EE7B7` |
| warning | `#FFC857` |
| info | `#68D5FF` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: Space Grotesk
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.5
- **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;600&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(159,233,255,0.04), 0 8px 24px rgba(0,0,0,0.18)
- **Md**: 0 0 0 1px rgba(159,233,255,0.06), 0 18px 44px rgba(0,0,0,0.28)
- **Lg**: 0 0 0 1px rgba(159,233,255,0.08), 0 30px 80px rgba(0,0,0,0.42)

### Surfaces

- **Treatment**: gradient
- **Card Style**: Panels use layered charcoal gradients with faint inner glows and translucent top highlights so each block feels like illuminated archival paper behind glass.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Borders are quiet technical rules: cool, thin, and precise, with occasional brighter section spines that mimic editorial keylines and instrument traces.

### Motion

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

## Rules

### Composition

Compose every screen as a publication spread where one dominant narrative column is supported by narrow metadata rails, captions, and telemetry sidebars instead of isolated app cards.

### Hierarchy

Use oversized literary headlines, disciplined section labels, and compact mono data strings so readers can scan from story headline to evidence panels to fine-grain readings without losing place.

### Density

High information density is allowed, but spacing must separate narrative blocks from technical blocks and preserve calm through consistent baselines and repeated rule spacing.

### Signature Patterns

- Every major panel begins with a full-width metadata strap containing an uppercase monospace label, sequence number, and timestamp divided by thin luminous rules.
- Section bodies use asymmetric editorial columns where a wide reading area is paired with a narrow annotation or statistics rail separated by a persistent vertical keyline.
- Charts, cards, and image frames use inset top glows plus faint radial cyan illumination behind headings so the darkness feels backlit like a museum display rather than flat black UI.
- Primary actions and active states are indicated by double-line outlines or underlines, echoing publication keylines instead of conventional rounded app buttons.

## Layout

### Grid

A twelve-column desktop grid with outer gutters and recurring side rails; major compositions typically span 7/3/2 or 8/4 column groupings before collapsing to stacked sections.

### Breakpoints

Desktop 1440px uses 12 columns, tablet 768px reduces to 6 columns with stacked side rails, mobile 375px becomes a single reading column with full-width controls and horizontally scrollable data tables where needed.

### Whitespace

Whitespace works like editorial pacing: generous between major spreads, tighter inside telemetry groups, and always reinforced by keylines rather than empty emptiness.

## Guidance

### Do

- Pair expressive serif headlines with neutral grotesk body text and mono labels.
- Use marginal notes, captions, and metadata straps to make dense UI feel curated.
- Keep accent light localized to headings, signals, and active controls so reading comfort stays high in dark mode.

### Don't

- Flood the interface with saturated neon on every element.
- Break the grid with randomly sized floating cards.
- Use generic dashboard widgets without narrative framing or annotation.