How it’s made
Type
h1Page titles
Product design1.5remSection headings
Book a session1remEverything else
My productsWeight
350Everything: one weight site-wide, hierarchy comes from size and color
Product design600Resume headings and entry titles only: the resume is a document, not a page
Product designNeutrals
hsl(0 0% 6%)page background
hsl(0 0% 11%)card fill
hsl(0 0% 15%)card fill on hover
hsl(0 0% 18%)borders and dividers
hsl(0 0% 65%)muted text
#ffffffprimary text
Accents
#ff6b42 · accentAccent color for links and buttons
Radius
24pxCards, tiles, swatches, images, form fields
12pxSmall elements, where 24px would round the corners into each other: event thumbnails
999pxPills: buttons, tags, stickers
Responsive
All widths
Side padding is clamp(16px, 5vw, 64px): constant 64px gutters from 1280px, scaling with the viewport below≤768px
Gutter sections stack: the heading moves above its content≤700px
Booking embed switches to the tall stacked layout≤640px
Rows and card grids go single column; event dates wrap above the rowRules
- No em dashes anywhere; rework with a comma, colon, or period
- Non-breaking space between a preposition and the next word
- Align items by text baseline wherever sizes differ
- Optical centering on buttons / tags: one px moves from top padding to bottom
- Underlines sit 4px below the text
- Never one word of a sentence alone on a line: its last two words are bound with a non-breaking space
- Neutrals carry zero saturation; color is reserved for accents
- Cards: 24px corners, 11% fill, 18% border, hover lifts fill to 15%
- Event previews everywhere use the one shared EventRow component
Built with
Next.js 16 + React 19
App Router, server components, TypeScript.
Tailwind CSS
Utility classes on every route, with the design system distilled into tokens: a small scale of sizes, weights, and colors. Animations and button art keep a thin layer of plain CSS.
Geist
A variable grotesque with a cool Swiss cast, self-hosted at build time, so the type comes from this domain with no third-party font request.
Cal.com
com's embed, themed to match the site and synced to Google Calendar.
Luma
Coworking events come from the Luma API and render through one shared event-row component.
Vercel
Hosting and deploys; pushing the main branch ships the site.
Claude Code
Built and iterated with AI, one small change at a time.