Design system

Contemplative precision.

Heavy whitespace, a strict 8pt grid, and hairline borders. Every element should feel intentional — a marking on a star chart, a lens adjustment on a telescope. Stillness, depth, academic authority.

Anchor

Why the dark background is non-negotiable.

Dark mode is the default state because the product simulates the nocturne environment of an observatory. A reading is a contemplative act; the parchment-toned text on a near-black background reduces eye strain across the 30-90 minutes a serious full-natal report asks of the reader.

Light mode exists — for daylight reading, for printed PDFs — but the product is authored for the dark. Decisions about colour, weight, and contrast all start from there.

Grid

An 8pt rhythm runs everything.

Vertical spacing snaps to 8px increments (4 / 8 / 12 / 24 / 48 / 80). Layout columns use a 12-column framework with 24px gutters, capped at 1280px content width. The wheel — when it appears alongside text — sits on the same row baseline as the prose column. Generous Stack-LG spacing between sections gives the eye room to breathe; the information is dense, the page is not.

Hierarchy

Hairline borders, not shadows.

Depth is communicated by tonal layers and 1px strokes at 10-15% opacity, not by shadows or bevels. A surface-dark card sits on a darker primary background. Hover states shift border opacity or colour; elements rarely "lift" off the page. The interface should feel like an illuminated glass panel — flat, intentional, refined.

Use circles for astronomy and astronomy alone. Sharpness is for instruments, roundness is for orbits.

Numerics

Tabular figures everywhere data appears.

When you read "Mars 15°34' Cancer" in a chart, the digits land on the same column width whether you're reading degree, minute, or sign-degree. Inter's tabular-figures variant is enabled wherever numbers appear: the placements table, the orb column, the ephemeris graphs, the year-ahead transit cards. It is the smallest detail and the one that makes a chart feel professionally rendered rather than approximated.

Aspect lines

Solid hard, dashed soft, dotted minor.

Aspect lines distinguish on two axes — colour AND stroke pattern. Hard aspects (square, opposition) are solid and warmer-toned; soft aspects (trine, sextile) are dashed and cooler; conjunction is solid gold (the neutral fusion); minors are dotted and muted. A colour-blind reader gets the same information as a sighted one. This is a dual-channel encoding and it is non-negotiable.

Components

Soft-technical shapes.

Cards take a 12px corner radius — modern, sophisticated, not aggressive. Buttons sit at 8px — stable, reliable. Pills and chips use full-radius pills only for filterable attributes (aspect families, planet selectors). Circles are reserved for astronomy: planets, orbits, nodes. Sharpness is for instruments, roundness is for orbits.

Reproducibility

Every reading carries its provenance.

A reading in Iovari is a tuple: (chart, strategy, model, prompt_version, ephemeris_version, generated_at). Save those fields and you can replay the reading bit-for-bit. We persist them on every reading row and surface them in the reading view's metadata rail. Old readings stay viewable when new prompt versions ship; new readings can be diffed against old ones to see how the engine has evolved.

The point

Precision earns the right to mysticism.

Mysticism without precision is decoration. Precision without mysticism is a spreadsheet. Iovari holds both: the engine is verifiably correct, the voice is honestly contemplative. One serves the other. That's the design.