v3.0
May 2026
Major
M4D Design Stack v3 — Launch

Complete rebuild of the M4D design language. New token architecture, Bungee + Space Grotesk + JetBrains Mono type stack, three-tier product structure, and the Cosmic Series character library.

  • Token system — Primitives → semantic → component three-layer architecture with 80+ tokens
  • Type stackBungee display, Space Grotesk body, JetBrains Mono code/label
  • Color system — Dark-first with ink/paper base, teal primary accent, purple CTA accent
  • Tier structure — Starter (free), Pro ($79 one-time), Studio ($19/mo)
  • Figma library — Full component library with auto-layout and token bindings
  • PDF guides — Pro and Studio delivery packages
  • Cosmic Series — Astro, UAP, Rocketship, Planet character assets
Members onlyGet Access →
v2.0
2025
Minor
Design System v2 — WordPress

Published the M4D Design System as a live WordPress site. Documentation, token reference, and component specs publicly accessible.

  • WordPress publish — Design system docs live at march4orthdesign.com/m4d-design-system/
  • Token reference — Full CSS custom property documentation
  • Component specs — Nav, footer, card, button, and layout specs
19 Jul 2026
Button State Tokens cluster closed out, plus a bonus meta reel

Finished the Button State Tokens cluster with its closing quote and blog post, then shipped a bonus wrap-up Reel tying the last four token clusters together under one idea: every interface state — focused, errored, disabled, loading, themed dark or light — is a decision, not an accident. Also rebuilt a few recent Reels' backgrounds so they cut between multiple clips instead of looping one short clip on repeat, for a less repetitive feel.

ContentReelQuoteBlog
18 Jul 2026
Three new content clusters — Focus Ring, Form Input, Dark Mode, and Button State tokens

Closed out the Focus Ring Tokens cluster with its companion blog post, then shipped three full clusters end to end: Form Input Tokens, Dark Mode Tokens, and Button State Tokens — each with a carousel, specimen, quote, and matching Reel covering the token system in motion. Also introduced a bit more visual range across the library: a couple of blog feature cards and one Reel now use a soft gradient background instead of the usual flat panel, alongside the existing palette.

ContentCarouselReelBlog
18 Jul 2026
Membership signup — separated account creation from payment

Fixed a checkout flow issue where creating an account and paying for lifetime access happened on the same step. If payment didn't go through, a visitor could end up with a login but no membership, with no clear signal that anything was missing. The "Claim Lifetime Access" buttons now lead with free account creation, with a separate "Upgrade to Lifetime" link for anyone who already has an account and just needs to complete payment.

FixMembership
16 Jul 2026
Breakpoint & border radius token reels, plus a content library cleanup pass

Two new Reels are live: one on naming breakpoints instead of hardcoding pixel widths, and one on naming a border-radius scale instead of leaving corner rounding inconsistent across components. Also did a full consistency pass across the blog library — every post now has both its article and its feature image where before a few were missing one or the other — and fixed a redirect on the main site's blog link that was silently failing.

ContentReelBTS
11 Jul 2026
Slot 72 — Elevation & Shadow System blog post

Long-form companion article for the Slot 68 Elevation & Shadow System carousel, closing out that content cluster. Walks through the four-token elevation scale — card, dropdown, modal, toast — and why z-index and shadow weight have to move together, since a mismatched pairing lets the stacking order and the visual hierarchy disagree with each other.

ContentBlog
10 Jul 2026
Slots 68/69/71 — Elevation & Shadow System content cluster

New Instagram content cluster covering elevation and shadow tokens: a 6-slide carousel breaking down z-index and shadow as paired tokens, a specimen showing the z-index stacking-context layer map, and a quote card on treating layer order as a named system rather than an arms race. Also refreshed the quote card template — it was reusing the same flat-color layout for 14 posts straight, so quotes now alternate between that layout and a new photo-backed composition with off-center text and a dark gradient scrim.

ContentCarouselSpecimenQuote
10 Jul 2026
Slot 70 reel — real device footage, mobile blog scroll

New Reel (Slot 70) built from an actual phone screen recording instead of scripted motion graphics — a real device scrolling through march4orthdesign.com's blog on mobile, showing the design tokens holding up at a small viewport. Edited to 15 seconds: opens on the site's logo and headline so the footage is identifiable at a glance, then cuts to a clean, uninterrupted scroll through the post grid. Muted, no text overlays — the caption and the footage itself carry the message.

ContentReelBTS
10 Jul 2026
Video preview mute toggle + Slot 58 slide-1 overflow fix

Every reel in the video preview tool played muted with no way to unmute — all 29 entries had autoplay video with no controls, so audio was inaccessible across the board, not just on the newest reels. Added a sound on/off toggle next to each reel's download button. Separately, fixed a content overflow on the Token Naming Conventions carousel's first slide: the headline and supporting copy were taller than the card, silently pushing the footer (logo and handle) below the visible edge and clipping it entirely. Resized the headline and subhead so everything fits cleanly inside the card.

BugfixPreview ToolContent
10 Jul 2026
Reel background videos fixed — Slots 50, 55, 60, 65 now show their footage, plus voiceover added

