Folistead style guide
The design system behind every page.
Colour styles, text styles and components used across the template. In Framer, each of these maps to a Color Style, a Text Style or a Component — change a style once and every layer that uses it updates.
Color styles
Twenty-three named colours. Nothing else.
Change a colour once in Assets → Colors and every page updates. Check text contrast when you change Brand, Accent or the text colours.
Background
#F4F5F1
Surface
#FFFFFF
Surface Tinted
#EAEDE7
Surface Pressed
#DFE4DE
Text Primary
#121816
Text Secondary
#3E4744
Text Muted
#626B67
Brand
#1B3F38
Brand Deep
#10302B
Brand Soft
#D8E4DE
Brand Wash
#EDF2EF
Accent
#85661F
Accent Bright
#B08D3E
Accent On Dark
#C9A45A
Positive
#2F7A5B
Border
#D9DED9
Border Strong
#BFC7C1
Border Field
#868F8A
Dark
#0F1F1C
Dark Surface
#163029
Text On Dark
#EEF1EC
Muted On Dark
#A9B4AE
Error
#8F2A24
Text styles
Fraunces for headings, DM Sans for everything else.
Edit fonts and sizes in Assets → Text Styles; each style has Desktop, Tablet and Phone sizes. Component labels set their font directly (see the Customisation guide).
Display · Fraunces 400
Clarity
Heading 1 · Fraunces 400
Books you can build on
Heading 2 · Fraunces 400
One team, from bookkeeping to the boardroom
Heading 3 · Fraunces 500
Controller services
Heading 4 · DM Sans 600
A named team, not a ticket queue
Lead · DM Sans 400
We run your books, close your months by the tenth business day, and give you a fractional CFO who plans ahead.
Body · DM Sans 400
Statements land on a fixed date, so planning happens on real numbers instead of estimates.
Small · DM Sans 400
Read-only bank connections and two-factor authentication on every system.
Label · DM Sans 600
Accounting · Controller · CFO
Caption · DM Sans 400
Illustrative figures for this demo.
Buttons & links
Five button styles, one text link.
One Button component: choose its variant and set its label and link in the right panel. Use Text Link for inline calls to action.
Badges, chips & tags
Small labels with a job.
Badges show status. Chips link to a page. Tags are labels that never link. The sample tag marks demo content you replace.
Cards
Service, testimonial and pricing cards.
Cards on live pages read from the CMS: edit the content in its collection, not on the card.
Process & stats
Numbered steps and tabular figures.
Process Step and Stat are components; figures use tabular numbers so they line up.
01
Discovery call
Thirty minutes with a senior member of the team. You leave with a clear recommendation and a written proposal within two business days.
02
Onboarding and clean-up
We connect your systems, tidy the chart of accounts and reconcile back to your last clean period.
03
The monthly rhythm
Weekly processing, one batched question list, close by the tenth, statements and commentary in your inbox.
04
Quarterly planning
A review of the numbers, the forecast and the scope — so the service grows when the business does.
Forms
Labelled fields, visible focus, clear success states.
Every form is ready to connect: select the form and use Send To in the right panel. The submit button shows its sending, success and error states by itself.
FAQ
Accordion.
FAQ Item opens and closes by click or keyboard; collapsed answers stay in the page for search engines.
Thirty minutes with a senior member of the team. We ask about your business, your systems and what is not working, and tell you plainly which service fits — or whether you need us at all. You leave with a written proposal within two business days.
A named team: a bookkeeper who processes your transactions, a reviewer who checks the close, and — where you use those services — a controller or CFO who works directly with you. You will know everyone by name within the first week.
Questions are answered within one business day. Urgent items — a lender request, a payment that must go out — are handled the same day wherever possible.
Imagery
Replaceable art direction.
Placeholder art you replace with your own images. Always add alt text to images you upload.
Abstract covers and portrait placeholders are generated art. Replace them with your own photography in the CMS (Cover and Photo fields).
Layout & spacing
One grid, one spacing scale.
Build new sections on these values and they will sit naturally next to the existing ones.
Breakpoints. Desktop from 1200px, Tablet 810–1199px, Phone up to 809px. Check every page at all three in the canvas before publishing.
Container. Content is up to 1120px wide inside the Container layer, with 40 / 32 / 16px side padding on Desktop / Tablet / Phone.
Section spacing. Most sections use 104 / 88 / 64px top and bottom padding on Desktop / Tablet / Phone.
Spacing scale. Gaps and padding use 4, 8, 12, 16, 24, 32, 48, 64, 96 and 128px.
Corners. 6px for small elements, 10px for buttons and form fields, 16px for cards, fully rounded for badges, chips and tags.
Grids. Card grids step from 3 or 4 columns to 2 on Tablet and 1 on Phone. Two-column rows put the heading on the left and the content on the right on Desktop, and stack on Tablet and Phone.
Icons. Feature and Service Card have an Icon property: pick any icon from Framer’s built-in Lucide set in the right panel.