基 · foundations
The spine, the ember, and everything they permit
Every surface, border and text tone is a step on one twelve-step charcoal ramp. One warm accent. Six quiet UI pigments. Three typefaces with three jobs. All values are oklch; copy them from the token browser.
01 · iro
Colour
The spine carries structure; the ember carries focus; pigments carry UI meaning (never code roles); identity tints belong to the focus phase of the editor.
02 · ji
Type
Mincho for display, gothic for prose and UI, mono for code and data. Hierarchy rides luminance and weight.
03 · shirushi
Brand & surface
The signature moves — and the quiet physics of surfaces, hairlines and elevation.
04 · gu
Components
The UI primitives — React sources in components/, each with types and usage notes.
05 · hō
The laws
The short list that settles arguments. Full text in the machine context.
Elevation: chrome sits below the content; the working surface is the brightest plane.
Never hue alone: every status indicator carries a glyph or shape; colour only reinforces.
Two temperaments: Okibi is cool ash, Akari is warm paper — never harmonize them.
Control text centers by construction: line-height 1 + symmetric padding in a flex-centered box.
Contrast: n9+ for readable text; n8/n7 are furniture. Measured pairings in the matrix.
Hue no-go zones: teal 180–230 and magenta 325–345 stay empty (exceptions: async 205, spell 200). Also never: italics (except comments), vanilla purple, pumpkin orange, muddy low-contrast colours, brown-tinted dark grounds, bright or void borders, decorative textures, emoji.
The aesthetic brief: modern Japanese — action anime, not sakura/pastel. Colours are a glow in the dark: sparse, meaningful, and legible as colour — restrained ≠ washed out. Loved anchors: viridian green, periwinkle, the ember, yamabuki gold as
this/self, scarlet-derived reds, bold-for-globals.