Fathom — Framer studio site (concept)

A self-directed concept, not client work. Fathom is an invented design studio — no client commissioned it and none was involved. I built it to work through the part of Framer that paid work actually depends on: a multi-page site running on the CMS, built as a system rather than a stack of hand-made pages.

Six colour tokens and two type families. Nothing hardcodes a hex, and every text style carries its own per-breakpoint sizes — so headings scale at 1200, 810 and 390 without a single per-page override.

Five components, fourteen variants. The Project Card exposes six controls bound to collection fields, so one component renders both the home grid and the work index. The Submit Button's pending, success and error states are real variants assigned to the form. The Arrow is drawn natively from a rotated shaft and a two-sided corner — Framer's icon modules would not load in the project, and I would rather draw one than ship a guessed icon name.

The point of the whole build. Nav and footer live once in a shared layout template. Four pages are hand-built; the fifth is a detail template that stands in for all ten project pages. Add an eleventh item to the collection and its URL exists without touching the canvas.

Index numbers are not typed — they come from the collection list's item-index through a computed value with minimumIntegerDigits: 2, which is what produces 01…10. Reorder the collection and the numbering follows.

Previous/Next on detail pages bind to the special previousItemId / nextItemId variables and are made conditional with an isSet transform, so the first project has no Previous and the last has no Next without any per-item logic.

Project bodies use structured string fields rather than one rich text blob. That was forced — a richtext field broke the generated collection module and blocked publishing outright. The structured shape turned out better for a case-study template anyway, because it is enforced rather than hoped for.

No performance numbers or outcomes appear here, because there is no traffic and no client. The projects, clients and testimonials inside the CMS are written for the concept and are not real engagements. Photography is licensed from Unsplash.