Template guide · Daybook v1.0

Start here: go live in an afternoon.

Everything you need to turn this template into your own site, in the order you’ll do it. Most people finish in three to four hours, plus the wait for a domain to connect.

For you, not your visitors

This page is hidden from search engines and linked only from the footer as “Template guide”. When you’ve finished, delete that link (Assets → Components → Footer) and delete this page (Pages → right-click Go live → Delete). The floating “Use for free” button shows only on this template’s own preview address, never on your site. To remove it anyway, delete the Preview Pill layer in Main Layout.

On this page

Rebrand in 30 minutes

30 min

Set your rates

15 min

Edit the CMS

1–2 hours

Connect the form and booking

20 min

Turn dark mode on or off

5 min

Connect your domain (needs a paid Framer site plan)

15 min, plus DNS time

Publish checklist

20 min

Framer AI and Agent prompts

15 min

Changelog

01 · Rebrand in 30 minutes

Colors (10 minutes)

Open Assets → Colors. Every color on the site is one of these 16 styles. The value you see is the light-mode color. Change it once and every element that uses it updates.
To rebrand, you usually only need four:
- Brand/Accent: links, italic accent words in headings, the builder’s underlined choices and bars
- Brand/Red Pen: eyebrows and the handwritten note in the builder
- Action/Primary and Action/Primary Hover: button fills
Leave the dark slot of every style empty. Dark mode has its own palette (step 05).
Check contrast. Body text needs 4.5:1 against Surface/Page and Surface/Paper. Brand/Red Pen is used for small eyebrow text, so it needs 4.5:1 too. Any free contrast checker will do.
Don’t type hex codes straight onto layers. A color that isn’t a style won’t switch in dark mode.

Fonts (5 minutes)

Open Assets → Text. The site uses three families:
- Newsreader: Display/Hero, Heading/H1–H3, Figure/Display, Quote, Note/Red Pen, Wordmark
- Geist: Heading/H4, Body/Large, Body/Default, Body/Small, Nav Link, Label/Button
- Geist Mono: Label/Mono, Figure/Mono
To swap a family, change it in every style on its list. Sizes step down for tablet and phone inside each style, with desktop as the base, so check all three breakpoints afterwards.
Four code components set their fonts in code: Retainer Builder, Month Calendar, Focus Lines and Stage Picker. If you change a family, open Assets → Code, open each of them and change FONT_DISPLAY, FONT_UI and FONT_MONO near the top of the file to your font names. Keep at least one text style on the same page using each font, so the font loads.

Wordmark (5 minutes)

The wordmark is live text, not an image. Change “Mara Quill” in Assets → Components → Navigation (every variant: Desktop, Tablet Closed, Tablet Open, Phone Closed, Phone Open).
Then in Assets → Components → Footer (Desktop, Tablet, Phone).
Prefer a logo file? Replace the text with an SVG and give it alt text with your name.

Copy (10 minutes to start)

Site Settings → General: site title, site description and favicon.
Each page has its own title and description: in the Pages panel, hover a page, click the gear icon and open SEO. Every page already has demo wording; rewrite it for your practice. Keep titles under 60 characters and descriptions under 155.
To draft all the copy in your voice at once, use a prompt from step 08, then edit.
Before you publish, search every page and collection for the demo details: “Mara”, “Quill”, “maraquill.com” and “555-0147”.

02 · Set your rates

The Retainer Builder is on Home and on Pricing (and on /style-guide, if you keep that page). Select it on the canvas and edit its properties in the right panel.

Property

What it does

Demo value

Roles

One item per seat you sell, up to 6

3 roles

↳ Name

Shown in the engagement letter and the request

Fractional CFO

↳ In LetterChip Label

How the role reads inside the letter’s sentence

Fractional CFO

↳ Day Rate

Price per day, number only

1450

↳ Full-time /mo

Monthly cost of the same seat as a full-time hire

26700

↳ Compare Label

Label on the full-time bar; keep the * if you keep the footnote

Full-time CFO*

Default Role

Which role starts selected (1 = first)

Terms

One item per term: Label, Discount % and In Letter (how it reads in the sentence, e.g. 6-month)Label and Discount %

Monthly 0 · 6 months 5 · 12 months 10

Default Term

Which term starts selected

Min Days · Max Days · Default Days

The days picker’s range and starting point

1 · 10 · 4

Currency

Symbol in front of every figure

Labels

