Noctis

Color

Noctis is a two-accent system: neutrals carry the interface, and a single chromatic accent is held in reserve for signal. The discipline — not the palette — is what keeps it calm.

Primary

bg-primary

Primary actions

Accent

bg-accent

Signal only

Background

bg-background

Canvas

A link

Primary acts; the accent only signals.

Primary — neutral white

White is the emphasis color — it fills primary actions and carries headings and most of the interface. It is not a knob: primary is derived, set to the foreground itself (fg-1) and auto-solved against the canvas — so on a light seed it flips to black, never washing out. You theme the seed; primary follows.

Accent — Noctis Blue

The indigo accent is the signal color. It appears rarely, and only where color carries meaning. The accent you seed is emitted verbatim — only its derivatives (hover/active nudges, the on-fill accent-foreground text, accent-muted) and the signal roles (link, focus ring) are solved against the canvas. It stays user-tunable.

Reserved for: focus rings · links · checked controls · text selection & caret · the brand mark.

Background — neutral near-black

A neutral near-black canvas. The engine derives the full surface ramp from it — surfaces lift toward white (unsigned contrast magnitude) carrying only the canvas's own faint neutral chroma, so cards stay neutral and never tint toward the accent. The accent mixes in at exactly one place: the signal tiers.

Surfaces lift toward white, not toward the accent. Read the strip left to right — the neutral surface tiers stay grey, and indigo only surfaces under bg-selected and bg-focus.

bg-surface

Neutral surface

bg-surface-raised

Neutral surface

bg-sunken

Neutral surface

bg-selected

Accent signal

bg-focus

Accent signal

States are role shifts

Hover, active, and selected are opaque token shifts — bg-surface-hover, bg-selected, the primary dim — re-derived per scope, never bg-white/90 or an opacity hack. Disabled is the one exception: it dims with opacity, because it is an absence of state, not a color.

Tuning

The seed is exactly three knobs — background, accent, contrast — and these are precisely what System Controls drive. Contrast is the gain: it scales the whole ramp at once, so one slider moves every surface, border, and text tier together. Pick any accent hue and the engine recalibrates its derivatives for contrast; white primary is never a knob.