Grapefruit Creative — 12-page brand site in Framer

Grapefruit Creative is a personal-branding production house in Newcastle, NSW. They arrived with a working React prototype and a FigJam board of screenshots, and needed the whole thing rebuilt in Framer as a site they could run themselves.

Twelve pages: Home, Portfolio, About, Blog, Contact, five service pages (content, podcasts, events, campaigns, photography), and two CMS templates for blog posts and case studies. Every page laid out at three breakpoints — 1200 / 810 / 390.

Two CMS collections. Blog Posts and Case Studies, so new work goes up by filling a form rather than duplicating a page.

A branching enquiry form. The brief specified conditional logic: what the client is after — shortform, podcasts, events, campaigns, photography — changes which questions come next. Social platforms for shortform, new-or-existing for podcasts, date plus photo/video for events, a category dropdown for photography, and a budget slider throughout.

Navigation rebuilt in code. Canvas interactivity inside a Framer layout template did not survive publishing — no variant switch, no overlay, and a CSS-only drawer would not apply either. The whole navigation became a React component: plain links on desktop, a native <details> drawer on mobile. It is the kind of problem that decides whether a build ships or stalls, and it is why I now build navigation in code by default.

Brand fidelity without faking it. Their display face, Wilden, is commercial and unavailable in Framer. Rather than substitute something arbitrary, I used the fallback their own designer had already written into the prototype CSS — Bricolage Grotesque, with optical sizing matched to type size.

Assets recovered from CSS, not just markup. The brand logotype and a background photograph were referenced only inside the stylesheet, not in any component file. Grepping the JSX alone would have shipped the site without its actual logo.

Built and published in a single working day.

Live site: https://thankful-talk-921954.framer.app