Available Jan 2027

Copenhagen 11:29

Get template

Noa Brandt

Get template

Noa Brandt

Available Jan 2027

Copenhagen 11:29

Get template

(00) Template guide

For the buyer

Version 1.0, October 2026

(00) Template guide

Version 1.0, October 2026

(00) Template guide

Version 1.0, October 2026

Getting started

For the person who bought this template. Set this page to draft or delete it before you publish.

Make this template yours in about an hour. Start with colors and fonts, then replace the content in the CMS.

7 steps

AI prompts ↓

01 Colors

02 Fonts

03 Content

04 Code

05 Framer Agent

06 Claude

07 Publish

Contents

01 Colors

02 Fonts

03 Content

04 Code

05 Framer Agent

06 Claude

07 Publish

Colors

All colors live in Assets, Colors: nine color styles, each with a light and a dark value. Visitors see the dark values when their system is set to dark mode, or when they switch with the theme button in the header. Change /Brand/Signal to rebrand the whole site: buttons, markers, the status dot and the hero underline follow.

Style

Light

Dark

Used for

/Background/Base

#F1F0EB

#111111

Header, footer, Demo Dock, form fields

/Background/Page

#FFFFFF

#0A0A0A

Page background behind the content

/Text/Primary

#111111

#F1F0EB

Text and markers

/Text/Secondary

#5E5E5A

#9C9B95

Labels, metadata, summaries

/Text/On Signal

#111111

Text on Signal buttons, in both themes

/Brand/Signal

#FF4A1C

Buttons, markers, status dot, hero underline. Never as text on the background.

/Border/Strong

#111111

#F1F0EB

Structural rules and outlines

/Border/Subtle

Ink 20%

Paper 20%

Row separators

/Border/Grid

Ink 7%

Paper 8%

Grid overlay columns

Fonts

Twenty-four text styles live in Assets, Text, in four folders. Archivo Narrow sets the display type, Archivo the reading text and IBM Plex Mono the labels. Edit a style once and every page updates.

Folder

Styles

Font

Sizes

Heading

H1, H1 Project, H1 Page, H2, H2 Large, H3

Archivo Narrow 700, Archivo 600

216 to 22

Display

XL, L, M, S

Archivo Narrow 700

216 to 28

Body

Lead, Title, L, L Strong, M, M Muted

Archivo 400 to 600

38 to 15

Label

Caps, Caps Muted, Small, Note, Code, Caption, Button, Wordmark

IBM Plex Mono, Archivo

16 to 11

Project titles use /Heading/H1 Project. Keep each word under ten letters, or lower the size of that style, so long titles never overflow on phones.

Content

Everything that repeats is stored in five CMS collections. Edit an item and every page that uses it updates.

Collection

What it holds

Where it shows

Projects

Eight case studies: summary, metadata, cover, preview image, context, role, process steps, metrics, gallery and a testimonial.

Home (Featured), Work, Case Study page

Testimonials

Quote, name and role.

Home (Featured), About, Case Study page

Experience

Roles with years, company and city.

About

Recognition

Talks, writing, awards and mentoring.

About

Clients

Client names for the ticker.

Home

Turn on Featured for the four projects you want on Home.

Index sets the order on Work. Use two digits: 01, 02, 03.

Role Points, Process Steps, Metrics and Gallery are List fields: add or remove rows freely. Number Role Points and Process Steps with their Index field.

When you add or remove projects, update the counts on Home and Work: (04 of 08) and (08).

Preview is the image that follows the cursor on Work. Use a 4:3 image.

Code

Five small code components handle what Framer does not do natively. Select one on the canvas to see its settings in the property panel.

Component

What to change

LiveClock

Set Time Zone to your city, for example Europe/Paris or America/New_York, and Prefix to its name.

HoverPreview

Shows the Preview image of the project under the cursor. Smoothing sets how closely it follows.

CopyText

Replace Text and Label with your email address. The copied label and the reset time are editable.

AccentPicker

Only there for the live preview of the template. Delete the Demo Dock from Home before you publish.

ThemeToggle

Switches between the light and dark values of the color styles. The visitor’s choice is remembered. Delete it from the header if you want the site to follow the system setting only.

Framer Agent

The project uses named components, styles and collections, so the Framer Agent can edit it safely. Copy a prompt, replace the brackets, paste it into the Agent.

Change the /Brand/Signal color style to [#2F5BFF]. Keep /Text/On Signal as the text color on Signal buttons and check the contrast.

Colors

Add a project to the Projects collection called [Project name] from this brief: [paste brief]. Fill Summary, Client, Role, Year, Duration, Context, Process Steps and three Metrics. Leave images empty.

New project

Translate every page and CMS item into [French]. Keep uppercase styles in uppercase and do not rename components or styles.

Translate

Create a Services page from the About layout: an /Heading/H1 Page title, the Capabilities section and the contact form. Add it to the header navigation.

New page

Claude

If you use Claude, connect it to Framer with Framer’s MCP server. Claude can then open this project and edit it directly: styles, components, collections, pages and code components. Its changes go to a separate branch, which you review before you merge.

Read the Projects collection in my Framer project and draft a case study for [project] with the Context, My role, Process, Results and Reflection structure. Use my notes: [notes].

Draft a case study

Review every CMS item for missing images, empty alt texts and metrics without labels. List what I still need to fill in, page by page.

Content review

Publish

Replace every image and write its alt text

Set your time zone and city in LiveClock

Update the availability in the header and the footer

Delete the Demo Dock from Home and the Get template button from the header

Adapt the Privacy and Terms pages, and have them checked

Set this Getting Started page to draft, or delete it

Fill the SEO title, description and social image of every page, Case Study included

Send the contact form to your email

Check every page at the Tablet and Phone breakpoints