design

The sed replaced 409 accent classes, yet the button fill stayed at stop 600. WCAG thresholds per role, not taste, explain the two anchors.

TL;DR: The sed swapping 409 emerald text classes wasn't busywork; it enforced a design contract mapping WCAG contrast roles to Tailwind stops. One blue stop can't serve both roles: text needs 4.5:1 (#0369a1 hits 5.93), button fill only needs 3:1 (#0080c9 hits 4.26). Verification paired a luminance script with a compiled-CSS census, plus two documented contrast exceptions.

A white headline nearly vanished over a bright hero photo. One flat dim layer was not enough; three overlay layers plus text shadows fixed it.

TL;DR: Text disappears on bright images. A layered approach solves this. Contrast is improved with dimming, scrim, and glow.

A nav group named after a permission layer means nothing to operators. The regroup follows tasks instead of module boundaries.

TL;DR: The sidebar was reorganized by task, not function. Links are now grouped by division or citizen services. A read-only icon marks unusable entries until backend permissions are updated.

The homepage redesign left five subpages looking like a different website. The fix was not restyling each page by hand but extracting shared components.

TL;DR: Shipping a polished homepage exposed inconsistent spacing, heroes and buttons across other pages. Instead of patching each page, the fix extended two components, page-hero.tsx and page-cta.tsx, plus a borderless card pattern using layered gradients, CSS variable tokens and consistent pill buttons. Pages now share the same visual language through props while keeping unique content, so updates happen in one place.

Reverting a heading font took one line because every heading reads a single token. Taste experiments can be cheap.

TL;DR: A font experiment on this project lasted twenty-two minutes: one commit swapped the heading token to Source Serif 4, the next reverted it. Because every heading reads a single CSS variable instead of hardcoded font names, the whole trial cost one line each way. The failed taste experiment left behind cheap reversibility and an untouched, durable type scale.

A card border vanished on a muted background because two grays were near-twins. Tokens, contrast, and backdrop assumptions.

TL;DR: The missing borders were never broken code; the border token was nearly identical to the muted background, so the line was invisible. The fix used Tailwind's opacity modifier for a subtle primary-colored border plus a card tint, which also satisfies WCAG 1.4.11 contrast. Per-card icons and left alignment followed; now every component gets tested on every surface.

Dark navy header felt heavy in light mode. The fix: bake 92% alpha into the --color-header token so backdrop-blur works everywhere without per-component overrides.

TL;DR: Slapping bg-white/60 on a navbar breaks fast, since child elements inherit transparency and fixes scatter across files. The fix is baking alpha into a --color-header token (about 92 percent opacity), which cascades to every consumer and pairs cleanly with backdrop-blur-md. Trade-off: the header decouples from the global background token, but one line brings it back if needed.

The right context panel dropped its floating-card frame for a single left-border divider, matching the sidebar's design language.

TL;DR: The author changed a right panel from floating card to flush panel by swapping rounded corners and a four-sided border for a single left border. The border's job shifted from frame to divider, not removal. Lesson: when converting a card to a panel, ask what the border should do now.

Brightening the shared background token shifts the whole page. A navbar needs a solid chrome feel, so a literal color plus the dark variant wins.

TL;DR: Light mode made the navbar look like dirty glass because the shared background token added a grayish cast. The fix swaps in literal bg-white utilities for light mode in both scroll branches while dark mode keeps the token. Trade-off: the navbar won't follow future theme changes, but a dedicated token is a one-line swap later.