All six levels ship the same class, so the ladder is expressed by tag alone. h1 and h2 take chrome-highlight because hero-scale titles are where light physically falls; h3–h5 step down to chrome-warm; h6 cools to chrome-dim micro annotation. The ember light-hit above h1/h2 is a pseudo-element — no DOM added.

Body copy at 16px / 1.55 in chrome-warm, capped to a 68-character measure. Bold lifts to chrome-highlight — emphasis reads as a light-catch rather than a weight change alone. Inline code becomes an ember-tinted chip; prose links keep the ember hairline underline that the data widgets below deliberately drop.

Three attributes the editor writes onto the same paragraph class. The drop cap takes ember-glow with a soft bloom — forge light landing on the first letter. The two size presets shift scale and tone together so the operator can see which one they picked.

The li carries no class of its own, so both markers are drawn with pseudo-elements: an ember square for bullets, tabular ember numerals for ordered lists. At the nested level the bullet cools to a hollow chrome square and the nest sits behind an ember-dim rule, so hierarchy reads structurally rather than by indent alone.

Carries the brand's existing attributed-quote treatment across to the core selector: a 3px ember edge, an ember wash falling away to the right, and an ember cast to the left of the plate. The cite has no class, so it is reached as a descendant and takes the em-dash-in-ember convention.

A recessed plate framed top and bottom by ember hairlines — the seam signature at component scale. Deliberately centred and display-set so it can never be mistaken for the left-edged quote above it.

Three pre blocks that must never look alike. Code is a recessed plate with an ember left edge and an ember legend tab sitting on the top edge — the brand's legend-breaks-the-border move, drawn with a pseudo-element. Preformatted is the data register: a raised plate, chrome edge, tabular figures. Verse is editorial and therefore takes the body font, not mono.

.saber-core {
  sound-font: xenopixel;
  blade-colours: 16700000;
  duelling-grade: heavy;
}

HILT             CORE            BLADE
Anakin EP3       Xenopixel V3    36in RGB
Weathered Maul   Proffie 2.2     2x 32in
Kanan Jarrus     SNV4 PRO        36in RGB

A blade is not a weapon
until the hand that holds it
knows why it was lit.

ConfirmThe styleguide names no monospace family. Code and preformatted use a neutral system mono stack, framed in brand chrome so they still read Kyber Hull. If a licensed mono is wanted, name it and the two blocks inherit it with no other change.

Real MathML, not an image — which means its parts are individually styleable. Identifiers take chrome-highlight, numerals take ember-glow with tabular figures, operators take ember. The result reads as brand-native without any custom rendering.

DOM flagWanted the LaTeX source as a caption beneath the expression. It sits in <annotation> inside <semantics>, which browsers hide and CSS cannot reposition. Needs a custom block or a render filter, not CSS.

Currently one declaration. There is no column-count modifier in the emitted markup, so the treatment has to hold at any count. Chosen: a vertical joint hairline between columns, negative-margin-matched to the gap so the rule sits exactly on the join. Two-up and three-up below are the same CSS.

DOM flagWanted each column as a raised plate with a chrome top-edge — what an operator building a three-up feature row expects. Not built: .wp-block-column also wraps bare prose columns where a plate is wrong, and core emits no modifier distinguishing the two uses, and no column-count modifier at all. Fix: register a core/columns style variation (e.g. is-style-plated) and hang the plate off that.

Currently one declaration. The consequential fact is the inner container: children nest one level deeper, so every interior rule reaches through it. A plain group stays invisible — it is a layout primitive. A group with a background becomes a raised plate carrying the brand's boxed-content treatment: 3px ember edge, chrome top hairline, ember bleed down the edge. Operator padding from the Dimensions panel arrives inline and correctly wins.

DOM flagThe design brief mandates the legend-breaks-the-border treatment for every bordered content group. Core/group emits no label element, and a pseudo-element cannot read operator text. Fix: a custom content-group block with a legend field — core/group stays the unlabelled variant.

The default takes the brand's ember hairline: transparent at both ends, ember-glow at the centre, soft bloom beneath. Wide runs the full container. Dots re-tint core's own glyph mechanism to ember. The registered is-style-wide “Hairline rule” is deliberately the quiet one — a chrome hairline with a single ember dash at the left end, the rule that opens a spec strip rather than a decorative divider.

Deliberately untouched. The inline height is the operator's instrument and the theme must not override it — the only declaration applied is display: block so it survives inside a flex parent. The paragraph below sits 60px down.

The spec-sheet register the brand already uses for hilt specifications: header cells in ember uppercase micro-type over an ember hairline, body rows separated by dim hairlines rather than zebra fills, and tabular figures throughout. The first column takes the label treatment — body font, uppercase, chrome-dim — so a two-column table naturally becomes a spec-pair list.

DOM flag“First column is the label side” is right for a two-column spec pair and wrong for a wide numeric table — core emits no class distinguishing the two shapes. Fix: a core/table style variation (is-style-spec) carrying the label-column treatment.

Editorial content, so titles stay display-set headlines rather than nav labels. The date ships after the title in the DOM; flex order: -1 lifts it into the eyebrow position above without touching the markup — a good example of a treatment reachable despite fixed source order.

A recessed plate of HUD rows. Top-level terms take chrome-warm uppercase display type over hairline seams; the nest indents behind an ember-dim vertical rule and drops to body font at lower emphasis, so two levels are legible without a single indent guess. Hover goes ember — the only place ember appears at rest is the tree rule.

Core writes an inline font-size in points on every tag — 8pt to 22pt here — as its only weight signal. The treatment works with that rather than against it: each tag becomes a chip whose padding is em-based, so the point range reads as deliberate chip scale instead of a ransom note. Hover fills with the ombre gradient, the one place a widget borrows the CTA fill.

DOM flagThe inline point size is core's only weight signal, and CSS can only override it with !important — which throws the weight information away. Treatment authored to read across the full 8–22pt range instead. Real fix is a wp_tag_cloud args filter in PHP (smallest / largest / unit), not CSS.

HUD rows with a dotted leader running to the right edge — the same leader mechanism as the file block, so a date list and a spec row share one visual grammar. Tabular figures keep the months in column. The empty state ships as a div carrying the same classes, so it is styled too.

Deliberately not a tree: a flat two-column HUD grid, so it can never be mistaken for the categories widget above. Each row opens with a dim square tick that ignites ember on hover; the current page keeps the ember tick lit and lifts to chrome-highlight.

Decision: work with core's per-service SVG rather than replace it. Core injects each service's own path, and fill: currentColor hands the brand complete colour control — so a custom block would buy nothing but maintenance. Each becomes a 46px square plate at zero radius with a chrome top-edge; hover lifts it and fires the ember hot-rim.

The one widget in this family whose content is genuinely editorial, so titles stay sentence-case headlines while the date carries the HUD register — mono, tabular, wide-tracked, right-aligned in its own column. That split is what stops a feed reading like a nav list.

Carries the brand's existing breadcrumb treatment across almost unchanged: display font, 11px, 0.14em tracking, uppercase, links chrome-dim going ember on hover, current page chrome-warm. The separator glyph arrives as an inline --separator custom property, so it is honoured rather than hard-coded — the operator sets it on the block.