Case Study — March4orth Design

A design system business in 6 weeks.

From zero to a live token library, membership product, content pipeline, and revenue infrastructure — built systematically, shipped fast.

Design Systems Token Architecture Product Content Membership
6
Weeks to launch
18
Pages shipped
3
Revenue streams live
148
Commits — Apr to Jun 2026
01 — The Problem

Junior designers don't get taught design systems. They get thrown into them.

Most designers learn tokens, type scales, and spacing systems on the job — under pressure, with no framework. The gap between "I know what a design system is" and "I can build and maintain one" is enormous, and almost nobody teaches it directly.

The gap
No structured learning path
Design bootcamps and university programs cover tools, not systems. Figma tutorials teach features, not architecture. The mental model for how tokens, type, spacing, and components fit together isn't taught — it's absorbed, slowly, through trial and error.
The opportunity
A real system, not another tutorial
The answer wasn't another YouTube series. It was a production-ready design system — real token files, real component patterns, real decisions documented — that designers could study, use, and adapt. Paired with the business infrastructure to sustain it.

02 — The Build

Six weeks. Three legs. One systematic approach.

The build was treated like a design system project — tokens first, then components, then the surfaces that use them. Every decision was documented. Every page followed the same token set. The business model was built in parallel, not bolted on after.

Week 1–2
Token architecture + design language
Defined the full token set: color primitives to semantic layer, type scale (Bungee / Space Grotesk / JetBrains Mono), spacing system, radius tokens. Built the glass neumorphism nav and footer pattern. Established WCAG AA as a non-negotiable constraint on every surface.
Week 3–4
Site build — 18 pages
Built the full static site: hub, blog, membership, download, products, services, portfolio, login gate, member account, release notes, and more. All pages share the same token system. Responsive breakpoints at 1024px, 768px, and 480px across every file.
Week 5
Revenue infrastructure
Wired three revenue streams: Gumroad for lifetime membership ($99/$149), PMPro and Stripe for WordPress-gated content, MailerLite for the free download flow with a 3-email nurture sequence. GA4 conversion events connected to Google Ads.
Week 6
Content pipeline + Instagram launch
Built an autonomous Instagram content pipeline — carousel generator, specimen posts, reel scripts, quote cards — all driven by a queue rotation. Launched @march4orthdesign. Published the first 16 content slots.

03 — The Token System

Primitives to semantic layer to every surface.

The token architecture follows a two-layer model: raw values at the primitive level, intent-named tokens at the semantic level. Every color, size, and spacing decision on every page traces back to the same token file.

--ink
#0d0d0d
Backgrounds
--paper
#f4f0e8
Primary text
--teal
#1ab5a3
Display accent
--purple
#534AB7
CTAs
--accent
#ff4d1c
Highlights
System layers
Color
5 core tokens + paper opacity scale (ghost to muted to dim to full). WCAG AA verified at every level — contrast ratios documented and enforced.
Aa
Typography
Three-font system: Bungee for display, Space Grotesk for body and UI, JetBrains Mono for labels, eyebrows, and code. Each font has a defined role — no mixing.
Spacing + Radius
Consistent spacing scale applied across all 18 pages. Responsive padding tokens collapse predictably at each breakpoint — no one-off values.

04 — The Stack

No framework. Just a system.

The entire site is vanilla HTML and CSS — no build tool, no framework, no component library dependency. The token system is the architecture. GitHub Actions deploys to GoDaddy on every push to main. WordPress handles the blog and auth layer.

HTML / CSS Figma WordPress + PMPro Gumroad MailerLite GA4 + Google Ads GitHub Actions Claude Code Stripe GoDaddy

05 — Outcomes

A live business. In six weeks.

Not a side project, not a prototype. A functioning design system product with a membership, a content channel, a blog, and a studio. Every part feeds the next.

18
Pages live
Hub, blog, membership, download, products, services, portfolio, login gate, member account, release notes, and more.
3
Revenue streams
Gumroad lifetime membership, PMPro and Stripe gated content, MailerLite email list with nurture sequence to paid.
16+
Content pieces
Carousels, specimens, reels, and quote cards — produced by an autonomous content pipeline built in parallel with the site.
Studio work
Need a design system built for your product?