What I use.
Every Drawn In Code site is built from the same short, deliberately boring stack. No CMS, no page builders, no framework churn. Here’s the whole list.
Where the work happens.
VS Code — the daily editor. Vim keybindings, copper-tinted theme that matches the brand, nothing exotic.
Claude Code & Cursor — AI pair-programming inside the editor. Handles the boilerplate, the rote refactors, and the kind of mechanical edits that used to eat an afternoon. I still write every line of design judgment by hand.
Figma — quick sketches, color exploration, the occasional client-facing mockup. Most builds skip the high-fidelity mockup step and go straight to HTML because the browser is the real design surface.
Git + GitHub — every project lives in its own repo. Branch-per-feature, conventional commits, never a force-push on main.
Boring on purpose.
HTML — the source of truth. No JSX, no template engine, no headless CMS — just hand-authored markup with proper semantics, schema.org JSON-LD where it earns its weight, and accessibility baked in from the first commit.
Tailwind CSS v3 — the design system. Custom tokens for color, type, spacing, and motion easing live in tailwind.config.js. Production CSS compiles to a single minified file; no PurgeCSS surprises, no runtime style cost.
Vanilla JavaScript — the only two third-party libraries we ship are Lenis (smooth inertia scroll, ~10KB) and SplitType (headline mask reveals, ~5KB). Everything else — the IntersectionObserver reveals, the custom cursor, the FLIP filter, the floating-card drift — is plain JS in a single js/main.js file.
No framework. No React, no Vue, no Svelte. The cost of a JavaScript framework on a marketing site is almost always larger than the value it provides. Static HTML loads faster, indexes cleaner, and ages better.
Where the sites live.
Netlify — static hosting, global CDN, atomic deploys, instant rollback. Every push to main publishes a preview; merges promote to production. SSL is automatic. Deploys take roughly 30 seconds.
Netlify Forms — lead capture, discovery requests, support tickets. Built-in spam protection (honeypot + Akismet), no server, no database, exports to CSV.
Netlify Functions — for anything that needs to talk to an API at request time. Currently wired up for AI-powered features and transactional email.
Resend — transactional email from Netlify Functions. Discovery confirmations, lead notifications, the occasional contact-form forward.
Three fonts, one rhythm.
Instrument Serif — the display face. Editorial, slightly italic personality, set in single-axis weight 400. Used on hero headlines and the brand wordmark.
Fraunces — the accent serif. Variable, deeply customizable optical-size and weight axes, set with inline font-variation-settings on headlines that want a touch more presence.
Outfit — the body face. Geometric, neutral, set at weight 300 for long-form reading and 500–600 for UI labels.
All three load from Google Fonts with font-display: swap so first paint never blocks on the network.
How we know it’s good.
Lighthouse — the four-score gauntlet on every deploy. Performance, accessibility, best practices, SEO. We aim for 95+ on every page, every breakpoint.
Axe DevTools + manual a11y review — every page meets WCAG 2.2 AA. Keyboard navigation, screen-reader markup, focus rings, prefers-reduced-motion, contrast — all verified before launch.
Google Analytics 4 — lightweight, anonymized IP. We measure the things that matter: discovery-call starts, pricing-page exits, the pages that earn return visits.
Playwright — screenshot QA across breakpoints and the occasional regression check before a big release.
Want this stack on your site?
The discovery call walks through what your site actually needs — which pieces of this stack are right for you, and which ones we’d skip.