Refactor Experiments Design Page

The Problem

The experiments design page at /experiments/design had its own bespoke layout -- a custom HeroSection, BackgroundSurface, and hand-rolled grid with Card components. Meanwhile, the blog listing page had a cleaner, more polished layout using PageHeader, BlogFilterBar, and CardCompact. The inconsistency was noticeable and unnecessary.

What I Did

This was a straightforward presentational refactor with two tasks:

• Replaced HeroSection with PageHeader using the title "Design Agents" and the glitch effect prop. Swapped BackgroundSurface for PageSection with the standard variant.
• Added a static BlogFilterBar below the header (just an "All Experiments" option for now) and replaced the custom .experiments-grid with a responsive two-column grid of CardCompact components. Removed the now-unused style block.

The sub-page navigation links for Brand Generation and Design Token Generation remained fully functional throughout. This was a low-risk change -- purely visual, no data flow or API modifications.

Why It Matters

Design system consistency compounds. Every page that uses the same primitives is one fewer page to update when those primitives evolve. The experiments section now benefits from any future improvements to PageHeader or CardCompact without additional work.