Haute Lumière
The Luminous editorial design system — every register, every rule, every mark, spelled out.
It is not a UI kit. It is a print-aware editorial 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. Tokens, components and page archetypes that a compiler can read as a generative rulebook and a human can read as a house style.
Its working artifacts are the issues themselves. Each one is the whole system in use, in a single HTML file that opens in a browser and prints to paper without a build step. There is no compile stage between the design and the object.
Every artifact loads the system with one line — <script src="ds-base.js"></script> — and declares two attributes on <html>: a register and a surface.
Those two axes are orthogonal. Any register renders on any surface. Nothing else in a document changes when either one moves.
The grammar does not change between surfaces. Only the geometry of the hand does.
Seven registers, one arc of light.
Each register is a complete semantic palette, not a skin. Set it on <html data-register>; nothing else in the document changes. They are ordered as one day, dawn to night.
Switching a register is not a recolour. It ripples: text colour, rule colour, grain blend mode, and the photographic grade all move together. Use the pill at the foot of the page — this manual is set in the system it describes.
The warm trick run cold. Nº 02 is set here.
Crisp, with a tasteful silver grade. Nº 01 and Nº 05.
The register that never checks the time. Nº 04.
Warmth lifted just noticeably. Nº 03.
The first dark register. Nº 06 is set here.
The observatory register. Photography gains contrast.
The watch is always set here, on true OLED black.
Text on a photograph is never the register ink. It is always cream — --on-photo #FBF8F0, or --on-photo-soft at 78% — in every register including the light ones. A cover set in Aurora still carries cream type.
Gold is the only accent.
#C5A059 in Daylight, shifted per register. It appears on kickers, drop caps, one phrase in a pull quote, hairline monograms, the folio numeral, and the lit star in the constellation index.
It is never a fill. Never a button, never a background, never a highlight behind text, never a badge. The moment gold becomes a surface it stops being a signal.
#B7A667
#C5A059
#C79A3C
#D69A4C
#D9AE6A
#D9B472
#C7A468
The aliases
Two older vocabularies still resolve onto the seven, so nothing authored against them breaks: the first-generation register names, and the web product's four data-theme settings.
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. One photograph, seven registers, no retouching: the filter is the whole difference.
sepia(.14) hue-rotate(165deg) saturate(1.07) brightness(1.03) contrast(1.01)grayscale(.34) contrast(1.05) brightness(1.03) saturate(.9)sepia(.26) saturate(1.1) brightness(1.04)sepia(.16) saturate(1.24) contrast(1.07) brightness(1.02)sepia(.55) saturate(.85) contrast(1.02)contrast(1.14) brightness(.9) saturate(1.04)sepia(.14) hue-rotate(75deg) saturate(.82) contrast(1.13) brightness(.87)grayscale(1) contrast(1.15) — the surface overrides the registerImagery is warm, natural-light, low-contrast at source. The register supplies the mood — never the photographer.
The image doctrine.
Non-negotiable, and the part most often got wrong.
-
I
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. There is no third option: no vignettes, no rounded frames, no inset cards, no collage. -
II
Never cut the top of a head
Not a style choice; a fault. The only exception is a deliberate, captioned detail plate — and it must read unmistakably as a detail, not as a mis-crop. This is why full-bleed images pin to
50% 0%rather than centre. -
III
Never reuse a photograph
Every image appears in exactly one issue, once. Each issue gets its own folder —
img/hl/throughimg/hl6/— and folders are never shared. A face that has carried one cover never carries another. If the clean supply runs short, ask for more. Never repeat. -
IV
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.
-
V
The source is neutral; the register is the mood
Warm, natural-light, low-contrast originals. Never cool-toned, never oversaturated, never high-key studio. The photograph arrives plain and the page tones it.
Subject matter is a doctrine too. No handshakes, no boardrooms, no whiteboards, no charts on glass, no visible laptops. That is the visual vocabulary of the thing the writing usually argues against.
Two families. One rule that settles every argument.
If a human would read it aloud, it is serif.
300 · 400 · 500 · italic
Carries every voice the reader hears: masthead, display, headline, subhead, deck, body, captions, pull quotes, figures in tables, the drop cap, the aphorism line.
Headlines are whispered, not shouted — weight 300 above 40px, never bold. Weight 400 below that. There is no 700 in the system.
600, uppercase, always tracked
Carries only what the reader ignores: kickers, corner tags, folios, table heads, running heads, metadata, the register pill.
Never a headline. Never body copy. Never a sentence the reader is meant to hear in their own voice.
Body runs 52–66ch. The token is 54ch, with 66ch for wide single-column settings.
Body is justified with hyphens: auto and hyphenate-limit-chars: 6 3 3. Rivers are a copyfit failure, not a typesetting one.
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.
Sentence case in every headline and deck. ALL CAPS only in Manrope furniture, always widely tracked. Small caps are not used.
The specimens.
weight 300
tracking .26em
leading 1
weight 300
tracking .01em
leading 1.06
weight 300
leading 1.1
weight 400
leading 1.15
italic, always
leading 1.4
never past 40ch
leading 1.72
measure 54ch
justified, hyphenated
leading .72
gold-dark
one per opening
There is a truth that most strategic frameworks quietly avoid, a truth so fundamental that acknowledging it would restructure everything we believe about business planning: your organization does not exist in an environment — it exists as an environment.
italic
leading 1.5
gold-dark
under 20 words
one or two per movement
uppercase
always tracked
The system is 60% air by intent.
Page padding is fluid and large; 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 steps, and nothing between them.
Radius zero. One shadow. Hairlines everywhere else.
Zero. Everywhere. The single exception is the register-switch pill at 999px — and that is chrome, never content. A rounded corner inside a page is a bug.
There is one shadow in the whole system — 0 40px 90px -40px rgba(veil,.5). It lifts the sheet off the desk and does nothing else. Nothing inside a page carries a shadow: no card shadows, no hover lifts, no inner shadows, no elevation of any kind on any platform.
Cards are hairline cells: a grid with gap: 1px over a --rule background, so the gaps become the rules. Never individually bordered — that produces double lines wherever two cards meet.
One 1px hairline, sometimes interrupted by a tracked label or the monogram. Never thicker, never doubled, never coloured.
Two only: --border-hair (1px solid --rule) and --border-strong (1px solid --ink), the latter reserved for a deliberate emphasis at most once per spread.
Blur and translucency appear only in fixed chrome — the register pill and the constellation index. Never on content. A page is opaque paper.
Grain, and the three protection gradients.
Grain is 3% fractal noise applied once at the sheet — multiply on light registers, screen on dark. It is subliminal: only felt, never seen. It is applied at the sheet, not per element, and switched off entirely on e-ink.
Protection gradients, never flat scrims. Three of them. Each one still lets you see the photograph — a solid black wash over an image is the fastest way to make an expensive plate look cheap.
Top and bottom. For covers, where a masthead sits high and a coverline sits low.
Bottom only. For a plate carrying a single caption.
105°, heavy at the left. For a feature opener with an overlaid title.
One curve. Three durations. Nothing bounces.
Transitions are long and almost unnoticed. The page should feel like paper changing light, not software animating. Nothing springs, nothing slides in on scroll, nothing pops on load.
cubic-bezier(.165,.84,.44,1)The only easing in the system.
A press state. A dot lighting.
Every hover. All chrome.
The register cross-fade, and nothing else.
.72.55scale 1.00msText is never scaled on interaction. The system was never carried by its motion.
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. A joke that only decorates gets cut.
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."
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.
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.
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.
Em-dashes generously. · as the universal separator in furniture. No exclamation marks, anywhere. Question marks belong to the reflective register only.
British-leaning house style: normalised, licence (noun), realise, colour in editorial copy. Token names and code stay American — --color, grayscale.
Italic serif, and they do a second job — they say something the photograph cannot. A caption that describes what is visible has been wasted.
Never. Not in copy, not in UI, not in comments, not in commit messages.
An italic serif sentence, set apart, that states the argument's hardest form in under twenty words. One or two per movement; never three. It is not a summary and never restates the paragraph above it — it goes further than the prose was willing to.
Abundance is not a mood. It is what a healthy system does when nobody is standing on its throat.
A machine has a resting state. A market has never once been observed at rest.
Six words an economist may use only with an apology. A biologist uses them before lunch.
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
×Urgency the publication does not feel
×A joke that carries no information
Thirteen page kinds. An issue is assembled, not designed.
Each is a class on a .spread. There is no fourteenth — if a new kind of page seems necessary, the content usually wants an existing kind used honestly.
.coverCoverFull-bleed image, masthead, one coverline, four corner tags. The cover veil top and bottom.
.indexContentsSet as a fashion index — roman numerals, title, sub-line, folio. Every entry anchors to its spread.
.inhaleThe openerImage beside text at 1 : 1.05. Where a chapter takes its first breath.
.deepThe long argumentTwo columns with embedded plates. The workhorse — most of any issue is set here.
.wholeThe uncut plateContain, not cover. Nothing cropped away, one caption, one folio. Once per issue.
.platePlateThree-side bleed with one whispered line. An image as artwork, not illustration.
.reflectThe ReflectionThe recurring rite — split image and panel, one open question, four rites beneath it.
.lexiconThe LexiconSix terms, defined and felt, in a hairline grid. Each carries a "felt as" line.
.journeyThe arcA phase sequence drawn as a wave, with named nodes on the curve.
.stepsThe riteA numbered practice in roman numerals, each step carrying one italic action line.
.seriesThe library gridThis issue inside the set. Every issue carries it, and it grows by one each time.
.citedWorks CitedStandard apparatus. Every issue. Never optional, never trimmed.
.colophonColophonCloses the artifact: the mark, the editions, the set line, the register it was registered in.
Every page kind keeps a runhead at the top (issue · section) and a folio at the bottom. Fixed chrome — the register switch and the constellation index — sits outside the page and is hidden in print.
Every issue carries a Works Cited spread.
Two hairline-ruled columns, gold leading-zero numerals, sources in the order the argument needed them — not alphabetical, which would sever each source from the claim it supports.
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.
Thirty-three sources
In the order the argument needed them. Nothing has been trimmed to make the layout fit.
- 01Robbins, L. (1932). An Essay on the Nature and Significance of Economic Science. Macmillan.
- 02Ostrom, E. (1990). Governing the Commons: The Evolution of Institutions for Collective Action. Cambridge University Press.
- 03Simard, S. W., Perry, D. A., Jones, M. D., et al. (1997). Net transfer of carbon between ectomycorrhizal tree species in the field. Nature, 388, 579–582.
- 04Haldane, A. G., & May, R. M. (2011). Systemic risk in banking ecosystems. Nature, 469, 351–355.
Four of thirty-three, shown as a specimen. Numerals carry a leading zero; author bold, title italic, publisher plain.
In-text marks are superscript numerals that link to the spread — <sup class="fn"><a href="#c12">12</a></sup>. Where the source text names an authority without a reference, the citation is found and attached. A named authority without a source is an unfinished sentence.
Two editions of the same issue.
Spreads on a soft desk
Each spread at min(97vw, 1120px), aspect-locked, stacked vertically on the register's --desk ground with the one shadow lifting each sheet.
Scroll freely. The constellation index tracks position at the right edge. This is the default and the one people actually read.
Real A4 sheets
Every spread wrapped in a true 210 × 297mm sheet 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, with no reflow surprises.
Same text. Different geometry. The object is never quite the same twice.
There is effectively none, and that is the position.
No icon font, no icon library, no SVG icon set. Where other systems reach for a glyph, Haute Lumière uses a tracked Manrope label or a hairline. A back control is the word "Contents", not a chevron. A tab bar is three tracked words over a gold dot.
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 genuinely needed, substitute Lucide at 1px stroke — the nearest match to the hairline weight — and record the exception here.
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. No wordmark was supplied, so the brand name is set in plain Cormorant Garamond wherever a mark would go.
Eight surfaces. The system on glass.
Haute Lumière began as a print system and is now a multi-surface one. The premise that makes it work: 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 it on <html data-surface> — orthogonal to register, so any register on any surface.
web16.5px44px—The default. The sheet on a desk.
app17px44px56 / 58Installed, standalone, full-bleed. Page width goes to 100%.
ios17px44pt44 / 49Large title collapses to 44. Safe areas honoured.
android16px48dp64 / 80Material metrics, none of Material's elevation.
desktop16px28px38A pointer, not a thumb. The only surface where targets shrink.
watch15px44pxnoneAlways Nocturne, on true OLED black — paper forced to #000000.
eink19px——Grayscale grade, grain off. One ink, one paper.
print———True millimetres. Still the reference the others are measured against.
The seven surface laws.
Every one is a restatement of an existing print rule under a thumb.
- I
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.
- II
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.
- III
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. - IV
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.
- V
watchOS is always Nocturne
OLED black saves power and deep pine-green reads at a glance. All of it — swapping the paper while leaving a light register's ink in place would put near-black type on black. One arc, one reading: a watch is a glance, not a dashboard.
- VI
E-ink switches the grade off
One ink, one paper:
grayscale(1) contrast(1.15), no grain, no register tone. The surface overrides the register — the only place it does. - VII
Reduced motion collapses every duration to zero
Including the register cross-fade. The system was never carried by its motion, so nothing is lost.
An issue already is the app.
The reading system is the same object. Nothing is redesigned for the phone; the mapping is mechanical.
ListRow list, roman numerals keptAppBar largeRegisters are the app's dark mode — and there are 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.
The engine speaks millimetres.
Screen is a scaled view of the same canvas, never a separate document. Nothing here is a "print stylesheet" bolted on afterwards — these are the page. Nobody is ever asked for a page size; the engine knows twelve trims.
3mm5mm5mm3mmNothing meaningful sits inside 5mm of the trim.
0.06350.05720.06880.0900Page count × caliper = spine width. The engine computes it; nobody guesses.
2.5mm8mm15mm300dpi · CMYK150dpi · sRGBThe part a compiler reads.
Raw text goes in; an EditorialLayoutManifest comes out, and two renderers consume it — the web edition and the 1:1 print worker. The console at ui_kits/layout-engine/ runs every stage live, locally, with no services.
[raw text] → clock → choose medium → vectorise → retrieve 3 exemplars
→ pick archetype → paginate → geometry (bleed/spine/flat)
→ order the images by cosine affinity → hydrate assets (web + print)
→ word budget → LLM rewrite → copyfit loop → EditorialLayoutManifest
├─► web renderer
└─► print worker (1:1)
layout-engine.jsThe pipeline itself.
vector-index.jsExemplar retrieval and image affinity ordering.
orchestrator.jsStage routing and the copyfit loop.
prompts.jsThe rewrite prompts, held to the voice rules in part 12.
atoms.jsonThe atom taxonomy — the smallest addressable editorial units.
archetypes.jsonThe thirteen page kinds, as data.
trims.jsonThe twelve trims, with bleed and spine math.
manifest.schema.jsonThe contract between engine and renderers.
The index.
fontscolors 7 registers + aliasestypographyspacingmotionsurfacesplatform 8 surfacesprintWhere no source existed and the system needed one, it was authored — and recorded as such.
The issues are the specification.
There is no separate reference implementation. Each issue is the whole system in use, in a single file that opens in a browser and prints to paper without a build step. When the manual and an issue disagree, the issue is right and this document gets corrected.
Luminous Prosperity Dance
Ten movements · 92 sources · Daylight. Also repaginated as true A4 sheets, and as the 26-page long-form edition.
Luminous Gainshare
The advisory page — the same grammar carrying commercial argument rather than editorial.
The Luminous Library
Interactive instruments under the same doctrine: serif inputs, hairline controls, no gamification, full offline function.
The test before shipping a page.
Twelve questions. Any "yes" in the wrong column sends the page back.
- 01
Is any corner rounded that is not the register pill?
- 02
Is there a shadow anywhere except the sheet lifting off the desk?
- 03
Is gold acting as a fill, a background, or a button anywhere?
- 04
Does any sans-serif text ask to be read aloud? Does any serif carry furniture?
- 05
Is a headline above 40px set heavier than 300?
- 06
Is the top of anyone's head cut off? Check every plate, every time.
- 07
Has any photograph on this page appeared in another issue?
- 08
Have the hands and limbs in every frame been checked?
- 09
Does the page read in all seven registers — including the three dark ones?
- 10
Does any motion bounce, spring, slide in, or scale a text element?
- 11
Does every string sound like the same editor wrote it? Is there an exclamation mark, an emoji, or the word "journey"?
- 12
Does every named authority carry its citation? Has anything been trimmed to make the layout fit?
If a page feels cramped, that is not a spacing bug. It is the body reading threat, and the page needs less on it.
Haute Lumière
Set in Cormorant Garamond & Manrope · Seven registers · Eight surfaces · Thirteen page kinds · Luminous Prosperity · MMXXVI
Set in the system it describes. Change the register at the foot of the page and this document changes with it.