01
Start here
Pages
Home, Projects, Project (CMS detail page), Studio, Journal, Article (CMS detail page), Contact and 404. Style guide and Guide are reference pages for you, hidden from search engines.
Header & footer
Both live in the layout template Site (Assets › Layout Templates). Edit them once and every page updates. Use the Show Header option of the template to hide the header on a page.
Breakpoints
Desktop from 1200px, Tablet from 810px to 1199px, Phone below 810px. Edit Desktop first: Tablet and Phone inherit it and only keep their own differences.
Layout
Every section uses a content container of 1392px max width with 24px side padding. Keep the same structure when you add a section, or duplicate an existing one.
02
Styles
Colors
Nine color tokens: Ink, Paper, Paper Light, Terracotta, Graphite, Body Text, Stone, Line and White. Change a token in Assets › Colors and the whole site updates.
Terracotta is the accent. Keep it for numbers, active states and one main action per screen.
Typography
Geist for titles and text, Geist Mono for labels, numbers and data. Every text uses a text style (Display, Hero Title, Section Title, Paragraph, Label Mono, Data Mono…). Edit the style, not the text layer. Each style already has its Tablet and Phone sizes.
Reference
The Style guide page (/style-guide) shows every color, text style, button and component of the template.
03
CMS
Projects
Title and Slug: the project name and the URL of its page.
Number: the N°00 badge on images.
Program: used by the filters of the Projects page.
Location, Year, Area, Client, Status, Team: the project specs.
Featured on Home: tick it to show the project on the Home page (6 projects max).
Cover: cards, project page hero and social sharing image.
Image Landscape, Portrait, Wide and Detail: the project page gallery. Use a different image in each field.
Statement: intro of the project page and its search description.
Context, Materials and Caption: texts of the project page.
Journal
Title and Slug: the article title and the URL of its page.
Category: used by the filters of the Journal page.
Date: shown as DD.MM.YYYY. The Journal is sorted by date, newest first.
Read time and Author: shown in the article meta line.
Cover: cards, article hero and social sharing image.
Excerpt: cards and search description.
Body: rich text. Headings, lists, quotes and images get their styles automatically.
Team
Name, Role, Photo and Partner. Partners appear in the Partners block of the Studio page, everyone else in the Team grid.
Images & order
Add an alt text to every image you upload in the CMS (click the image in the field to edit it). It helps accessibility and SEO.
Lists other than the Journal follow the order of the CMS: drag items to reorder them.
04
Components
Button
Three variants, each with its hover state: Primary (Terracotta), Dark and Outline. Set the label and the link in the right panel.
Project Card & Row
Used on Home and Projects, connected to the Projects CMS. Project Row has a Phone variant for small screens.
Article Card
Used on Home and Journal, connected to the Journal CMS. Use Show Excerpt in the right panel to hide the excerpt.
Filter Chip
Default and Active variants. The label is the category name, for example “Culture”. It must match the CMS value exactly.
Header
Use the Solid variant on pages with a light top. Use Transparent only on a dark image hero, like the Home page, together with a scroll variant so the header turns Solid when the hero leaves the screen.
Custom cursor
Rename any layer “Cursor: Your label” to show the crosshair cursor with that label when hovering it.
Clock
The live local time in the header, the footer and the Contact page. Set the time zone in the right panel.
05
Interactions
Where
Everything is built with native Framer features: page variables, Set Variable interactions and scroll variants. There is no code to edit.
Grid / Index
Home and Projects each have a page variable “Index View”. The Grid and Index buttons set it: the card grid shows when it is off, the project index when it is on.
Row hover
Index rows use the Hover variant of the Project Row component. Edit that variant to change the hover state.
Project preview
Projects page variable “Preview Project”. Hovering a card or a row sets it. The side panel is a one-item CMS list filtered on that variable, so it always shows CMS data. It is hidden on tablet and phone.
Scroll header
The Home header uses a scroll variant: Transparent over the hero, Solid once the Intro section reaches the top.
Filters
Filter chips set the page variable “Program” on Projects and “Category” on Journal. The chip label must match the CMS value exactly.
Variant names
The view buttons and the card highlight use the Active variants of View Toggle, Project Card and Project Row. Keep these variants.
06
Forms
Contact form
The Contact page uses a native Framer form. Select the Form layer and choose where submissions go (email, Google Sheets, webhook…) in the right panel before publishing.
After sending, the form is replaced by a confirmation message (page variable Sent). Fields 01 to 03 are required.
07
SEO
Pages
Each page has its own title and description in the page settings. Project and Article pages fill them from the CMS: Title, Statement or Excerpt, and Cover for the social image.
Site
The site settings hold the site title, the favicon and the default social image. Replace them with your own.
Indexing
404, Style guide and Guide are set to noindex. Each page uses one H1: keep it when you edit titles.
08
Before you publish
Checklist
Replace the images and texts with your own, in the CMS and in static sections.
Add alt texts to the CMS images.
Update the email, phone, addresses and coordinates (Contact page, footer, header menu).
Set your Instagram and LinkedIn links in the footer.
Set the clock time zone.
Update the Expertise counts on the Home page (static text).
Connect the Contact form.
Replace the favicon and the social image.
Delete the Style guide and Guide pages, or keep them hidden. Remove their footer links if you delete them.