A typical AI-SaaS landing,
recompiled into a system.
We took a real, freshly-launched product page — lavender gradient, rounded cards, six corner radii, and a mobile hero that quietly dropped the product’s own proof — and rebuilt it the way we build: one brand, one type scale, two radii, proof back where it belongs.
Unaffiliated with GlossaryPage. Shown respectfully to demonstrate our method — the “before” is faithfully reconstructed from the live page’s measured styles, not a screenshot of their brand.
Proof-first, on a real system.
Drag the toggle. The lavender template collapses into one brand: the palette converges, six radii become two, the type finds one scale, and the product proof returns as the hero — the whole point of the screen.
- 1Restore the product proof on mobile
- 2Converge the palette to brand tokens
- 3Collapse 6 radii → 2 (control / surface)
- 4Reflow: headline → proof → one CTA
- 5Set one type scale, not five
The redesign isn’t the product. The system is.
The old page used 6 / 10 / 24 / 28 / 32 / 800px — six unrelated radii. Two tokens do the whole job.
The product proof vanished on mobile
The desktop hero shows an “AI Generated Draft · 98/100” result card — the one thing that proves the product does something. At 390px it’s removed entirely, leaving marketing copy and two buttons with nothing to back them up.
Six radii, no system
6px menus, 10px nav CTA, 24px result card, 28px workflow card, 32px hero, 800px pill — six unrelated corner radii on one short page. It reads as template blocks glued together, not one authored product.
Desktop padding crushed the mobile column
The hero kept its 48px desktop padding on a 366px-wide phone, so real content had ~268px to live in and the headline broke to four lines. Space went to the container, not the product.
Your product deserves a system, not a template.
We do this for real — brand identity plus a production-grade React frontend, compiled from your taste. New builds or rescues.