Publish the docs site at style.lvl0.xyz #3

New issue

Closed

opened 2026-08-23 15:37:24 +02:00 by myrmidex · 1 comment

myrmidex commented

2026-08-23 15:37:24 +02:00

Owner

Context

The package (#2) is the source of truth for machines; this is the source of truth for people.
The point of the repo is to stop having to read three other projects and guess which one
applies the style correctly — that only works if there is a page to look at.

Scope

A static page showing the system as rendered output, not as a values table:

Swatches for every token — primary, bordeaux, background, card, muted, destructive,
charts 1–5 — each labelled with its token name and oklch value, and copyable
Glow demos side by side: .glow-red, .glow-red-text, .glow-bordeaux,
.glow-bordeaux-line. These are the hardest part to get right from a values list, since
the reason .glow-bordeaux emits primary light is invisible until you see it against black
The font, showing digits at several sizes and an explicit note that letters render badly
Usage rules — when primary vs bordeaux: primary for text, active borders, focus states;
bordeaux for dividers, resting borders, recessed chrome
A worked example — the anagram-finder form and results panel are a compact demonstration
of the whole system in one screen

The page should be built with the package it documents, so it breaks visibly if the package does.

Hosting

style.lvl0.xyz. Static output; the existing lvl0-website deploy approach is the obvious
model to follow.

Depends on

#2 (nothing to document until the package exists)

Acceptance

Page renders every token as a swatch with its name and value
All four glow utilities shown against the real background
Primary vs bordeaux usage guidance written down
Built against @lvl0/ui rather than duplicating its CSS
Deployed at style.lvl0.xyz

## Context The package (#2) is the source of truth for machines; this is the source of truth for people. The point of the repo is to stop having to read three other projects and guess which one applies the style correctly — that only works if there is a page to look at. ## Scope A static page showing the system as rendered output, not as a values table: - **Swatches** for every token — primary, bordeaux, background, card, muted, destructive, charts 1–5 — each labelled with its token name and oklch value, and copyable - **Glow demos** side by side: `.glow-red`, `.glow-red-text`, `.glow-bordeaux`, `.glow-bordeaux-line`. These are the hardest part to get right from a values list, since the reason `.glow-bordeaux` emits primary light is invisible until you see it against black - **The font**, showing digits at several sizes and an explicit note that letters render badly - **Usage rules** — when primary vs bordeaux: primary for text, active borders, focus states; bordeaux for dividers, resting borders, recessed chrome - **A worked example** — the anagram-finder form and results panel are a compact demonstration of the whole system in one screen The page should be built with the package it documents, so it breaks visibly if the package does. ## Hosting `style.lvl0.xyz`. Static output; the existing `lvl0-website` deploy approach is the obvious model to follow. ## Depends on - #2 (nothing to document until the package exists) ## Acceptance - [ ] Page renders every token as a swatch with its name and value - [ ] All four glow utilities shown against the real background - [ ] Primary vs bordeaux usage guidance written down - [ ] Built against `@lvl0/ui` rather than duplicating its CSS - [ ] Deployed at style.lvl0.xyz

myrmidex added this to the v0.1.0 milestone 2026-08-23 15:37:24 +02:00

myrmidex added the

docs

label 2026-08-23 15:37:24 +02:00

myrmidex self-assigned this 2026-08-23 15:37:24 +02:00

myrmidex added a new dependency 2026-08-23 15:37:34 +02:00

#2 Define the lvl0 palette and ship it as @lvl0/ui

myrmidex commented

2026-08-23 20:07:23 +02:00

Author

Owner

Done — live at https://style.lvl0.xyz

All acceptance criteria met:

Every token rendered as a swatch with name and value — 12 tokens plus the five chart
colours, values click-to-copy
All four glow utilities shown against the real background
Primary vs bordeaux usage guidance written down — two-column comparison, plus the rule
that contrast is full red against bordeaux, never two brightnesses of red
Built against @lvl0/ui rather than duplicating its CSS — docs/styles.css imports
../src/index.css; verified in the compiled output
Deployed at style.lvl0.xyz — verified live: page 200, stylesheet 200 (19,776 bytes),
containing all six utilities, the @font-face, and both palette tokens

Shipped as an nginx image (forge.lvl0.xyz/lvl0/ui), built by
.forgejo/workflows/build.yml on push to main and on v* tags. Running in Arcane behind
Pangolin.

Deployment bug found and fixed (v0.1.1)

The first deploy served the HTML but 404'd on the stylesheet, so the page rendered unstyled.

Cause: the regex location block for static assets had no root directive. Regex locations
take priority over the prefix location /, so every .css request matched it and nginx fell
back to its compiled-in default path rather than /usr/share/nginx/html.

The block was copied from lvl0-website, which carries the same latent flaw — worth
checking there before it surfaces.

Also relaxed server_name from style.lvl0.xyz to _, since behind a reverse proxy a
forwarded Host that does not match would otherwise fall through to nginx's default server.

## Done — live at https://style.lvl0.xyz All acceptance criteria met: - **Every token rendered as a swatch with name and value** — 12 tokens plus the five chart colours, values click-to-copy - **All four glow utilities shown against the real background** - **Primary vs bordeaux usage guidance written down** — two-column comparison, plus the rule that contrast is full red against bordeaux, never two brightnesses of red - **Built against `@lvl0/ui` rather than duplicating its CSS** — `docs/styles.css` imports `../src/index.css`; verified in the compiled output - **Deployed at style.lvl0.xyz** — verified live: page 200, stylesheet 200 (19,776 bytes), containing all six utilities, the `@font-face`, and both palette tokens Shipped as an nginx image (`forge.lvl0.xyz/lvl0/ui`), built by `.forgejo/workflows/build.yml` on push to main and on `v*` tags. Running in Arcane behind Pangolin. ### Deployment bug found and fixed (v0.1.1) The first deploy served the HTML but 404'd on the stylesheet, so the page rendered unstyled. Cause: the regex `location` block for static assets had no `root` directive. Regex locations take priority over the prefix `location /`, so every `.css` request matched it and nginx fell back to its compiled-in default path rather than `/usr/share/nginx/html`. The block was copied from `lvl0-website`, **which carries the same latent flaw** — worth checking there before it surfaces. Also relaxed `server_name` from `style.lvl0.xyz` to `_`, since behind a reverse proxy a forwarded `Host` that does not match would otherwise fall through to nginx's default server.

myrmidex closed this issue

2026-08-23 20:07:29 +02:00