COLOPHON

How this
is built.

Every tool, every choice.

FRAMEWORK Astro 5 Static-first, ships near-zero JS. SSG by default.

STYLING Tailwind CSS 4 + CSS custom properties Token-driven design system, utility layout.

MOTION GSAP 3.12 + Lenis + CSS keyframes GSAP for hero stagger and scroll reveals, Lenis for smooth scroll, CSS keyframes for ambient layer.

TYPE Fraunces · Geist · JetBrains Mono Editorial serif for display, geometric sans for body, technical mono for labels. Self-hosted via @fontsource.

CONTENT MDX + Sanity CMS Case studies in MDX content collections. Blog posts via Sanity.

FORMS Supabase REST + Resend Contact submissions write directly to Supabase; Resend dispatches the notification email.

HOSTING Vercel Static deploy with serverless API route for /api/contact. Edge CDN, automatic preview URLs.

ANALYTICS Plausible + Google Analytics 4 Plausible for privacy-respecting page views; GA4 for funnel insight on the contact flow.

IMAGES Astro Image + sharp AVIF/WebP output, LCP optimised.

Fraunces

DISPLAY: HEADLINES + EDITORIAL

Editorial variable serif by Undercase Type. Full axes: weight, optical size, SOFT, WONK. @fontsource-variable/fraunces.

Geist

BODY + UI: PROSE AND CONTROLS

Geometric sans by Vercel. 300 for sub-display, 400 for body, 500 for emphasis. @fontsource/geist.

JetBrains Mono

MONO: LABELS + MARGINALIA

Captions, section numbers, timestamps. Never body. @fontsource-variable/jetbrains-mono.

--paper #F4F1EA Cream, primary background

--bone #EAE5DA Warm surface, cards

--bone-deep #DDD8CE Deeper surface, overlays

--stone #C9C3B4 Tertiary surface

--rule #D4CEC0 Hairlines and dividers

--ink #1A1A1A Near-black, primary text

--mute #6E6A60 Secondary text / labels

--fade #9B9589 Tertiary / very muted

--accent #0E5A6B Brand teal, primary accent

--mark #B8541C Warm ochre, figures, emphasis

--copper #C08457 Warm copper, micro-accent

Motion is purposeful, not decorative. Two ambient cues add depth without competing with content. Every animation respects prefers-reduced-motion.

HERO GLOW Drifting radial blobs Teal and ochre gradient blobs drift slowly behind the hero, 14s and 18s cycles. Establishes warmth and depth on entry.

PREVIEW FLOAT Idle breath Case preview panel floats 8px on a 6s alternate cycle when idle. Pauses while the user is actively browsing the case list.

Original work. Client material shown with permission. Third-party logos and trademarks belong to their owners.

Built and maintained by Krushna Palwe. No templates were harmed.