ARTSABERS — Editorial Content Spec Build Brief

BBAS18 Build Brief ARTSABERS

ARTSABERS — Editorial Content Spec · Build Brief (DRAFT)

Draft for operator review before publishing to design CPT. Same shape as the MAS52 Form Component spec — standalone reference artefact, no page-level context.

Purpose

Standalone spec artefact — the reading-surface pattern library that every ARTSABERS blog/editorial template inherits from. Same role for editorial content that MAS52 plays for forms. Locks reading typography, long-form patterns (pull-quotes, callouts, inline images, drop-cap), article chrome (byline, tag row, share row, related-articles card), and the two body-density modes the single flexible article template needs to hold — announcement (short News items) vs long-form (Lore & Short Stories + editorial Guides & Tips).

Not tied to a page. New design_type = editorial-patterns term. Referenced by the article template + blog archive + (optional) category page from this spec on.

Direction

Kyber Hull — apply SAS1 tokens. Reuse the spec-header pattern from MAS52 verbatim (dark carbon + ember bottom border + ember drop-shadow glow + generous padding). Reuse the panel-joint hairline background pattern from MAS51/MAS57 for section grounds. Fieldset border pattern from MAS52 for framed pattern panels in the appendix. Zero border-radius sitewide. Manrope at body scale for the reading surface; Space Grotesk at display for hero + section eyebrows + drop-cap.

Chrome vs copy discipline (LOCKED)

Editorial content is where the Kyber Hull brand voice can breathe — but the discipline holds:

Copy surfaces (article body, hero title, hero subtitle, section eyebrows, callout body, pull-quote content, related-articles teasers, empty-state prose) — brand voice welcome. Warm cinematic workshop metaphor allowed. First-person to the reader in the hero. Section eyebrows can lean poetic.
Chrome surfaces (byline label "Written by", "Read time", category chip, tag chips, "Related reading", "Share", "Continue reading", pagination labels) — plain English, no clever renames. A customer skimming has to understand instantly what each label means.

Scope — what this spec covers

Reading typography scale — full type stack for the article body (H1 through small caption)
Long-form content patterns — pull-quote, blockquote, callout box, inline image + caption, image pair, full-bleed image break, drop-cap, section break, lists
Article chrome — hero variants, byline row, tag chip row, share row, related-articles card, author profile card
Two body-density modes — announcement (compact hero, tight body, minimal chrome) vs long-form (full-bleed hero, generous imagery, all inline patterns available). Same DOM/CSS, differentiated by modifier + content authorial density.
Inline advert block — long-form-only conversion pattern; writer inserts at editorial discretion. Four variants: product / category / newsletter / promotion.

Sections (top to bottom)

1. Spec header

Same pattern as MAS52 verbatim: dark carbon background (NOT panel-tone), ember bottom border, ember drop-shadow glow, generous internal padding.
Eyebrow (ember display, letter-spaced uppercase): EDITORIAL PATTERNS · v1.0
Title (Space Grotesk display): The reading-surface pattern library.
Sub-line body (Manrope, muted): "Every ARTSABERS blog article inherits from this spec. Two body-density modes — announcement + long-form — share the same DOM. Every pattern below composes freely."
Small metadata line at the bottom right (muted): "Ref MAS?? · Kyber Hull v4.2.1 · Manrope + Space Grotesk"

2. Worked example — Announcement mode

Renders a compact News post using the spec. Real content, not lorem.

Title: Order Delay Update: Production & Fulfilment Status
Category chip: ARTSABERS News (ember-hairline chip, uppercase, letter-spaced)
Hero: compact panel-joint background variant (~360px), eyebrow shows category, title in ember display, one-line subtitle, byline appears IN the hero (Chloe · 8 Jul 2026 · 3 min read).
Body: ~250 words. No pull-quote, no callout, no inline images. Runs single-column, max-width 68ch. Two H2 subsections. Ends with a small "Signed, Matthew" bylined sign-off.
Footer: hairline separator → tag chip row → share row → related-articles 3-up card. No author profile card (in any mode).