Found and fixed a bug affecting every motion-graphics reel built so far: the animated HTML segments had an opaque background, so the composited background video was fully hidden behind flat black — including the original reference reel (Slot 50), which had gone unnoticed until now. Fixed the transparency across all twelve HTML segments and recomposited all four reels so their astronaut background footage is actually visible, with the ink tint tuned so on-screen text stays fully legible. Also baked in voiceover narration for Slots 55, 60, and 65, with each video's length matched exactly to its own audio track. Re-verified WCAG contrast on every reel before finalizing.

ContentReelVideoBugfixWCAG
10 Jul 2026
Three finished reels composited — Slots 55, 60, 65 now have final MP4s

System Behind The Site, Token Naming Conventions, and Motion Tokens all had reel scripts but no video. Composited all three as silent background-video + motion-graphics reels — animated text and icon callouts over a looping astronaut video, no talking-head footage required. Each reel's hook, core, and CTA beats were built as standalone animated HTML segments, captured frame-by-frame in headless Chrome, and composited over its background clip with FFmpeg. A WCAG contrast failure on the CTA screen's eyebrow label (3.49:1, inherited from the reference reel template) was caught and fixed across all three before finalizing.

ContentReelVideoWCAG
9 Jul 2026
Content library housekeeping — slot-numbered folder names and preview tool labels

Carousel content folders renamed to match the slot-NN- prefix already used by quote, specimen, and reel folders (e.g. design-tokens/ → slot-01-design-tokens/), covering all 15 numbered carousels. All three preview tools — carousel, single post, and video — now show "Slot NN ·" prefixes on their sidebar buttons and mobile dropdown options, cross-referenced against the content queue. A handful of items with no matching queue entry (an unlogged States & Variants carousel, a few bonus quote cards, and several older archive reels) were intentionally left unlabeled rather than assigned a guessed slot number.

HousekeepingPreview ToolContent
8 Jul 2026
Content batch — Token Naming + Motion Tokens clusters (Slots 58–67): two carousels, two specimens, two reel scripts, two quotes, two blog drafts

Two full rotation cycles produced back to back. Token Naming Conventions (Slots 58–62): a six-slide carousel introducing the category-role-variant naming pattern — the first carousel built on M4D astronaut PNG assets over an ink background instead of Unsplash photography, after a low-yield search for fresh space imagery. Paired with a Naming Pattern specimen showing the token name build-up, a reel script, a "the name is a promise" quote card, and a companion blog post on the rename test. Motion Tokens (Slots 63–67): a six-slide carousel arguing that duration and easing deserve the same token discipline as color, paired with an Easing Curves specimen rendering three bezier diagrams at a fixed 200ms, a reel script, a "duration is the pace, the curve is the feeling" quote card, and a companion blog post. Two layout overlaps (astro PNG over footer text, astro over feature-card handle) were caught in screenshot QA and fixed before commit. All cards passed WCAG contrast checks.

ContentCarouselSpecimenReelBlog
8 Jul 2026
Content batch — System Behind The Site cluster (Slots 51–57): carousel, specimen, reel script, two quotes, two blog drafts

Full rotation cycle produced around one topic: the rationale behind this site's visual system. New Educational carousel (Slot 53) walks the palette and type-stack reasoning across six slides — why ink isn't pure black, why the white reads like print, why teal carries the accent at 7:1, and why three fonts have zero overlap. New Opacity Ramp specimen (Slot 54) shows one paper color deriving five text roles with contrast ratios baked in. Reel script (Slot 55) and Taste vs Rationale quote card (Slot 56) extend the same cluster, and the Slot 51 proof-of-work quote card was backfilled into the preview tool. Two companion blog drafts written with feature images: How I Built This Site and Why The Site Looks Like This. All cards passed screenshot QA and contrast checks before commit.

ContentCarouselSpecimenReelBlog
22 Jun 2026
Slot 44 carousel — How I Built This Site, six slides on the token architecture behind this site

New Educational carousel (Slot 44) added to the carousel preview tool. Six slides walk through how this site is built with the same design system taught in the content: hook on aurora background, agitation contrasting styled vs. systematized sites on Milky Way, concept slide showing the primitive/semantic/component token layer diagram over Saturn, system slide with the full color/type/spacing token stack over an earth-from-orbit background, result slide with an eight-icon consistency row over a Mars landscape, and CTA over above-clouds sky. Caption and alt text created. Preview tool default updated to show this carousel on load. Queue advanced to Slot 49 with Slots 50–52 pre-filled as cluster partners (Reel and Blog Post on the same topic).

ContentCarouselSlot 44Educational
22 Jun 2026
membership.html — Three.js orbital token graph full hero, AdSense wired to five pages, preview tool sorted newest-first

Membership page hero replaced with a live Three.js token graph: twenty-six nodes across three orbital layers (primitive in teal, semantic in purple, component in paper) orbiting at different speeds and directions, teal pulse edges between connected layers, a particle field in depth, and gentle camera sway. Mouse hover brightens the hovered node and shows a tooltip with the token name. The graph renders on a canvas behind all existing hero copy and CTAs. AdSense wired to portfolio, resources, category, services, and blog post pages — placed before each page's CTA band. Single post preview tool reordered newest-first within each sidebar group; drift-quote now the default active post.

membership.htmlThree.jsAdSensePreview Tool
22 Jun 2026
Slot 47 quote — Names Drift / token hygiene quote card added to preview tool

