Colophon
How this site is made.
A list of the decisions that matter, and the reasons behind them.
- Approach
- One idea runs through this list: the site uses what your device already provides, its type, its color scheme, its motion settings, and adds as little as possible on top. Deference is why it feels native everywhere, and why it’s fast.
- Type
- Set in your device’s own system type. There are no webfonts, so the site loads instantly and the type always matches the device in your hands.
- Color
- Tailwind Zinc, end to end, plus one functional blue reserved for focus states. Light and dark are the same primitives with different jobs.
- Motion
- One easing curve moves everything that moves. If reduced motion is on in your system settings, the site honors it and turns its animation off.
- Shadows
- Two drop shadows exist on the entire site: the chip that confirms your email copied, and the skip link when a keyboard reaches it. Every other edge is a hairline.
- Corners
- Squircles, where the browser allows them. Pills stay perfectly round.
- Icons
- There is no icon library. The site needs only a handful of icons, and a library would ship hundreds to draw six. Each one is a small vector made for its exact spot, its stroke weight tuned to the type beside it. A couple are built from CSS alone: the back chevron is two borders, rotated into place. The whole set is under a kilobyte, less than an icon font loads to draw a single glyph.
- Text
- A site rule: no orphaned words. The browser balances most lines on its own; non-breaking joins guarantee the ones it can’t.
- Weight
- Every page is static HTML. The only JavaScript is the site’s own, a few kilobytes for the reveals, the gallery, and the hero. There is no framework runtime.
- Build
- Designed in Figma, written as one design system in CSS, built with Astro and Tailwind, with Claude as the AI glue throughout. Committed to Git, deployed by Vercel. Each page’s words live in one content file, apart from the code.
- Components
- Seven components build the whole site: one shell and six parts. Every project page is the same template fed by a single content file, and every file is checked before the site publishes. A mistake stops the presses; it never becomes a broken page.
- Documentation
- The stylesheet is written to be read. Nearly every non-obvious decision carries its reasoning in an inline comment, so the system explains itself. Read it for yourself.
- Privacy
- No analytics, no cookies, no tracking. Reading this page tells me nothing about you.
- Updated
- July 2026.
Contact
Let’s work together.
Happy to chat about design leadership and principal IC roles across brand, systems, and product.
zandtvanzandt.com · linkedin.com/in/zandtvanzandt/