3. Worked example — Long-form editorial (Guides & Tips)

Renders an educational how-to piece using the spec. Real content.

Title: Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet
Category chip: Lightsaber Guides & Tips
Hero: compact panel-joint background variant (~460px — slightly taller than announcement to accommodate longer title + subtitle). Eyebrow category chip, title, two-line subtitle, byline (Chloe · 12 Jun 2026 · 8 min read).
Body: ~1,400 words. Drop-cap on opening paragraph (Space Grotesk display, ember, 5 lines tall). Section breaks with ember hairline every ~350 words. One inline callout box mid-body ("KEY TAKEAWAY — a duelling helmet complements the blade…"). One inline image + caption around the 60% scroll depth. Numbered list showing the three complementary pairings. Terminal sign-off paragraph.
Footer: hairline separator → tag chip row → share row → related-articles 3-up card.

4. Worked example — Long-form editorial (Lore & Short Stories)

Renders a narrative/lore piece using the full pattern library. Most intensive mode.

Title: Claim the Blade. Wear the Mask. Live the Myth.
Category chip: Lore & Short Stories
Hero: full-bleed atmospheric variant (~700px). Real AI-generated Kyber Hull hull-plate imagery (or narrative-appropriate scene — describe archetype, not named character), dark overlay stack (62/72/88%), corner ember bloom. Ember eyebrow category chip, title in cinematic Space Grotesk display (larger scale), one-sentence subtitle, byline row appearing after ~200px scroll (not IN hero — content-first entry).
Body: ~1,800 words. Drop-cap on first paragraph — Space Grotesk display type, 5 lines tall, ember colour, letter-spaced. Section breaks with ember hairline. One large pull-quote at ~40% scroll, one inline image pair at ~60% scroll, one full-bleed image break at ~75% scroll. Blockquote at ~85% scroll (attributed). Terminal sign-off in italic.
Footer: hairline separator → tag chip row → share row → related-articles 3-up card. Also: a subtle "Continue the story →" band at the very bottom linking to the next post in the same category (design-phase spec — implementation optional).

5. Patterns appendix

Each pattern rendered in isolation, in a bordered content-group panel (MAS52 fieldset border). Section legend on top border. Composable — any article can use any subset.

Panels:

Typography scale — one panel showing H1, H2, H3, H4, body large, body regular, body small, caption, all with pixel sizes + line-heights annotated in the margin (muted display type notes).
Pull-quote — large — full-width variant, 40px display type, ember hairline top + bottom, cinematic centred layout.
Pull-quote — inline — half-width variant, sits pulled to the right or left within body flow, 26px display, ember-hairline side border.
Blockquote — attributed + unattributed variants side-by-side. Manrope body, left indent, ember hairline left border.
Callout box — ember-bordered card with ember icon chip top-left, uppercase display eyebrow (e.g. "KEY TAKEAWAY"), one-paragraph body. Three variants: KEY TAKEAWAY, DID YOU KNOW, CAUTION (forge-red hairline instead of ember for the CAUTION variant).
Inline image + caption — image at body max-width, caption below in small muted body, ember eyebrow "Fig. 1" style.
Image pair — two images side-by-side at body max-width, gutter between, one caption per image, mobile stacks vertically.
Full-bleed image break — image at 100vw, breaks out of body max-width, subtle ember hairline top + bottom, optional muted caption below at body max-width.
Drop-cap — Space Grotesk display, ember, 5 lines tall, letter-spaced. Implemented via Gutenberg core dropCap paragraph attribute; theme styles .has-drop-cap p::first-letter. Writer applies at their discretion when authoring — no template-level automation, no per-article enforcement.
Section break — ember hairline, 60px vertical margin, no text. Alternate variant: small "· · ·" ember dots.
Bulleted list — ember bullet marker.
Numbered list — ember number, Space Grotesk display, letter-spaced.
Byline row — avatar (36×36 circle) + author name (display) + separator dot + date (muted body) + separator dot + reading time (muted body) + separator dot + category chip.
Tag chip row — 4–6 tag chips, uppercase Manrope small, ember hairline border, chrome-warm text on carbon ground.
Share row — four buttons horizontal: X (Twitter), Facebook, Reddit, Copy link. Icon-only on desktop, native share overlay on mobile via Web Share API. NO LinkedIn, NO WhatsApp, NO SMS separate button.
Related-articles card — 3-up card, each card = featured image + category chip + title + reading time. Ember-hairline separators. Section eyebrow: "MORE FROM THE BLOG".