New quote post (Slot 47) added to the single post preview tool. Flat teal background with a four-line Bungee headline — "Names Drift. Values Follow." — with the final word in red-orange accent. Two Lucide icons (alert-triangle and git-branch) act as decorative punctuation beneath the topic label. Supporting line uses an inline code pill to illustrate the concept. Caption, hashtags, and per-slide alt text created.

ContentQuoteSlot 47
22 Jun 2026
Slot 48 specimen — Motion Tokens card rebuilt to high-craft quality, mandatory QA workflow wired in

Motion Tokens specimen (Slot 48) rebuilt from scratch after failing visual QA. New design uses an asymmetric two-column layout — token name left, duration scale right — with a full-width SVG bezier diagram as the primary visual. Two curves (ease-out in teal, ease-spring in light purple) with control handle dots, dashed leader lines, and inline annotations. Three rounds of puppeteer screenshots resolved label overlaps and clipped text. Mandatory seven-step quality workflow (taste-skill → build → puppeteer screenshot → WCAG check → fix → commit → deploy) locked into project instructions. Seven new Veo-generated astronaut videos committed to assets with clean slugs.

ContentSpecimenSlot 48Quality
21 Jun 2026
Slot 47b reel — Token Audit Red Flags, three warning rows with Lucide icons, megaphone Veo BG

Token Audit Red Flags reel (Slot 47b) composited using the motion-frames pipeline. Hook: "YOUR TOKEN FILE HAS RED FLAGS" in staggered Bungee with an accent-red bar. Core: three left-bordered flag rows sliding in from left — numbered 1/2/3 in Bungee, each with a Lucide geometry icon (alert-triangle, layers, box) and a label in accent red; summary "These aren't tokens — hardcoded values with names" in teal appears at 6s. CTA: "Fix YOUR TOKENS. Follow for more." with a teal pill badge. Background: veo-astro-megaphone-dark01.mp4 (first use). Five new Veo-generated astronaut videos committed as assets. Final output 15.6 seconds.

ContentReelSlot 47bMotion
21 Jun 2026
Slot 46 reel rebuilt with animated HTML motion segments — Chrome headless frame capture pipeline

Token Names Lying reel rebuilt using the motion-frames pipeline: three animated HTML segments (hook, core, CTA) authored at 1080x1920, captured to PNG frame sequences via Chrome headless, encoded to MP4 clips, then composited over an ambient background video with voiceover. Hook reveals the headline in staggered Bungee lines with a teal accent bar. Core shows two side-by-side cards animating in — value-named token on the left in accent red, semantic token on the right in teal — with a summary line appearing at the six-second mark. CTA slides up the headline and a teal pill badge. All text sits on dark card fills or gradient bands. Final output is 16.5 seconds. Capture script puppeteer import path updated for the installed version.

ContentReelSlot 46Motion
21 Jun 2026
Slot 46 reel composited — token naming split-screen with voiceover and ambient background

Token Names Lying reel (Slot 46) composited to final MP4 — 15 seconds, 1080x1920, with voiceover. Three overlay segments: full-ink hook, split-screen comparison of a value-named token versus a semantic token, and a teal pill CTA. Background uses a 60-second ambient clip with a solid ink tint layer for guaranteed text legibility. All text on dark card fills or gradient bands. Gemini and Veo 2 video prompts also written for the same reel. Video preview page updated.

ContentReelSlot 46
20 Jun 2026
Single post and video preview pages rebuilt for mobile — grouped dropdown nav replaces broken horizontal scroll

Both preview tools now work on phone. The sidebar collapses to a native select dropdown on screens under 768px, with posts grouped by category using option groups — Quotes, Specimens, BTS for single posts; Recent and Archive for video. Post canvases scale to fit the viewport with no horizontal overflow. Desktop sidebar is unchanged.

PreviewMobileTools
20 Jun 2026
Membership page design audit — 7 fixes; Slot 45 specimen + Slot 46 reel added to content pipeline

Membership page passed a full design review: four contrast failures fixed (locked-banner call-to-action link, footer column labels, pricing comparison box, footer tagline — all now meet the minimum threshold), prefers-reduced-motion support added, duplicate copyright removed, and keyboard focus ring added to the floating search widget. Slot 45 States and Variants specimen (specimen number ten) added to single-post preview — six component state icons with token labels and a token code block. Slot 46 reel script written covering semantic token naming, added to video post preview.

MembershipAccessibilityContentSpecimenReel
20 Jun 2026
Slot 44 — States & Variants carousel added; 7 new skills installed

States & Variants carousel (Slot 44, Educational teal) added to carousel preview — six slides covering component states as design tokens (default, hover, focus, disabled, error). Caption and alt text created. Seven skills installed to the project skills directory: color-expert, design-review, frontend-dev, full-page-screenshot, hand-drawn-diagrams, ui-ux-pro-max, and threejs (all nine sub-skills bundled). Removed audio-jingle and gif-sticker-maker (third-party API key dependencies). All skills mirrored globally.

ContentCarouselSkills
17 Jun 2026
Slots 40–41 — Type as Token specimen + Design-Dev Handoff reel added to content pipeline

