Log inGet started
World

The Eighth Ketyl

Branchmain
Branchesmain
Commite99ff0a216

README.md

Kit

The design system every screen in THE EIGHTH KETYL is drawn with: one palette taken from Still.palette, one type ramp on two faces, one set of box recipes, and the drawn art the game's cards are built around.

Why it exists. Six agents authored this world at once. A screen looks like part of the same object as the last one only if the colour, the type, the corner radius, the hairline and the panel recipe all come from one place. This is that place.

The unit. Everything is measured in Kit.sz(frac) — a fraction of the SHORTER screen edge, read live. There is no pixel constant in any screen: the game is published to a phone held either way, a laptop, a wide monitor and a television at once, and the filmed shape is 1080x1440. Kit.screen() is the one accessor that answers "what shape is the frame", and Kit.setPreviewSize(w, h) makes it answer something else for a moment — how a portrait build gets checked against a television without a second engine.

The two faces mean different things. Kit.SERIF (EBGaramond) is the laboratory's own voice — titles, the chemist, prose. Kit.MONO (JetBrainsMono) is the instrument's — readouts, numbers, labels. A UI label selects a face by the .font ASSET name; the shaper family name renders as the default sans.

What it provides

  • Kit.c, Kit.alpha(hex, a), Kit.surface — the palette and the dark-UI surfaces, which read from a step in lightness and a lit top edge rather than from a black shadow.
  • Kit.serif(frac, color, extra) / Kit.mono(...) — the type ramp.
  • Kit.label / Kit.para / Kit.col / Kit.row / Kit.gap / Kit.svg / Kit.rule — the box vocabulary.
  • Kit.panelStyle(extra) — the recessed instrument panel every card sits on.
  • Kit.backdropStyle(tint, scrim) / Kit.vignette() — the sealed interior a menu is drawn against; a scrim below 1 leaves the held game visible behind.
  • Kit.columnArt(opts) — the still in elevation: eight plates, brass rims, mucus on the glass, and the ketyl on the plate it is standing on. The title card, both end cards and the storefront all use it.
  • Kit.ketylMark(tint) / Kit.blennomaMark(alive) — the game's monogram and a single mucous lobe.
  • Kit.keycap / Kit.padcap / Kit.touchcap — a key, a pad button and a thumb, so a control is shown on all three device families rather than named on one.
  • Kit.meter(opts) — a labelled instrument meter with a segmented bar.

Who consumes it

ui.Menus, ui.Hud and the Screens component. Nothing outside the presentation slice depends on it, and it depends on nothing but Still.