Neon Rationalism

# Neon Rationalism

## Philosophy

Neon Rationalism fuses Swiss editorial discipline with speculative interface atmospheres: rigid publication grids, evidence-forward hierarchy, and calm information architecture electrified by thin neon signal lines, telemetry notation, and dark-mode control-room contrast. It avoids chaotic cyberpunk clutter by letting fluorescent accents behave like annotation systems inside a sober, legible publishing frame.

### Values

- discipline before spectacle
- dense information made scannable through editorial hierarchy
- dark interfaces with measured, purposeful signal color
- science-fiction atmosphere grounded in real typographic order

### Anti-Values

- glitch noise as decoration without meaning
- random asymmetry that breaks reading flow
- over-saturated neon floods that reduce contrast

### Visual Character

- Deep charcoal and blue-black fields are organized by strict Swiss-style columns, with generous outer margins and visible alignment that makes every module feel typeset rather than improvised.
- Thin electric cyan and magenta rule lines act as annotation infrastructure around cards, charts, and controls, replacing bulky chrome with precision strokes and measured luminous edges.
- Large uppercase grotesk headlines pair with compact mono telemetry labels and restrained serif-free body copy, creating a publication-like hierarchy between editorial narrative and machine data.
- Panels use clipped corners, inset border channels, and radial glow hotspots that feel like retro-futurist instrument housings while preserving a rational rectangular grid.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#78F0FF` |
| secondary | `#FF5FD2` |
| accent | `#B6FF46` |
| background | `#071018` |
| surface | `#0D1721` |
| text | `#E8F4FF` |
| muted | `#8EA3B5` |
| border | `#29465C` |
| error | `#FF6B7A` |
| success | `#6FF7B3` |
| warning | `#FFC857` |
| info | `#72B7FF` |

### Typography

- **Heading Font**: Space Grotesk
- **Body Font**: IBM Plex Sans
- **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=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**: 12px
- **Lg**: 20px
- **Full**: 9999px

### Shadows

- **Sm**: 0 0 0 1px rgba(120,240,255,0.12)
- **Md**: 0 12px 32px rgba(0,0,0,0.35)
- **Lg**: 0 24px 72px rgba(4,10,18,0.72)

### Surfaces

- **Treatment**: gradient
- **Card Style**: Layered dark panels with subtle linear gradients, inner shadow channels, and restrained radial glow blooms at signal intersections.
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Borders are technical and exact: hairline outer frames, brighter inset channels, and occasional neon edge segments that imply instrument calibration.

### Motion

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

## Rules

### Composition

Compose screens like a dark editorial spread: a dominant lead story column, supporting telemetry modules, and clearly banded horizontal sections with shared baselines.

### Hierarchy

Use oversized headings for narrative framing, compact uppercase mono labels for metadata, and bright neon accents only where the eye must jump or a state must change.

### Density

High information density is welcome, but every dense area must be offset by deliberate gutters, separators, and stable type scales so scanning remains calm.

### Signature Patterns

- Every major panel uses a double-frame treatment: a muted outer border plus an offset inner rule or corner segment in cyan, creating a calibrated instrument-housing effect.
- Section headers combine oversized grotesk titles with small mono coordinate strings and horizontal rule lines that extend into the grid like editorial folios or telemetry baselines.
- Cards and dialogs use selective clipped corners or notch details on one or two edges, giving retro-futurist character without abandoning the core rectangular layout.
- Status chips, toggles, and chart legends use neon as a thin signal layer on dark surfaces, with glow kept to edge highlights and text underlines rather than full fills.

## Layout

### Grid

A 12-column desktop grid with asymmetric spans for narrative and data modules, collapsing to 8 columns on tablet and a single stacked flow on mobile.

### Breakpoints

Desktop 1440 and above, tablet around 768, mobile around 375 with stacked panels and full-width controls.

### Whitespace

Use strong perimeter margins, even internal padding, and narrow inter-module gutters so the page feels publication-designed rather than app-template generic.

## Guidance

### Do

- Pair rational grid structure with a very limited neon accent system.
- Let mono metadata and rule lines carry the sci-fi mood more than decorative illustration.
- Keep long-form annotations and operational data in the same typographic family so the screen feels editorially unified.

### Don't

- Do not turn every border and surface into a bright glow box.
- Do not break alignment just to appear futuristic.
- Do not rely on generic glassmorphism or blurred blobs that erase the publication character.