Colophon
How this site is built.
Every detail of zirbelsystems.com, listed. If you're a developer looking at the network tab, this is the same answer in plain text.
Stack
- Framework
- Next.js 16 (App Router, Turbopack)
- Runtime
- React 19
- Language
- TypeScript
- Styling
- Tailwind CSS v4 (CSS variables, no config file)
- Hosting
- Vercel · Edge functions, global CDN
- Domain
- Cloudflare Registrar (your name, not mine)
- Resend (transactional)
- Analytics
- Vercel Analytics
Type
- Body
- Inter (variable, by Rasmus Andersson)
- Loading
- next/font/google, self-hosted, no FOIT
- Weights
- 400 / 500 / 600 / 700 / 800
Color
- --bg
- #fafaf7/ warm off-white
- --ink
- #0a1628/ near-black ink
- --navy
- #0f1f3d/ navy
- --accent
- #f59e0b/ amber
- --accent-dark
- #d97706/ amber dark (hover)
- --accent-soft
- #fef3c7/ amber soft (icon bg)
- --text
- #1f2937/ body text
- --line
- #e5e7eb/ hairline borders
Tools I build with
- Editor
- VS Code · Cursor for the heavy lifting
- Design
- Figma (light), but most layout happens in code
- AI
- Claude Code, daily
- Git
- GitHub · conventional commits
Performance budget
- First Contentful Paint
- < 1.0s on 4G
- Largest Contentful Paint
- < 1.8s on 4G
- JS shipped to client
- < 90 KB gzipped
- Lighthouse target
- ≥ 95 on every page
Accessibility
- Contrast
- WCAG AA on every color pair
- Keyboard
- fully navigable, visible focus rings
- Motion
- respects prefers-reduced-motion
- Semantics
- real headings, real landmarks, real lists