ARTSABERS — Blog Home · Build Brief

Purpose

Full-page mockup of the ARTSABERS blog index at artsabers.com/blog/. Tests the archive template — the reader’s entry point to editorial content. Shares ~90% of its shape with the Category page mockup (BBAS23); differs in the hero content and the category-chip filter state.

Consumes:

• BBAS18 (Editorial Content Spec) — pattern library, chrome-vs-copy discipline, .product-feature background is --charcoal-warm (SAS1 token discipline).
• MAS64 / MAS65 / MAS66 — canonical site chrome (nav + footer), hero pattern language, card design language, tag chip / share row styling, related-articles 3-up card pattern (blog-home cards inherit its shape).
• SAS1 v4.2.1 — Kyber Hull palette, tokens, typography.
• PB + DB — brand voice + audit context.

The template

• URL: artsabers.com/blog/
• Hero variant: compact panel-joint background per BBAS18 (~460px). Byline row does NOT appear (archive page, not article).
• Site chrome: MAS64’s canonical nav + footer verbatim across the batch — Lightsabers · Cosplay Helmets · Parts & Accessories · Offers & Deals · Blog & News + Account + Cart. Footer: brand blurb + Shop / Read / Support columns + legal row.

Sections (top to bottom)

1. Site nav — MAS64 verbatim.

2. Compact hero — ~460px

• Background: panel-joint hairline pattern per MAS64/65/66 hero pattern.
• Eyebrow (ember, uppercase, letter-spaced): THE BLOG
• Title (Space Grotesk display): "Guides, news, and short stories from the workshop."
• Subtitle (Manrope, muted): "Every post from the ARTSABERS team — the honest updates, the deep dives, and the workshop stories."
• No byline row.

3. Category filter chip row

Directly below hero on plain carbon ground with ~40px top/bottom padding. Sticky-ish visually — sits at the transition between hero and grid.

• Row of 4 chips (uppercase Manrope small, letter-spaced): ALL · ARTSABERS News · Lightsaber Guides & Tips · Lore & Short Stories
• ALL is active (ember hairline chip + ember-forge tinted background); the other three are inactive (chrome-warm text, transparent border).
• Small post count trailing each chip in muted body — e.g. ALL (12) · ARTSABERS News (7) · Lightsaber Guides & Tips (3) · Lore & Short Stories (2).

4. Featured post band

Directly below the filter row. Single large card — the most recent long-form editorial piece.

• Post: Claim the Blade. Wear the Mask. Live the Myth. (Lore & Short Stories · 12 min read · 3 May 2026)
• Layout: two-column, breaks slightly out of the reading column (same width: min(1100px, calc(100vw - 48px)) + margin/transform pattern the .product-feature block uses).
• Left column (~55%): large hero image (aspect 3:2 landscape), atmospheric. Use https://artsabers.com/wp-content/uploads/sites/10/2026/07/6f0320e4a3df77a3b51e2d37a15e6eae-6.jpg (Kyber Hull hull-plate variant) — the same image MAS66 uses as its full-bleed hero, providing continuity.
• Right column (~45%): copy panel on --charcoal-warm ground.
  • Ember eyebrow: FEATURED · LATEST FROM LORE
  • Category chip: Lore & Short Stories
  • Title (Space Grotesk display, ~36px): Claim the Blade. Wear the Mask. Live the Myth.
  • Byline meta row: Chloe · 3 May 2026 · 12 min read
  • Excerpt (2 lines): "The workshop smelled of ozone and warm metal. He had built sabers for other people for six years — every hilt in the case behind him had gone out the door strapped to a stand. He had never kept one."
  • CTA: Read the story → (ember hairline, plain chrome text)

5. Grid section — "MORE FROM THE BLOG" band

• Small eyebrow (ember, uppercase): MORE FROM THE BLOG
• Section title (Space Grotesk display, ~32px): Every post from the workshop.
• Muted lede below: "Sorted by newest first."
• Grid: 3-up desktop, 2-up tablet, 1-up mobile. 11 remaining post cards.

6. Post cards — the ARTSABERS blog card design

Card shape (each cell in the grid):

• Featured image — aspect ratio 3:2 landscape (matches related-articles pattern from articles). object-fit: cover. Ember hairline framing (subtle 1px inner border).
• Category chip — small ember-hairline chip below image, uppercase category name.
• Title — Space Grotesk display, ~22px, -webkit-line-clamp: 3.
• Meta row — byline: Chloe · 8 Jul 2026 · 3 min read (muted body).
• Excerpt — 2 lines, -webkit-line-clamp: 2, muted body, ~15px.
• Read link — ember eyebrow "Read →" at bottom of card (aligns to card bottom via flex, so cards match heights regardless of body variation).

Hover state: ember hairline border appears + subtle 3px lift + image scales 1.03.

7. 11 post cards populated (real + plausibly-invented)

Use the following mix. Titles + images map to what MAS64-66 already carry so the mockup reads as one cohesive site. Byline is Chloe by default; Matthew for news pieces sourced from the operator’s voice (per the MAS64 sign-off convention — the Chloe/Matthew shape).