Type as Token specimen (specimen № 09) added to single-post-preview — three large letterforms color-coded by pillar with token labels and palette strip. Design-Dev Handoff reel (Slot 41) composited at 9:16, 13.6s, voiceover-matched — purple asteroid field background, astro-floater02 top-left bleed. Slots 39 and 40 marked Posted in queue.

ContentSpecimenReel
16 Jun 2026
token-file-from-scratch reel — WCAG type sizes, audio sync, canonical reel_kit added

Reel rebuilt at correct duration matching voiceover. Hook at 152px Bungee, code blocks at 38px mono, comment text switched to paper-muted for WCAG AA compliance. Animated astronaut composited from video frames. Added scripts/reel_kit.py — shared WCAG constants, font scales, tint/vignette helpers, and audio-safe encode function used by all future reels.

FixWCAGContent
16 Jun 2026
token-file-from-scratch reel — voiceover muxed in, File ≠ System quote added

Voiceover audio muxed into token-file-from-scratch/reel-final.mp4 — was silent on first deploy. File ≠ System quote card (file-not-system-quote) added to single-post-preview with caption and alt text.

FixContentQuote
16 Jun 2026
token-file-from-scratch reel + icon-system-specimen added to content previews

Token File from Scratch reel (Slot 36) added — nine-sixteen format, Earth orbit background with animated astronaut, three-layer token code blocks, voiceover, and caption. Icon System specimen (Slot 35) added to single-post preview. Video preview wired up with reel tab and download link.

ContentReelSpecimen
15 Jun 2026
Three reels re-composited — unique backgrounds, WCAG AA text, brand handle on every frame

Build Systems Not Files, Colors vs. Tokens, and Document Your System reels rebuilt from scratch. Each reel now uses a unique background video (Mars landscape, golden galaxy swirl, Saturn rings). All text has dark backing rectangles to guarantee WCAG AA contrast regardless of video frame. Handle visible on every frame throughout each reel. Text sizes increased to 96–120px Bungee for main statements. Mobile responsive sidebar added to all three preview pages.

ContentReelsFixWCAG
15 Jun 2026
Content preview pages — Slot 34 added, sidebars reordered, spacing quote fixed

Carousel preview updated with a new Token File from Scratch carousel (Slot 34, six slides, Unsplash space photography). All three preview page sidebars reordered newest artifact first. Spacing quote card layout fixed — footer and logo were being clipped due to an extra wrapper div; structure now matches all other quote posts. Headline size reduced to fit the three-line copy within the 540px card.

ContentCarouselFix
14 Jun 2026
Content previews updated — Slots 29–32

Carousel preview updated with a new WCAG Rules carousel (Slot 29, six slides, space photography backgrounds). Single-post preview updated with a Space Grotesk weight specimen (Slot 30) and a "Less Broken" quote card (Slot 32). Video preview updated with a Colors vs. Tokens reel tab (Slot 31). Token Anatomy specimen planet repositioned to the bottom-right corner so it no longer overlaps the instructional token chain diagram.

ContentCarouselSpecimenReel
11 Jun 2026
Slash Commands reference page — members only

New internal reference page listing all Claude Code slash commands available in this project. Auth-gated behind the same members-only lock as release notes. Linked from the footer Get Started column on all pages.

New PageMembersInternal
11 Jun 2026
Apps lobby — auth gate added

Apps lobby now requires member login. The apps grid is blurred behind the same auth-check gate used by release notes. The hero remains visible. Non-members see a Get Access prompt with redirect back on login.

MembersApps
11 Jun 2026
Documentation carousel — full redesign (Slot 24)

All six slides of the Design System Documentation carousel rebuilt from scratch. Each slide uses a distinct compositional approach. Images use absolute-positioned img tags instead of CSS background-image so the PNG download captures correctly. Carousel preview default topic updated to design-system-documentation.

ContentCarousel
11 Jun 2026
Carousel PNG download fix

Fixed PNG downloads failing silently in carousel-preview.html and single-post-preview.html. Moved overflow:hidden from inline slide styles to the .slide CSS class to prevent html2canvas stacking context issues. Added .catch() with alert to both download handlers.

Bug FixContent Pipeline
11 Jun 2026
Reel compositor — loop, card layout, and emoji fixes

Fixed hard loop seam on the no-spacing-tokens-chaos reel by replacing stream_loop with three explicit video inputs and crossfade transitions. Replaced per-line backing rects inside comparison cards with a single solid fill per card for clean column alignment and guaranteed WCAG contrast. Replaced emoji characters with ASCII labels throughout (emoji cannot render with JetBrains Mono in Pillow).

InternalContent PipelineBug Fix
9 Jun 2026
Privacy Policy and Terms of Use pages added

Two new legal pages — privacy.html and terms.html — added to the site. Privacy Policy covers data collection (email, payments, analytics, AdSense), third-party services, cookies, retention, and user rights. Terms of Use covers free download and membership license, refund policy, IP ownership, and account rules. A Legal column linking to both pages has been added to the footer on all site pages.

LegalAll Pages
8 Jun 2026
Content pipeline — folder structure reorganized

Local content folder restructured for clarity: carousel slides now live under posts/carousels/, single posts under posts/singles/ (with quotes, specimens, and bts subfolders), email feature images in posts/singles/emails/, and reels remain under reels/. Duplicate video files removed, stale WAV filenames normalized to voiceover.wav convention. No site pages affected.