Two body-density modes — how they differ

Announcement mode (used for News):

Hero: compact panel-joint variant, ~360px
Byline: appears IN hero
Body: ~200–400 words typical
Drop-cap available via Gutenberg dropCap attribute — writer applies on the opening paragraph when appropriate
No pull-quote
No inline callout box
No inline images (or one at most)
Related-articles card ON by default (per-post override via _hide_related postmeta — backend-dev wires the admin toggle at build-out)
No author profile card
No advert block — announcement mode never renders inline adverts (too short + timely for conversion moments)
Footer: tag row + share row + related-articles card

Long-form mode (used for Guides & Tips + Lore & Short Stories):

Hero: compact panel-joint (Guides ~460px) OR full-bleed atmospheric (Lore & Short Stories ~700px)
Byline: below hero (long-form) or after scroll (full-bleed atmospheric)
Body: 1,000–2,500 words typical
Drop-cap available via Gutenberg dropCap attribute — writer applies on the opening paragraph when appropriate
Pull-quotes available
Callout boxes available
Inline images / image pairs / full-bleed breaks available
Related-articles card ON by default (per-post override same postmeta as announcement mode)
No author profile card
Inline advert block available — writer inserts at editorial discretion, typical placement every ~600-800 words, never immediately after an H2, never before the final section
Footer: tag row + share row + related-articles card

Same DOM. Differentiated by:

.article--announcement vs .article--long-form modifier on the root
Content authorial density (writer’s editorial call, not template forcing)
Optional .hero--full-bleed modifier on the hero (long-form only)

Article chrome — copy decisions locked

Byline label: no explicit "Written by" — just avatar + name.
Reading time: enabled — auto-calc from word count (200 wpm baseline). Label: "8 min read" (plain).
Category chip: category name in uppercase display, letter-spaced, ember hairline. Not a prefix like "Category: Guides".
Tag chip row: uppercase Manrope small, plain tag names.
Share row buttons: icon-only on desktop, no labels. Native share on mobile.
Related-articles section eyebrow: MORE FROM THE BLOG (plain).
Comment section: explicitly omitted from spec. Never appears in any worked example. Never in the appendix. Article template does not render a comment section under any mode.
Author profile card: explicitly omitted from spec. Byline row in the hero + related-articles card are the article’s chrome — no expanded author biography anywhere on the article page.

Reading typography scale

Role	Font	Weight	Size (desktop)	Line-height
Hero display (full-bleed)	Space Grotesk	500	72px	1.05
Hero display (compact)	Space Grotesk	500	48px	1.1
Article body H2	Space Grotesk	500	32px	1.2
Article body H3	Space Grotesk	500	24px	1.25
Article body H4	Space Grotesk	500	20px	1.3
Body large (lead paragraph)	Manrope	400	20px	1.6
Body regular	Manrope	400	18px	1.65
Body small (captions, meta)	Manrope	400	14px	1.5
Pull-quote large	Space Grotesk	500	40px	1.2
Pull-quote inline	Space Grotesk	500	26px	1.3
Drop-cap	Space Grotesk	500	~90px (5 lines tall)	1.0
Category chip	Manrope	500 uppercase	12px	1.0
Tag chip	Manrope	400 uppercase	11px	1.0