#	Category	Title	Date	Read	Image URL
1	ARTSABERS News	Order Delay Update: Production & Fulfilment Status	8 Jul 2026	3 min	https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1-600x600.jpg
2	Lightsaber Guides & Tips	Forged in Fire and Beskar: Why You Need Both a Saber and a Helmet	12 Jun 2026	8 min	https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Helmet-600x600.jpg
3	ARTSABERS News	Temporary Delays Due To US Winter Storm	24 Feb 2026	2 min	https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg
4	Lightsaber Guides & Tips	Choosing Your Saber Core: Xenopixel V3 vs Proffie 2.2 vs Neopixel	15 May 2026	6 min	https://artsabers.com/wp-content/uploads/sites/10/2025/03/Apprentice-Black-Duelling-Lightsaber-RGB-X-600x600.jpg
5	Lore & Short Stories	The Kyber Crystal: A Reader’s Guide to Canon and Legends	12 Apr 2026	15 min	https://artsabers.com/wp-content/uploads/sites/10/2025/03/Darth-Maul-Double-Bladed-Lightsaber-SNV4-PRO-600x600.jpg
6	ARTSABERS News	Black Friday 2025: Every Deal in One Place	21 Nov 2025	4 min	https://camcom.dev/wp-content/uploads/2026/06/Dark-Katana-Kyber-Crystal-Lightsaber-11-600x600.jpg
7	Lightsaber Guides & Tips	Light-Duelling vs Heavy-Duelling: Which Grade Fits Your Play Style	3 May 2026	9 min	https://artsabers.com/wp-content/uploads/sites/10/2025/03/The-Fighter-Black-Lightsaber-Xenopixel-V3-600x600.jpg
8	ARTSABERS News	Changes at ARTSABERS & Delayed Orders Update	14 Dec 2025	3 min	https://artsabers.com/wp-content/uploads/sites/10/2025/03/Death-Trooper-Helmet-600x600.jpg
9	Lightsaber Guides & Tips	Care and Feeding of Your Neopixel Blade	2 Feb 2026	5 min	https://artsabers.com/wp-content/uploads/sites/10/2025/03/Mandalorian-Armorer-Helmet-600x600.jpg
10	ARTSABERS News	Jedi June Begins — Awaken the Force Within	1 Jun 2026	3 min	https://camcom.dev/wp-content/uploads/2026/07/Carbon_Strike_1-600x600.jpg
11	ARTSABERS News	An Update On Backorders	18 Jan 2026	3 min	https://artsabers.com/wp-content/uploads/sites/10/2025/03/Starkiller-V3-Lightsaber-Xenopixel-V3-600x600.jpg

Excerpts — write plausible 2-line teasers in ARTSABERS voice, matched to each post’s title (subagent’s editorial call, not spec-locked).

8. Pagination

Small band below grid on plain carbon:

• Left: Showing 12 of 12 posts (muted body)
• Right: pagination controls
  • Ember hairline chevron left (inactive)
  • Page numbers: 1 (active — ember hairline chip) · 2 (inactive)
  • Ember hairline chevron right (Next →)

9. Newsletter capture band

Above the site footer. Full-width band on plain carbon with ember hairline top separator.

• Eyebrow: STAY IN THE LOOP
• Title: "Get the next Chronicles delivered."
• Muted subtitle: "One editorial email a month. Guides, drops, and the occasional short story. Unsubscribe any time."
• Email input + Subscribe CTA (styled per MAS52 form component spec if referenced, otherwise inherit token language).

10. Site footer — MAS64 verbatim.

Post card responsive rules

• Desktop ≥1024px: 3-up grid, 32px gap.
• Tablet 640-1023px: 2-up grid, 24px gap.
• Mobile ≤639px: 1-up, 20px gap. Cards stack.

Excerpt hides on mobile (≤480px) to keep cards compact.

Copy locks (verbatim)

• Hero eyebrow: THE BLOG
• Hero title: "Guides, news, and short stories from the workshop."
• Hero subtitle: "Every post from the ARTSABERS team — the honest updates, the deep dives, and the workshop stories."
• Category chip row copy: ALL (12) · ARTSABERS News (7) · Lightsaber Guides & Tips (3) · Lore & Short Stories (2) — chip active state on ALL.
• Featured band eyebrow: FEATURED · LATEST FROM LORE
• Grid section eyebrow: MORE FROM THE BLOG
• Grid section title: "Every post from the workshop."
• Grid section lede: "Sorted by newest first."
• Newsletter band eyebrow: STAY IN THE LOOP
• Newsletter band title: "Get the next Chronicles delivered."
• Newsletter band subtitle: "One editorial email a month. Guides, drops, and the occasional short story. Unsubscribe any time."
• Pagination copy: Showing 12 of 12 posts

Kyber Hull styling notes

• Ember on: hero eyebrow, active category chip hairline + text, featured post ember eyebrow, category chips on cards, section eyebrows, "Read →" CTA lines, pagination active chip, newsletter eyebrow + Subscribe CTA border.
• Warm off-white on all body text and titles.
• Panel-joint hairline background pattern on hero + newsletter band section grounds.
• Card backgrounds: transparent (blends with page carbon).
• Featured band background: --charcoal-warm (matching product-feature block token discipline).
• Zero border-radius everywhere.
• Ember hairline separator between sections.

What this template deliberately does NOT include

• No sidebar (consistent with article template decision)
• No author profile card
• No comment count on cards (comments are off site-wide)
• No product cross-sell inline in blog listing
• No infinite scroll (pagination is explicit)
• No sort dropdown (chronological only, "newest first" is the default)
• No "sponsored" or "advertisement" chrome — the blog listing surfaces editorial only
• No .advert-* class names anywhere (per the ad-blocker safety lock in BBAS18)

Success criteria at 1920px viewport

• Featured post band reads as a "moment" — not just another grid card.
• 3-up grid is visually balanced across the row, cards match heights.
• Category filter chips read as nav, not decorative — plain-English category names, active state clear.
• Newsletter band is a natural close, not a hard-sell.
• Full page renders as ~4,500-5,500px total height.