Site Info
How this was made
A look at the stack, the system, and the process behind this site, including how much of it Claude actually built.
Stack
Built and hosted with Framer.
This site runs on Framer. Domain via GoDaddy.
Design System
A deliberately small system
Typography: Manrope across the entire site. One family, a few weights.
Color: monochrome only, seven steps
Black
70
50
30
20
5
White
Spacing: 8, 16, 24, 32, 48, 64, 80, 120. One scale, reused everywhere.
Ingredients
What this is built from
Nothing here is bespoke. Here’s exactly where each piece came from.
Template
Framer’s free ‘Pearl’ template, as the starting point for layout and typography.
Marketplace components
Ticker for the company wordmark strip, Floating Pill Navigation, and SplitImageCompare for before/after case study images.
Icon set
Framer’s ‘Logos’ icon library, for real company marks instead of generic placeholders.
Build partner
Claude Code, connected directly to this Framer project through its official agent integration.
By the numbers
A quick tally
5
Case studies
1
Hosting provider
1
Template remixed
0
Lines of code written by hand
Notable
A few things worth pointing out
01 CMS-driven case studies
Add a row to the CMS and a new case study appears everywhere (grid, detail page, wordmark strip) with zero manual layout work.
02 NDA tagging
Confidential work gets flagged automatically, with a shortened public summary instead of hiding the project entirely.
03 Per-case design system deep dives
Some case studies include a token reference, a type scale, or a component anatomy breakdown, built specifically for that project.
04 Before / after comparisons
A drag-to-compare slider, ready to drop real before/after images into once I have them.
Credits
Built with Claude Code
Claude handled the implementation: CMS setup, component wiring, copy edits, layout. I kept concept, writing, taste, and the final call on every pixel. This page is basically a byproduct of that collaboration.