Colophon

Colophon is a Framer agency template for design studios, branding agencies and small creative teams. It follows Swiss editorial design: one typeface, a strict grid and plenty of white space, so the work does the talking.

The home page opens with a full-screen image or video and a large wordmark that melts into liquid shapes on hover and stretches to fit any screen. Selected work sits in a masonry grid where every cover keeps its own proportions, and the services turn into full-screen panels that stack as you scroll.

Everything runs on the CMS. Projects, services, journal posts and team members each have their own collection, so the work grid, filters, case studies, journal and footer update as you add content.

Colophon is easy to make your own. Text and colors are tied to a small set of styles and tokens, and the repeated parts are components. Switch the hero between image and video in one field, and point the footer showreel at any YouTube link.

What's included

• 8 pages: Home, Work, Case Study, Studio, Journal, Journal Post, Contact and 404

• Image or video hero with a hover-reactive wordmark

• 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-screen service panels that stack on scroll

• Case studies with meta, credits, gallery and next project

• Studio page with a process section, team portraits and a client logo grid

• Journal with large and small cards, authors and read times

• Contact form with a budget select and a success state

• Footer with a call to action and a YouTube showreel modal

• Counting stats and reveal animations that play once

• Header, Footer, Button, Work Card and Service Panel components

• Responsive layouts for desktop, tablet and phone

• SEO ready, with titles, descriptions and social images per page

Set in BDO Grotesk. Replace the content in the CMS, adjust the color tokens, then publish.