# rules <!-- zero:scaffolded-readme --> <!-- Replace the line below with what this module provides and who consumes it, then delete both comment lines. --> TODO: describe this module.

# ui/art — the look of SLAG SAINT One place for everything the game's screens are made of, so they grade as a single object: the palette translated into CSS strings, the type ramp bound to real faces, the spacing and surface helpers, the motion, and the inline SVG that puts art on a screen instead of words alone. ## Type Three faces, three jobs, never mixed up. | role | face | used for | |---|---|---| | display | `Anton` | titles, verdicts, the boss's name, the saint's spoken lines | | prose | `EBGaramond` / `EBGaramondItalic` | anything read as a sentence | | readout | `BerkeleyMono` | labels, numbers, key caps — anything instrumental | `Anton` draws its caps low in the line box it is given — measured against `ui.getLayoutInfo`, about 0.3em below the box the layout reserved. Anywhere a display line is followed by something else, the display line carries the margin. `Art.menuItem` and the `lockup` in `ui/screens` already do. ## Art `Art.GLYPH` is the drawn material: `bell` (the saint's head, the game's mark), `saint` (the kneeling reliquary figure the title screen is built on), `sigil` (the order's quenching droplet), `blade` (the Emberward's weapon), `chain`, `mouse`, `pip`, `motes`. Each takes its colours, so the same glyph carries the cold grade on the victory card and the ember grade on the title. ## Still mode UI animation advances on game time. While the clock is stopped — edit mode, or a held session — a one-shot entrance freezes on its first keyframe, and a keyframe starting at `opacity = 0` leaves the element invisible for as long as the clock is stopped. `Art.setStill(true)` makes every motion helper return `nil`, so a tree built in that state carries no animation and renders at its base style. `Screens.component` flips it whenever the clock starts or stops. ## Two things measured in the engine, not assumed - **A wrapping label ignores `textAlign`.** Anything that must read as centred goes through `Art.lines`, which is one node per line centred by its column. - **`backdropFilter` samples the scene behind the whole UI stack**, not the card under it — so a frosted scrim over an opaque page punches the lit fight straight back through it. Frost only where seeing the fight is the point (`pause`, `howto`); the full-bleed cards paint their own ground instead.