Every word in the builder. In Letter Sentence, {role}, {days} and {term} become the underlined choices. In Title, wrap a word in *stars* for the italic accent. In Red-pen Note, {saving} becomes the monthly saving, e.g. $21kRed-pen Note, {saving} becomes the monthly saving, e.g. $21k

Button · Button Link · URL Field

The request button, the page it opens, and the form field it fills

Request this engagement · /contact · engagement

Colors

Already linked to your color styles. Leave them unless the builder should look different from the rest of the site

How the price is worked out: day rate × days per month, minus the term discount. Demo: $1,450 × 4 = $5,800, minus 5% for 6 months = $5,510 a month. Figures use US formatting (1,450).

Work out your full-time benchmark

Find the base salary for the full-time version of your role in your city. A recent salary survey or a recruiter can tell you.
Add the bonus, benefits and employer payroll taxes. Together these usually add about a third to the base salary.
Divide by 12. Demo: $240,000 salary + $36,000 bonus + $44,400 benefits and payroll tax = $320,400 a year = $26,700 a month.
Say where the figure comes from in the Footnote label, for example: “*Fully loaded cost of a full-time CFO in New York, 2026: salary, bonus, benefits and payroll tax. Excludes equity.”

Make every builder match. Set one up, copy it (Ctrl/Cmd + C), paste it next to the others and delete the old ones. On Home and Pricing the section around the builder keeps the ID builder, so links to /pricing#builder still scroll to it.

Your prices also appear in these places. Update them by hand:

CMS → Services → From day rate on each item
Home hero lead (“about a fifth of the cost of a full-time hire”)
Home, Fractional vs full-time: the two cost bars and the “You keep $21,190 a month” note. Pricing: the comparison table’s Cost row and the footnote
CMS → FAQ: “How is the retainer priced?” and “Why do the day rates differ?”
Pricing → engagement terms (the 5% and 10% discounts)
The Pricing page’s SEO description (“From $1,100 a day”)
The demo article “When to hire a full-time CFO”, if you keep it

03 · Edit the CMS

Open CMS in the left panel. There are five collections.

Collection

Where it appears

Fields to know

Services

/services, each service page, Home (Featured items)

Summary is also the page’s search description, so keep it under 155 characters. From day rate is a number only. Featured puts a service on Home (keep it to 3). Order sets the order. Related case links a case study.

Case studies

/case-studies, each case page, Home (Featured items)

Headline outcome is the case page’s H1. Summary is its search description (under 155 characters). Metric 1 appears on cards. Industry drives the filter chips: add options in the field’s settings.

Insights

/insights, each article

Excerpt is the search description (under 155 characters). Read time: about 230 words a minute. Turn Featured on for one article only.

Testimonials

Home (the first 3 by Order)

Short quotes read best: under 25 words. Photo, Result and Result Label make the card: the result sits on the photo, e.g. $11m · Series A, terms unchanged.

FAQ

Home (General and Pricing), Pricing (Pricing only)

Category decides where an answer appears. Order sets the order.

Good to know

Replace or delete every demo item before you publish. Results, quotes and client names must be real and used with permission.
To add an item: open the collection → New Item → fill in every field → Publish.
The slug becomes the page’s address. Keep it short, like fractional-cfo-retainer.
Add alt text to every image: click the image field and fill in the description.
No case studies yet? Delete the Selected work section on Home and remove Case studies from the navigation. Or publish one anonymized case, such as “Series A software company, New York”, with the client’s permission.

Sections outside the CMS

Sound familiar? (Home). The Focus Lines code component. Select it to edit the eyebrow, title, the five lines and the button. Scroll per Line sets how long each line stays in focus.
Every Tuesday is yours (Home). The Month Calendar code component. Set Year, Month and Week Starts, then one Marked Day per working day: its date, title, tasks (one per line), deliverable and when it arrives.
What lands on your desk (Home). Regular layers: edit the figures and labels directly. Each bar in the cash chart is a frame; change its height, a percentage of the chart.
What I do at your stage (Home). The Stage Picker code component. One Stage per tab: tab label, title, image (add alt text), tasks (one per line), case text and case link.
Capacity (Home). Three seat cards. Keep them true: who is in each seat, which day, and when the open seat starts.
Free templates (Insights). Three covers that open PDFs. Upload your own files (Assets → Files, or any public link), then update each cover’s link and its Download the PDF button. Nothing to give away yet? Delete the section.

