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:
+69
-13
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user