SPEC-183
ID:SPEC-183Status:shipped

Prominence is a register: a marquee step, and the header and band scale with it

prominence sizes a section header's title and nothing else. This spec adds a fifth step above display, called marquee, and widens each step to the whole header: the blurb, the space between the title and what follows it, and the padding of a flush band. Lumina gives the display and marquee titles their gradient. With that, the composed hero is section at marquee and the composed cta is section at display, and neither needs CSS of its own.

It corrects one row of SPEC-160 D7, which said a display-size headline and blurb come from prominence="display", "which exists". It does not: reviewing the staged hero on staging.refrakt.md showed its headline, blurb, spacing and gradient all differ from the plugin's.

claude/milestone-v0-44-0-ism7ni View source
Branches 2
claude/milestone-v0-44-0-ism7ni current shipped
changeset-release/main shippedmain shipped
History 8
  1. 55b7111
    Content editedby bjornolofandersson
  2. 07c4ccc
    statusaccepted→implemented
    by bjornolofandersson
  3. 7180562
    Content editedby bjornolofandersson
  4. ab22f98
    Content editedby bjornolofandersson
  5. 6418232
    Content editedby bjornolofandersson
  6. ac66e7c
    Content editedby bjornolofandersson
  7. cd44633
    statusdraft→accepted
    by bjornolofandersson
  8. 9d4a97c
    Created (draft)by bjornolofandersson

Why

The staging review found it. The staged hero (site/staged-runes/hero.md) declares prominence: display, as SPEC-145 D34 has it. Side by side with refrakt.md, the header is smaller, the blurb is body size, the band is tight and the headline is solid. Each is a value the plugin's hero.css sets and section does not.

The numbers show where the gap is. On a flush, full-width band, at the density default:

plugin heroplugin ctasection at display today
Title3.25rem, gradient2.5rem (4xl), gradient1.5rem × 5/3 = 2.5rem, solid
Blurbtext-xltext-lgtext
Block padding7rem / 6.5rem3.5rem / 3rem--rune-padding (spacing-sm)
Buttonslargedefaultlarge (SPEC-160 D7)

display already gives cta's title exactly. hero's title is beyond the ramp: the hero rests above the whole type scale, which hero.css says outright ("stated here rather than promoted to a --rf-text-5xl token"). So no tuning of display serves both runes. Stretching it to 3.25rem would also grow every prominence="display" an author has written (eleven on this site), and cta.

The two other answers are worse.

  • Hero-specific CSS ([data-rune="hero"] .rf-section__headline) works today, since the composed root carries data-rune="hero". It brings back the per-rune stylesheet that going live is meant to delete. A user's own composed landing band could not opt into the look, and the next composed rune that wants it would copy the rules.
  • Leaving the difference makes the composed hero a visibly smaller rune. SPEC-181's first rollout gate (reviewed on its pages, every difference accepted or fixed) would not pass it.

A register is what prominence already claims to be. SPEC-107 introduced it as "the page-section-header type register", and the facet calls it "the header-emphasis axis". Emphasis that stops at the title is half a register: a display headline over a body-size blurb, in a band padded like a card, is not how any theme draws a loud header. The theme owns the magnitudes, as it does for elevation and density; the author, the layout or the composition picks the step.

Decisions

D1 — marquee, a fifth step above display

prominence takes quiet | normal | prominent | display | marquee. marquee is the loudest: a landing page's opening band, one per page in practice.

  • It ramps relative to the resting size, like every step (WORK-538). Lumina's multiplier is 13/6, which gives 3.25rem from the 1.5rem default, the plugin hero's size. The ladder is then 5/6, 1, 5/4, 5/3, 13/6.
  • The value list is one constant, PROMINENCE_VALUES in packages/transform/src/facets/prominence.ts. The universal attribute definition, RuneConfig.defaultProminence, the docs and the editor read it, or are made to.
  • display is unchanged, so no prominence="display" written today moves.
  • On a phone the two loud steps ramp smaller (amended 2026-10-31, WORK-690): below 640px of container width, marquee at 5/3 (2.5rem) and display at 4/3 (2rem), so a long word fits the line. At 3.25rem, "Documentation" overflowed a 390px screen. The plugin hero and cta take the same sizes, so the two stay identical until they go live.
  • The composed hero defaults to marquee, and the composed cta declares prominence: display (it declares no prominence today, resting at normal).

marquee on a rune that already rests at a large size ramps from that size. The plugin hero, at 3.25rem, would give 7rem. That is the relative ramp's known behaviour and is not special-cased: the plugin hero is being replaced, and no other rune rests above the scale.

D2 — each step sizes the whole header

A prominence step publishes the header's values, not just the title's:

custom propertywhat it sizesquiet, normalprominentdisplay, marquee
--rf-prominence-sizethe title (exists)ramprampramp
--rf-prominence-blurb-size[data-section="description"]texttext-lgtext-lg at display, text-xl at marquee
--rf-prominence-header-scalea multiplier of the header's gaps (after the title, and after the header)the section's own1.25×2×
  • The values are Lumina's, written as custom properties in dimensions/surfaces.css beside the title ramp. Another theme sets its own or none. They are not added to the typed token contract (SPEC-048), for the same reason the hero's resting size never was.
  • Each is cleared at every rune root, where density.css already clears --rf-prominence-size. A raised card inside a marquee hero keeps its own header. This is the protection SPEC-160 D7 relies on for button size, extended to the new properties.
  • normal sets nothing. A section at its resting prominence looks as it does today.

D3 — a flush band is padded by its prominence

On elevation="flush", display and marquee set the band's block padding:

stepblock paddinginlinea cover band's content under 640px
display3.5rem / 3rem2rem2.5rem / 2rem, 1.25rem inline
marquee7rem / 6.5rem2rem3.5rem / 3rem, 1.25rem inline

These are the plugin cta's and hero's own values, and the plugin hero's mobile cover values. A page that bleeds the band full width replaces the inline padding with its gutter.

(Amended 2026-10-31, after the staging review: the band keeps its block padding on a phone, as the plugin hero does, and only a cover band's overlay tightens it. The 2rem inline padding was missing; without it a band's content ran to its edges.)

  • Only flush. raised, flat and the card surfaces take their padding from elevation's chrome bundle and density, as now. Padding a raised card by its header's emphasis would change every prominence an author has put on one.
  • Only the two loud steps. quiet, normal and prominent keep --rune-padding, so a flush section with a prominent header is unchanged.
  • It reaches other flush display runes too, on purpose. The surfaces page's "card vs hero" examples (a flush, full-width, display recipe and blog) gain the 3.5rem band padding. That is the example's point, a rune read as a hero, and it is reviewed on that page with the rest.
  • Cover moves the padding onto the overlaid content, as hero.css does today (--rune-padding on [data-name="content"]), so the media well stays flush with the band.
  • Inline padding is not prominence's. It stays with width and inset, and any difference from the plugins' 2rem is a review finding, recorded or fixed with the rest.

This is the one place the axis reaches past type. The alternative, a padding attribute on the composition, would make every composed band restate what its prominence already says.

D4 — Lumina gives the display and marquee titles their gradient

Lumina draws a display or marquee title with the gradient the plugin hero and cta both use, text to muted at 135°, clipped to the text. It is a theme choice, not part of the step: another theme draws them however it likes.

(Amended 2026-10-30, implementing WORK-689: this first gave the gradient to marquee alone, on the belief that the plugin cta is solid. It is not. The display blurb was also first text-xl; the plugin cta's is text-lg, which D2 now gives display. Both were settled to match the plugins. The surfaces page's display examples take the gradient too.)

  • It rides custom properties (--rf-prominence-title-fill, -clip, -ink), set by the two steps and cleared at every rune root (D2), so a nested rune's title is never painted.
  • Forced colours and a tint drop it. Under forced-colors: active the title is plain text. When the section carries a tint whose text colour differs from the page's, the gradient is computed from the tint's tokens, since it is built from --rf-color-text and --rf-color-muted.

D5 — buttons are large at marquee only

SPEC-160 D7 (decided 2026-10-26) gives display and prominent the large buttons, today's hero size. Under D1 the composed cta is display, so it would get hero-sized buttons, a difference from the plugin cta that nothing asked for. The large size moves up with the hero:

  • marquee gives the large size. Every other step, and an actions with no prominence around it, gives the default, today's cta buttons.
  • actions.css changes one selector; the mechanism (--action-padding, --action-font-size, keyed on the nearest section's data-prominence) is unchanged.
  • A prominence="display" or "prominent" section with actions, written today, gets the default buttons. No page on this site is affected outside the hero and cta pages being reviewed.

D6 — the composed hero and cta carry no CSS, and the plugin stylesheets go with them

With D1–D5, every rule in lumina/styles/runes/{hero,cta}.css has a home outside the rune: the title and blurb in D1–D2, the spacing in D2–D3, the gradient in D4, the button sizes in D5, and the rest where SPEC-160 D7 already put it. The plugin stylesheets are deleted when each rune goes live (SPEC-181), not before. Until then the plugin runes keep their own CSS and are unaffected: they rest at --rf-title-size: 3.25rem and 4xl, and an author writes no marquee on them.

The measure moves from the header to the blurb. The review on staging showed section's 65ch header measure wrapping a marquee title the plugin set on one line. At display and marquee the header takes the column's width (--rf-prominence-header-measure: 100%) and the blurb the plugins' 40rem (--rf-prominence-blurb-measure). The header is never wider than its column, so a word too long for a phone overflows evenly around a centred title, as the plugin's does.

Not in scope

  • Retuning display or the lower steps. Their title sizes are unchanged.
  • A larger type token. marquee reaches 3.25rem by the ramp, not by a --rf-text-5xl.
  • prominence on header-less runes. It is still dropped with a warning there (SPEC-107).
  • Going live. hero and cta go live per SPEC-181 once v0.44.0, which first accepts their new forms in the plugin, has been released for one version.

Open questions

  • Whether display should also pad a non-flush band, e.g. a raised cta card. Left out; the current cta is flush.

Acceptance Criteria

  • prominence accepts marquee, from one value list, with a title ramp of 13/6 in Lumina; display and the lower steps are unchanged
  • Each step publishes --rf-prominence-blurb-size and --rf-prominence-header-scale, cleared at every rune root, and normal sets nothing
  • A flush section at display or marquee takes the block padding of D3, at both widths, and a cover band moves it onto the overlaid content
  • Lumina draws a display or marquee title with the gradient through --rf-prominence-title-fill, never on a nested rune's title, and not under forced colours
  • The large buttons apply at marquee only
  • The staged hero defaults to marquee and the staged cta declares display, and their comparison tests assert the title size, blurb size, spacing, gradient and button size against the plugin, with each remaining difference explained
  • The surfaces reference page, the theme-authoring dimensions page and the composed-runes guide document marquee and the widened register
  • contracts/ and the SEO baseline are regenerated where the new value appears, and CSS coverage passes

References

  • SPEC-107: the elevation and prominence surface axes.
  • SPEC-160: D7, the row this spec corrects, and the button-size decision D5 amends.
  • SPEC-145: D33–D34, the carrier and the composition's defaults.
  • SPEC-181: the staging review this came out of, and the rollout gates.
  • WORK-538: the relative prominence ramp.