Marking AI content with a magenta→cyan gradient
A small visual primitive that makes AI-written prose impossible to miss — both for visitors and for me. Pink background, CGA palette, lives in eidotter.
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.
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.
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.
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.