How I Dissected 54 Design Systems and Transplanted Linear.app DNA Into My Hugo Blog in One Day

This morning I opened my blog and thought: this looks like a 2015 Tistory template. So I told my Hermes agent, in exactly these words: “This looks like garbage. Go through all 54 design systems and rebuild it with the best one.”

It did.

Why Linear.app Won Out of 54

The popular-web-designs skill in Hermes has templates for 54 real-world design systems — Stripe, Linear, Vercel, Notion, Figma, and 49 others. The agent loaded them all and surfaced five recommendations:

Linear won for one reason: it’s the reference implementation for an IT/developer blog. Dark mode by default. No fluff. Three font weights that make code blocks and technical prose feel like they belong together. The indigo accent (#5e6ad2) is restrained enough to disappear when you’re reading and present enough to guide your eye when you’re scanning.

Extracting the DNA: Design Tokens Into Hugo CSS

Linear’s system boils down to a handful of principles:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* Near-black canvas — no gray-wash, no gradient tricks */
--zn-surface-0: #08090a;

/* Three-tier weight — Linear's signature */
--zn-wt-read:   400;  /* body */
--zn-wt-ui:     510;  /* UI emphasis */
--zn-wt-strong: 590;  /* headings */

/* Semi-transparent white borders — dark-on-dark depth */
--zn-border-subtle:  rgba(255, 255, 255, 0.05);
--zn-border:         rgba(255, 255, 255, 0.08);
--zn-border-strong:  rgba(255, 255, 255, 0.12);

I ported these into Hugo’s assets/css/tokens.css, then rewrote theme.css, article.css, featured.css, and interactions.css to follow Linear’s rules. 811 lines added, 706 removed.

The trickiest part was keeping Zemna’s brand identity intact while adopting Linear’s structure:

The rule: Linear’s skeleton, Zemna’s colors. Indigo stays in CTAs and highlights. Vermilion keeps the Zernio connection alive. Nothing clashes.

Swapping AI Models Mid-Task (Unplanned Experiment)

This turned into an accidental model comparison. Three different models worked on the same codebase:

Takeaway: one model end-to-end is worse than a pipeline. GLM for architecture, MiniMax for drafts, GPT for finishing. Treat them like a human team and the output is better than any single model’s best.

What Changed in One Afternoon

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

┌──────────────────────┐     ┌──────────────────────┐
│  Before              │     │  After               │
│  ───────             │     │  ─────               │
│  Gray-wash default   │ ──► │  #08090a dark canvas │
│  Single weight font  │     │  3-tier weight system│
│  No taxonomy pages   │     │  /tags/ + /categories/│
│  Text-only hero      │     │  Jakarta skyline bg  │
│  No brand mark       │     │  Z-bridge logo       │
│  Broken OG meta      │     │  Full SEO + favicons  │
│  8rem hero padding   │     │  5rem (3rem mobile)  │
└──────────────────────┘     └──────────────────────┘

Three Git commits. 21 files changed. 1,500+ lines of CSS rewritten. One cover image generated (Jakarta skyline at golden hour, Bauhaus-inspired geometric abstract).

What I Learned

1. Choosing from 54 is faster than choosing from 3. More options force clearer criteria. You stop asking “which one looks nice” and start asking “which one was built for my exact use case.”

2. AI agents respond better to blunt feedback. “This looks like garbage” produced a better result than “let’s improve the design.” Sugarcoating wastes tokens.

3. Static sites can have real design systems. Hugo + CSS custom properties is enough. You don’t need a React component library or a design tool. Design tokens in :root get you 90% of the way.

4. Models have specialties — use them. GLM for structure, GPT for polish. A multi-model pipeline beats any single model. This isn’t a hot take; I literally watched it happen on my own codebase this afternoon.

Live site: zemna.net

Post URL: zemna.net/posts/linear-design-system-hugo/

GitHub: github.com/zemna/zemna.net