燠火
okibi — banked embers · a design language

Calm at rest.
Salient on demand.

Okibi is built on one claim: a theme is an attention-allocation policy. Twelve steps of charcoal, one warm ember, a handful of quiet pigments — and code highlighting that engages only when you do. For screens you stare at for hours.

Grounds · Okibi dark / Akari light Scope · web · docs · apps · editors · terminals v1.8 · oklch
the problem

Most themes shout, all the time

Traditional highlighting colours the grammar — every keyword, every type, every bracket, lit all day, whether you're reading or not. Every element lit dims every other. Salience spent everywhere is salience spent nowhere.

a typical themeevery token lit
// six hues before you've read a word export async function resolve(name: string, scale = 1) { const theme = registry.get(name); if (theme.dirty === true) throw new Error("stale"); return theme; }
okibi, at restcharcoal + one blue + a whisper of green
// the data is the text; scaffolding recedes export async function resolve(name: string, scale = 1) { const theme = registry.get(name); if (theme.dirty === true) throw new Error("stale"); return theme; }

Same code. On the right, calls carry the one strong hue, keywords and brackets recede into the spine, and true keeps its red because a decision is worth more than a digit. Nothing shouts — so the little that speaks, means.

the doctrine, in one picture

Salience is a budget

A healthy view spends almost nothing at rest. Structure rides luminance and weight — high-bandwidth, colour-blind-safe — and hue is rationed to a few meanings. The ember appears once or twice per screen: focus and action, never decoration.

ground · ~85% structure
ground — surfaces & body text structure — borders, labels, gutters meaning — the quiet pigments, ~3% the ember — <1%
One ember, kept sacredCursor, active tab, primary action. Never a token, never a link, never decoration.
Redundant where it countsAnything that must be told apart carries shape or weight beside hue — it works in monochrome.
Transitions are cutsNothing fades, pulses, or slides. State changes on intentional boundaries, never on drift.
the novel part

Highlighting that follows intent

Code colouring is three cumulative bands gated by what you're doing. Reading a file is not editing a line — so the theme doesn't pretend it is. Click through the phases:

// module state, far above… const registry = new Map(); let hits = 0; export async function resolve(name, scale = 1) {focused scope let theme = registry.get(name); if (theme) { hits += 1; return theme; } theme = await load(name); registry.set(name, theme); return theme; }
流

one language

Every surface, the same physics

The same spine, ember and type discipline carries documents, applications, slides, terminals and prose. These are complete, working pages — not mockups of mockups.

take it with you

Built to be stolen from

Everything is generated from one token source — oklch in CSS custom properties, resolved hex everywhere else. Grab an artifact, or point a tool at the whole system.

機

Written for machines too. One URL — llm-context.md — hands an LLM the entire system as binding context: doctrine, taste constants, both specs, every resolved value. Tell it to build in Okibi, and it can.