# COHERENCE — Magazine Design System > *A quarterly about coming into phase.* **Canonical reference for this project.** Every artifact here — `index.html` (Luminous Dance Nº 01), `Haute Lumiere.html`, the Layout Engine — is set from this system. Bound source: `_ds/resonance-os-design-system-remix-a47f914b-5653-4352-b1a6-6a83dd32a918/`. **COHERENCE** is an independent literary quarterly on the art and science of the integrated life — attention, body, feeling and action brought into phase. Published by **Coherence Press**. Set the way a regulated nervous system feels: cream instead of white, gold instead of red, generous whitespace, a serif that holds the reader's own thought. Nothing on the page flinches. Nothing alarms. The premise: most publishing is set to a sympathetic key — high-contrast, urgent, optimised to interrupt. COHERENCE is the parasympathetic alternative. It is the codified grammar for a publication that **does not re-traumatise the reader's body while it reads.** ## The name In physics, **coherence** is what happens when waves come into phase: scattered light becomes a laser, noise becomes a tone, the heart's rhythm entrains the brain. Every issue brings something scattered — a life, a theory, a night, a grief — into phase, and sets it as a priceless object while doing so. The mark is a set of **concentric rings, one lit gold** — waves aligning around a single clear signal. ## Sources & lineage Grown out of an earlier calm-interface design language; inherits its bones — three type families, the no-alarm palette, breath-paced motion, dot-not-badge restraint, and *the dim* (the signature focus state). Where that language dressed software, COHERENCE dresses ink and paper. - `colors_and_type.css` — every token and semantic type class. - `assets/` — wordmark, phase mark, paper-grain and atmosphere SVGs. - `preview/` — specimen cards. - `templates/` — the reading system: complete issues you copy and re-fill. --- ## The reading system Not a set of page layouts; **one reading system** rendered into many formats. An issue is built from a fixed vocabulary of **page kinds**, in roughly this order: | # | Page kind | Class | Role | |---|---|---|---| | 1 | **Cover** | `.cover` | Full-bleed image, masthead, coverlines. | | 2 | **Contents** | `.contents` | The issue's movements, set as a fashion index. | | 3 | **Letter** | `.essay` | Editor's opening essay, drop-capped, one or two luxe columns. | | 4 | **Feature opener** | `.feature` | Full-bleed image, overlaid title and deck. | | 5 | **Editorial body** | `.read` | Text + pull-quote + sidebar on a 1.5/1 grid. | | 6 | **Lexicon** | `.lexicon` | Key terms, defined and *dressed* in a fashion grid. | | 7 | **The Reflection** | `.reflect` | Split image / ink panel asking one open question. | | 8 | **Plate** | `.plate` | An image as artwork, one whispered caption. | | 9 | **Colophon** | `.colophon` | Closes the artifact; lists editions and the set line. | Every page kind prints to a real A-series sheet. The same components carry every issue. ### Extension — Haute Lumière (this project, Nº 01) The couture layer. Same tokens, same trellis, same voice; new grammar. Additive only — never replaces the base page kinds. - **60% air.** Whitespace is the argument. - **Three-side bleeds** and whispered headlines (weight 300, `letter-spacing: .26em` on the masthead). - **Hairline rules only** — no bars, no keylines. Section breaks carry a geometric monogram: a circle through a line. - **The constellation** replaces the reader-dot rail: page marks drawn as stars joined by a hairline path, lit gold on the active spread, click to travel. - **Uncut plates** (`.whole`) — `object-fit: contain` on cream. The whole photograph, nothing cropped away. - **Headless details** — deliberate crops above the shoulder line for texture plates. Never accidental. --- ## Voice > *Every coverline, caption, and caps-label sounds like the same editor wrote it — and that editor writes like a contemplative who has also closed a magazine on deadline.* **Singular.** Calm. Literary without being precious. Never code-switches into hype-speak. Never barks. **Person.** Mostly second person, soft and inviting — questions more than commands. *"Where do you tremble?"* not *"Take our quiz."* **Casing.** Title Case for serif headlines. ALL-CAPS with `letter-spacing: 0.2em` for **the trellis** — kickers, running heads, folios, section labels, metadata. Body, decks and captions sentence case. **Punctuation.** Em-dashes — generously. Full stops on long thoughts, rarely on labels or coverlines. No exclamation marks. Question marks welcome (the magazine asks). **Numerics.** Soft. Issues in roman (**Nº 01**), folios in italic serif, dates in roman numerals (MMXXVI) on the trellis. Counts framed as states, not metrics. **Emoji.** Never, in any surface. If a glyph is needed: a hairline icon at 50% opacity, or the em-dash. ### The voice glossary | Use this | Never this | |---|---| | Issue Nº 01 | Vol. 1, #1 | | Movement / The Letter | Article / Op-ed | | Coverline | Hook / Headline teaser | | Kicker | Eyebrow (ok internally; never barked) | | Coming into phase | Hot take / Trending | | The Reflection | Reader poll / Quiz | | Set from one system | Templated / On-brand | | Edition (Print · Web · EPUB) | Format / Channel | | Read it slowly | Quick read · 3 min | | The Lexicon | Glossary box | **Forbidden vocabulary.** *Breaking. Must-read. Viral. Hot take. Don't miss. Exclusive!. Sponsored content (as decoration).* Any clickbait. The magazine has no vocabulary for urgency it does not feel. **Sample copy in the wild.** > *"To fall apart, beautifully, on purpose."* — coverline, Nº 02 > *"Read it slowly. Let it come apart in your hands."* — editor's letter > *"Where do you tremble?"* — The Reflection > *"Same text. Different format. The object is never the same twice."* — colophon --- ## Visual foundations ### Colour Five families, reframed for ink and paper. - **Ink** — the writing. Deepest pine-black text; hover deepens. - **Signal** — gold. The *only* accent of reward and emphasis: folios, drop caps, the mark inside a pull-quote, the active reader-dot. - **Field** — the supporting register: muted text, hairlines. - **Paper** — the ground. Warm cream `#FAF8F3`, never pure white. Pure white floats on cream as a card. - **Frequencies** — a small spectrum, for section colour-coding only. The warmest is clay-coral `#C2603F`, **never true red.** No red, no orange-overdue, no yellow-warning anywhere. The body has nothing to flinch at. ### The three issue palettes Alternate moods, not skins. The grammar (whitespace, trellis, serif/sans roles, the dim, dot-not-badge) is identical; only the chromatic register changes. Apply via `[data-issue="…"]` on `` or any subtree. | Palette | Mood | Pivots | |---|---|---| | **Equinox** *(default)* | Balance. Daylight. | cream + pine + gold | | **Ember** | Warm dusk. The candle-lit issue. | candle-cream + clay-rose + amber | | **Meridian** | Deep night. The observatory issue. | ink-indigo + parchment + lit gold | **Night** (`.theme-night`) is the dark modifier of Equinox only — not a fourth palette. Ember is inherently warm-light; Meridian inherently dark. ### Type — three families, three roles, never crossed - **Cormorant Garamond** — *the writing.* Headlines, decks, body, coverlines. - **Manrope**, all-caps, tracked `0.2em` — *the trellis.* Kickers, running heads, folios, section labels, metadata. - **Italic Cormorant** — *the aside.* Decks, attributions, whispered plate captions, the Reflection's sub-line. Display/label contrast is **~8×** (a 100px cover masthead beside a 10px caps kicker). Proportional generosity is the math of calm. **The cursor falls into a serif** — search and subscribe inputs are serif at 24–32px; sans inputs only for short codes. ### Spacing & layout - **Whitespace is more aggressive than content.** Cramped pages read as threat. - The reading rail centres each **page** as a sheet on a soft ground. Tall pages A-series portrait (1 : 1.414), wide pages landscape. - Page kinds keep a **runhead** at top (issue · section) and a **folio** at bottom. - On screen, soft corner radius on chrome; in print, pages are full-bleed sheets. ### Backgrounds & atmosphere - **Cream base**, never pure white. **Paper grain** at ~3.5% opacity, full-bleed via inline `feTurbulence` — subliminal, only felt. - **Organic blob blurs** (optional, digital chrome only) at ~50% opacity, breathing on a 15-second cycle — one cool sage, one warm gold. - **No decorative gradients. No hand-drawn illustration.** Photography is warm-hour-lit, soft-grained, low-contrast — never cool-tone or oversaturated. ### Motion - **A reader's pace.** Hover transitions 400ms `cubic-bezier(0.165, 0.84, 0.44, 1)`. **No bounce. Nothing pops.** - View / page changes: fade only, ~700ms. The reader-dot scales to 1.5 in gold on the active page. - The progress hairline at the top fills in gold as the reader descends. ### The dim (the signature) When a focused reading surface opens — a subscribe panel, a search, a fullscreen plate — the rest of the page takes a `backdrop-filter: blur(4–12px)` with a soft **ink-family veil at 15–25% opacity.** Never pure black, never fully occluded. Tap-outside always returns. This is the moment the magazine stops being *about* calm and starts *inducing* it. ### Borders, rules & dividers - 1px solid `--border-light` is the universal hairline. Section breaks: a single rule with a 10px caps label centred on it — never a heavy bar. - The Lexicon grid is hairline-ruled cells on a hairline ground. No double borders, no keyline boxes. ### Status & marks **The dot, not the badge.** A 9–12px filled circle, gold when active. Never red, never numeric, never a count snapping at the eye. Used for reader navigation and section marks. ### Iconography **Lucide**, thin (1.5 stroke), rounded, unfilled — used very sparingly. Colour follows text; tinted gold only when active. Most metadata is text-as-label, not icon-plus-label. **No custom icon font, no emoji, no unicode glyphs** beyond the em-dash (—) and the rare ASCII bullet (·). --- ## The test before shipping a page 1. Does the cursor fall into a serif when the reader types? 2. Is there any red, orange, or "alert" colour anywhere? *(If yes → recolour to clay/gold.)* 3. Does any label use hype or database language? *(If yes → rename to the trellis voice.)* 4. Does any motion snap, bounce, or pop? *(If yes → soften to a reader's pace.)* 5. Could a reader feel rushed or behind looking at this page? *(If yes → redesign. There is no urgency surface.)* 6. Does every string sound like the same editor wrote it? 7. When a focused surface opens, does the rest of the page **dim**? *(Non-negotiable.)* --- ## Image doctrine (this project) Added for the photography pipeline. Enforced by the Luminous Layout Engine. 1. **Never cut the top of a head by accident.** A crop above the shoulder line is legal only when it is clearly a *detail plate* — texture, hands, fabric, feet — and captioned as one. 2. **Uncut plates use `object-fit: contain` on cream.** Full-bleed pages use `object-position: 50% 0%` so the top of the frame is never lost. 3. **Type sits in the calmest band**, measured — lowest mean luminance and lowest variance. Never over a face, never over high-frequency detail. 4. **Veils are ink-family**, directional, 40–50% at the type edge falling to 0 at mid-frame. Never a full-frame scrim. 5. **Warm-hour light only.** Cool-tone or oversaturated frames are routed out, not colour-corrected into compliance.