Guide
Make Cinder yours
Everything you need to rebrand, fill and publish this template. This page is not in the navigation, so delete it before you go live.
Template guide · Delete before live
Guide
Make Cinder yours
Everything you need to rebrand, fill and publish this template. This page is not in the navigation, so delete it before you go live.
Template guide · Delete before live
What is included
The template has 17 pages, each built for Desktop (1200), Tablet (810) and Phone (390).
• Marketing: Home, Capabilities, Customers, Security, Pricing, About.
• Content: Blog, Blog Post, Careers, Career Detail (these use the CMS) and Changelog.
• Forms: Contact and Sign up.
• Legal and system: Privacy, Terms, Cookie Policy and 404.
The header and footer come from the Site Layout template, so edit them once there. Shared parts such as Button, Section header, CTA section and Feature card are components: one edit updates every page.
Make it yours
Change the look in Styles, not on individual layers. Every color and text style is a token, so editing one restyles the whole site.
• Surface / Page, Card, Raised, Paper: backgrounds. Sections alternate Page and Card.
• Text / Primary, Secondary, Tertiary: headings, body text and captions.
• Accent / Primary: the primary button fill only. Accent / Light: all orange text and highlights.
• Border / Default and Accent: card outlines and hover borders.
To rebrand, change the Accent tokens first, then replace the logo in the Header component. The Design System page shows every style and component in one place.
Replace the content
All text is sample copy for a fictional company called Cinder. Replace it page by page and keep the structure.
• Blog and Careers are CMS collections. Edit the entries and every list, detail page and card updates.
• The Changelog is plain page content, so edit its entries on the page.
• Customers, Pricing and About hold the most company-specific copy, so start there.
• Replace the sample emails (hello@, careers@ and security@cinder.ai) and the X, GitHub and Slack icons in the footer.
Links and buttons
Select a button or link and edit its Link field. Buttons are instances of one Button component, so each instance has its own label and link.
• Start free goes to /signup. Talk to sales and Book a demo go to /contact.
• Watch the film currently goes to /signup. Point it to your video, or delete the button.
• Product and How it works are anchors on Home (/#product and /#how).
• The CTA section at the bottom of each page takes its two links as component controls.
Animations
Every animation is the same effect: fade in and rise 50px, as a spring over 1s, when the block scrolls into view. Only the delay changes.
• The top of a section (label, title, text, buttons) has a 0.3s delay.
• The content that follows (cards, tables, visuals) has a 0.4s delay.
• The Home hero and the illustrated visuals keep their own animations. Hover effects stay too.
Add pages with the Framer agent
Three skills in Settings > Skills keep new pages in the same style.
• design-system: page structure, padding, colors, type, cards, components and motion.
• write-copy: Cinder’s tone for headlines, text and buttons.
• seo-check: titles, descriptions and social previews.
Ask for one page at a time, then compare it with the Design System page.
Before you publish
Go through this list before you submit or launch your site.
• Replace the name, logo, copy and sample emails.
• Point Watch the film to your video, or delete the button.
• Connect the Contact and Sign up forms to where submissions should go, and send a test.
• Fill the Blog and Careers collections and update the Changelog.
• Set page titles, descriptions and the social image in Page settings.
• Replace the Privacy, Terms and Cookie text with your own legal copy.
• Preview Desktop, Tablet and Phone, and click every link.
• Delete this Guide page.
What is included
The template has 17 pages, each built for Desktop (1200), Tablet (810) and Phone (390).
• Marketing: Home, Capabilities, Customers, Security, Pricing, About.
• Content: Blog, Blog Post, Careers, Career Detail (these use the CMS) and Changelog.
• Forms: Contact and Sign up.
• Legal and system: Privacy, Terms, Cookie Policy and 404.
The header and footer come from the Site Layout template, so edit them once there. Shared parts such as Button, Section header, CTA section and Feature card are components: one edit updates every page.
Make it yours
Change the look in Styles, not on individual layers. Every color and text style is a token, so editing one restyles the whole site.
• Surface / Page, Card, Raised, Paper: backgrounds. Sections alternate Page and Card.
• Text / Primary, Secondary, Tertiary: headings, body text and captions.
• Accent / Primary: the primary button fill only. Accent / Light: all orange text and highlights.
• Border / Default and Accent: card outlines and hover borders.
To rebrand, change the Accent tokens first, then replace the logo in the Header component. The Design System page shows every style and component in one place.
Replace the content
All text is sample copy for a fictional company called Cinder. Replace it page by page and keep the structure.
• Blog and Careers are CMS collections. Edit the entries and every list, detail page and card updates.
• The Changelog is plain page content, so edit its entries on the page.
• Customers, Pricing and About hold the most company-specific copy, so start there.
• Replace the sample emails (hello@, careers@ and security@cinder.ai) and the X, GitHub and Slack icons in the footer.
Links and buttons
Select a button or link and edit its Link field. Buttons are instances of one Button component, so each instance has its own label and link.
• Start free goes to /signup. Talk to sales and Book a demo go to /contact.
• Watch the film currently goes to /signup. Point it to your video, or delete the button.
• Product and How it works are anchors on Home (/#product and /#how).
• The CTA section at the bottom of each page takes its two links as component controls.
Animations
Every animation is the same effect: fade in and rise 50px, as a spring over 1s, when the block scrolls into view. Only the delay changes.
• The top of a section (label, title, text, buttons) has a 0.3s delay.
• The content that follows (cards, tables, visuals) has a 0.4s delay.
• The Home hero and the illustrated visuals keep their own animations. Hover effects stay too.
Add pages with the Framer agent
Three skills in Settings > Skills keep new pages in the same style.
• design-system: page structure, padding, colors, type, cards, components and motion.
• write-copy: Cinder’s tone for headlines, text and buttons.
• seo-check: titles, descriptions and social previews.
Ask for one page at a time, then compare it with the Design System page.
Before you publish
Go through this list before you submit or launch your site.
• Replace the name, logo, copy and sample emails.
• Point Watch the film to your video, or delete the button.
• Connect the Contact and Sign up forms to where submissions should go, and send a test.
• Fill the Blog and Careers collections and update the Changelog.
• Set page titles, descriptions and the social image in Page settings.
• Replace the Privacy, Terms and Cookie text with your own legal copy.
• Preview Desktop, Tablet and Phone, and click every link.
• Delete this Guide page.
Cinder
AI workflow automation for teams that would rather do the work that matters.
All systems operational
Cinder
Cinder
Cinder