How this site is built.

Mowa.work is an Astro site built and served from Cloudflare Pages. We use Astro 5 for the markup, React islands for the interactive pieces, the navbar, the theme-toggle, the network hero in the masthead, and the contact modal. Everything that does not need to think on the client renders to plain HTML at build time. The payload stays small, the first paint is fast, and the JS bundle stays out of the way of search engines and crawlers.

Every push to main on GitHub triggers a fresh build on Cloudflare Pages. Preview deploys for any other branch. The whole loop, from git push to production, is usually under two minutes.

Two faces. Inter for body and UI. Space Grotesk for display. Inter because it was designed for screens, stays legible at small sizes and at long line lengths, and the variable axes make the heaviest weights structural rather than decorative. Space Grotesk because the geometry feels considered without being cold.

We considered going monospace for everything in the spirit of the studio's roots, but reading anything over a few lines in JetBrains Mono is harder than it should be, so it stays for code, eyebrow labels, and the occasional accent.

We really like sage, so the palette is built around it. Surface, text, and border tokens are CSS custom properties with paired light and dark values. That is how the theme toggle works without component-by-component changes, and how anyone could fork the palette by editing one file.

Typography is clamp-based so a single class adapts across viewports. Motion is restrained. Short eases, short durations, never blocking the content. The whole site respects prefers-reduced-motion, including the theme toggle, which becomes an instant flip instead of the shimmer.

The grain overlay in the masthead is a single SVG turbulence pattern at 3% opacity. It does almost no work but adds a quiet texture that flat CSS cannot. We added it on a quiet afternoon and never took it off.

Each case study on this site includes a live interactive miniature of the product, not a screenshot. A screenshot or a video tells you what a product looks like. A miniature you can hover over and click into tells you what it actually does. We decided early that the case studies should show the work, not describe it.

Each mini is its own component, hand-built to match the live product, and updated when the product changes. It is more work than dropping in a PNG. We think it is worth it.

Studio defaults are a starting point, not a religion. The list shifts per project.

For most builds we reach for Figma, Astro or Next.js, TypeScript, Tailwind, Cloudflare Pages or Workers, Supabase or Postgres, GitHub Actions, and Resend or Postmark. The choice between Astro and Next.js comes down to whether the surface is content or app. Astro for static, Next.js with OpenNext for dynamic. Most things are one of those two.

We use Vercel less than we used to.

The About page on this site has three principles. Each shows up in the build.

Quality over quantity. We chose Astro because static-first is faster, more accessible, and easier to maintain than the alternatives we considered. We had a working Next.js shell for the studio site at one point. We removed it in favour of less code.

Ship, then iterate. This page is the third version. The first colophon was a list of tools. The second was a markdown dump. The third is this. Versions one and two were not wrong, they were the path here.

Long-term thinking, always. The site uses a single Cloudflare project, one DNS record, one build command, no proprietary platform features that would lock the site in. Migrating the codebase to a different host would take an afternoon. That is the test we apply to most architectural decisions.

Open the package.json. Astro, React, Tailwind, three typefaces, Lucide icons, and a handful of small utilities. We wrote none of them. Most we never paid for. It is the part of the job most engineers stop noticing eventually. Worth noticing.