011
TEMPLATE GUIDE
Make it yours in an afternoon.
Everything on this site is editable in Framer. This page lists exactly what to change, in the order that saves the most time. Delete this page before you publish.
NIGHT FLOOR · TEMPLATE GUIDE
+
01
Rename the product
Select the Navigation component and the Footer component in Assets. Change the wordmark text from NextAI to your name, and redraw the small square mark if you want a different logo. Search the pages for NextAI and replace it in headings and buttons.
02
Set your colours
Open the colour styles in the Styles panel. Signal is the one accent (acid lime). Paper is the light ground used for the flip sections. Void, Graphite and Panel are the dark surfaces. Change a style once and every page updates.
03
Change the fonts
Text styles use Geist Light for headlines, Geist Mono for labels and buttons, and Geist Pixel for section numbers. Change the font on a text style, not on individual layers.
04
Edit the CMS
Open the CMS panel. Eight collections drive the site: Agents, Usecases, Integrations, Changelog, Customers, Blog, Plans and FAQ. Edit an item and every list, card and detail page that uses it updates. Add items to grow the lists.
05
Replace the photos
Customer covers, blog covers and each agent’s card art (sharp and pixel versions) are CMS image fields. Use dark night images; for the pixel version, export the same image at about 15 x 20 pixels and scale it back up.
06
Point the forms somewhere
Every form uses Framer’s native form. In Site Settings, open Forms and choose where submissions go (email, or a connected service). The demo form, the digest form and the integration request form are three separate forms.
07
Check the motion
Motion lives in one small code file, NextAIMotion: the hero photo-to-wireframe wipe, the sticky media swaps, film grain, the agent-card tilt and de-pixelation, the spectral glow and the tickers. The city images and videos are ordinary image fills and a Video Loop component, so swap them in the layer panel. The status-bar counter is the Live Counter component (start value and rate are controls).
08
Fix the details
Update page titles and descriptions in each page’s settings, replace the fictional email in the footer, and swap the demo customers for real ones. All figures and quotes on this template are made up.
002
COLOUR STYLES
Ten colours run the whole site.
Void
Page ground
Graphite
Raised sections and panels
Panel
Cards and inputs
Line
Hairlines
Line Strong
Panel borders
Text
Main text
Muted
Body text
Dim
Labels only
Signal
Lime accent, buttons
Paper
Light sections
003
CMS REFERENCE
What each collection controls.
Collection
Items
Shown on
Agents
8
Home agent list, /agents, /agents/[agent]
Usecases
6
Home rows, /use-cases and its detail page
Integrations
12
Home grid, /integrations and its detail page
Changelog
8
Home list, /changelog
Customers
6
Home cards, /customers and its detail page
Blog
6
Home cards, /blog and its detail page
Plans
3
Home pricing, /pricing
FAQ
8
Home and /pricing FAQ
→
NEXT STEP
Ready? Delete this page and publish.
Then send us the link if you get stuck. We answer template questions the same day.