Theme by setting --hue / --bg / --lift / --fg / --type, not classes.
Never write a hex color. Never write an ID selector or !important (outside
media/skin). Never fight specificity — find the root cause.
Gate responsiveness with .mobile/.tablet/.desktop on wrapper divs.
Use native dialog (commandfor + command="show-modal", closedby) and popover
(popovertarget) for dynamic UI; Datastar only where the logic is more than
open and close.
Inline style= carries ONLY knobs (--bg/--fg/--type/--gap…) or anchor
plumbing — the geometry ratchet counts everything else, and counts may
only go down. Run go test ./... after every CSS change.
Engine changes go in static/system.css in the right layer; a settled app
recipe graduates into the engine's components layer, a public page's
one-off look rides its own @scope block — never unlayered, never a
project layer (retired gf-133).
VERIFY WITH EYES, not imagination: a throwaway GEN_* preview test
(a specimen in the lab, site/lab) or go run ./cmd/snap, then READ the
PNGs. And remember staticfs caches assets at boot — restart the app
before judging any CSS change against the running server.