design

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.

Mode chips at the bottom of a sidebar stay invisible until you scroll. Moved to the top, with type and aria-pressed kept intact.

TL;DR: Moving the chat mode switch to the sidebar's top fixed a real usability bug: users only found the search-versus-about toggle after scrolling past the decision point. Core lesson: layout order is decision order, so mode-setting controls belong above scrollable content. The move kept accessibility attributes like aria-pressed and type=button intact, shrinking the form to one responsibility.