#>design
ornament layer idle-loaded calm at rest

Design / Ornament

Ornament Map

An ornament is the visual projection of the attention field. It does not invent a meaning; it shows one that is already there: which operator this is, whether it is warm right now, whether you collected it, whether a setting has drifted. This page maps every mark you can author to the sheet that paints it and the rule that says when it may.

Ornament arrives after first paint with the flourish pack, so nothing on this page may move, hide, or resize structure when it lands. Read a mark here, then find it in the wild on the materials bench, the palette workshop, or any frame topline.

ink
^"altitudes"{

Three altitudes, one mark

Semantic state is authored in HTML. Field state is written by the runtime as attention moves. Ornament reads both and paints. A mark that reads only the first is a label; a mark that reads only the second is fog.

How an ornament is composed from semantic state and field state Three horizontal bands. The lowest band, semantic state, holds authored attributes such as operator, role, and collected. The middle band, field state, holds runtime attributes such as wonder state, resonance, and deviation. The top band, ornament, holds the painted marks: guide badge, ribbon, kicker, rail, rule, corner. Arrows rise from both lower bands into each mark. semantic state · authored in HTML data-spw-operator · data-spw-role · data-spw-kind · data-spw-collected · data-spw-ornament field state · written by the runtime data-spw-wonder-state · --spw-resonance · --spw-attention-light · data-spw-deviation ornament · painted, idle-loaded, calm at rest guide badge ribbon kicker rail meter cluster rule corner slice
Two inputs, one paint. Every mark below names which of the two it reads.
<vocabulary>

What you can author

One stem, data-spw-ornament, carries the authored family; the classes carry the anatomy. No fourth family. Each card shows the mark live, then names its owner.

Ribbon and kicker

ornament ribbon

kicker secondary subtle

Reads semantic state through the operator accent. A ribbon glows only when its state is active.

.spw-ornament-ribbon · .spw-ornament-kicker → ornament/ornament.css §5

State, density, axis

data-spw-ornament-state = idle · glowing · revealed · active · settled

data-spw-ornament-density = low · medium · high

data-spw-ornament-axis = inline · stack · radial

The three host attributes. State is the only one the runtime writes; density and axis are authored.

→ ornament/ornament.css §2 · contract .spw/conventions/ornament-contract.spw

Rail with setting chips

mode

A rail hosts site settings as anatomy so a still can name its climate. The chips are real: press one and the page changes mode; the rail above the title recolors every mark here.

.spw-ornament-rail + data-site-setting-set → ornament/ornament.css §17

Rule

A hairline with an operator-colored notch. The notch lengthens with resonance; the line brightens with the frame's attention light. Calm at rest, it reads field state only.

hr[data-spw-ornament="rule"] → ornament/ornament.css §18

Corner

Four ticks at the corners of a frame or panel. They spend the host's attention light and retreat when the host is dimmed, so a lit frame reads as held and a dimmed one as set down. Zero flow: they move nothing when they arrive.

.spw-ornament-corner (an empty child) → ornament/ornament.css §18

Canvas accents

data-spw-accent = wave · vortex · crystal · resonance · lattice · flow

A canvas behind a host, drawn by the accent runtime. The accent reads field intensity and salience; it never paints structure.

→ ornament/canvas-accents.css · .spw-accent-host

Texture slices

data-spw-texture-slice = paper · linen · harlequin · wash · auto

A crop of texture beneath content that lifts on hover, focus, or charge. Material specular times the light the biome leaves decides how strong the return is.

→ effects/texture-slice.css · contract material-physics.spw#states.slice

Visited, collected, deviated

Three marks that must stay distinct: a visited surface takes a ◈ stamp; a collected term takes a hard floor mark that does not decay; a deviated setting takes a quieter third glyph near its control. If all three only brightened teal, the field model would fail its own legibility test.

[data-spw-visited] → effects/wonder.css · triad → ornament-contract.spw#distinct_marks_prime

Site rhythm, holidays, whimsy

data-spw-ornament="site-rhythm" paces ornament to the site tempo. Holiday tropes idle with the flourish pack and never enter core. Whimsy is the quiet interaction grammar of sigils and folds: alignment, focus, revealed structure, no decorative motion.

→ ornament/holiday-tropes.css · ornament/whimsy.css · design-whimsy.spw

?[may_it]

Four questions before a new mark

  1. Which altitude does it read? Semantic, field, or both. A mark that reads neither is decoration, and the wonder doctrine already refuses it.
  2. Does it move anything when it arrives? Ornament idle-loads. If first paint would be wrong without it, it is structure and belongs in a components sheet.
  3. Is it calm at rest? Resonance, charge, and attention may lift it. Nothing else should.
  4. Which existing stem carries it? data-spw-ornament, data-spw-accent, data-spw-texture-slice, or a class. A fourth family is a refusal.