InternalContent Pipeline
8 Jun 2026
blog.html — AdSense display ads added

Two responsive display ad units added to the blog page: one between the search controls and the posts grid, one between the posts grid and the membership CTA band. Ads are served via the existing approved AdSense account. Conversion pages (membership, download, thank-you, login) are unaffected.

Monetizationblog.html
8 Jun 2026
release-notes.html — mobile responsive layout

Added 768px and 480px breakpoints to the release notes page: reduced padding, tightened tab bar spacing, and stacked the entry layout to a single column on small screens.

Responsiverelease-notes.html
7 Jun 2026
membership.html — Checkout CTAs switched from third-party to native checkout

All three membership CTAs (locked banner, hero, and pricing section) now point to the native membership checkout page. Payment is processed directly on-site via Stripe — no third-party redirect. The standalone template product is unaffected.

Paymentsmembership.html
7 Jun 2026
contact.html, post.html, category.html — Awwwards craft layer applied

Craft layer complete across all 11 main pages. contact.html: grain, cursor, scroll progress, nav hide, hero word stagger, info block scroll-reveals, magnetic CTA. post.html: grain, cursor, scroll progress, nav hide, post body and nav section fade-ups. category.html: grain, cursor, scroll progress, nav hide, eyebrow wipe, hero title word stagger, hero sub fade-up, post card scroll-reveals with stagger (compatible with the blog pattern).

CraftAnimationcontact.htmlpost.htmlcategory.html
7 Jun 2026
services.html + products.html — Awwwards craft layer applied

Added the full craft layer to both pages: film grain overlay, custom teal cursor with lagging ring, teal-to-purple scroll progress bar, nav hide-on-scroll, eyebrow wipe-in, hero h1 word stagger, hero sub and CTA fade-up sequence, section card scroll-reveals with staggered delays, and magnetic pull on primary CTAs. services.html layered over the existing Three.js star canvas without conflict.

CraftAnimationservices.htmlproducts.html
7 Jun 2026
blog.html — Awwwards craft layer applied

Added the full craft layer: film grain overlay, custom teal cursor with lagging ring, teal-to-purple scroll progress bar, nav hide-on-scroll-down with show-on-scroll-up, hero eyebrow wipe-in, hero title word stagger (60ms per word), hero sub and controls section fade-ups, post card scroll-reveal with per-row stagger that re-observes after Load More, and magnetic pull on primary CTAs.

CraftAnimationblog.html
7 Jun 2026
index.html — Awwwards craft layer applied

Layered the craft system on top of the existing Three.js star canvas and parallax: film grain overlay, custom teal cursor with lagging ring, teal-to-purple scroll progress bar, nav hide-on-scroll, hero h1 word stagger (handles inline em tags correctly), status badge and hero sub fade-up sequence, and magnetic pull on all primary CTAs. Existing animated stat counters, scroll card reveals, and Three.js star field are preserved unchanged.

CraftAnimationindex.html
6 Jun 2026
29 new asset PNGs added to uploads

First batch (transparent): celebrating astronaut, asteroids, megaphone, plant, balloons, laptop, phone, moon coffee, robot handshake, cloud surf, violin, popcorn, gift box, relaxing on clouds, comet, two alien creatures. Second batch (teal background): atom astronaut, cloud surf, telescope, tending plant, skateboard, books, purple rocket, coffee and fries, UFO abduction, earth globe, running on planet.

Assets
6 Jun 2026
portfolio.html — M4D design system case study

Coming Soon placeholder replaced with a full case study page for the M4D design system build. Five sections: problem, build timeline, token system, stack, and outcomes. Includes stat bar (6 weeks, 18 pages, 3 revenue streams, 148 commits), token color swatches, system layer breakdown, and a studio CTA band linking to services and contact.

PortfolioCase StudyNew Page
6 Jun 2026
post.html — mobile content rendering fixed

Blog post body content was not rendering on mobile. Fixed a defensive guard around the member-content API response that could silently overwrite post content with undefined. Added a fallback to render the full WordPress content if the parsed description is empty.

Bug FixMobilepost.html
6 Jun 2026
login.html rebuilt as a proper gate page

login.html replaced the old redirect stub with a full two-column gate page. Existing members see a Sign In card linking to the WordPress login portal. New visitors see a Get Access card with the purple CTA linking to the membership page and a soft prompt to grab the free starter kit. The page is auth-aware — if a WordPress session is detected on load, the Sign In card swaps to a Welcome Back state with the user's name and a direct link to the member account page.

AuthUXlogin.html
6 Jun 2026
Analytics — GA4 conversion events wired to Google Ads

Download form now fires a lead conversion event on successful submission. Membership page Gumroad CTAs now fire a checkout conversion event on click. Both events are registered in Google Ads as conversion actions — Free Download Signup and Membership Checkout Click — enabling campaign measurement and future paid campaigns targeting the download page.

AnalyticsFeature
6 Jun 2026
Carousel preview — Component Architecture rebuilt with human photography and video CTA

