feat(homepage): Australis Skyfall theme + Arbo-generated aurora background

Replaces the previous theme attempt, which was built on a misread: the ask was
to use Arbo as an IMAGE-GEN ENGINE for the background, with the operator's
Australis Skyfall design system supplying the palette.

theme/ holds the source — colors/layout/typography vendored verbatim from the
Skyfall handoff bundle, Supreme 400/500/700 woff2, the Homepage bindings in
skyfall.css.in, and build.py which inlines fonts + tokens into
conf/custom.css. custom.css is GENERATED; edit the .in file and rebuild.

The build exists because Homepage serves only custom.css and custom.js out of
its config dir, so a @font-face pointing at a vendored woff2 would 404 — the
face has to arrive as a data: URI. The background image takes the other route:
/app/public/images is a real static route, so compose.yaml now mounts
images/ there read-only and settings.yaml points at /images/.

Bindings map Skyfall's semantic layer onto Homepage's DOM: Sea surfaces, the
depth recipe (hairline AND two-layer shadow, never one alone), uppercase
eyebrow group headers, the sanctioned accent-rail on the active tab rather
than a glow, and semantic status colour so a green pill means the service is
actually serving.

Background generated by Arbo (irv-ml1:8201) workflow t2i-ui-background, job
13f0891f4e42, seed 26, flux2-klein-9b, 2048x1152 — abstract, no subject,
cool-temperature aurora. 1.6 MB PNG -> 22 KB WebP.

Two deviations are documented rather than hidden: Skyfall forbids imagery
behind body text (held at opacity 30 as mitigation), and service icons stay
full-colour vendor logos.

NOT DEPLOYED — live still runs the old theme. Prototype on :5199.
This commit is contained in:
vh
2026-08-18 23:30:27 -07:00
parent c3de7dbd58
commit 45c1995d7a
13 changed files with 1253 additions and 119 deletions
+69 -13
View File
@@ -146,22 +146,78 @@ render are different questions.
Before/after evidence: `~/booth-data/homepage-cleanup/` on nh3-dev →
`http://10.100.10.50:8090/b/homepage-cleanup/` (24h TTL).
## Theme — the Arbo "Raven" palette (`conf/custom.css`)
## Theme — Australis Skyfall
`conf/custom.css` carries a port of Arbo's design tokens (irv-ml1:8201): flat
raven ink `#021425`, card surface `#112333` on `#1B2E3D` borders, Manrope, and
mint `#2FFC89` reserved for signal — a status pill is green only when the
service is actually serving. Values were read off Arbo's running `:root`
custom properties, not sampled from a screenshot, so drift checks are a diff.
The dashboard is themed with **Australis Skyfall**, the operator-supplied
design system (handoff bundle, 2026-08-18). Skyfall is a dual-theme web system
built on the OKLCH rebuild of the Australis terminal palette: one lightness law
across every chromatic family, all hues cooler than neutral, a Sea neutral ramp
that drifts from ice-blue to ocean green as it brightens, and a "calm depth"
language of hairline + two-layer shadow on every elevated surface.
It lives in CSS rather than `settings.yaml` because Homepage's `color:` setting
only accepts built-in Tailwind ramps and has no separate surface/border/accent
knobs. `color: slate` stays as the base ramp. The `!important` flags are
load-bearing against Tailwind utility specificity.
### `theme/` is the source; `conf/custom.css` is generated
Pairs with removing the `background:` block from `settings.yaml` — Arbo has no
background image, and the wallpaper fought the card surfaces, which sit only a
little lighter than the page.
```
theme/colors.css vendored VERBATIM from the bundle
theme/layout.css ditto — radii, the shadow/glow/rail system, motion
theme/typography.css ditto — families, scale, weights, tracking
theme/fonts/ Supreme 400/500/700 woff2 (Fontshare ITF license)
theme/skyfall.css.in the Homepage bindings — the only part that is ours
theme/build.py inlines the fonts + tokens -> conf/custom.css
```
**Do not hand-edit `conf/custom.css`.** Change `skyfall.css.in`, run
`python3 stacks/homepage/theme/build.py`, then deploy.
The build exists for one reason: Homepage serves exactly two files out of its
config directory, `custom.css` and `custom.js`. There is no static route for
anything beside them, so a `@font-face` pointing at a vendored `.woff2` would
404 — the face has to arrive inside the stylesheet as a data: URI. That is also
why the background image is mounted at `/app/public/images` instead (see
`compose.yaml`), which *is* a real static route.
Only Supreme (body/UI) is embedded. A link dashboard has no display type, so
Bespoke Sans buys nothing; Victor Mono ships as 2.4 MB TTF statics per cut,
which is 30x the whole stylesheet for the handful of latency figures on the
cards. Both are named in the font stacks so they resolve if vendored later.
### The background is generated, not stock
`images/skyfall-aurora.webp` came out of **Arbo** (irv-ml1:8201) via its
`t2i-ui-background` workflow — "abstract full-bleed backgrounds, no subject".
Job `13f0891f4e42`, seed 26, flux2-klein-9b, 2048x1152, 1.6 MB PNG re-encoded
to a 22 KB WebP (smooth gradients compress absurdly well).
Regenerate with a different seed, or reword, via:
```bash
curl -s -X POST http://10.100.79.3:8201/workflows/t2i-ui-background/run \
-H 'content-type: application/json' \
-d '{"prompt":{"kind":"raw","text":"...","negative":"..."},
"width":2048,"height":1152,"seed":26}'
# poll GET /jobs/<id>, then GET /artifacts/<id>/0
```
Note the prompt field is a discriminated union, not a string — a bare string
gets a 422. `{"kind":"raw","text":...}` is the shape.
### Two deviations from the system, on the record
1. **Skyfall forbids this background.** Its rule is "flat semantic surfaces; no
photography, no textures", with exactly one permitted decorative motif — a
subtle aurora gradient, on hero and empty-state areas only, *"never behind
body text blocks"*. A dashboard is a body-text block. The background is here
on the operator's explicit instruction to generate one with Arbo, and it is
mitigated rather than excused: abstract with no subject, strictly cool
temperature per the imagery rule, and held at `opacity: 14` so card contrast
never pays for it. **That opacity is load-bearing, not decoration** — the
render is brighter than the "mostly empty negative space" brief, and turning
it up is what would make the cards fight the ribbon. If it ever reads busy,
the system-faithful answer is to drop the image and let `--surface-sunken`
be the canvas.
2. **Service icons stay full-colour vendor logos.** Skyfall wants one cool,
technical icon family. Desaturating every logo from CSS would just make them
illegible, so this one is simply not fixed.
## Open question