A THOUGHTFUL HANDOFF
Make it
your own.
A practical starting point for turning the Kesar template into a product story that belongs to you.
01Make the identity yours.
In Framer, select the Navigation and Footer sections and edit their Section text. The original mark is editable in KesarSection and the supplied source. Replace your site favicon in Settings. Keep brand artwork separate from the Hugeicons interface set.
02Set the visual tone.
Select a section to edit its purple, dark purple, ink, paper, dividers and font controls. Apply your palette consistently across shared sections. The offline CSS files contain the complete typography, spacing and motion system. Check contrast and font fallbacks.
03Give the story your voice.
Edit Section text, Section links and Section images in the Framer property panel. Keep their IDs. Plans, articles and prepared examples can also be edited in the included source modules. Journal cards and articles are independently editable; they are not bound to a live CMS.
04Connect your real product.
The demonstrations do not call an AI model, submit a contact message, charge money or connect accounts. Add the services your product needs and verify each flow before changing those disclosures. Keep secrets on a server.
05Choose your destinations.
Each route is a native Framer page. Edit Section links for navigation and page destinations, and update native page settings for titles, descriptions and indexing. Product links can preserve a chosen mode and the playground anchor. Keep article cards and article content in sync.
06Review the practical details.
Replace the example legal pages, product prices, fictional stories, team names and tool-connection claims with your own approved content. Credit and license any replacement assets appropriately.
07Build, preview, and check.
Use Node 22 or later. Run npm run build, then npm start, and open the local preview. Run npm run validate after your edits. Test keyboard paths, mobile menus, search, forms, reduced motion and every route.
08Make the layout yours.
Expand Kesar / Faithful page in Layers. Reorder or duplicate independent source sections inside the native Stack. Keep width Fill, height Fit Content, visible overflow and zero gap. Preserve Navigation and the Dialogs and behavior controller. Desktop, Tablet and Mobile breakpoints are included.
One source.
A thoughtful system.
Native Framer pages contain individually editable source sections. Normal editing needs no local server or importer. The supplied offline source includes the same content, imagery, styling and interactions, plus a complete editing guide in framer/EDITING.md.
External fonts load from Google Fonts. Hugeicons and illustrative tool artwork are credited in the supplied third-party notices.