The ornament and frame component set #54

New Issue

2026-07-28T08:10:37Z

archvillainette commented

2026-07-28 08:10:37 +00:00

Part of #47

Question

What is the ornament and frame vocabulary, as a component set?

This is the spine of the map. The sites personality is carried by chrome rather than art, and chrome only reads as intentional if it is a small closed set of components reused everywhere — not per-page CSS. Get this wrong and every surface invents its own border.

Define and prototype:

The frame primitives: how a panel, a card, a plaque, and a band are bounded. Border weights, corner treatments, inset rules, double rules, hairlines.
The section header: its anatomy, its ornament, and what the reduced version looks like when a header has not earned ornament.
The divider inventory: every legitimate way to separate things, and at what weight — one list, not a habit.
Icon usage rules, working with what GAME_ICONS.md already documents.
Texture: whether any exists, where, at what opacity, and how it behaves on a cheap panel.
How ornament weight scales down for app-density surfaces, under the one-shell-two-densities law.
What each component looks like with zero images, which is the standing test.

Name each component, since later layout tickets will refer to them by name. Prototype them on a throwaway branch as a single specimen page plus one real surface, and link it here.

Resolution is the named component set with its rules — the thing every layout ticket downstream composes from.

Part of #47 ## Question What is the ornament and frame vocabulary, as a component set? This is the spine of the map. The sites personality is carried by chrome rather than art, and chrome only reads as intentional if it is a small closed set of components reused everywhere — not per-page CSS. Get this wrong and every surface invents its own border. Define and prototype: - The frame primitives: how a panel, a card, a plaque, and a band are bounded. Border weights, corner treatments, inset rules, double rules, hairlines. - The section header: its anatomy, its ornament, and what the reduced version looks like when a header has not earned ornament. - The divider inventory: every legitimate way to separate things, and at what weight — one list, not a habit. - Icon usage rules, working with what `GAME_ICONS.md` already documents. - Texture: whether any exists, where, at what opacity, and how it behaves on a cheap panel. - How ornament weight scales down for app-density surfaces, under the one-shell-two-densities law. - What each component looks like with **zero images**, which is the standing test. Name each component, since later layout tickets will refer to them by name. Prototype them on a throwaway branch as a single specimen page plus one real surface, and link it here. Resolution is the named component set with its rules — the thing every layout ticket downstream composes from.

archvillainette added the wayfinder:prototype label 2026-07-28 08:10:37 +00:00

archvillainette added a new dependency 2026-07-28 08:10:53 +00:00

#48 How game websites carry identity without art

archvillainette added a new dependency 2026-07-28 08:10:54 +00:00

#49 North star and named rules for the noir re-tune

archvillainette added a new dependency 2026-07-28 08:10:54 +00:00

#53 Palette candidates on a dense page

archvillainette added a new dependency 2026-07-28 08:10:54 +00:00

#56 Page width and density system

archvillainette added a new dependency 2026-07-28 08:10:55 +00:00

#57 The home board

archvillainette added a new dependency 2026-07-28 08:10:55 +00:00

#58 Wiki page frame, reader and editor

archvillainette referenced this issue

2026-07-28 08:11:24 +00:00

Wayfinder: Westgate palette re-tune and game-site structure #47

archvillainette referenced this issue

2026-07-28 08:50:47 +00:00

How game websites carry identity without art #48

archvillainette referenced this issue

2026-07-31 14:06:59 +00:00

Server status slot: states and data contract #51

archvillainette added a new dependency 2026-07-31 14:07:43 +00:00

#63 Does the shared shell carry a status pip in the topbar

archvillainette referenced this issue

2026-07-31 14:35:18 +00:00

Palette candidates on a dense page #53

archvillainette commented

2026-07-31 14:36:00 +00:00

Handed over from #53 (resolved)