04 · Connect the form and booking

The contact form (10 minutes)

Open /contact and select the form.
In the right panel, under Form, choose where submissions go: your email address, a webhook or one of Framer’s integrations.
In the same panel, set the redirect to the Thank you page (/thank-you). Templates can’t set this for you. It takes one click.
The Engagement field fills itself from the link. “Request this engagement” opens /contact?engagement=…, and the page passes that text into the field. If you rename the builder’s URL Field, rename the contact page’s variable to match. The field’s value is bound to the contact page’s variable Engagement (query parameter engagement): select the field on /contact to see it. On each service page, the “Request this engagement” buttons are the EngagementButton code component, with its Engagement property bound to the CMS Name field.
Publish, then test on the live site: build a retainer → Request this engagement → check the Engagement field is filled → send. You should land on /thank-you, and the message should reach your inbox.

The booking calendar (10 minutes)

Create a 30-minute event in Cal.com or Calendly. The free plans of both work. Copy the event’s public link.
On /contact, select the framed “Booking calendar” panel and delete the placeholder text and the template note under it.
Insert an Embed (Insert → Embed) inside the frame, paste your link, and set the height to about 700 px. If your tool gives you an inline embed code instead, paste that into the Embed’s HTML option.
Prefer a plain link? Point every “Book an intro” button at your booking page instead: the Navigation component’s button, and the CTA buttons on Home, Pricing and About.
Check on a phone. The calendar should scroll inside its frame, not sideways.

05 · Turn dark mode on or off

How it works. Light mode is the default. Visitors switch with the sun and moon button in the desktop navigation, or the “Dark mode” switch in the tablet and phone menu, and their browser remembers the choice. Dark mode swaps every color style for a value in the Theme Toggle’s Dark Palette. A short script in Site Settings → General → Custom Code (End of <head>) applies a saved choice before the page appears, so returning visitors never see a flash of the wrong theme.

Change the dark colors

Assets → Components → Navigation → Desktop variant → select the Theme Toggle → Dark Palette in the right panel. Each color is labeled with the name of the color style it replaces.
Do the same for the “Dark mode” switch in the Tablet Open and Phone Open variants. Each toggle keeps its own copy of the palette, so they must match.
Check contrast in dark mode too (step 01).

Italic accent color. The Site Styles layer in Layouts → Main Layout has an Accent Italics switch. Turn it off if you want italic words in headings to stay the same color as the heading.

Turn dark mode off

Assets → Components → Navigation: delete the Theme Toggle in the Desktop variant, and the “Dark mode” switch in Tablet Open and Phone Open.
Site Settings → General → Custom Code → End of <head>: copy the script that mentions retainer-theme into a note (in case you want it back), then delete it.
Publish. Everyone now sees light mode, including visitors who chose dark before.

Turn it back on. Paste the script back, drag ThemeToggle from Assets → Code into the navigation (Style Icon on desktop, Row in the open menus) and set its Dark Palette.

06 · Connect your domain (needs a paid Framer site plan)

On the free plan your site lives at a framer.app address. To use your own domain, the site needs a paid plan.

Site Settings → Plans: choose a site plan. Check framer.com/pricing for the current plans and prices.
Site Settings → Domains → Add domain: type your domain, for example yourname.com.
Framer shows the DNS records to add. Log in to the company you bought the domain from and add them exactly as shown, usually an A record for the root domain and a CNAME for www. Remove any older A records on the root that point somewhere else.
Wait. Most domains connect within minutes, but DNS can take up to 48 hours. Framer sets up HTTPS for you.
Choose the main address, with or without www. The other one redirects to it.
Publish again. Then replace hello@maraquill.com across the site with an address on your domain. Framer doesn’t host email, so set that up with your email provider.

Don’t have a domain yet? Buy one from any domain registrar. A short .com with your name ages well.

07 · Publish checklist

Your name, photo, bio and credentials on Home and About
“Mara Quill”, “maraquill.com” and “+1 212 555-0147” replaced everywhere: navigation, footer, Contact, every CTA, Privacy and Terms
Rates set in every builder, and everywhere on the list in step 02
The availability badge is true today, in every instance: Home hero, Home CTA, Pricing, About, Contact and footer
Demo services, case studies, insights, testimonials and FAQ replaced or deleted
The logo strip shows real clients (with permission), or the section is deleted
Form sends to your inbox and redirects to /thank-you, tested on the live site
Booking calendar embedded and tested on a phone
Privacy and Terms replaced with your own
Site Settings → General: title, description, favicon and social image
Every page has its own title and description
Thank you, Go live and Style guide are still set to noindex
Every image has alt text
The Capacity seats and every availability badge match your real calendar
Testimonial photos show your real clients, used with permission
The free PDFs on Insights are yours, or the section is deleted
Previewed at desktop, tablet and phone, in light and dark
Domain connected (step 06)
“Template guide” deleted from the footer, and this page deleted
Publish, open the live site and send the form once more

