Haute Lumière

The design system.

Seven registers, two type families, eight surfaces, and print geometry that goes down to the thickness of a hardcover spine.

Install

One line.

The loader resolves its own URL, so it works from the root of a project, a subfolder, or a copy bundled inside a single HTML file — without being edited.

<script src="/ds-base.js"></script>
<html data-register="daylight" data-surface="web">

Registers and surfaces are orthogonal — any register on any surface. Nothing else in the document changes: palette, rules, grain blend mode and photographic grade all follow.

Prefer a local copy? Take the folder whole; nothing in it points outside itself. INSTALL.md

If you are a model

Read these, then reach for the rest.

first

The agent manifest. Start here.

machine-readable

Every path in the system, grouped and sized. One fetch and you know what exists.

the brand

Voice, doctrine, the full context.

the system

The narrative brief.

The seven registers

Dawn to night.

Each is a complete semantic palette, not a skin. Set one on <html data-register>. Dark pages use --panel / --panel-ink, never --ink / --paper, which invert. Gold is a mark, never a fill.

registerpaperinkgoldblend

Specimen cards for each, plus grades, type, spacing, brand and print, live in guidelines/ — 30 of them.

Type

Two families. One rule.

If a human would read it aloud, it is serif. Cormorant Garamond carries masthead, display, deck, body, captions and figures. Manrope carries only furniture the reader ignores — kickers, corner tags, folios, table heads — always uppercase, always tracked.

Headlines are whispered: weight 300 above 40px, never bold. Body sits at 16.5px / 1.72 on a 54ch measure, justified, hyphenated. Everything scales off cqi, not vw.

Print · hardcover

The page is millimetres, not a stylesheet bolted on.

Screen is a scaled view of the same canvas. tokens/print.css carries twelve trims, so nobody is ever asked for a page size — and the hardcover maths is already in there.

hardcover trim
6.14 × 9.21 in

--trim-hardcover-w/h. Royal, the same block as the royal trim.

board
2.5 mm

--board-thickness, with an 8 mm --hinge-gap and a 15 mm --wrap-turnin.

spine caliper
per page, per paper

Cream 50 · white 50 · white 60 · coated 80. Pages × caliper = spine width.

bleed & safety
3 mm · 5 mm

Nothing meaningful inside 5 mm of the trim. Crop marks 5 mm at a 3 mm offset.

resolution
300 dpi · CMYK

Web is 150 dpi sRGB off the same source.

the other eleven
trade · digest · royal · crown · A4 · A5 · large · square · landscape · US mag · Kindle

All in tokens/print.css.

Page kinds

A book is made of these.

A class on .spread. Start from a template rather than inventing a layout — templates/book-volume/ and templates/textbook-chapter/ are the two a book wants, and ui_kits/issue-template/ is a complete 24-spread issue ready to re-fill.

.cover .index .inhale .deep .whole .plate .reflect .lexicon .journey .steps .series .cited .colophon

.cited — Works Cited — appears in every issue and is never trimmed to fit. That is where a verified citation list lands.

What is in the box

Not negotiable

Six rules.