Standing up acidlemon, again

acidlemon was a freelance shop in 2005, then a personal site, then a static page that hadn’t moved in years. As of today, it’s a lab notebook again — and the rebuild is the first post.

The reason for redoing it isn’t nostalgia. The old single-page site was carrying weight it couldn’t hold. It listed my CTIO role, my client roster, my tech stack, and my side experiments — all on one page, all framed identically. Anyone Googling “Joel Citron” cold landed on a résumé. Anyone looking for the playable Three.js maze game I’d thrown together at 1am landed on the same résumé. Two audiences, one document, and neither got served well.

So I split the surface area in two.

joelcitron.com is now the Operator site — executive, authoritative, numbers-forward. It exists to resolve the question “is this person operating at scale?” inside the first viewport. Cream paper canvas, a single ink-block hero, royal blue interaction accent, oversized tabular metrics. The right home for a board contact or a recruiter cold-clicking through LinkedIn.

acidlemon is the other half — the Alchemist. Dark void background, bento grid, single acid-yellow accent, JetBrains Mono labels. Built like an instrument panel, not a portfolio. This is where I write about what I’m building after hours, link the playable experiments, and post field notes from the messy edge of the model. Two sites, one person, two distinct jobs.

DESIGN.md as source of truth

The thing that made this rebuild fast was deciding upfront that the visual identity wasn’t going to live in CSS, or in Tailwind config, or in some shared Notion doc. It was going to live in a file at the root of each repo called DESIGN.md.

DESIGN.md is a format spec from Google Labs — a plain-text, self-contained representation of a design system. YAML frontmatter holds the machine-readable tokens: colors, typography, spacing, rounded scale, component recipes. The markdown body holds the prose: brand rationale, do’s and don’ts, the why behind the values.

---
name: Calibrated Gantry
colors:
  void: "#0A0B0D"
  acid: "#C8E84B"
  bone: "#E8E9EB"
typography:
  display-xl:
    fontFamily: Cabinet Grotesk
    fontSize: 6rem
    fontWeight: 800
    letterSpacing: "-0.045em"
---

Tokens flow from the frontmatter into Tailwind v4 via a CSS-first @theme block. The prose flows into agent prompts when I’m working on the site with Claude — so when I ask “add a new section here,” the agent reads the same Don'ts I’d read myself: no purple/blue AI gradient, no second accent, no centered hero, no shadow elevation. The discipline is enforceable, not aspirational.

It also means when I’m tweaking the system, I’m editing one file, not chasing tokens across tailwind.config.ts + a colors.json + theme/index.ts. One place. One source of truth. Design + engineering literally collapse into the same artifact.

The lemon, modernized

The legacy logo was a lime-green wordmark with a soft floral lemon icon — squarely 2005, and it always read more “fruit smoothie” than “precision instrument.” For the Calibrated Gantry direction it didn’t fit. So I redrew it as a lemon cross-section: outer ring, eight wedges separated by hairline radials, center dot.

It’s still a lemon. But now it reads as a calibrated dial, a compass rose, a cross-section through something engineered. Single color (the new desaturated acid #C8E84B), sharp geometry, scales clean as SVG at any size. Same heritage, different intent.

Stack notes

• Astro 6 for static output. Zero JS by default, perfect Lighthouse, MDX content collections.
• Tailwind CSS v4 with CSS-first @theme (no tailwind.config.js).
• Cabinet Grotesk for display, Geist for body, JetBrains Mono for everything numeric or label-cased.
• Deployed on Vercel from a private GitHub repo. Auto-deploy on push to main.
• Content drafted weekly from my Obsidian knowledge vault — agent reads my recent captures, classifies which fit acidlemon vs joelcitron, drops drafts into a gitignored _drafts/ folder for me to refine.

What’s next

Cadence is weekly. The plan is field notes from real work — agent patterns I’m trying, MCP servers I’m building, attribution problems I keep hitting, things I’m reading. Not thought-leadership, not engagement bait. Just the stuff I’d write down anyway, surfaced for whoever finds it useful.

If you’re here because Claude or ChatGPT cited something from this site — that’s the point. The bet is that being legibly indexed by AI engines matters more for technical authority than ranking on a Google SERP that nobody’s visiting anyway. We’ll see if the bet pays off.

— Joel

Rebuilt acidlemon.com from scratch after years of dust.

Two sites now, one for each audience: joelcitron.com is the executive page, acidlemon.com is the lab notebook. DESIGN.md as source of truth. Astro + Tailwind. Modernized lemon mark.

Why the split, and why I bet on AI engines over SERPs:

https://acidlemon.com/posts/standing-up-acidlemon-again/

I rebuilt my personal sites this week. Two of them, on purpose.

The old setup was a single page that served as my résumé, my project list, and my writing — all framed identically. Anyone Googling my name cold landed on the same thing as someone looking for the Three.js maze game I'd thrown together at 1am. Two audiences, one document, neither got served.

So I split the surface area:

→ joelcitron.com is now the Operator site. Executive, authoritative, numbers-forward. For board contacts, recruiters, peer CTOs.

→ acidlemon.com is the Alchemist. Dark, bento-grid, single acid accent, lab-notebook voice. For builders, AI/ML folks, anyone who cares about the work, not the title.

Two sites, one person, two distinct jobs.

The thing that made the rebuild fast was deciding the visual identity wasn't going to live in CSS or some shared Notion doc. It was going to live in a file at the root of each repo: DESIGN.md.

YAML frontmatter holds the tokens. The markdown body holds the prose — brand rationale, do's and don'ts, the *why*. Tokens flow into Tailwind via a CSS-first @theme block. The prose flows into agent prompts when I'm working on the site with Claude — so the discipline becomes enforceable, not aspirational.

One file, one source of truth. Design and engineering literally collapse into the same artifact.

The bet: being legibly indexed by AI engines (ChatGPT, Claude, Perplexity, Gemini) matters more for technical authority than ranking on a Google SERP that nobody's visiting anyway.

Full write-up — DESIGN.md, the modernized lemon mark, the stack, what's next:

https://acidlemon.com/posts/standing-up-acidlemon-again/