08 · Framer AI and Agent prompts

Paste one of these into Framer’s AI or the Framer Agent, in your copy of the project. Fill in the brackets first. The AI drafts; you check. It can’t know your results, so read every number, name and claim before you publish.

Prompt 1 · Fractional COO

Rewrite all the copy on this site for my practice. Change the words only: keep every page, section, component and CMS field, and keep each text about the same length as the original. One-line fields stay on one line.

About me: [Name], fractional COO, [City] & remote. I work with founders of 20–150-person companies on operating cadence, annual planning, hiring plans, process and systems, and getting teams to deliver on time. Before this I was [your background, e.g. COO of a Series B logistics company].

Voice: first person, calm, precise, numbers first. Short sentences. US English. No hype words such as unlock, elevate, synergy or game-changing. At most one italic accent word per heading.

Services collection: Fractional COO retainer; Operating cadence sprint; Systems and process foundations; Leadership team reporting.

Retainer Builder roles: Fractional COO at [$1,350]/day, full-time benchmark [$24,000]/mo, compare label “Full-time COO*”; Operations lead at [$1,000]/day, [$15,000]/mo, “Full-time operations lead*”; Launch sprint at [$1,500]/day, [$24,000]/mo, “Full-time COO*”.

Replace finance terms (board pack, cash forecast, close) with operations ones (operating review, quarterly plan, weekly scorecard). Update the comparison table (Full-time COO vs Fractional), the FAQ, the “How it starts” row and every SEO title and description to match.

Don’t invent clients, results, testimonials or credentials. Where they belong, write placeholders like [Client], [Result], [Source, date]. Finish with a list of everything you changed, and anything you couldn’t change so I can do it by hand.

Prompt 2 · Fractional CMO

About me: [Name], fractional CMO, [City] & remote. I work with B2B and consumer companies between [$2m] and [$30m] in revenue on positioning, the go-to-market plan, marketing budget and channel mix, hiring the marketing team, and reporting on pipeline and customer acquisition cost. Before this I was [your background].

Voice: first person, calm, precise, numbers first. Short sentences. US English. No hype words such as unlock, elevate, synergy, growth hacking or game-changing. At most one italic accent word per heading.

Services collection: Fractional CMO retainer; Go-to-market sprint; Marketing foundations (tracking, attribution and reporting); Board marketing report.

Retainer Builder roles: Fractional CMO at [$1,300]/day, full-time benchmark [$25,000]/mo, compare label “Full-time CMO*”; Marketing lead at [$950]/day, [$16,000]/mo, “Full-time marketing lead*”; Launch sprint at [$1,500]/day, [$25,000]/mo, “Full-time CMO*”.

Replace finance terms (board pack, cash forecast, close) with marketing ones (pipeline report, channel plan, campaign calendar). Outcome stats should be marketing metrics, each with a source and date line. Update the comparison table (Full-time CMO vs Fractional), the FAQ and every SEO title and description to match.

Prompt 3 · Accountant (small practice)

Rewrite all the copy on this site for my accounting practice. Change the words only: keep every page, section, component and CMS field, and keep each text about the same length as the original. One-line fields stay on one line.

About me: [Name or firm], [CPA / licensed accountant] in [City]. I look after bookkeeping, tax and monthly reporting for small businesses and startups with [5–80] people. [Years] years in practice.

Voice: first person (“I”, or “we” if I name a firm), calm, precise, numbers first. Short sentences. US English. No hype words such as unlock, elevate, synergy or hassle-free. At most one italic accent word per heading.

Services collection: Monthly bookkeeping; Tax planning and filing; Controller support; Year-end and audit preparation.