Component Architecture carousel replaced with a new six-slide layout using human space photography — rocket launches, mission control, astronaut EVA — instead of nebula renders. Final slide uses a looping video background with a poster-frame fallback for the PNG download flow. html2canvas video capture fixed by swapping the video element for its poster image before screenshot, then restoring it after.

Content PipelineFeature
6 Jun 2026
Content folder — reorganised into carousels, singles, reels, blogs subfolders

Local content folder restructured for clarity. Carousel posts moved to posts/carousels/, single image posts to posts/singles/, finished reels to reels/, blog drafts to blogs/, and WordPress drafts to wordpress/. Master ops plan added at ops/master-plan.md as the single source of truth across all production tracks.

Content PipelineMaintenance
6 Jun 2026
Homepage — free design workflow guide added as a prominent resource

A new Free Resources section added to the homepage above the Product section. Links to the M4D Design Workflow Guide as a free resource with a teal-bordered card, badge, and description. Positioned as the companion to the six-weeks blog post.

HomepageFeature
6 Jun 2026
Reel compositor — safe zone system and six-weeks reel

Compositor updated with a safe zone system — all text now renders between y=420 and y=1380, keeping headlines clear of Instagram UI chrome. Eyebrows use SAFE_TOP, text stacks anchor to SAFE_BOTTOM, centred content uses SAFE_MID. Applied to all variants including the standard single-overlay template and token-file-build. New six-weeks variant added: nebula base with teal tint, transparent astronaut overlay, three-segment overlays covering hook slam, keyword cards, and CTA.

Content PipelineFeature
6 Jun 2026
Homepage — blog posts moved above project cards, redesigned

Latest Writing section moved from the bottom of the homepage to sit directly below the ticker strip, above the project cards. Section now has a Bungee heading, teal eyebrow, and an all-posts link. Cards updated with teal underline sweep on hover, larger thumbnails, and a gradient placeholder for posts without a feature image.

HomepageFeature
6 Jun 2026
Blog post renderer — full content now displays including images and headings

Blog posts now render the full WordPress content — images, headings, horizontal rules, and code snippets all display correctly. Previously the post renderer only extracted paragraph text and discarded everything else. Styles added for headings, images, dividers, inline code, and preformatted blocks inside post body.

BlogBug Fix
5 Jun 2026
Reel compositor upgraded — audio, multi-segment overlays, watermark crop

Reel compositor updated with audio support, a hard 15-second duration cap, a voiceover prompt workflow, and a watermark crop for Hedra source videos. Token file build reel uses three timed overlay segments — hook card, token pill strip, and CTA — composited via FFmpeg. Four new reusable astronaut source videos added. Video previewer updated with five tabs, no autoplay loop, and one-video-at-a-time playback.

Content PipelineFeature
5 Jun 2026
Video reel compositor added to content pipeline

New tool added to the content pipeline for compositing raw video files into finished Instagram Reels. Bakes M4D design system overlays — Bungee headlines, JetBrains Mono labels, token pill, teal/purple tint, and animated floating astronaut — directly into 1080×1920 MP4 files using FFmpeg and Pillow. Preview files moved to a dedicated previews folder. Video post previewer added for reviewing reel layouts in the browser before compositing.

Content PipelineFeature
5 Jun 2026
Floating astro widget — now visible on mobile

The lightbulb astronaut widget was hidden on mobile screens. It now appears on all screen sizes — smaller and repositioned to the bottom-right corner on mobile. The search panel opens as a full-width bottom sheet on mobile, matching standard mobile UI patterns.

All PagesBug FixMobile
4 Jun 2026
Resources page — tool ticker added

Scrolling logo ticker added to the resources page between the stats strip and the search controls. Shows inline SVG brand marks for all tools used to build the site — Figma, GitHub, VS Code, Claude Code, Gumroad, MailerLite, GoDaddy, Unsplash, WordPress, and Analytics. Pauses on hover. Labels hidden on mobile.

ResourcesFeature
4 Jun 2026
Download page — footer glass style fixed

Footer on the download page was missing the glass neumorphism background applied to all other pages. Added backdrop blur, background, and box-shadow to match.

DownloadBug Fix
4 Jun 2026
Products page — three-tier comparison added

Products page now shows all three offerings side by side — free token starter, premium template, and lifetime membership — with features, pricing, and CTAs for each tier.

ProductsPricing
4 Jun 2026
Thank-you page — download wired to hosted ZIP

Free token starter download on the thank-you page now serves the ZIP directly from the site instead of a third-party release URL.

DownloadBug Fix
4 Jun 2026
Membership checkout — switched to Gumroad

All purchase CTAs on the membership page now point to the Gumroad product page. PMPro checkout links removed.

MembershipPayments
4 Jun 2026
Portfolio page — Coming Soon state

Portfolio grid and filters replaced with a Coming Soon holding page. Case studies will be added when ready.

Portfolio
4 Jun 2026
Apps card — members-only lock

Apps card on the home page is now restricted to members. Non-members see a lock overlay on hover with a Get Access CTA.

HomeMembers
3 Jun 2026
Favicon link added to all pages

Favicon link tag added to every page on the subdomain to prevent server errors on favicon requests. Covers all top-level pages, apps, design-stack, and member pages.

Bug FixAll Pages
3 Jun 2026
Floating astro widget added to all subdomain pages

