Welcome
Make Fieldline yours in under an hour.
Thanks for choosing Fieldline. This guide covers everything you need to rebrand the template, edit content, manage the CMS and publish. Every color, font and section is built to be swapped, not rebuilt.
13
PAGES
25
COMPONENTS
5
CMS COLLECTIONS
14
COLOR STYLES
15
TEXT STYLES
2
THEMES
01 · QUICK START
Five steps to launch.
Duplicate the template
Open the Remix link from your purchase email. Framer creates your own copy of the project.
1 MIN
Set up site settings
In Site Settings, add your site name, favicon, social image and default page title.
5 MIN
Apply your brand
Edit the Color Styles and swap the logo in the Navbar and Footer components.
10 MIN
Replace content
Edit page copy on the canvas, then update Blog, Cases, Changelog, FAQ and Team in the CMS.
30 MIN
Connect and publish
Point the Contact form to your inbox or CRM, connect a domain and hit Publish.
10 MIN
02 · COLORS
Rebrand by editing fourteen color styles.
Every element uses Color Styles from the Assets panel. Edit a style once and the whole site updates. Each style has a light and a dark value, so dark mode follows automatically.
Background
#FBFBF8 / #0A0F0C
Surface
#FFFFFF / #111813
Ink
#0E1A13 / #E4ECE6
Accent
#0E7A4C / #3DDC8E
Accent Bright
#16B868 / #16B868
Line
#0E1A13 / #E4ECE6
Error
#C2410C / #C2410C
On Accent
#FBFBF8 / #07110C
ACCENT PRESETS
Forest · #0E7A4C
Leaf · #1F8A4C
Teal · #0B7470
Blue · #1D4ED8
03 · TYPOGRAPHY
Two families, fifteen text styles.
Geist for headings and body, Geist Mono for labels and data. Both are free Google Fonts under the SIL Open Font License. To change fonts, edit the Text Styles in the Assets panel.
Every sensor.
Display
84/64/48 · 500 · −4.5%
Page title
Heading 1
88/64/48 · 500 · −4.5%
Section heading
Heading 2
54/44/34 · 500 · −4%
Card title
Heading 3
22/22/20 · 500 · −2%
Lead paragraph text
Body Large
18/18/16 · 400 · 150%
Default body copy for cards
Body
15/15/15 · 400 · 150%
[01] SECTION LABEL
Mono Label
12 · 400 · +8%
12,480
Mono Data
60/48/40 · 400 · −4%
BOOK A DEMO
Mono Button
13 · 500 · +6%
04 · COMPONENTS
Edit once, update everywhere.
Every repeated element is a Framer component with variants and properties. Select an instance and change its properties in the right panel.
Navbar
Active link, logo, CTA label
All pages
Footer
Link columns, social, wordmark
All pages
Button
Label, link, 4 variants
Everywhere
Section Header
Index label, heading, body
All sections
CTA Band
Kicker, title, subtitle, buttons
Most pages
Sensor Network
See section 05
Home hero, CTA
Pricing Card
Plan, prices, features
Pricing
FAQ Item
Question, answer
Home, Pricing, FAQ
Post Card / Case Card
CMS-bound
Journal, Cases
Team Card
CMS-bound
About
05 · SENSOR NETWORK
Tune the hero animation without code.
The hero and CTA network is a Framer code component. Select it on the canvas and adjust these controls in the right panel. It respects reduced-motion settings automatically.
Accent
Color of nodes, pulses and packets
DEFAULT · Accent style
Nodes
Number of sensors drawn
DEFAULT · 42
Hubs
Nodes with pulsing rings
DEFAULT · 5
Packet Rate
How often data packets travel
DEFAULT · 0.18
Area Start/End
Horizontal span the network occupies
DEFAULT · 0.5–0.98
Area Top/Bottom
Vertical span the network occupies
DEFAULT · 0.1–0.82
Labels
Show live readout tags
DEFAULT · On
Seed
Change for a new random layout
DEFAULT · 7
06 · CMS
Five collections, ready for your content.
Open the CMS tab to add, edit or delete items. Lists, filters and detail pages update on their own.
Title
Text
Article headline
Category
Option
Drives filter chips
Date
Date
Shown as Nov 23, 2025
Cover
Image
1600 x 1000 recommended
Author
Reference
Links to Team collection
Body
Formatted text
H2, H3, lists, quotes
Toggle
Shows item in the large slot
07 · PAGES & SECTIONS
Reorder, duplicate or remove any section.
Each section is a full-width Stack named after its content, for example Section / Benefits. Drag it in the Layers panel to reorder. Spacing between sections is built in, so nothing breaks when you move them.
08 · RESPONSIVE
Three breakpoints, tested.
1440
Desktop
Primary design. Max content width 1360px with 40px gutters.
810
Tablet
Grids collapse to two columns, nav stays visible.
390
Mobile
Single column, menu button, 20px gutters.
Tip: edit content on Desktop first. Text changes carry over to Tablet and Mobile. Only change layout on smaller breakpoints.
09 · SEO, FORMS & PUBLISHING
Before you go live.
01
Page titles and descriptions
Every page has its own SEO title and meta description.
02
Social image
Upload a 1200 × 630 image in Site Settings → General.
03
Favicon
Upload a 512 x 512 PNG or SVG.
04
Contact form
Set where submissions go: email, Google Sheets, HubSpot or a webhook.
05
Newsletter
Connect the Journal newsletter form to your email tool.
06
Remove demo content
Delete sample CMS items and replace all fictional names and figures.
07
Custom domain
Site Settings → Domains. Then publish.
10 · CREDITS & LICENSE
What you can use, and how.
FONTS
Geist and Geist Mono by Vercel. SIL Open Font License, free for commercial use.
IMAGES
Preview images are for demonstration only. Replace them with your own or properly licensed photos before publishing.
BRAND AND COPY
Fieldline, all customer names, people and figures are fictional. Replace them with your own.
● 11 · SUPPORT
Stuck? We reply within 24 hours.
Send your question to krugergricardo@gmail.com with a link to your Framer project (view access) and a screenshot. Free updates are included for every buyer.