Change the Retainer Builder to hours: set the labels Step 2 “Hours per month”, Day “hour”, Days “hours”, and Min, Max and Default Days to 5, 40 and 10. Roles: Bookkeeping at [$95]/hour, benchmark [$6,500]/mo, compare label “In-house bookkeeper*”; Controller support at [$160]/hour, [$11,000]/mo, “In-house controller*”; Tax and year-end at [$220]/hour, [$11,000]/mo, “In-house controller*”. Rewrite “From $X/day” as “From $X/hour”.

Replace fractional-CFO language with “your outsourced finance team”. Replace investor and board wording with owner and lender reporting. Update the comparison table (In-house hire vs My practice), the FAQ and every SEO title and description. Add one line to Terms saying the site isn’t tax advice.

Prompt 4 · M&A advisor

About me: [Name], independent M&A advisor, [City] & remote. I help owners of businesses with [$5m–$50m] in revenue prepare for a sale, find the right buyers and get to a signed deal, and I support buyers with diligence. Before this I was [your background, e.g. a director in an investment bank’s mid-market team].

Voice: first person, calm, precise, numbers first. Short sentences. US English. No hype words such as unlock, elevate, synergy or maximize value. At most one italic accent word per heading.

Services collection: Sell-side preparation; Buyer search and outreach; Deal management to close; Buy-side diligence support.

Retainer Builder roles: Sell-side preparation at [$2,000]/day, benchmark [$28,000]/mo, compare label “In-house deal lead*”; Deal support at [$1,600]/day, [$28,000]/mo; Buy-side diligence at [$1,800]/day, [$28,000]/mo. Terms: Monthly 0%, 3 months 5%, 6 months 10%. Footnote: the success fee is separate and agreed in the engagement letter.

Change the comparison table to “Investment bank” vs “Independent advisor (me)”, with rows for fees, time to start, commitment, coverage and deal size. Case studies must be anonymized by default (e.g. “Founder-owned logistics business, $18m revenue”), because sale processes are confidential. Update the FAQ and every SEO title and description to match.

Don’t invent clients, deals, results, testimonials or credentials. Where they belong, write placeholders like [Client], [Result], [Source, date]. Finish with a list of everything you changed, and anything you couldn’t change so I can do it by hand.

Prompt 5 · Operations consultant

Rewrite all the copy on this site for my consulting practice. Change the words only: keep every page, section, component and CMS field, and keep each text about the same length as the original. One-line fields stay on one line.

About me: [Name], independent operations consultant, [City] & remote. I work with manufacturers, distributors and multi-site service businesses of 20–150 people on process mapping, inventory and capacity planning, KPI dashboards and putting the changes in place. Before this I was [your background, e.g. operations director at a food manufacturer].

Voice: first person, calm, precise, numbers first. Short sentences. US English. No hype words such as unlock, elevate, synergy or best-in-class. At most one italic accent word per heading.

Services collection: Operations review (two weeks); Process redesign; Implementation support; Monthly KPI reporting.

Retainer Builder: set the labels Title “Shape the *project*.” and Letter Sentence “[Name] will lead your {role} for {days} a month, on a {term} term.” Roles: Operations review at [$1,400]/day, benchmark [$14,000]/mo, compare label “Full-time ops manager*”; Implementation support at [$1,100]/day, [$14,000]/mo; Capacity sprint at [$1,500]/day, [$14,000]/mo.

Replace finance terms (board pack, cash forecast, close) with operations ones (process map, capacity plan, weekly KPI review). Change the comparison table to “Full-time hire” vs “Consultant (me)”. Update the FAQ, the “How it starts” row and every SEO title and description to match.

After the AI pass

Code components keep their words in their properties: Retainer Builder, Month Calendar, Focus Lines and Stage Picker. Set those by hand (steps 02 and 03).
Read every heading aloud. If it sounds like an advert, cut it back.
Search for any leftover “CFO”, “board pack” or “Mara”.

09 · Changelog

v1.0 · October 2026. First release: 13 pages and 3 CMS page templates; 5 CMS collections (Services, Case studies, Insights, Testimonials, FAQ); the Retainer Builder, an engagement letter visitors fill in; a month calendar, a stage picker and scroll-focus lines on Home; three free PDF templates on Insights; light and dark mode; a contact form that pre-fills from the builder, with a thank-you page; and this guide. First release: 13 pages and 3 CMS page templates; 5 CMS collections (Services, Case studies, Insights, Testimonials, FAQ); the Retainer Builder; light and dark mode; a contact form that pre-fills from the builder, with a thank-you page; and this guide.

Questions, or something not working? Email atwa.dux@gmail.com.