Design system
How this site is built
The colors, type, components and Framer AI skills behind every page. Framer AI reads the same rules, so new pages match the rest of the site. This page is hidden from search engines.
Start here
Make it yours in five steps
01
Ask Framer AI to make it yours
Open Framer AI and type: Make this site ours: Lakeside Builders, Portland, (503) 555-0110. It asks for anything it is missing and updates every page.
02
Replace the demo content
Amber Sample tags mark the reviews, prices and license number that came with the template. Replace each one with your own before you publish.
03
Add your projects and photos
Add your jobs to the Projects collection with your own photos, budget band and build time, or ask Framer AI: Add our Magnolia bathroom project.
04
Connect your forms
Select the forms on Start Your Project and Warranty and choose where submissions go: your email or a tool you already use.
05
Check before you publish
Ask Framer AI to run the claims check, then the search check. Both list what to fix and change nothing without your OK.
Color
Fir green on plaster
Use the color styles, never raw hex values. Amber is only for Sample tags on demo content.
Background
#F5F3EE
Page background
Surface
#FFFFFF
Cards, forms
Surface Muted
#ECE9E1
Quiet bands
Background Dark
#17201B
Dark sections, footer
Border
#DCD8CE
Lines, card edges
Text Primary
#17201B
Headings, body
Text Secondary
#59615C
Secondary text
Text On Dark
#F5F3EE
Text on Background Dark
Text On Dark Muted
#A9B2AC
Muted text on Background Dark
Border On Dark
#2E3A33
Lines on Background Dark
Accent
#2E5B47
Primary button, links
Accent Hover
#234838
Hover
Accent Soft
#E1EAE3
Notes, icon tiles
Accent On Dark
#9CC3AE
Buttons and links on Background Dark
Sample
#8A5A12
Sample tags only
Type
Zilla Slab and Mona Sans
Zilla Slab, with lining numbers, for headings and prices. Mona Sans for everything people read and tap. Sizes are desktop / tablet / phone.
Display
Zilla Slab 600 · 76 / 60 / 44
Built by one team.
Heading 1
Zilla Slab 600 · 58 / 48 / 38
Kitchens, baths and whole-home remodels
Heading 2
Zilla Slab 600 · 42 / 36 / 30
Four steps, and you always know where you are
Heading 3
Zilla Slab 600 · 25 / 23 / 21
Design and a written price
Stat
Zilla Slab 600 · 52 / 44 / 38
$110,000 to $140,000
Eyebrow
Mona Sans 600 · 13, uppercase
How we work
Body Large
Mona Sans 400 · 19 / 18 / 17
We design it, price it in writing and build it with our own crew.
Body
Mona Sans 400 · 16
Your project lead sends a weekly update with photos and what comes next.
Label
Mona Sans 500 · 15
Call or text (206) 555-0148
Small
Mona Sans 400 · 14
WA Contractor Reg. #000000 · Licensed and insured
Caption
Mona Sans 400 · 12.5
Photo by Jordan Lee
Button
Mona Sans 600 · 15
Schedule a consultation
Components
Build new sections from these parts
Edit a component once and every page that uses it updates. Framer AI reuses these parts instead of drawing new ones.
Logo
Default on light sections, On Dark on Background Dark. Change the name and the letter tile when you make the site yours.
Button
One Primary button per section. Labels use the words homeowners use: Schedule a consultation, See our work, Call, Text us. Never Get started or Learn more. The second action next to it is always framed: Secondary on light sections, and on photos and Background Dark a link with a thin Text On Dark border, as in the Home hero.
Sample Chip
Marks demo content: reviews, prices and the license number. Remove each chip when you replace what it marks.
Sample
Service Card
Filled from the Services collection. Row on Home (desktop): a numbered list with each price range. Default cards on Services, Service Area and on Home for tablet and phone. Shows the full price range; what most clients spend is on each service page.
Project Card
Feature and Compact build the Home mosaic: the first featured project large, the next two beside it. Default in rows of three on Service Area and project pages, and on Home on phones. Large in two columns on the Projects page. Framer may flag the Default cards; that warning is safe to ignore.
Review Card
Filled from each project’s homeowner quote. Feature shows the first review as a large quote on Home; the next two use the default card. The Sample chip shows while Quote Is Sample is on; turn it off only for a real review you have permission to post.
Marcus sent photos every Friday, so we always knew what came next. The kitchen came in on budget.
Sarah M.
Ballard kitchen, 2025
Sample
Marcus sent photos every Friday, so we always knew what came next. The kitchen came in on budget.
Sarah M.
Ballard kitchen, 2025
Sample
FAQ Item
Closed by default; a tap opens it. Keep answers to two or three sentences with the real number or time.
Do you pull the permits?
How soon can you start?
Design usually starts within three weeks of the consultation. Construction dates are set when you sign the build contract.
CTA Band
Ends most pages, over a job-site photo with a dark shade. Swap the photo for one of your own jobs and keep the shade so the text stays easy to read. Desktop variant on desktop and tablet, Phone variant on phone. Left off Start Your Project, where the form is the next step.
Form Button
The submit button on both forms. Framer switches to Sending, Sent or Error on its own while the form sends.
Mobile Action Bar
Fixed to the bottom of the screen on phones only: Call, Text and Schedule. It lives in the Main layout template, so the phone number changes in one place.
Navigation and Footer
Both live in the Main layout template, so a change shows on every page. The footer services list reads from the Services collection, and the footer license line must match the About page.
Open Layout Templates > Main to edit them. On tablet and phone the menu opens from the menu button.
Examples
Sections, put together
Four sections from the home page, each with a note on when to use it. Start from the closest one when you or Framer AI add a page.
Example 1 · Service list
Your services as rows on Surface, fed by the Services collection. Each row opens its service page.
What we build
Six kinds of projects. One team from design to walkthrough.
Example 2 · How a job runs
The steps from first visit to walkthrough on Accent. Use it once on a page to answer what happens next.
How we work
Four steps, and you always know which one you are in.
01
Consultation at your house
We walk the house with you, talk through goals and budget, and tell you plainly if we are the right fit. About an hour, no charge.
02
Design and a written price
Our designer draws the plan and we price it line by line. You see the full price before you sign the build contract.
03
Build with one project lead
Our own crew does the core work. Your project lead sends a weekly update with photos and what comes next.
04
Walkthrough and warranty
We finish the punch list with you, hand over the paperwork and stand behind the work for five years.
Example 3 · Photo band
During and finished photos of one job on Background Dark. It shows the first featured project.
Photo updates every week
From open walls to walkthrough, you see every stage.
Your project lead sends photos and the plan for the next week, every week. Here is one of our recent projects, during construction and finished.
During construction
Finished
Ballard
A 1940s kitchen, opened to the dining room
Example 4 · Owner note
A short signed note from the owner beside a photo, on Accent Soft. Place it before the contact form.
From the owner
Call the office and you will usually get me or Rosa.
I started Dunmore Construction in 2004 with one truck and a crew of three. We have grown since, but we keep the company small on purpose: one project lead for each job, our own carpenters for the core work, and a price you can read before anything starts.
If something on your job is not right, I want to hear it from you first.
Ben Dunmore
Owner, Dunmore Construction
Framer AI
Built to work with Framer AI
Fourteen skills teach Framer AI how this site works, so you can change it by typing what you want. They tell it to ask you for facts it does not have, such as prices, license numbers or reviews, instead of making them up.
default
House rules
Read before every request. Keeps the colors, type and components, sends each request to the right skill and never invents facts about your company.
Always on
Nothing to ask. Framer AI reads it on every request.
design-system
Design system
Keeps new pages and sections in the same colors, type, spacing and components, and follows the copy rules.
Try asking
Add a section about our design process to How We Work.
company-setup
Make it yours
Swaps the demo company for yours on every page: name, phone, email, address, hours, city and owner.
Try asking
Make this site ours: Lakeside Builders, Portland, (503) 555-0110.
add-project
Add a project
Adds a finished job with its photos, budget band, build time and story, and picks which projects show on Home.
Try asking
Add our Magnolia bathroom remodel. It took 9 weeks.
service
Services
Adds a new service or changes one, with its own page, photo, price range and timeline.
Try asking
Add basement finishing as a service.
price-update
Prices
Updates price ranges, what most clients spend, timelines and the Updated date, everywhere they appear.
Try asking
Kitchens now run $95,000 to $175,000. Update the cost guide.
add-review
Reviews
Adds or removes homeowner reviews, keeps the source and date, and turns off the Sample tag only for real ones.
Try asking
Add a review Dana K. left us on Google.
faq
Questions
Adds, edits or removes questions on the FAQ page or on any other page.
Try asking
Add a question about whether we pull permits.
claims-check
Claims check
Goes page by page and lists demo content, unsupported claims and financing wording to fix. Changes nothing until you say so.
Try asking
Check the site before we publish.
license
License
Puts your license or registration number where your state requires it and keeps insurance and bond wording to what you confirm.
Try asking
Here is our license number. We also carry workers’ comp.
service-area
Service area
Changes the neighborhoods and cities you serve, or adds a page for one area with real local work.
Try asking
We also work in Edmonds and Shoreline now.
seasonal-offer
Seasonal offer
Adds, changes or removes a limited-time offer with its end date and terms.
Try asking
Add a winter design scheduling offer that ends February 28.
switch-trade
Switch trade
Turns this remodeling site into a site for another trade, from services and prices to the structured data type.
Try asking
We are a roofing company. Switch the site to roofing.
search-check
Search check
Checks titles, descriptions, headings, alt text and structured data for Google and AI search. Changes nothing until you say so.
Try asking
Is the site ready for Google?
The claims check and the license skill point out common problems. They are not legal advice. Check your state’s contractor advertising rules before you publish.