Nocturne Grid Editorial

# Nocturne Grid Editorial

## Philosophy

Nocturne Grid Editorial is a digital editorial language for magazines, journals, and cultural publications that want the intellectual rigor of Swiss modernism without inheriting its white-paper brightness. It treats the screen as a dark press sheet: black and graphite fields hold precise columns, restrained accents, and disciplined typography that feels objective at a glance yet cinematic in atmosphere. The goal is not decorative darkness. The goal is compositional focus. Dense stories, issue lineups, contributor notes, metrics, and production controls all live inside a grid system that privileges alignment, interval, and pacing over ornament. Where many dark interfaces rely on glowing gradients and soft cards, this language insists on crisp structure, hard seams, and a deliberate editorial rhythm. The visual drama comes from scale contrast, measured emptiness, and the tension between very fine rules and oversized grotesk headlines. It borrows from International Typographic Style through asymmetry, modular grids, left alignment, and hierarchy created by scale rather than boxes. It borrows from magazine design through sequencing, cover-line pacing, and the idea that every panel is part of a spread, not a standalone widget. In practice, that means interfaces should feel curated and typeset: captions sit in narrow columns, utilities are reduced to small uppercase labels, and every block looks placed rather than merely arranged. The dark palette is handled ergonomically, with softened contrast bands and controlled accent use so long reading sessions remain comfortable. This language is for editorial systems where authority comes from restraint, not exuberance.

### Values

- Grid discipline over freeform composition; every major edge should lock to a repeatable column or baseline system.
- Objective typographic hierarchy; size, weight, and spacing create emphasis before color or illustration does.
- Asymmetric balance; layouts should feel dynamic through offset columns and unequal spans rather than centered symmetry.
- Atmospheric darkness with readable contrast; dark surfaces should support reading instead of turning the interface into neon theater.
- Editorial pacing; alternate dense information bands with large quiet fields so the interface reads like a sequence of spreads.
- Functional reduction; controls, filters, and metadata should be compact, precise, and subordinate to the content narrative.
- Material honesty; rules, borders, and separators should be visibly intentional rather than hidden under shadows.
- Typographic seriousness; grotesk headlines, clean body copy, and tabular metadata should feel like a publication system.

### Anti-Values

- Soft generic SaaS cards with floating shadows and center-aligned marketing layouts.
- Glow-heavy cyberpunk dark mode that reduces legibility and overwhelms editorial content.
- Playful rounded components that weaken the sense of institutional rigor.
- Overillustrated interfaces where decoration competes with the reading order.
- Color-first hierarchy that makes structure depend on accents instead of typography and alignment.

### Visual Character

- Oversized uppercase grotesk headlines that sit flush-left in wide dark fields with generous tracking and tight vertical rhythm.
- Hairline grid rules and column dividers that remain visible across panels, making the entire screen feel typeset on a shared scaffold.
- Stacked charcoal surface bands with subtle tonal separation instead of floating bright cards, creating the feeling of layered print spreads.
- Small monospace or tabular metadata labels in caps, used as issue codes, timestamps, and section markers along the edges of content.
- Asymmetric multi-column compositions where one dominant story block is counterweighted by narrow annotation, schedule, or data columns.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#F3F1EA` |
| secondary | `#A7B0B8` |
| accent | `#D9FF66` |
| background | `#0A0B0D` |
| surface | `#111317` |
| text | `#F5F3EE` |
| muted | `#8B919A` |
| border | `#2A2F36` |
| error | `#FF6B6B` |
| success | `#69E2A1` |
| warning | `#F5C86A` |
| info | `#7DB7FF` |
| surface_alt | `#171A1F` |
| surface_emphasis | `#1E232A` |
| ink_soft | `#C9CDD3` |
| rule_bright | `#3C424C` |

### Typography

- **Heading Font**: Schibsted Grotesk, Arial Narrow, sans-serif
- **Body Font**: Schibsted Grotesk, Arial, sans-serif
- **Mono Font**: IBM Plex Mono, monospace
- **Base Size**: 16px
- **Scale Ratio**: 1.2
- **Line Height**: 1.58
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Schibsted+Grotesk:wght@400;500;700;800;900&display=swap
- **Weights**: {"regular":400,"medium":500,"bold":700,"black":900}
- **Roles**: {"display":"Schibsted Grotesk 800-900 uppercase","body":"Schibsted Grotesk 400-500","data":"IBM Plex Mono 500 with tabular numerals"}

### Spacing

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

### Radii

- **None**: 0
- **Sm**: 2px
- **Md**: 6px
- **Lg**: 12px
- **Xl**: 18px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(255,255,255,0.04)
- **Md**: 0 0 0 1px rgba(255,255,255,0.02), 0 18px 48px rgba(0,0,0,0.24)
- **Lg**: 0 0 0 1px rgba(255,255,255,0.03), 0 30px 80px rgba(0,0,0,0.38)

### Surfaces

- **Treatment**: gradient
- **Card Style**: layered graphite bands with subtle top-to-bottom tonal shifts and inset separators, never floating bright cards
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: precise editorial rules; hairline seams and dividers create structure more often than shadows do

