Neo-Editorial Tech

# Neo-Editorial Tech

## Philosophy

Neo-Editorial Tech frames software and research interfaces as premium digital publishing. Information should feel authored, paced, and cited, combining contemporary product clarity with the gravity, whitespace, and typographic ceremony of a serious magazine feature.

### Values

- reading-first hierarchy over dashboard noise
- high-contrast editorial pacing with clear metadata and captions
- warm human texture balanced with precise technical annotation

### Anti-Values

- generic SaaS card farms
- cold neon futurism without readability
- playful consumer UI ornament that weakens authority

### Visual Character

- Large high-contrast serif headlines sit inside wide asymmetric columns while compact uppercase sans metadata rails create a deliberate magazine spread rhythm across the page.
- Panels use warm paper-toned translucent surfaces with backdrop blur, hairline rule borders, and soft shadow depth so every module feels like a printed sheet hovering above an editorial desk.
- Thin mono labels, issue markers, timestamps, and figure captions are rendered in uppercase tracked microtype, creating a layer of technical annotation around the primary reading experience.
- Accent color appears as restrained oxblood red underlines, quote bars, progress rules, and callout markers instead of filled buttons, preserving a literate and premium tone.
- Images, pull quotes, metrics, and side notes are arranged in uneven but aligned columns with generous gutters, emphasizing curation and page composition rather than uniform component grids.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#161412` |
| secondary | `#655d56` |
| accent | `#b13a2e` |
| background | `#f7f3ee` |
| surface | `#fffaf5` |
| text | `#161412` |
| muted | `#7a7068` |
| border | `#cfc3b7` |
| error | `#b5483f` |
| success | `#2f6a53` |
| warning | `#b18646` |
| info | `#496c88` |

### Typography

- **Heading Font**: Instrument Serif
- **Body Font**: Manrope
- **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=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 10px
- **Md**: 18px
- **Lg**: 28px
- **Full**: 9999px

### Shadows

- **Sm**: 0 12px 24px rgba(22,20,18,0.05)
- **Md**: 0 18px 36px rgba(22,20,18,0.08)
- **Lg**: 0 28px 80px rgba(22,20,18,0.12)

### Surfaces

- **Treatment**: paper
- **Card Style**: translucent warm paper panels with subtle blur and layered gradients
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: hairline editorial rules with occasional stronger dividers for quote bars and section separators

### Motion

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

## Rules

### Composition

Compose interfaces like an annotated feature spread: a dominant lead story column, supporting side rails, and small utility clusters that never overpower the reading path.

### Hierarchy

Use dramatic serif display type for the narrative headline, uppercase sans metadata for navigation and system labels, and mono captions for figures, metrics, and timestamps.

### Density

Overall density is moderate and breathable; high-information zones exist, but every cluster needs margin, separators, and caption structure so the page still feels edited.

### Signature Patterns

- Every major panel uses warm translucent paper surfaces with backdrop-filter blur, a 1px hairline border, and a large rounded rectangle silhouette to simulate layered printed sheets.
- Section labels, figure numbers, and navigation items are rendered as uppercase tracked microtype using a mono or compact sans face, often separated by thin horizontal rules.
- Headline groups pair oversized italic-capable serif typography with restrained accent underlines or left-edge quote bars instead of heavy filled color blocks.
- The layout relies on asymmetric editorial grids where a wide story column is offset by narrower side annotations, pull quotes, and data fragments that align to shared baselines.
- Accent red is applied as rule lines, active state strokes, tag outlines, and chart highlights, never as saturated background floods, so emphasis feels typeset rather than dashboard-like.

## Layout

### Grid

Desktop uses a 12-column editorial grid with a dominant 7-column story area, a 3-column note rail, and a 2-column utility strip; interior panels also use nested split grids for article and data pairings.

### Breakpoints

Desktop 1440px and above keeps multi-column spread composition; tablet at 768px collapses to stacked main-and-side sections with two-column internals; mobile at 375px becomes a single reading column with full-width controls and horizontally scrollable tables only where necessary.

### Whitespace

Whitespace is generous and directional, with large vertical spacing around headline blocks and measured gutters between annotation modules to preserve magazine pacing.

### Responsive

- **Desktop**: 12-column editorial spread
- **Tablet**: 6-column stacked editorial board
- **Mobile**: single-column reading flow with full-width modules

## Guidance

### Do

- Use long-form content, captions, and metadata as first-class design material.
- Pair warm neutral surfaces with precise rule lines and one restrained accent color.
- Create hierarchy through typography, spacing, and annotation instead of oversized buttons or bright fills.

### Don't

- Do not turn the language into a generic analytics dashboard.
- Do not replace the serif-and-microtype contrast with uniform sans typography.
- Do not flood panels with heavy color backgrounds, loud gradients, or gadget-like chrome.