ARTSABERS — Blog Category · Build Brief

Purpose

Full-page mockup of an ARTSABERS blog category archive at artsabers.com/blog/category/lightsaber-guides-tips/. Tests the category archive template — the filtered listing state that shares its DOM with Blog Home (BBAS22) but shows a category-specific hero and active category chip.

Consumes:

• BBAS22 (Blog Home) — shares grid, cards, filter row, pagination, newsletter band, site chrome verbatim. This template is essentially Blog Home with the hero, active filter, and post set filtered by category.
• BBAS18 (Editorial Content Spec) — pattern library.
• MAS64 / MAS65 / MAS66 — canonical site chrome + card design.
• SAS1 v4.2.1 — Kyber Hull palette + tokens.
• PB + DB — brand voice + audit context.

The template

• URL: artsabers.com/blog/category/lightsaber-guides-tips/
• Demoed category: Lightsaber Guides & Tips (the most editorially generative category, and where the plausibly-invented titles from prior mockups land).
• Site chrome: MAS64’s canonical nav + footer verbatim.

Sections (top to bottom)

1. Site nav — MAS64 verbatim.

2. Category-specific hero — ~460px

• Background: panel-joint hairline pattern (same as Blog Home).
• Small breadcrumb above eyebrow: The Blog / Lightsaber Guides & Tips (chrome-warm muted body, ember-highlighted current segment)
• Eyebrow (ember, uppercase, letter-spaced): CATEGORY
• Title (Space Grotesk display): "Lightsaber Guides & Tips" (the category name — plain, no clever rename)
• Subtitle (Manrope, muted): "Buyer’s guides, build breakdowns, and care advice from the workshop bench."
• Post count meta row (muted body below subtitle): 3 posts · sorted newest first

3. Category filter chip row

Same as Blog Home but with:

• Lightsaber Guides & Tips chip is ACTIVE (ember hairline + tinted background)
• ALL chip is inactive (previously the active state on Blog Home)
• Other two chips (ARTSABERS News, Lore & Short Stories) inactive as before

Post counts still trail each chip: ALL (12) · ARTSABERS News (7) · Lightsaber Guides & Tips (3) · Lore & Short Stories (2) — Lightsaber Guides & Tips active state.

4. NO featured band on category page

Category pages give equal weight to every post in the category. Skip the featured-band section entirely. Grid starts directly below the filter row.

5. Grid section — "IN THIS CATEGORY" band

• Eyebrow (ember, uppercase): IN THIS CATEGORY
• Section title (Space Grotesk display, ~32px): "Everything from the guides bench."
• Muted lede: "Sorted by newest first."
• Grid: 3-up desktop, 2-up tablet, 1-up mobile.

6. Post cards — 3 populated

The three Lightsaber Guides & Tips titles that appeared in Blog Home (BBAS22). Same card design as BBAS22.

Each card carries the Lightsaber Guides & Tips category chip (all three same). Excerpts — subagent authors plausible 2-line teasers.

7. Empty-state pattern (below the 3 cards)

Category has only 3 posts, so no pagination band. Instead, a subtle "That’s it for now" empty-state signal below the grid, ~60px vertical padding:

• Small ember hairline separator (matches article section-break)
• Muted body copy: You’ve reached the end of the category. "More Lightsaber Guides & Tips coming as we build them out — the workshop keeps writing."
• Two ember-hairline CTAs side-by-side (or stacked on mobile):
  • Back to The Blog → (returns to /blog/)
  • Read Lore & Short Stories → (nav to sibling category)

8. Newsletter capture band — same as Blog Home.

9. Site footer — MAS64 verbatim.

Copy locks (verbatim)

• Breadcrumb: The Blog / Lightsaber Guides & Tips (current segment ember)
• Hero eyebrow: CATEGORY
• Hero title: Lightsaber Guides & Tips
• Hero subtitle: "Buyer’s guides, build breakdowns, and care advice from the workshop bench."
• Post count meta: 3 posts · sorted newest first
• Category chip row: ALL (12) · ARTSABERS News (7) · Lightsaber Guides & Tips (3) · Lore & Short Stories (2) — Lightsaber Guides & Tips active.
• Grid eyebrow: IN THIS CATEGORY
• Grid title: "Everything from the guides bench."
• Grid lede: "Sorted by newest first."
• Empty-state title: You’ve reached the end of the category.
• Empty-state body: "More Lightsaber Guides & Tips coming as we build them out — the workshop keeps writing."
• Empty-state CTAs: Back to The Blog → · Read Lore & Short Stories →
• Newsletter band copy — same as Blog Home (BBAS22).

Kyber Hull styling notes

Same as Blog Home:

• Ember on breadcrumb current segment, hero eyebrow, active category chip, section eyebrows, card category chips, "Read →" CTAs, pagination active chip (none here — no pagination), newsletter eyebrow + Subscribe CTA border, empty-state hairline separator + CTAs.
• Warm off-white on all body text.
• Panel-joint hairline background pattern on hero + newsletter band.
• Zero border-radius everywhere.

What this template deliberately does NOT include

• No featured post band (category pages give equal weight)
• No sidebar
• No author profile card
• No comment count on cards
• No sort dropdown
• No pagination band (this category only has 3 posts — replaced with empty-state signal)
• No .advert-* / .promo-* / .sponsor-* class names (ad-blocker safety per BBAS18)

Success criteria at 1920px viewport

• Category hero clearly signals what category we’re in — plain-English category name, not a clever rename.
• Active category chip in the filter row reads as active without ambiguity.
• Absence of featured band + presence of empty-state signal correctly represents thin category content.
• 3-up grid at 3 cards renders as a single centred row, cards match heights.
• Empty-state CTAs give the reader a clear next step (back to blog or sibling category) — no dead-end.
• Full page renders as ~2,800-3,400px total height (shorter than Blog Home because fewer cards + no featured band).