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. One dark world, no theme toggle.

MOTION GSAP 3.12 + CSS GSAP for scroll reveals and metric counters; CSS keyframes and native view transitions for entrances. Native scroll, no hijack.

TYPE Bricolage Grotesque · Geist · JetBrains Mono · Instrument Serif Characterful grotesque for display, geometric sans for body and UI, technical mono for labels, serif for editorial moments. 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.

Bricolage Grotesque

DISPLAY: HEADLINES + MASTHEAD

Characterful variable grotesque with a wide optical-size axis. Weight 700-800 at poster scale. @fontsource-variable/bricolage-grotesque.

Instrument Serif

SERIF: EDITORIAL MOMENTS

The quiet counter-voice to the display tier. Reserved for long-form and editorial moments. @fontsource/instrument-serif.

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 #0E0E10 Charcoal, page background

--bone #161618 Raised surface, cards

--bone-deep #1A1A1D Deeper surface, overlays

--stone #38383C Tertiary surface

--rule #2A2A2E Hairlines and dividers

--ink #ECEAE6 Soft bone, primary text

--mute #8C8C90 Secondary text / labels

--fade #6A6A6E Tertiary / very muted

--accent #F0531B Ember orange, the single accent

--mark-soft #FF7A45 Accent hover only

Motion is purposeful, not decorative. Entrances are short, hovers are quiet, nothing loops, and every animation respects prefers-reduced-motion.

PAGE TRANSITIONS Cross-fade A short opacity cross-fade between routes via native view transitions. Disabled entirely under reduced motion.

SCROLL REVEALS Fade and rise Content fades up a few pixels as it enters the viewport, once, then stays put. Driven by GSAP ScrollTrigger.

METRIC COUNTERS Count on enter Proof figures count up a single time when first scrolled into view, then hold.

HOVER STATES Micro-interactions Links underline, arrows nudge forward, surfaces lift a touch. Small, immediate, and never decorative.

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.