Devlog - rebuilding the EzRegex UI

Why

The app worked. It just looked generated.

The tell was the colour. Everything was indigo; buttons, focus rings, flag pills, match highlights, links, scrollbars. Then a violet, an emerald, a sky and an amber for the example categories, and eight more hues for the regex tokens. About a dozen colours, none of them meaning anything.

The rule

Colour is treated as a scarce resource and spent only where it carries meaning.

Everything else went neutral. What survived:

Colour Means Ochre a match, a selection, focus Red an invalid pattern Pink / green / blue / cyan the four regex token families Neutral everything else

Category badges lost their colours. Token types went from eight hues down to four, grouped by what they do rather than one colour each.

The change I like most: plain literals are uncoloured now. They’re most of any pattern, and colouring them is what turns a regex display into confetti. Greying them out is what made the other four colours mean something.

Also changed

Custom warm-grey ramp in OKLCH instead of Tailwind’s stock gray-*
Geist instead of Inter
The pattern field moved to its own full-width band — it’s the point of the app, it shouldn’t be one item in a column
The match count is visible. It existed before, but only as sr-only text

Bugs I hit on the way

Highlights drifted off the text. The textarea and the layer behind it wrapped differently, and a trailing newline made the backdrop one line short
/a*/g on a big paste could hang the page. Capped at 5,000 matches
[]] was described as "["
The explainer said: Matches the literal character “the @ symbol”
You could tab into the off-screen mobile drawer. It also didn’t trap focus or close on Escape
The PWA manifest was untouched boilerplate — the app installed as “MyWebSite”

The part I nearly got wrong

I wrote a script to check every text-on-background pair against WCAG AA instead of trusting my eyes.

The first palette failed 7 checks. A muted label was at 2.75:1 where it needed 4.5:1. Button text was at 4.02:1. All of it looked fine on my monitor.

58 pairs pass now. One visible cost: tertiary text sits closer to secondary than I’d like, because anything lighter fails. Size and weight carry the hierarchy instead.