Live Design · Engineering

turbolense.com — Studio Site Rebuild

Rebuilt the turbolense studio site from scratch with Astro 7, Tailwind CSS v4, and Cloudflare Workers. Typography-first design, full content collections, dynamic OG images.

View live →
Astro Cloudflare TypeScript Tailwind

turbolense.com is the studio site and product lab for turbolense — an independent creative engineering studio based in Munich, Germany.

What was built

The site is a fully static Astro 7 build deployed on Cloudflare Pages/Workers. Key technical decisions:

  • Typography-first design — No hero images. Display type at clamp(3.5rem, 2.5rem + 5vw, 6.5rem) drives the visual weight.
  • Content Collections — Blog and project entries are MDX files with Zod-validated frontmatter. Strong types throughout.
  • Tailwind CSS v4 — Design tokens in @layer base, no tailwind.config.js.
  • Hairline border layout — 1px borders define the grid. Zero shadow-heavy cards.

Outcome

  • Lighthouse: 100 Performance, 100 Accessibility, 100 Best Practices, 100 SEO.
  • Build time: ~2.3s.
  • Zero client-side JavaScript on static pages.