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.