# Haute Lumière — the Luminous editorial design system **Haute Lumière** is the design system behind Luminous Prosperity's publishing output: magazines, books, workbooks, covers, and the web and print editions of all of them. It is not a UI kit. It is a *print-aware editorial system* — tokens, components and page archetypes that a compiler can read as a generative rulebook and a human can read as a house style. This project carries the portable core of that system — tokens, components, guidelines and one complete reference issue — packaged so it can be dropped into any project with no build step and no dependency on anything outside itself. --- ## Sources This package was extracted from a larger, longer-running production project — **Haute Lumière**, part of the Luminous Prosperity publishing line — where the full system runs against the real editorial material (eight to ten issues, ~2,000 photograph plates, the layout-DAM engine, print-ready A4 pagination). That source project is not attached here; this design system is the self-contained subset of it: tokens, the React component set, 30 specimen cards, and one reference issue (`ui_kits/issue-template/`) built with placeholder plates so the page kinds and apparatus can be copied and re-filled. No logo or wordmark was supplied, in either project. **The brand name is set in plain Cormorant Garamond wherever a mark would go.** Nothing has been drawn or reconstructed. The only drawn element in the system is an abstract circle-through-a-line used at section breaks (`guidelines/brand-monogram.card.html`). --- ## CONTENT FUNDAMENTALS **Voice.** Precise, warm, quietly funny. Name the thing plainly, then undercut it with an aside that is true rather than merely clever. *"Four billion dollars a year, arriving whether or not anyone feels inspired."* The joke is always load-bearing — it carries information the straight sentence could not. **Person.** Third person for the argument; second person only in the reflective register, and only as an invitation. Never "we" as a corporate voice. Never "our journey." **Casing.** Sentence case in every headline and deck. ALL CAPS only in Manrope furniture (kickers, folios, table heads, corner tags), always widely tracked. Small caps are not used. **Emoji.** Never. Not in copy, not in UI, not in comments. **Numbers.** Written out below ten in prose; figures in tables, always with the unit. Money is never rounded up for effect — if the model says $422,400, the page says $422,400. Issues are `Nº 01`; movements are roman numerals; dates on the trellis are `MMXXVI`. **Sentence rhythm.** A long balanced sentence, then a short one that lands. Paragraphs run three to six sentences; a one-line paragraph is a deliberate weight, never an accident. **The aphorism line** (`.quiet`) is the system's signature move: an italic serif sentence, set apart, that states the argument's hardest form in under twenty words. *"Cooperation is not the soft option. It is the only known route to a new kind of thing."* One or two per movement; never three. **What the system will not write:** exclamation marks; stacked adjectives; "unlock", "leverage", "journey", "seamless"; rhetorical questions in series; earnest summary paragraphs that restate what was just said. **Captions** are italic serif and do a second job — they say something the photograph cannot. *"The whole photograph, nothing cropped away. Coherence is not stillness — it is every rhythm moving, briefly, to the same time."* --- ## VISUAL FOUNDATIONS ### Colour — seven registers, one arc of light Each register is a **complete semantic palette**, not a skin. Set it on ``; nothing else in the document changes. They are ordered as one day, dawn to night. | # | Register | Ground | Ink | Tone | |---|---|---|---|---| | 1 | **Aurora** | `#F4F9FD` | `#17283A` | First light. Cool, airy, blue-washed | | 2 | **Daylight** | `#FAF8F3` | `#0C1E16` | Noon. Pine ink on warm cream, crisp | | 3 | **Solstice** | `#FDF8E4` | `#3A3117` | Long afternoon. Pale butter, unhurried | | 4 | **Dusk** | `#FBF4EA` | `#33201A` | Golden hour. Warm, soft-reading | | 5 | **Vespers** | `#3A2E22` | `#F2E3C8` | Candlelight. Archival, toned ground | | 6 | **Midnight** | `#111620` | `#EFE8D8` | Cinematic blue-black | | 7 | **Nocturne** | `#0E1712` | `#EDE6D2` | Deep pine-green black | **Gold is the only accent** — `#C5A059` in Daylight, shifted per register. Kickers, drop caps, one phrase in a pull quote, hairline monograms, the lit star. It is **never a fill**, never a button, never a background. Switching a register is not a recolour. It ripples: text colour, rule colour, grain blend mode, and the **photographic grade**. Two older vocabularies still resolve, so nothing authored against them breaks: the first-generation names (`equinox`→Daylight, `ember`→Dusk, `sepia`→Vespers, `meridian`→Midnight, `vellum`→Aurora) and the web product's four `data-theme` settings (`ivory`/`cream`/`sepia`/`moonlight`). ### Photography Every register tones its photography. This is the system's signature move — the art looks *printed into* the page, not placed on top of it. See `guidelines/photo-grades.card.html` for one photograph through all seven. | Register | Grade | |---|---| | Aurora | `sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03) contrast(1.01)` | | Daylight | `grayscale(.34) contrast(1.05) brightness(1.03) saturate(.9)` | | Solstice | `sepia(.26) saturate(1.1) brightness(1.04)` | | Dusk | `sepia(.16) saturate(1.24) contrast(1.07) brightness(1.02)` | | Vespers | `sepia(.55) saturate(.85) contrast(1.02)` | | Midnight | `contrast(1.14) brightness(.9) saturate(1.04)` | | Nocturne | `sepia(.14) hue-rotate(75deg) saturate(.82) contrast(1.13) brightness(.87)` | ### The image doctrine Non-negotiable, and the part most often got wrong: 1. **Two treatments only.** *Bleed* — edge to edge through the bleed box, always `object-position: 50% 0%`. Or *uncut* — `object-fit: contain`, nothing cropped, captioned as a plate. 2. **Never cut the top of a head.** Not a style choice; a fault. The only exception is a deliberate, captioned detail plate. 3. **Never reuse a photograph.** Every image appears in exactly one issue, once. Each issue gets its own folder (`img/hl/`, `img/hl2/`, `img/hl3/`). 4. **No deformed frames.** Check hands, limbs and faces before placing. Where a generated frame has a fault, correct it optically — a graded depth-of-field falloff baked into the file, never a spot-blur patch — and keep the original untouched. 5. Imagery is warm, natural-light, low-contrast at source. The register supplies the mood. ### Type — two families, one rule **If a human would read it aloud, it is serif.** - **Cormorant Garamond** carries every voice — masthead (300, .26em tracking), display (300), deck (italic), body (16.5px / 1.72 / 54ch), captions (italic), figures in tables (italic, 19px). - **Manrope** carries only furniture the reader ignores — kickers (600, 10px, .32em), corner tags (8.5px, .34em), folios, table heads. Always uppercase, always tracked. Headlines are **whispered, not shouted**: weight 300 above 40px, never bold. One drop cap per essay opening — 82px, line-height .72, gold-dark. Body is justified with `hyphens: auto` and `hyphenate-limit-chars: 6 3 3`. **Everything scales off `cqi`, not `vw`** — each sheet is its own container, so a spread composes identically full-screen, in a sidebar, or at 1:1 on paper. ### Space The system is **60% air by intent**. Page padding is fluid and large (`clamp(40px, 5.4cqi, 88px)`); the smallest gutter on a spread is bigger than most sites' largest. Whitespace is the argument — a cramped page reads to the body as threat. Seven-step scale: 4 · 8 · 14 · 22 · 34 · 52 · 74. ### Surfaces, borders, shadow - **Radius: zero.** Everywhere. The only exception is the register-switch pill — chrome, never content. - **One shadow in the whole system:** `0 40px 90px -40px` — it lifts the sheet off the desk. Nothing inside the page carries a shadow. No card shadows, no hover lifts, no inner shadows. - **Cards** are hairline cells: a grid with `gap: 1px` over a `--rule` background, so the gaps *become* the rules. Never individually bordered. - **Dividers:** one 1px hairline, sometimes interrupted by a tracked label or the monogram. Never thicker, never doubled, never coloured. - **Grain:** 3% fractal noise applied once at the sheet — `multiply` on light registers, `screen` on dark. - **Protection gradients, never flat scrims.** Three: cover veil (top and bottom), plate veil (bottom only), side veil (105°). Each one still lets you see the photograph. ### Motion **One curve:** `cubic-bezier(.165,.84,.44,1)`. Three durations: 200 / 400 / 700ms. Nothing bounces, springs, or slides in on scroll. A register change is a 700ms cross-fade — paper changing light, not software animating. **Hover** is opacity and colour only (`.72`); **press** is `.55`. Text is never scaled on interaction. The constellation star *lights*; it does not grow. ### Layout rules Fixed chrome sits outside the page: the register switch (top centre, pill, backdrop-blurred) and the constellation index (right edge, a drawn sky of hairline-joined stars — the replacement for a dot rail). Both hidden in print. Transparency and blur appear **only** in that chrome, never on content. --- ## THE PAGE KINDS An issue is assembled from a fixed vocabulary, each a class on a `.spread`: | Class | Page kind | |---|---| | `.cover` | Full-bleed image, masthead, coverline, corner tags | | `.index` | Contents, set as a fashion index with roman numerals | | `.inhale` | The opener — image beside text, 1 : 1.05 | | `.deep` | The long argument — two columns with embedded plates | | `.whole` | The uncut plate: `object-fit: contain` and one caption | | `.plate` | Three-side bleed image with a whispered line | | `.reflect` | The recurring ritual — split image / panel, one open question, four rites | | `.lexicon` | Six terms, defined and *felt*, in a hairline grid | | `.journey` | The arc — a phase sequence drawn as a wave | | `.steps` | The rite — a numbered practice in roman numerals | | `.series` | The library grid: this issue inside the set | | `.cited` | **Works Cited** — standard apparatus, every issue | | `.colophon` | Closes the artifact: mark, editions, the set line | ### The citation apparatus **Every issue carries a Works Cited spread.** Two hairline-ruled columns, gold leading-zero numerals, sources in the order the argument needed them, with accessed dates. Nothing is ever trimmed to make the layout fit — the spread flows onto as many sheets as the sources need. Where an issue's own writing has a published record, its DOI goes at the head of the spread. ### Two editions of the same issue - **The reading edition** — spreads at `min(97vw, 1120px)`, aspect-locked, stacked on a soft desk. - **The paged edition** — every spread wrapped in a real A4 sheet (210 × 297mm) with scroll-snap and arrow-key page turns. Image pages lock to one sheet at native design width, optically reduced; text pages flow across as many sheets as the words need. Prints as uniform A4 portrait, one page per sheet. --- ## ICONOGRAPHY **There is effectively none, and that is the position.** No icon font, no icon library, no SVG icon set was supplied and none has been added. Where other systems reach for a glyph, Haute Lumière uses a tracked Manrope label or a hairline. The single drawn element is the **monogram**: a circle intersected by a full-width line, 26×26, stroked at 0.8px in gold. It marks section breaks and appears in the colophon. It is abstract — not a logo, not a reconstruction of anything. Unicode is used sparingly and typographically: `·` as the universal separator in furniture, `—` for asides, `Nº` for issue numbers, roman numerals for movements. **Emoji are never used.** If an icon set is ever needed, substitute Lucide at 1px stroke (nearest match to the hairline weight) and flag it here. --- ## PLATFORMS — the system on glass Haute Lumière began as a print system and is now a **multi-surface** one. The premise that makes this work: *the grammar does not change between surfaces — only the geometry of the hand does.* A page is read at arm's length. A phone is read at thirty centimetres and touched. So the type metric lifts, the hit areas grow, and **the marks stay exactly as fine as they were on paper.** Set the surface on ``. Surfaces and registers are **orthogonal** — any register on any surface. | Surface | Body | Tap | Chrome | Note | |---|---|---|---|---| | `web` *(default)* | 16.5px | 44px | — | The sheet on a desk | | `app` | 17px | 44px | 56 / 58 | Installed, standalone, full-bleed | | `ios` | 17px | 44pt | 44 / 49 | Large title collapses; safe areas honoured | | `android` | 16px | 48dp | 64 / 80 | Material metrics, none of Material's elevation | | `desktop` | 16px | 28px | 38 | A pointer, not a thumb | | `watch` | 15px | 44px | none | **Always Nocturne**, on true OLED black | | `eink` | 19px | — | — | Grayscale grade, grain off | | print | — | — | — | True mm; still the reference | ### The seven surface laws 1. **The hit area grows; the mark never does.** A 44px target may carry a 7px dot. Buy the thumb its room with padding — never by inflating the mark, which would turn gold into a surface. 2. **Chrome is a hairline, on every platform.** No elevation, no translucent material, no drop shadow, no radius. The one shadow in the system lifts a *sheet* off a desk and nothing else. 3. **There is one button** — `TextButton`: a tracked word with a 44px hit area and no fill. There is no filled or "primary" variant on any platform, ever. 4. **Navigation is iconless.** The system owns no icon set; the tab bar is tracked labels over the gold dot, and a back control is the word "Contents", not a chevron. 5. **watchOS is always Nocturne.** OLED black saves power and deep pine-green reads at a glance. One arc, one reading — a watch is a glance, not a dashboard. 6. **E-ink switches the grade off.** One ink, one paper: grayscale, no grain, no register tone. 7. **Reduced motion collapses every duration to zero**, including the register cross-fade. The system was never carried by its motion. ### Turning an issue into an app An issue already *is* the app — the reading system is the same object. The mapping: | In the magazine | In the app | |---|---| | Cover | Launch screen / library tile | | Contents | `ListRow` list, roman numerals kept | | A movement | One scroll screen; `AppBar large` at the top | | Constellation index | Reading progress in the tab bar dot | | Register switch | A settings screen — or automatic by time of day | | Works Cited | A screen, never a modal; the sources are content | | Plate | Fullscreen, tap to dismiss, caption fades in | **Registers are the app's dark mode**, and the system has seven rather than two. The honest default is to follow the clock: Aurora at dawn, Daylight by day, Dusk in the evening, Vespers and Midnight at night — the arc the registers were named for. --- ## INDEX **Root** — `styles.css` (the entry point, `@import` lines only) · `ds-base.js` (one-line loader) · `readme.md` · `DESIGN-SYSTEM.md` (the narrative brief) · `SKILL.md` · `INSTALL.md` · `thumbnail.html` **`tokens/`** — `fonts` · `colors` (7 registers + legacy and product aliases) · `typography` · `spacing` · `motion` · `surfaces` · **`platform`** (8 surfaces, tap and safe-area metrics) · `print` **`components/`** - `editorial/` — Kicker · Deck · PullQuote · HairRule - `layout/` — Sheet · PlateFrame · Folio - `data/` — LexiconCell · DataTable - `apparatus/` — WorksCited · RiteSteps · WaveArc · SeriesCard - `chrome/` — RegisterSwitch · ConstellationIndex - `app/` — AppBar · TabBar · ListRow · TextButton · WatchDial **`guidelines/`** — 30 specimen cards across Registers, Type, Spacing, Brand, Print & Doctrine, Platform. **`templates/`** — what a consuming project picks from: - `issue/Issue.dc.html` — **Editorial issue.** Cover, opener, the long argument, uncut plate, Works Cited and colophon. Live register switch; print-ready. - `reading-app/ReadingApp.dc.html` — **Reading app.** The same issue on glass: library list, reading screen with hairline chrome and iconless tab bar, and the registers screen as the app's dark mode. - `textbook-chapter/` — **Textbook chapter.** The scholarly register, and the home of *Luminous SWOT Ecology* by Ammanuel Desta Santa Ana (Luminous Press). Four chapters built, all print-ready A4, no photography required — the frontispieces are drawn from each chapter's own argument: - `TextbookChapter.dc.html` — Ch 1, *Basic Concepts of SWOT Ecology* (16pp, cover + title page) - `ChapterFour.dc.html` — Ch 4, *The Holarchic Field Ontology* (12pp, Part II divider) - `ChapterFive.dc.html` — Ch 5, *The Developmental Altitude Lens* (11pp, the altitude-gap formalism) - `ChapterSix.dc.html` — Ch 6, *From Grid to Mandala* (11pp, the facilitation protocol) - `ChapterSeven.dc.html` — Ch 7, *Living-Systems Mathematics* (19pp, Part III divider) - `book-volume/BookVolume.dc.html` — **Book volume.** The binding: half title, title page, copyright, dedication, a full seventeen-chapter contents across five parts, the preface, Appendix A (Meridian Press read in full — the mandala plus every instrument reading), Appendix B (why three classes of exercise carry no answer key), an eighteen-term glossary, the consolidated bibliography, and a colophon. Fourteen A4 pages. This is what makes the chapters a book rather than a stack. - `glossary/Glossary.dc.html` — **Glossary.** Ten A4 pages: sixty-one terms of art with origin, locus and companion pointers, balanced two-up across four alphabetical spreads; the seven confusable pairs that change a decision; a table of symbols with units and which are measured versus estimated; and a companion-volumes page. - `spiral-appendix/SpiralAppendix.dc.html` — **Spiral appendix.** Appendix C, seven pages: the full spiral Beige → Coral with Gravesian codes, first and second tier tables, a dedicated Coral page after §5.5 of *The Future of Luminous Development* (Santa Ana, 2026), and the cross-map to this book's altitude labels including the Teal-at-Yellow mismatch. - `business-briefs/BriefsChapterOne.dc.html` — **Business briefs.** Ten one-page executive briefs per chapter, each running Situation → What the grid says → What the ecology says → The move, closing with *Watch for* and a *Read next* pointer. Built as data, so a new chapter's set is an array swap. Chapter One's ten are written; 4, 6 and 7 remain. **`ui_kits/issue-template/issue/`** — a complete 24-spread reference issue (Nº 04, High Frequency Wellness) running on the system, with placeholder plates in `img/`, ready to copy and re-fill for a new issue. --- ## Intentional additions - **Sheet / PlateFrame / Folio** — no component source existed; authored because the engine's output has nowhere to land without them. - **Apparatus set** (WorksCited, RiteSteps, WaveArc, SeriesCard) — extracted from the page kinds the issues actually use, so a new issue does not re-author them. - **Chrome set** (RegisterSwitch, ConstellationIndex) — the two fixed elements every issue carries. - **The monogram** — needed a section-break mark and had no logo. Deliberately abstract. - **Aurora, Solstice, Nocturne registers** — added beyond the product's four settings; all carry alias entries so the four-setting product API is unchanged. - **The platform layer** (`tokens/platform.css`, `components/app/`) — authored so the reading system can be shipped as an app, a book, a watch face or an e-ink edition without a second design language. Every decision in it is a restatement of an existing print rule under a thumb.