Self-contained floating astronaut widget (lightbulb) added to every page on the subdomain. Widget fades in on scroll, shows date, weather, and search. Injected from assets/widget-astro.html before the closing body tag on all pages.

FeatureAll Pages
3 Jun 2026
Nav updated site-wide — Home added, Design System moved to footer

Home link added to header nav on all pages pointing to the subdomain index. Design System external link removed from header nav and kept in footer only. Nav logo updated to link to the WordPress homepage. Orphaned script tags fixed on resources.html.

NavAll PagesBug Fix
3 Jun 2026
WordPress homepage rebuilt + nebula video background added

New WordPress homepage built with a custom HTML block — Spline 3D logo hero with full-width nebula video background, hero headline section, three-leg business cards (blog, free download, studio), and footer strip. All links updated to projects.march4orthdesign.com. Nebula video assets added to assets/uploads/video/. Live URLs updated in project documentation. AMP plugin removed.

HomepageWordPressAssets
3 Jun 2026
CLAUDE.md consolidated + content pipeline skills added

Project context document fully consolidated — business model, tiers, funnel logic, both design systems, WCAG rules, HTML editing rules, content pipeline, and monetisation all in one file. New slash command skills added: content-queue (rotation-based content dispatcher), new-carousel (Instagram carousel producer), new-post (single-image post producer), new-blog-post (companion blog post drafter), and unsplash (space image verifier). Gitignore updated to exclude single-post-preview.html.

ToolingContentCLAUDE.md
2 Jun 2026
Immersive space imagery added to project and category cards

Project cards on index.html and category cards on redesign-04.html replaced with full-bleed Unsplash space photography. Each card has a unique image (nebulas, galaxies, star fields, Earth from orbit), a dark gradient overlay for text legibility, and a subtle scale-up hover effect. The "Want Everything?" section on download.html also gained a galaxy background. A new /unsplash skill was added for managing card imagery going forward.

UICardsImageryindex.htmldownload.html
29 May 2026
GA4 tracking + conversion events added sitewide

Google Analytics 4 tag added to all 18 static pages. Two conversion events wired up: download_form_submit fires on successful MailerLite form submission in download.html, and membership_checkout_click fires on all three checkout CTAs in membership.html. Realtime confirmed live in GA4.

AnalyticsGA4ConversionsSitewide
28 May 2026
Mobile nav — hamburger + full-screen overlay added sitewide

All 16 pages now have a mobile hamburger menu. At ≤768px the nav links and login button are replaced by a ☰ button that opens a full-screen dark overlay with all nav links, Member Login, and Get Access CTA. Tapping outside the menu or the close icon dismisses it.

MobileNavUXSitewide
28 May 2026
AI angle added to download, thank-you, and membership pages

download.html now includes a purple callout card explaining the token file is structured for Claude — with an example prompt. thank-you.html has a one-liner nudge below the download button. membership.html gains an "AI-Ready Architecture" library card.

AIDownloadMembershipUX
28 May 2026
Products page — free token starter card added

products.html now surfaces the free Design Stack Token Starter alongside the $79 Premium Template. A flat card with teal border CTA links to download.html. Both the products page and thank-you.html now include a contextual link to the Design Workflow Guide.

ProductsFree TierUX
27 May 2026
Member post content — auth-aware REST endpoint

Blog posts restricted by PMPro now load full content for logged-in members. A custom REST endpoint in functions.php validates the session cookie, checks membership level, then returns raw post content bypassing PMPro's content filter. Blog and category pages also updated to hide lock overlays for members.

AuthBlogPMProAPI
27 May 2026
Ticker — live blog titles + slower scroll

Homepage ticker now fetches the two latest blog post titles from the WP REST API and injects them on load. Ticker copy refreshed with current product and site news. Scroll speed doubled from 40s to 80s.

IndexBlogAPI
27 May 2026
PMPro pages styled + confirmation redirect

M4D dark styles applied to all PMPro account pages (checkout, confirmation, billing, cancel, orders, levels) via wp_head hooks. Nav/footer suppressed. Membership confirmation auto-redirects to member-account.html after 4 seconds.

PMProDesignAuth
27 May 2026
Release notes — partial gating (latest entry public)

release-notes.html converted from full auth-gate to partial public access. Latest entry in each tab is visible to everyone; older entries show a blur + lock overlay with a Get Access CTA. Members: auth check removes all .locked classes on load.

AuthUXChangelog
27 May 2026
WP login page styled with M4D tokens

login_enqueue_scripts + wp_head hooks inject M4D styles into the WP/PMPro login page — dark background, Bungee + Space Grotesk type, purple submit button, teal focus states. Nav/footer suppressed on login page. Post-login redirect sends members to member-account.html shell. /membership-account/ auto-redirects to member-account.html shell when visited directly.

AuthWordPressDesign
Members onlyGet Access →
27 May 2026
Login iframe shell — bare=1 + CSP fix

login.html rebuilt as an iframe shell loading /login/?bare=1. WP functions.php suppresses nav/footer on bare param. CSP frame-ancestors updated to allow both projects and www subdomains so Chrome permits the cross-path iframe.

AuthWordPressUX
26 May 2026
Login redirect passthrough + auth gate flash fix