Body max-width: 68ch (roughly 640px at 18px body). Full-bleed images break out. Hero content max-width matches body.

Reuse from prior mockups

Spec-header pattern — MAS52 verbatim (dark carbon + ember-glow bottom border + ember drop-shadow + generous padding)
Panel-joint hairline background — MAS51/MAS57 (for section grounds under the worked examples)
Fieldset border content-group — MAS52 (framing the pattern appendix panels)
Ember hairline separator — MAS43/44/51/57/60/62 (section break pattern)
Full-bleed atmospheric hero — MAS62 verbatim (real Kyber Hull hull-plate imagery + dark overlay stack + corner ember bloom, overflow: visible on the hero container)
Compact page header — MAS51/MAS57 (announcement + Guides & Tips heroes)
Ember display type + chrome-warm body — SAS1
Site nav + footer — MAS51 (worked examples show full page chrome to demonstrate context)

What this spec deliberately does NOT include

NO comment section — anywhere. Not in worked examples, not in appendix, not in any pattern.
NO share-count numbers on the share row — clean icon-only buttons, no vanity numbers.
NO estimated reading progress bar at the top of the article. Reading time in byline is enough.
NO email newsletter signup inline in the article body — email capture lives in the site footer (per audit finding #5).
NO ad slots — ARTSABERS blog is owned content, no third-party ads planned.
NO cross-sell product strips inline in the article body — cross-sell belongs on product + cart, not editorial. Related-content ties to other articles only.
NO "trending" or "most-read" widget in the article chrome. Related-articles card is enough.
NO brand-voice renames of chrome — categories, tags, share labels, "Related" all stay plain English (per the chrome-vs-copy rule).

Copy locks (worked examples — verbatim)

Announcement mode worked example

Title: Order Delay Update: Production & Fulfilment Status
Category chip: ARTSABERS News
Byline: Chloe · 8 Jul 2026 · 3 min read
Subtitle: "A candid update on where your order sits and when you’ll hear from us next."
Body: two ~120-word sections — Section 1 titled "Where we are right now", Section 2 titled "What happens next". Sign-off: "Signed, Matthew (ARTSABERS)".

Guides & Tips worked example

Title: Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet
Category chip: Lightsaber Guides & Tips
Byline: Chloe · 12 Jun 2026 · 8 min read
Subtitle: "The blade tells one side of the story. The helmet tells the other. Here’s why the pair is more than the sum of its parts."
Body sections: "The blade alone" · "The helmet alone" · "Why the pair works" · "Three pairings we love". Callout at mid-body: "KEY TAKEAWAY — A helmet turns a saber from a solo prop into a costume. Costume-ready shifts your collection from displayable to wearable."
Sign-off: "May the force be with you both."

Lore & Short Stories worked example

Title: Claim the Blade. Wear the Mask. Live the Myth.
Category chip: Lore & Short Stories
Byline: Chloe · 3 May 2026 · 12 min read
Hero subtitle: "One night. One choice. One decision that would change everything."
Drop-cap paragraph opener: The workshop smelled of ozone and warm metal…
Pull-quote (~40% scroll): "You do not choose the blade. The blade chooses the hand that carries it."
Blockquote (~85% scroll, attributed): "The Kyber sings to those who listen." — Ancient Jedi Codex, unnumbered fragment
Sign-off: — Chloe

Placeholder imagery for the spec artefact

Worked example 3’s full-bleed hero — use one of the accepted Kyber Hull hull-plate variants OR a new Nano generation using the locked style-frame ("Cinematic sci-fi photograph, moody atmospheric lighting with warm orange ember accents from one side, matte carbon-black tones, editorial magazine composition, no visible text or logos, no bright highlights, subtle depth, Bloomberg feature magazine style. [+ narrative-appropriate scene]").
Guides & Tips worked example inline image — a real ARTSABERS saber + helmet product image pair from live catalogue (via switch_to_blog(10)).
Related-articles cards — pull three real live posts from the ARTSABERS blog by title + featured image URL. Fetch these fresh at authoring time.
Author avatar (Chloe) in byline row — placeholder circle with initial "C" in ember on carbon; real avatar goes in at build-out.

Kyber Hull styling notes

Ember accent on: category chip hairline, pull-quote hairline, callout ember-bordered card, drop-cap, list markers, section-break hairline, hero eyebrow, related-articles card hairlines, tag chip hairline.
Forge-red (#E63929, from MAS52) reserved for CAUTION callout variant only. Not otherwise used in editorial context.
Zero border-radius everywhere.
Body ground: #131313 (SAS1 background). Sections alternate between plain carbon + panel-joint hairline pattern (rest surface) and delicate hull-plate atmospheric imagery (hero + full-bleed image breaks).
Panel-joint hairline background under the pattern appendix section grounds.

Gutenberg block mapping (audit for backend-dev)

The article template is built on Gutenberg. Content patterns render from the_content() (writer inserts blocks per post); chrome patterns render from single.php around it. This audit maps every editorial pattern to its block or template-level render. Applies the no-theme.json rule from httpdocs/CLAUDE.md — all Gutenberg options via PHP filters (add_theme_support, register_block_style, register_block_type), never theme.json.

Content patterns → Gutenberg (writer inserts in post_content)

Editorial pattern	Gutenberg approach	Build effort
H2 / H3 / H4	`core/heading`	none — theme CSS
Body paragraph	`core/paragraph`	none
Drop-cap opener	`core/paragraph` with built-in `dropCap` attribute	none — theme CSS on `.has-drop-cap p::first-letter`
Pull-quote large	`core/pullquote` (default centred)	none — theme CSS
Pull-quote inline	`core/pullquote` with alignment `left` / `right`	style variation via `register_block_style`
Blockquote (attributed / unattributed)	`core/quote` (cite element for attribution)	none
Callout box (KEY TAKEAWAY / DID YOU KNOW / CAUTION)	Custom ACF block with variant dropdown	one small ACF block
Inline image + caption	`core/image` (native caption)	none
Image pair	`core/columns` with 2× `core/image`	none
Full-bleed image break	`core/image` with `alignfull`	`add_theme_support('align-wide')` in `functions.php` + `.alignfull` CSS
Section break (ember hairline)	`core/separator` default	style variation for ember colour
Section break dots	`core/separator` with `is-style-dots` (core-provided)	none
Bulleted list	`core/list` unordered	none — ember bullet via theme CSS
Numbered list	`core/list` ordered	none — ember number via theme CSS
Inline advert block (4 variants: product / category / newsletter / promotion — long-form only)	Custom ACF block with variant dropdown	one custom block

Chrome patterns → template-level (single.php composes around post_content)

Chrome element	Rendered by	Data source
Hero (compact)	`single.php` header	title, excerpt, featured image, category term, post date, calculated read time
Hero (full-bleed atmospheric)	`single.php` variant (opt-in via `_hero_variant` postmeta or category-conditional)	same + featured image at full-bleed
Byline row (avatar + name + date + read time + category chip)	`single.php` header	`get_the_author_meta()`, `get_the_date()`, `get_the_terms(cat)`, custom `camcom_read_time()`
Tag chip row	`single.php` footer	`get_the_tags()`
Share row (X · Facebook · Reddit · Copy link)	`single.php` footer	custom render + JS `navigator.share` for mobile
Related-articles 3-up card	`single.php` footer	`WP_Query` filtered by category, exclude current, `posts_per_page=3`. Bypass via `_hide_related` postmeta.
Continue-the-story band (Lore only, per-post opt-in)	`single.php` footer, conditional	`get_adjacent_post()` filtered by same category
Page nav + footer	`header.php` + `footer.php`	site-wide template parts

Custom build needed at conversion phase

Callout box block — one custom ACF block with variant dropdown (KEY TAKEAWAY / DID YOU KNOW / CAUTION). CAUTION variant swaps ember hairline for forge-red.
Advert block — one custom ACF block with variant dropdown (product / category / newsletter / promotion). Long-form only; announcement mode never renders it. Writer inserts at editorial discretion, typical placement every ~600-800 words, never immediately after an H2, never before the final section. Full-width band that slightly breaks out of the 68ch reading column. Ember hairline top + bottom + warm bloom + matte carbon ground — Bloomberg-feature "sponsored by" module character, not display advertising.

CSS class naming — MUST avoid ad-blocker cosmetic-filter vocabulary. Locked class name: .product-feature (with variant modifiers --product, --category, --newsletter, --offer — do NOT use --promotion since promotion is a substring-matched target in some filter lists; use --offer for time-boxed offers). Do NOT use .advert-*, .ad-*, .sponsor-*, .promo-*, .banner-*, .commercial-*, .marketing-* — all common cosmetic-filter substring matches that cause the block to load then disappear on DOM-ready in browsers with uBlock Origin, AdBlock Plus, Brave Shields, or Fanboy’s Annoyances list. Rename lesson: 2026-07-10 iteration on MAS65/MAS66 discovered the .advert-block class was being hidden by ad blockers; renamed to .product-feature after operator confirmation.

Each variant fields:
- product: featured image + eyebrow + product name + short editorial line + price + CTA link
- category: hero image + eyebrow + collection name + short editorial line + CTA link
- newsletter: eyebrow + one-line editorial pitch + email input + subscribe CTA
- promotion: eyebrow + promo copy + CTA link (timeboxed via block postmeta if needed)
camcom_read_time( $post_id ) helper — word_count / 200 wpm. Reused by hero byline + related-articles card meta line.
Share row partial — small PHP partial rendering X · Facebook · Reddit · Copy link buttons + inline JS navigator.share fallback for mobile.
Related-articles partial — WP_Query by category, exclude current, LIMIT 3, respect _hide_related postmeta override (default: show).
Continue-the-story partial — get_adjacent_post() by category (per-post opt-in via _show_continue postmeta; recommended for Lore & Short Stories).
_hero_variant postmeta + admin control — dropdown (compact / full-bleed) on the post editor sidebar, defaults to compact.

Style variations required (all `register_block_style()`, per no-theme.json rule)

core/pullquote → inline-left, inline-right variations
core/separator → ember-hairline (default), is-style-dots (core-provided)
core/list → ember-marker (may auto-apply via theme CSS on base class; if not, register variation)

Theme support declarations (`functions.php`)

add_theme_support( 'align-wide' ) — enables alignwide + alignfull on core/image (needed for full-bleed image break)
add_theme_support( 'wp-block-styles' ) — inherits sensible core block defaults; brand CSS overrides
add_theme_support( 'editor-styles' ) + add_editor_style() — writer sees the Kyber Hull typography in the editor preview

Everything else — core blocks with theme CSS. No custom work.

Decisions locked (operator review, 2026-07-10)

Drop-cap = Gutenberg core dropCap paragraph attribute — writer applies at their discretion when authoring. Theme styles .has-drop-cap p::first-letter with the Kyber Hull treatment (Space Grotesk display, ember, 5 lines tall). No template-level automation.
Share row: X · Facebook · Reddit · Copy link — icon-only desktop, native share on mobile
Reading time enabled in byline (auto-calc, 200 wpm baseline)
No comment section anywhere in the article template
Related-articles card ON by default across all modes; per-post override via _hide_related postmeta wired by backend-dev at build-out
No author profile card in any mode — hero byline row is enough; expanded author bio explicitly omitted
Callout box variants: KEY TAKEAWAY · DID YOU KNOW · CAUTION (CAUTION uses forge-red hairline)
Category chip: uppercase name, no "Category:" prefix
Inline advert block available in long-form only (custom ACF block, four variants: product / category / newsletter / promotion). Writer inserts at editorial discretion. Never rendered in announcement mode. Bloomberg-feature "sponsored by" module character, not display advertising.