Engineering our pricing page: performance and clarity

A look at how we designed the pricing UX, from toggle interactions to static generation.

By Guillem Servera February 5, 2025
3 min read
#engineering #astro #pricing

Engineering our pricing page

Design goals

We wanted the pricing page to load quickly, explain value clearly, and let users preview monthly vs annual with minimal client JavaScript.

Implementation notes

1) Static-first

Astro’s file output mode keeps things snappy and cacheable at the edge.

2) Minimal JS

We push interactions (like the billing toggle) to small islands and use data attributes to sync state across cards.

3) Visual polish

Focus on consistent spacing, soft borders, and constrained typographic width for readability.

What’s next

We’ll add coupon awareness and usage-based pricing hints without sacrificing performance.