Colophon is a Framer template for design studios, branding agencies and small creative teams. It follows Swiss editorial design: one typeface, a clear grid, black text on white and plenty of space, so the projects carry every page.
A home page in numbered sections
The home page opens with a full-screen hero that plays a muted, looping video, with the COLOPHON wordmark across the top and a one-line statement below. Hover the wordmark and its letters swell and run into each other like liquid. On a phone, the effect plays by itself as the wordmark scrolls into view.
Five numbered sections follow: a short intro, Selected work with four projects in a masonry grid (featured ones first), What we do, a client quote and the three newest journal notes. Between them, a row of studio figures counts up. What we do turns each service into a full-height panel with its own photo, number, name and summary, and the panels stack on top of each other as you scroll.
The header carries the wordmark, the navigation and a Start a project button. It sits over the hero in white on the home page and stays pinned to the top on the other pages. On a phone, a menu button opens the navigation.
Work and case studies
The Work page opens with a large title and filters for each service: tabs on desktop, a dropdown on tablet and phone. Every project sits in a masonry grid where each cover keeps its own proportions, drifts slightly as you scroll and zooms in softly on hover, with the name, year and service underneath.
Each case study starts with an All work link, the project title and a one-line summary, then the client, discipline, year and a link to the live site. A full-width cover follows, then the credits and the story, a gallery of images and a Next project link to the following case study.
- Studio: a studio photo and a short story, four working principles, team portraits with names and roles, and a grid of twelve client logos.
- Journal: the two newest notes as large cards with a cover and an excerpt, then the rest as a list with date and topic. Each post shows its topic, date, read time and author, then the cover, the article, an author card with a short bio and a link to the next note.
- Contact: an enquiry form with name, email, organisation, a budget select, a project description and a consent checkbox. The send button has pending, success and error states. Beside the form sit your email, phone, address, hours and social links.
- 404: a short Not found message with links back home and to the work.
Every page ends with the same footer: a call to action, page and service links, contact details and a showreel card that opens a YouTube video in an overlay. Page titles rise in letter by letter, and sections fade in as they scroll into view.
Easy to make your own
Everything runs on four CMS collections. Projects hold the client, year, summary, cover, story, gallery, credits, website link, a Featured switch and a service. Services feed the home panels, the Work filters and the footer links at once. Journal notes carry a topic, read time and author, and People appear both as the team on the Studio page and as journal authors.
Text and colors are tied to a small set of text styles and color tokens, and the header, footer, buttons, work cards and service panels are components. The hero switches between an image and a video in one field, the wordmark has controls for its font, colors and liquid effect, and the footer showreel takes any YouTube link.
What’s included
- 8 pages: Home, Work, Case Study, Studio, Journal, Journal Post, Contact and 404
- An image or video hero with a wordmark that melts into liquid shapes on hover
- A masonry work grid with parallax covers and a soft hover zoom
- Work filters by service: tabs on desktop, a dropdown on tablet and phone
- Full-height service panels that stack on scroll
- Case studies with project details, credits, a gallery and a Next project link
- A Studio page with principles, team portraits and client logos
- A journal with large and small cards, read times and author cards
- A contact form with a budget select and pending, success and error states
- Studio figures that count up, and a YouTube showreel overlay in the footer
- Four CMS collections: Projects, Services, Journal and People, with six sample projects and five journal notes
- Reusable Site Header, Site Footer, Button, Work Card, Service Panel and Submit Button components
- Responsive layouts for desktop, tablet and phone
- SEO ready, with titles, descriptions and social images
Set in BDO Grotesk. Remix it in Framer, swap in your content, then publish.
