How We Drew the Manuscript

We did not want to make another mystical app. We wanted to make a book that happens to live in a browser — a book whose pages you turn one card at a time, whose ink dries between drafts, whose margins carry the same hairline ornaments a sixteenth-century printer would have signed off on. The choice to call this a manuscript and not a UI is not poetic decoration. It changes every downstream decision.

A UI optimizes for throughput. It wants to get you from intent to outcome with the fewest taps. A manuscript optimizes for attention. It wants you to slow down at the right moments — the centering breath before a draw, the quiet two seconds while a card flips, the pause before the interpretation begins to ink itself. The throughput-optimized version of Lunarcana would be faster and smaller and you would never come back to it.

The ivory-on-obsidian palette is the first thing this posture asks for. A dark page reads like vellum lit from below, like the moment the candle is brought close to the book. It also signals seriousness in a category that has been over-illuminated by purple gradients and crystal-ball stock photography. We wanted Lunarcana to read, on first sight, as a serious place to do quiet inner work — not as a parlor trick.

We rejected three things up front. We rejected stock mystical imagery in any form — no flowing scarves, no glowing palms, no purple nebulae. We rejected modal popups for the ceremonial moments — centering happens in-flow, the reveal happens in-flow, nothing interrupts. And we rejected the framing of fortune-telling. Lunarcana is a digital grimoire and a journaling instrument. It is the mirror, not the oracle. Everything below is in service of those three rejections.

The palette is three notes. Ivory is the default ink — every body paragraph, every label, every quiet line of metadata is ivory or one of its faded variants. Obsidian is the page — pitch-black, never softened to navy or charcoal, because the moment the background warms even a few degrees the gold loses its threshold and the manuscript starts to feel like a marketing site. Gold is the third note, and it is rationed.

Gold is a threshold signal only. It marks the moments where attention should change shape — the brand sigil at the top of the document, the drop-cap that opens a long passage, the hairline rule beneath a section header, the hover state that promises a button is reachable, the bright edge of a card mid-flip, the position label that has just been revealed, the moon phase glyph in the chrome. Outside of those thresholds, gold is forbidden. A whole page can pass without a single gold pixel and that is a feature.

The reason for the rationing is information-theoretic, not aesthetic. If gold is everywhere, gold is nowhere — it stops carrying signal and becomes texture. By keeping it for moments that genuinely change the user's relationship to the page, we let one warm spark of color do the work that, in a less disciplined design, ten gradients would fail to do. The threshold rule is the single most important rule in this document and the one most likely to be quietly violated under feature pressure.

There are eight type tokens in the manuscript and each one has one job. Display is the wordmark and the rare ceremonial title. H1 is the chapter opening. Section is the eyebrow that introduces a block. Body is the long-form prose you are reading right now. Body-CJK is the same prose in Chinese and Japanese with letterforms tuned for vertical rhythm. Eyebrow is the small uppercase label. Quiet is the metadata in the margin. Numeral is the tabular figure used in counts.

We pick the body via bodyClass(locale) — the helper returns t-body for Latin and t-body-cjk for zh/ja — because Chinese and Japanese letterforms breathe differently than Latin ones, and the same line-height that reads as generous in English reads as cramped in 中文. Never inline a locale === "zh" || "ja" check in the JSX. The helper is the boundary.

There is one cascade gotcha worth committing to memory. The .t-* classes in globals.css are unlayered, which means arbitrary Tailwind utilities like text-[1rem] will not override font-size, letter-spacing, or line-height on .t-display or .t-h1. When you need a responsive override of those three, drop down to inline style with clamp() — the inline style wins both layers. We bit this once on the Header wordmark and we will not bit it again.

Phase transitions in Lunarcana fade. They do not slide, they do not pop, they do not spring on a y-axis. The whole reading flow — question to centering to drawing to revealing to interpretation — happens inside a single AnimatePresence in mode wait, with each phase entering on opacity and exiting on opacity. There is one exception: the card itself rotates on its Y-axis during a flip, because the card is a card and a card flips. Every other transition is ink fading in or fading out.

We removed layoutId after the first iteration. layoutId is technically beautiful — it lets Framer perform a flip animation between two layouts — but in our case it caused subtle layout jumps when the spread re-laid-out post-reveal. We replaced the flight with a CSS transition on left and a separate opacity fade on the new chrome, and the manuscript stopped flinching. The invariant is no layout jump, ever. If the page measures differently between two states, the new state must reserve space ahead of the change.

Reduced motion is respected at every layer. Under prefers-reduced-motion, the breathing circle stops breathing, the card flip becomes a 300ms opacity toggle, the deck stops trembling, the candle stops flickering, and the gold flash on a flip is suppressed. Accessibility is not a checkbox here — for a meditation tool it is the surface area itself.

Most design systems describe the moves they make. The harder document, and the one we re-read most often, is the list of moves we refuse to make. Negative space is doctrine. Five things are out of bounds.

Nothing about Lunarcana is invented from nothing. The manuscript stands on a long shelf of slow, hand-made, carefully ornamented work, and crediting the shelf is part of the discipline. These are the influences we held in mind during the long iterations. None of them is name-dropped — they are listed because each one contributed a specific posture to the final book.

If a doctrine is doing its job, it disappears once you have absorbed it. Most of what is written above will, after a few minutes, just feel like the room you happen to be sitting in. That is the intent. The rules below the surface are there so that the surface can stay quiet.

When you are ready, draw a card. The deck is in the next room. The guide is on the shelf above it. The about page tells you who is keeping the manuscript. We hope the binding holds.