login.html added as a redirect passthrough — forwards to the WP login page with redirect_to param so members land back on the gated page after logging in. Member Login nav updated site-wide to use login.html. release-notes.html hides content until auth resolves — no flash before redirect for non-members.

AuthNew PageUX
26 May 2026
Release notes page — members only

release-notes.html added: two-tab changelog (Design Stack versions + site history). Auth-gated — non-members redirected to login with redirect_to param. Linked from all 16 page footers. Full history back to site foundation (Apr 2026).

New PageAuthChangelog
26 May 2026
Auth-aware nav — no-flash pattern

Nav CTA area starts hidden (opacity 0) and fades in after auth-check resolves. Eliminates flash of wrong buttons on page load. Applied across all 16 pages including member shell pages.

NavAuthUX
26 May 2026
Design Stack PDFs + product assets

Pro and Studio PDF delivery packages committed to repo. Five product/membership thumbnail images added to assets/uploads/.

AssetsProducts
26 May 2026
Member shell pages — account + levels

member-account.html and member-levels.html added to full nav scope. Auth-check and correct login href applied. X-Frame-Options fixed in WP functions.php via CSP frame-ancestors to allow cross-origin iframes.

AuthIframeWordPress
26 May 2026
Custom auth endpoint — /m4d/v1/auth-check

Switched all pages from WP REST /users/me to a custom endpoint returning a clean logged_in boolean. Fixes auth on non-admin accounts and removes reliance on the public users API.

AuthWordPressAPI
26 May 2026
Members-only post locks on blog + category

Posts with members_only: true show a hover lock overlay with a Get Access CTA instead of the Read link. Clicking locked cards passes ?from=locked to the membership page to show a referral banner.

BlogMembershipUX
26 May 2026
WP REST API — switched to _embed

All post fetches now use _embed to pull featured media in a single request, eliminating the second round-trip for thumbnail images on blog, category, and homepage strips.

BlogPerformanceAPI
26 May 2026
Ticker legibility — 11px → 13px

Ticker font-size bumped from 11px to 13px, letter-spacing tightened from 0.14em to 0.10em for better readability at scroll speed.

TypographyIndex
25 May 2026
PMPro checkout wired — Member Login + Get Access

Claim Lifetime Access buttons now point to the PMPro checkout URL. Member Login nav updated to /login/ with post-login redirect to /membership-account/ via WP login_redirect filter.

AuthPMProNav
25 May 2026
Gumroad product URL wired to Design Stack buy buttons

Premium Template buy buttons on the products page now link to the live Gumroad product.

ProductsEcommerce
25 May 2026
Site-wide footer standardised

Glass neumorphism footer with logo + tagline, two-column link layout, and canonical link set applied to all pages. Year updated to 2026 throughout.

FooterDesign
25 May 2026
Nav standardised site-wide

Canonical nav order (Design System ↗ · Blog · Products · Services · Portfolio) locked in across all pages. Active state script, consistent spacing, and CTA class names fixed throughout.

NavDesign
25 May 2026
Products, Services, Membership pages — new pages

Three new pages added: products.html (Design Stack tiers + Gumroad buy), services.html (studio offering), membership.html (PMPro tiers + FAQ). Retired membership-pricing.html.

New PageProductsMembership
25 May 2026
Live blog reader + category deep-dive

blog.html and category.html fetch live posts from the WP REST API. post.html renders full single-post content headlessly. Homepage gets a 3-card live post strip.

BlogWordPressAPI
25 May 2026
Portfolio shell + resources page

portfolio.html built with placeholder project cards. resources.html added with downloads, templates, and reference material sections.

New PagePortfolio
25 May 2026
Contact page

contact.html built with mailto CTA and location info.

New PageContact
25 May 2026
WebGL star field + System in Motion animation

Three.js particle background added to services page. Live animated token system diagram added to products page preview section.

DesignAnimation
24 May 2026
Dual-state auth nav + membership-pricing page

First pass at auth-aware nav — Member Login swaps to My Account when logged in to WP. membership-pricing.html added as pricing reference (later superseded by membership.html).

AuthNavMembership
24 May 2026
Homepage rebuild — M4D v3 tokens

index.html rebuilt from scratch aligned to M4D v3 design tokens. Stub pages for blog, resources, portfolio, and apps added. All pages brought in line with the v3 token system.

DesignIndexTokens
27 Apr 2026
Membership Page v2 + redesign-03 responsive

redesign-04.html added as Membership Page v2 with pricing tiers, categories, and FAQ. Responsive breakpoints added to redesign-03.html.

Design StackResponsiveMembership
26 Apr 2026
Redesign Mockup v3 — space hero landing page

redesign-03.html built: full space hero with floating astronaut, WebGL star canvas, ticker, stats strip, live post section, and lead magnet. Glass neumorphism nav and footer applied. WCAG contrast fixes throughout.

Design StackNew PageDesign
25 Apr 2026
Site foundation — apps lobby, design-stack hub, index

m4d-projects index page added as main entry point. apps/ lobby with SlamScore added. All Design Stack files grouped into design-stack/ with hub index. Design system applied across hub pages.

InfrastructureNew PageDesign Stack
Built with
Figma
GitHub
VS Code
Claude Code
Gumroad
MailerLite
GoDaddy
Unsplash
WordPress
Analytics
© 2026 March4orth Design. All rights reserved.