Marking AI content with a magenta→cyan gradient

This post is the first one published with the new AI-assisted: ai_assisted frontmatter flag. The whole article body sits on a magenta-to-cyan gradient because the flag is set. As I rewrite passages in my own voice, I'll wrap the AI-touched bits in <AI>...</AI> and flip the flag off — then only the remaining AI spans stay pink.

Why mark it at all

Two reasons. AI-assisted: One — readers deserve to know what came out of a model and what came out of me. Two — looking at a pink wall of text every time I visit my own blog is a forcing function. I either rewrite it or I leave it visibly pink. There's no third option where the post quietly passes as mine.

The second reason is the one that changed how I write. Transparency for readers is table stakes — plenty of sites bolt an "AI-assisted" label onto a page and move on, and a label you can ignore does nothing. A gradient you can't ignore, one that colours the whole paragraph you're trying to read, turns the disclosure into pressure on me. Every sentence I haven't rewritten is visibly not-yet-mine, and it stays that way until I do the work. The mark isn't a badge I award the post. It's a debt the post owes until I pay it down.

How it works

The <AIText> primitive lives in AI-assisted: the eidotter design system, so every site in the portfolio can consume the same treatment. The CSS is a single class — .ai-text — that applies a linear-gradient(135deg, #FF55FF 0%, #55FFFF 100%) background with black text on top. Both endpoints of the gradient clear AA contrast against black, so the prose stays readable across the whole sweep.

Why magenta and cyan? They're the two loudest colours in the CGA palette, and — this is the point — neither appears anywhere in the blog's normal amber-on-black theme. AI prose can't be mistaken for anything else on the page. A flat pink would read as a highlight; the magenta→cyan sweep reads as something synthetic, machine-made, without tipping into an alarm colour like red. And because both ends clear AA contrast against black, "unmistakable" never costs legibility.

For inline spans use <AI>some text</AI> inside an MDX post. For whole-post marking, set ai_assisted: true in frontmatter and the blog template wraps the body in the same class automatically.

When the whole post is the machine's

Right now this post is almost entirely pink, because almost all of it started as AI draft — including the parts explaining why that's a problem. That isn't a bug in the system; it's the system working. Whole-post mode is the honest default for something I generated and haven't yet made mine, and yes, a full pink wall is a lot to look at. It's supposed to be. The discomfort is the forcing function pointed at its most extreme case: the more of a post the model wrote, the louder the page is about it, and the more obvious my job becomes. As I rewrite passages in my own voice they drop back to plain text, the wall recedes, and eventually the only pink left is the <AI> spans I chose to keep — the sentences a model genuinely put better than I could, marked honestly and on purpose.

What I still want to add

AI-assisted: A small "rewritten" badge that fades in when I remove AI spans, so the visible burn-down is satisfying.
A Storybook story in eidotter that demonstrates the AAA contrast at both gradient endpoints.
Per-paragraph granularity (an ai_paragraphs: [2, 5] frontmatter field) as a middle ground between whole-post and per-span.

Not in v1 either way.