### Motion

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

## Rules

### Composition

Use a 12-column frame on desktop with one dominant content slab spanning five to seven columns and supporting material occupying narrow side columns. Keep all primary modules flush to the same outer rails. Treat every horizontal band as part of a spread, using top and bottom rules to establish pacing. Never center a major heading; align it to the left column edge and let scale create drama. Use tonal surface shifts to separate layers instead of detached cards. Reserve the accent color for issue state, one or two key metrics, and active selection only. Place metadata in small uppercase or monospace fragments at the start or end of rows rather than inside badges whenever possible. Long-form content blocks should include narrow measure captions or side annotations to reinforce the editorial structure.

### Hierarchy

Hierarchy begins with headline scale, then with column span, then with tonal contrast, and only lastly with color. Primary headlines should be all-caps or near-caps, large enough to feel poster-like, with tight line-height and slightly expanded tracking. Secondary headings should use lighter weights but preserve the same alignment discipline. Body copy should sit in comfortable measures with softened white text on deep charcoal instead of pure white on pure black. Metadata, timestamps, and counts should use the mono role and appear smaller but denser, creating a clear distinction between narrative text and production data. Interactive controls should look integrated into the grid through rules and label placement, not through pill-heavy component styling.

### Density

Moderate-to-dense. The language supports substantial editorial information, but density is managed through disciplined spacing intervals and alternating quiet zones. Crowding is acceptable inside data bands if line alignment remains exact; decorative clutter is never acceptable.

### Signature Patterns

- Persistent vertical column rules using pseudo-elements or border lines that make multiple sections feel printed on one grid sheet.
- Section headers rendered as compact mono overlines above very large uppercase grotesk titles, creating a cover-line stack.
- Tonal band panels with inset top and bottom rules instead of floating drop-shadow cards.
- Edge-aligned metadata rails where issue codes, timestamps, and status labels sit in narrow mono columns beside main content.
- Accent color used as thin progress bars, active row markers, and numeric emphasis only, never as large fills.

## Layout

### Density

Use medium-high information density appropriate for newsroom planning, issue assembly, and editorial review. The interface should feel serious and inhabited, but every line must still have breathing room through consistent baseline spacing.

### Grid

Desktop uses a 12-column grid inside a max-width of 1480px with 24px gutters and 40px outer margins. Major spans commonly use 7/3/2 or 6/4/2 proportions. Tablet landscape reduces to 8 columns with 20px gutters. Tablet portrait reduces to 4 columns with 16px gutters. Phone collapses to a single column with stacked content and horizontally scrollable tables inside framed containers.

### Breakpoints

Desktop default at 1200px and above. First breakpoint at 1024px rebalances the spread to 8 columns and stacks the right rail beneath the hero band. Second breakpoint at 768px moves all multi-column analytic bands into vertical flow, preserving metadata rails as top rows. Third breakpoint at 480px collapses navigation, converts stat strips into two-column cards, and keeps tables and timeline lanes scrollable within border frames.

### Whitespace

Whitespace should feel deliberate and editorial rather than luxurious. Use large quiet margins around lead stories and tighter spacing inside operational panels. Preserve visible gutters; never let modules blur together. Empty space should reinforce reading order the way margins do in a printed spread.

### Responsive

All layout declarations belong to CSS classes. No inline grid or flex styling. Headline scales step down sharply at each breakpoint, while metadata rails convert from side columns to horizontal strips. Dense tabular regions gain overflow containers instead of shrinking text below readable thresholds.

## Guidance

### Do

- Do begin each major section with a mono overline and a decisive headline that anchors the left edge.
- Do keep dividers visible; the language depends on rules and seams to communicate order.
- Do use asymmetry intentionally by pairing wide narrative modules with narrow factual rails.
- Do keep accent color scarce and meaningful, ideally attached to progress, selection, or one decisive numeric signal.
- Do preserve long reading comfort with softened text values on charcoal surfaces rather than absolute black-white extremes.
- Do style all form controls as part of the typographic system, with labels, rules, and focus states that match the editorial grid.
- Do let tables, schedules, and contributor lists look typeset, with exact alignment and tabular figures.
- Do create pacing between expansive feature modules and compressed utility rows so the interface feels sequenced like a magazine.
- Do keep hover and focus feedback subtle but crisp, relying on rule brightness, accent slivers, and tonal lifts.
- Do use mono metadata to clarify issue numbers, deadlines, and status without competing with narrative hierarchy.

### Don't

- Do not round everything into friendly pills; softness erodes the editorial authority of the system.
- Do not use large accent-color backgrounds behind content blocks.
- Do not center hero copy, KPI rows, or major calls to action.
- Do not hide structure behind oversized blur and shadow effects.
- Do not mix decorative serif display faces into the primary hierarchy.
- Do not collapse all content into identical cards; preserve wide bands, rails, and asymmetry.
- Do not let metadata badges become louder than story titles or contributor names.
- Do not reduce table text until it becomes unreadable on mobile; allow controlled scrolling instead.
- Do not leave native browser chrome on selects, inputs, checkboxes, or radio controls.
- Do not use more than one or two accent moments per viewport band.