The light surface (champagne #EFE5D2, ink #351E28) is out of the app surfaces — on
quoted material it became the brightest thing on the page and secondary content out-shouted the
reply containing it. It survives only as a possible showcase ornament, which is this ticket's
call: does a plain-paper plaque earn a place in the frame set, or does the ornament vocabulary
stay entirely dark?

Two constraints if it does land (from #50): no metal of any kind clears AA on either light tone,
and it forces a second, surface-aware focus-ring token (#09080B).

## Handed over from #53 (resolved) The light surface (champagne `#EFE5D2`, ink `#351E28`) is **out of the app surfaces** — on quoted material it became the brightest thing on the page and secondary content out-shouted the reply containing it. It survives only as a possible **showcase ornament**, which is this ticket's call: does a plain-paper plaque earn a place in the frame set, or does the ornament vocabulary stay entirely dark? Two constraints if it does land (from #50): no metal of any kind clears AA on either light tone, and it forces a second, surface-aware focus-ring token (`#09080B`).

archvillainette self-assigned this 2026-07-31 14:38:39 +00:00

archvillainette referenced this issue from a commit

2026-07-31 14:47:46 +00:00

prototype(#54): ornament and frame component set as a specimen page

archvillainette commented

2026-07-31 14:48:23 +00:00

Prototype built — the component set, on a specimen page and one real surface

Branch prototype/54-ornament-set (pushed, not for merge). prototype/ornament/README.md
replays it. Palette is candidate B from #53, injected at runtime, so no rebuild is needed.

The stack is still up on http://localhost:4567 with the #53 seed, so the real surface can be
looked at live: open /categories, then paste prototype/ornament/real-surface.css (plus
prototype/_base-plumnoir.css and prototype/candidate-b.css) into devtools to toggle it.

The named set — ten components, and no eleventh

Name	What it is	Where it may appear
Rail	The one left edge and one right edge. Not decoration, a constraint (#49 One Rail).	Every page, both densities, identical width
Panel	The bounded surface. Its edge is a masked overlay, full at the top and gone by the bottom, so no hairline runs corner to corner (Edges Fade).	Anywhere
Plain panel	The cheap panel: one tone down, softer edge, no sheen, no fade. What a panel looks like with nothing to say.	Anywhere
Plaque	A name plate, not a band. `inline-block` is the whole idea. Cinzel, tracked, uppercase, pewter edge. Optionally straddling its own panel edge as a legend.	Standing labels; one page title at most; suppressed where the logo does that job
Band	A strip that spans the rail edge to edge. Never inset.	Shell chrome only: topbar, footer, thresholds
Ledger	The archive interior: one surface, ruled rows, one row height, gilt left mark when a row has something at stake.	Lists of records
Section header	One component, two forms. See below.	Anywhere
Icon	A mask over a token, never a coloured file. Pewter by default, gilt only for what can be touched.	Category identity, status, affordances
Horizon	A warm radial glow standing in for hero art. Texture, no asset.	Showcase only
Stamp	The only red. A state or a mark of loss, never decoration.	Anywhere, rarely

The divider inventory — four, and there is no fifth

Ruling — pewter α .075, row separation inside a ledger and nowhere else.
Fading rule — 1px, pewter fading to nothing. Between sections. It ends by fading, not by stopping.
Lintel — gilt α .5 with 32px of light bleeding downward. A threshold; one per band.
Spine — a vertical gilt fade marking a sequence, i.e. a thread of posts.

A solid hairline running corner to corner is not on this list, and neither is <hr> as shipped.

The section header

Reduced (the default): body face, no case switch, no rule, no background.
Earned: display face + uppercase + one colour token override. That is what "earning ornament" means (#48: Warframe states this outright in shipped CSS).
The one permitted flourish, and only on an earned header: a gilt rule that starts at the text and fades out to the rail. Nothing gains a background, a flourish or a box.

Texture

Two, both inset, neither an asset: velvet sheen (inset plum bloom, α ≤ .11, dropped entirely at app density) and horizon. On a cheap panel there is no texture at all — that is the point of the cheap panel. No noise, no filigree, no images.

Ornament weight across the density boundary

Same rail, same components, same width. App density turns the set down: sheen off, rows tighter, icons one step smaller, headers reduced, plaques limited to one, lintel bleed cut from 32px to 18px. Nothing at app density is a different component.

What the pages showed

The ledger only reads as a ledger when the gaps go to zero. "A list of cards with gaps" and "a ruled ledger" are mutually exclusive readings of the same list; the category list cannot be both. Set to ledger, the rows became one document and the ruling carried all the separation. (shots/categories-before-crop.png vs shots/categories-after-crop.png.)
The masked panel edge is nearly invisible on app rows — and does not need to be there, because the ruling already separates them. The masked edge is a showcase device. App rows get tone and ruling only.
The category icon plate's plum wash and saturate(0.62) are load-bearing. Removing them to "let pewter structure the plate" made every ACP colour candy-bright in one step. Two Metals reaches the plate's ring, not its wash. First cut of this prototype got that wrong and the screenshot showed it immediately.
On the topic page the category badge already reads as a plaque, which suggests the plaque belongs to standing labels and badges rather than to page titles on app surfaces. The page-title plaque rule did not land there (selector missed), and on reflection it should not.
Zero-image test passes. shots/specimen-full.png contains no image of any kind: every frame, rule, plaque, glow and icon is CSS or a mask over a token.

One conflict found with an existing document

GAME_ICONS.md maps the Programming category to gears.svg. #49's No Machines, Only Fittings forbids depicted machinery, and gears are the named example. That mapping has to be retired and replaced (spanner, anvil and pencil-ruler are fittings and tools, so they stay).

Open question for the human

Does the panel keep its 8px radius, or go square? #48 found border-radius: 0 is the most common value in EVE's frame system, and Edges Fade points the same way — but the theme is 8px everywhere today and a square panel is a visible change to every surface. The prototype keeps 8px. Worth a look before it is locked.

This ticket is HITL and stays open until the human has looked in a browser. The reads above are the prototype's, not the resolution.

## Prototype built — the component set, on a specimen page and one real surface Branch `prototype/54-ornament-set` (pushed, **not for merge**). `prototype/ornament/README.md` replays it. Palette is candidate B from #53, injected at runtime, so no rebuild is needed. The stack is **still up** on http://localhost:4567 with the #53 seed, so the real surface can be looked at live: open `/categories`, then paste `prototype/ornament/real-surface.css` (plus `prototype/_base-plumnoir.css` and `prototype/candidate-b.css`) into devtools to toggle it. ### The named set — ten components, and no eleventh | Name | What it is | Where it may appear | |---|---|---| | **Rail** | The one left edge and one right edge. Not decoration, a constraint (#49 One Rail). | Every page, both densities, identical width | | **Panel** | The bounded surface. Its edge is a masked overlay, full at the top and gone by the bottom, so no hairline runs corner to corner (**Edges Fade**). | Anywhere | | **Plain panel** | The cheap panel: one tone down, softer edge, no sheen, no fade. What a panel looks like with nothing to say. | Anywhere | | **Plaque** | A name plate, not a band. `inline-block` is the whole idea. Cinzel, tracked, uppercase, pewter edge. Optionally straddling its own panel edge as a legend. | Standing labels; one page title at most; suppressed where the logo does that job | | **Band** | A strip that spans the rail edge to edge. Never inset. | Shell chrome only: topbar, footer, thresholds | | **Ledger** | The archive interior: one surface, ruled rows, one row height, gilt left mark when a row has something at stake. | Lists of records | | **Section header** | One component, two forms. See below. | Anywhere | | **Icon** | A mask over a token, never a coloured file. Pewter by default, gilt only for what can be touched. | Category identity, status, affordances | | **Horizon** | A warm radial glow standing in for hero art. Texture, no asset. | Showcase only | | **Stamp** | The only red. A state or a mark of loss, never decoration. | Anywhere, rarely | ### The divider inventory — four, and there is no fifth 1. **Ruling** — pewter α .075, row separation *inside a ledger* and nowhere else. 2. **Fading rule** — 1px, pewter fading to nothing. Between sections. It ends by fading, not by stopping. 3. **Lintel** — gilt α .5 with 32px of light bleeding downward. A threshold; one per band. 4. **Spine** — a vertical gilt fade marking a sequence, i.e. a thread of posts. A solid hairline running corner to corner is not on this list, and neither is `<hr>` as shipped. ### The section header - **Reduced (the default):** body face, no case switch, no rule, no background. - **Earned:** display face + uppercase + one colour token override. That is what "earning ornament" means (#48: Warframe states this outright in shipped CSS). - The one permitted flourish, and only on an earned header: a gilt rule that starts at the text and fades out to the rail. Nothing gains a background, a flourish or a box. ### Texture Two, both inset, neither an asset: **velvet sheen** (inset plum bloom, α ≤ .11, dropped entirely at app density) and **horizon**. On a cheap panel there is no texture at all — that is the point of the cheap panel. No noise, no filigree, no images. ### Ornament weight across the density boundary Same rail, same components, same width. App density turns the set *down*: sheen off, rows tighter, icons one step smaller, headers reduced, plaques limited to one, lintel bleed cut from 32px to 18px. Nothing at app density is a different component. ### What the pages showed - **The ledger only reads as a ledger when the gaps go to zero.** "A list of cards with gaps" and "a ruled ledger" are mutually exclusive readings of the same list; the category list cannot be both. Set to ledger, the rows became one document and the ruling carried all the separation. (`shots/categories-before-crop.png` vs `shots/categories-after-crop.png`.) - **The masked panel edge is nearly invisible on app rows** — and does not need to be there, because the ruling already separates them. The masked edge is a showcase device. App rows get tone and ruling only. - **The category icon plate's plum wash and `saturate(0.62)` are load-bearing.** Removing them to "let pewter structure the plate" made every ACP colour candy-bright in one step. Two Metals reaches the plate's *ring*, not its wash. First cut of this prototype got that wrong and the screenshot showed it immediately. - **On the topic page the category badge already reads as a plaque**, which suggests the plaque belongs to standing labels and badges rather than to page titles on app surfaces. The page-title plaque rule did not land there (selector missed), and on reflection it should not. - **Zero-image test passes.** `shots/specimen-full.png` contains no image of any kind: every frame, rule, plaque, glow and icon is CSS or a mask over a token. ### One conflict found with an existing document `GAME_ICONS.md` maps the Programming category to **`gears.svg`**. #49's **No Machines, Only Fittings** forbids depicted machinery, and gears are the named example. That mapping has to be retired and replaced (`spanner`, `anvil` and `pencil-ruler` are fittings and tools, so they stay). ### Open question for the human **Does the panel keep its 8px radius, or go square?** #48 found `border-radius: 0` is the most common value in EVE's frame system, and Edges Fade points the same way — but the theme is 8px everywhere today and a square panel is a visible change to every surface. The prototype keeps 8px. Worth a look before it is locked. **This ticket is HITL and stays open until the human has looked in a browser.** The reads above are the prototype's, not the resolution.

archvillainette referenced this issue from a commit

2026-07-31 16:00:49 +00:00

prototype(#54): variants and the settled ledger row

archvillainette commented

2026-07-31 16:01:44 +00:00

Resolution

The ornament vocabulary is a closed set of twelve named components plus four dividers. Nothing outside this list may be invented on a surface; a surface that needs something new comes back here first. Every component stands with zero images.

Prototype: branch prototype/54-ornament-set (prototype/ornament/) — specimen.html (every component, both densities, one page), real-surface.css + variant-tabular.css + variant-gold.css (the set mapped onto the live category list, topic and category pages), shots/. Judged in a browser on the live stack over palette B.

The components

Rail — the single shared content column. One Rail: no surface is narrower than another.
Panel — a bounded surface. Square, panel-2 ground, an edge that fades (a masked 1px pewter border, full strength at the top falling to ~16% at the bottom), and a drop shadow below it.
Plain panel — Panel with no edge and no shadow, for surfaces that sit inside another panel.
Velvet panel — Panel over Plum Noir, the archive interior. Showcase only.
Plaque — an inline-block name plate on bg-deep with a hard border: page titles, category names as objects.
Legend — a Plaque's caption, engraved and small.
Band — a full-rail horizontal strip. Its lintel form is the topbar's threshold.
Ledger — one surface with ruled rows, no gaps and no per-row card. The category list is a Ledger.
Section header — display face, uppercase, one colour token, plus exactly one flourish: a gilt rule fading out to the rail's edge. The reduced form drops the flourish and keeps the rest.
Icon — a plate with a pewter ring. Structure is pewter; gilt marks only what can be touched.
Horizon — a radial glow standing in for hero art. Showcase only.
Well — the inverse of Panel: a recess cut into a surface, basin darker than its ground, an inset shadow and a faint gilt inner line. Data readings live in Wells. Wells on a row share a grid and are inset on all four sides; the gap between two Wells is their divider — a Well never carries a rule inside it.
Stamp — a small state marker, one word, never a badge-with-count.

The dividers (the whole inventory)

Ruling — the 1px line between rows inside a Ledger. The only separator allowed inside one.
Fading rule — a gilt gradient rule that dies out toward the rail. Belongs to Section header; never used alone.
Lintel — a Band's top border plus a short gradient falloff. Thresholds only.
Spine — a vertical rule separating two columns of equal standing.

No other divider exists. In particular there is no plain full-width hairline running corner to corner (Edges Fade).

Shape, weight and case

Square. One shape language for the whole shell. No rounded, no cut, no notched corners. Only the status dot is round, because it is a dot; signets keep the theme's square plate.
Square edges need falloff. Every bounded surface carries a wide, offset-down black shadow — no lift, no glow, just the corner catching the room. Without it a square edge reads as a cut and the panel disappears into the page. This applies on every page, not only the showcase.
Cinzel is always uppercase. Its lowercase is a small-caps design and reads as a weaker version of the same voice, not a second voice.
App density = the same components with the sheen off. Nothing is removed; the flourish and the wash go quiet and hierarchy is carried by tone plus the two metals.

The ledger row (settled shape)

The category row is tabular + gold: prose on the left at a fixed measure, and the three right-hand readings — topics, posts, teaser — each in its own Well on a shared grid. Counts get fixed 6rem Wells; the teaser takes the rest. Stat labels are Cinzel small caps at 0.78rem (the DESIGN.md floor). Teaser prose is left-aligned, clamped to two lines, and fills its Well: even inset on all four sides, no wider gap horizontally than vertically.

Findings

Ledger and cards-with-gaps are mutually exclusive readings. Gaps between rows destroy the ledger; the roomy variant looked good but is a different component (Panels), not a Ledger with air.
The category icon plate's plum wash and desaturation are load-bearing. ACP category colours arrive candy-bright; stripping the wash to "clean up" the plate breaks the register. Only its ring moves from gilt to pewter.
GAME_ICONS.md maps Programming to gears.svg, which breaks #49's No Machines, Only Fittings. Needs re-mapping wherever icon assignments are settled.
The theme ships border-radius: 8px !important, so squaring the shell is a specificity fight, not a one-liner. Real code should remove the radius at source rather than override it.
NodeBB's line-clamp-sm-* clamps by a hard max-height sized to its own line-height. Any component that sets a taller line-height must clamp by line count instead, or the clamp shaves glyphs.
The light champagne surface handed over from #53 earns no place in this set. No component needs it; it stays a possible showcase ornament and is not part of the vocabulary.

Deferred

Well height with a short teaser, and the row's vertical rhythm generally, are spacing decisions owned by #56 Page width and density system.

## Resolution The ornament vocabulary is a **closed set of twelve named components plus four dividers**. Nothing outside this list may be invented on a surface; a surface that needs something new comes back here first. Every component stands with zero images. Prototype: branch `prototype/54-ornament-set` (`prototype/ornament/`) — `specimen.html` (every component, both densities, one page), `real-surface.css` + `variant-tabular.css` + `variant-gold.css` (the set mapped onto the live category list, topic and category pages), `shots/`. Judged in a browser on the live stack over palette B. ### The components 1. **Rail** — the single shared content column. One Rail: no surface is narrower than another. 2. **Panel** — a bounded surface. Square, panel-2 ground, an **edge that fades** (a masked 1px pewter border, full strength at the top falling to ~16% at the bottom), and a drop shadow below it. 3. **Plain panel** — Panel with no edge and no shadow, for surfaces that sit inside another panel. 4. **Velvet panel** — Panel over Plum Noir, the archive interior. Showcase only. 5. **Plaque** — an inline-block name plate on bg-deep with a hard border: page titles, category names as objects. 6. **Legend** — a Plaque's caption, engraved and small. 7. **Band** — a full-rail horizontal strip. Its lintel form is the topbar's threshold. 8. **Ledger** — one surface with ruled rows, no gaps and no per-row card. The category list is a Ledger. 9. **Section header** — display face, uppercase, one colour token, plus exactly one flourish: a gilt rule fading out to the rail's edge. The **reduced** form drops the flourish and keeps the rest. 10. **Icon** — a plate with a pewter ring. Structure is pewter; gilt marks only what can be touched. 11. **Horizon** — a radial glow standing in for hero art. Showcase only. 12. **Well** — the inverse of Panel: a recess cut into a surface, basin darker than its ground, an inset shadow and a faint gilt inner line. Data readings live in Wells. Wells on a row share a grid and are inset on all four sides; the gap between two Wells is their divider — **a Well never carries a rule inside it**. 13. **Stamp** — a small state marker, one word, never a badge-with-count. ### The dividers (the whole inventory) - **Ruling** — the 1px line between rows inside a Ledger. The only separator allowed inside one. - **Fading rule** — a gilt gradient rule that dies out toward the rail. Belongs to Section header; never used alone. - **Lintel** — a Band's top border plus a short gradient falloff. Thresholds only. - **Spine** — a vertical rule separating two columns of equal standing. No other divider exists. In particular there is no plain full-width hairline running corner to corner (Edges Fade). ### Shape, weight and case - **Square.** One shape language for the whole shell. No rounded, no cut, no notched corners. Only the status dot is round, because it is a dot; signets keep the theme's square plate. - **Square edges need falloff.** Every bounded surface carries a wide, offset-down black shadow — no lift, no glow, just the corner catching the room. Without it a square edge reads as a cut and the panel disappears into the page. This applies on every page, not only the showcase. - **Cinzel is always uppercase.** Its lowercase is a small-caps design and reads as a weaker version of the same voice, not a second voice. - **App density = the same components with the sheen off.** Nothing is removed; the flourish and the wash go quiet and hierarchy is carried by tone plus the two metals. ### The ledger row (settled shape) The category row is **tabular + gold**: prose on the left at a fixed measure, and the three right-hand readings — topics, posts, teaser — each in its own Well on a shared grid. Counts get fixed 6rem Wells; the teaser takes the rest. Stat labels are Cinzel small caps at 0.78rem (the DESIGN.md floor). Teaser prose is left-aligned, clamped to two lines, and fills its Well: even inset on all four sides, no wider gap horizontally than vertically. ### Findings - **Ledger and cards-with-gaps are mutually exclusive readings.** Gaps between rows destroy the ledger; the roomy variant looked good but is a different component (Panels), not a Ledger with air. - **The category icon plate's plum wash and desaturation are load-bearing.** ACP category colours arrive candy-bright; stripping the wash to "clean up" the plate breaks the register. Only its ring moves from gilt to pewter. - **`GAME_ICONS.md` maps Programming to `gears.svg`,** which breaks #49's *No Machines, Only Fittings*. Needs re-mapping wherever icon assignments are settled. - **The theme ships `border-radius: 8px !important`,** so squaring the shell is a specificity fight, not a one-liner. Real code should remove the radius at source rather than override it. - **NodeBB's `line-clamp-sm-*` clamps by a hard `max-height` sized to its own line-height.** Any component that sets a taller line-height must clamp by line count instead, or the clamp shaves glyphs. - **The light champagne surface handed over from #53 earns no place in this set.** No component needs it; it stays a possible showcase ornament and is not part of the vocabulary. ### Deferred Well height with a short teaser, and the row's vertical rhythm generally, are spacing decisions owned by **#56 Page width and density system**.

archvillainette closed this issue

2026-07-31 16:01:49 +00:00

archvillainette referenced this issue

2026-07-31 16:04:34 +00:00

GAME_ICONS.md maps Programming to gears.svg, breaking No Machines Only Fittings #65

archvillainette referenced this issue

2026-07-31 16:04:35 +00:00

Remove border-radius: 8px !important at source instead of overriding it #66

archvillainette commented

2026-07-31 16:04:40 +00:00

Two findings from this ticket are filed as their own issues, since neither is a decision the map owes: #65 (Programming maps to gears.svg, breaking No Machines Only Fittings) and #66 (remove border-radius: 8px !important at source rather than overriding it).

Two findings from this ticket are filed as their own issues, since neither is a decision the map owes: #65 (Programming maps to `gears.svg`, breaking No Machines Only Fittings) and #66 (remove `border-radius: 8px !important` at source rather than overriding it).

archvillainette referenced this issue

2026-07-31 22:27:22 +00:00

Role-based token contract #55

archvillainette referenced this issue

2026-07-31 22:27:52 +00:00

The accent plum: Bruised Plum as identity, not lineage #67

Sign in to join this conversation.