Design detox

The colored stripe was the loudest tell

Every list card had a 3px colored bar down its left edge, keyed to the category. It turns out that stripe is the single most-cited "this was generated" signal there is. Half my cards already carried the same color as a small dot next to the title, so the stripe was pure redundancy — I dropped it everywhere and let the dot do the job. The rails I kept are the ones that mean something: a calendar event's color, an out-of-stock state, a team's colors on a pick card. Identity color on a card is noise; state color is signal.

One page intro, so every page belongs to the same site

Every interior page had hand-rolled its own header — a slightly different eyebrow, a timid text-3xl title — so forty pages had quietly drifted apart. I pulled them into one PageIntro: an eyebrow, a confident clamp-sized display title in the same face the landing uses, and a lede. Now the whole site opens the same way, and the type is bold enough to look like a decision.

The arrow was on the wrong line — and my first fix missed why

A little ↗ on the landing links kept dropping to its own line under the word instead of sitting next to it. Obvious cause: the space before the icon is a line-break point. So I made it a non-breaking space, checked the served HTML — the   byte was right there — and it still wrapped. The space was never it. I read the computed style instead of guessing:

getComputedStyle(svg).display  ->  "block"

The design-system reset renders a bare svg as display: block, so in any inline-text context the icon fell to its own line. Buttons were fine only because they lay out with flex. The real fix was one line — display: inline-block on the icon — and it corrected every arrow on the site at once. The lesson I keep relearning: reproduce is not diagnose, and the screenshot caught my wrong fix before I shipped it.

Apple's corner, in one line of CSS

Default border-radius is a plain circular arc; Apple's corners are a superellipse — the squircle. The new corner-shape property draws it natively, and because border-radius degrades on its own, it's pure progressive enhancement:

:where([class*="rounded"]):not([class*="rounded-full"]) {
  corner-shape: squircle;
}

Scoped to finite-radius surfaces — circles, pills, dots and avatars are excluded, because a squircle visibly distorts a corner whose radius is half the side. Subtle by design, which is the whole point.

The grain that didn't help

Flat, even surfaces are a tell too, so I tried a film grain over everything. I spent real time tuning it — it was invisible at low opacity, and overlay blend on low-contrast noise washed out, so I contrast-boosted the noise until it read. It looked fine. It also didn't move the needle, and I pulled it. Worth keeping in the write-up because the lesson was the diagnosis: the site didn't read generated because the surfaces were too clean. It read generated because the layout was too even.

Too even is its own tell

That was the real fix. The card grids were perfect three-ups — every cell the same size, stamped from one mold. I broke them into an irregular bento: a larger featured card plus a repeating wide tile, with grid-auto-flow: dense backfilling the gaps so the wide tiles alternate sides. Same content, same components — it just stops looking like a spreadsheet of cards and starts looking like someone laid it out.