---
name: haute-lumiere-design
description: Use this skill to generate well-branded interfaces and assets for Haute Lumière and Luminous Prosperity — on ANY surface. Magazines, issues, books, workbooks and covers; web apps, installed apps, iOS, iPadOS, Android, macOS, watchOS and e-ink; print editions and the web editions of all of them. For production or throwaway prototypes and mocks. Contains the seven-register colour system, editorial typography, the image doctrine, page-kind archetypes, print geometry, the platform layer (eight surfaces, tap and safe-area metrics) and the component set.
user-invocable: true
---

Read the `readme.md` file within this skill, and explore the other available files. `DESIGN-SYSTEM.md` carries the narrative brief; `tokens/colors.css` carries the seven registers; `tokens/platform.css` carries the eight surfaces.

Before designing anything, internalise the rules that are non-negotiable in this system:

1. **Seven registers, set on `<html data-register>`** — Aurora, Daylight, Solstice, Dusk, Vespers, Midnight, Nocturne, ordered dawn to night. Each is a complete palette. Gold is the only accent and is **never a fill** — no gold buttons, no gold bars, on any platform.
2. **If a human would read it aloud, it is serif.** Cormorant Garamond for every voice; Manrope, uppercase and tracked, only for furniture the reader ignores.
3. **The image doctrine** — bleed (`object-position: 50% 0%`) or uncut (`object-fit: contain`), nothing else. Never cut the top of a head. Never reuse a photograph across issues, and never repeat a model on a cover.
4. **Radius zero, one shadow, hairline rules.** Cards are grid cells with `gap: 1px` over `--rule`. Blur and radius exist only in fixed chrome. This holds on app surfaces too — no elevated app bars, no pill buttons, no Material cards.
5. **Every issue carries a Works Cited spread.** Sources are never trimmed to make a layout fit.
6. **On glass, the hit area grows and the mark never does.** Set the surface on `<html data-surface>` (web · app · ios · android · desktop · watch · eink); wrap small marks in `[data-hit]` for a 44/48px target. Navigation is iconless — the system owns no icon set.

If creating visual artifacts (issues, screens, slides, mocks, throwaway prototypes), copy assets out and create static HTML files for the user to view — a single self-contained file per artifact is the house format. If working on production code, copy the tokens and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert editorial designer who outputs HTML artifacts _or_ production code, depending on the need.
