Start

Start here.

We’re always improving. Here’s a starter roadmap for a clear editing your template.

Start with the basics

Explore the file

Understand how the design system and templates are structured.

Color system

Colors are categorized into Black, White, and Brand groups for consistent use across the design. Black and White tones are created using opacity layers for better flexibility.

Text styles

Text styles are grouped into three categories: Heading, Body, and Caption, for clarity and consistency. All sizes are defined using rem units to ensure responsive scaling across devices.

Component organization

An atomic component structure is used throughout the project to ensure clarity and reusability. Inside the file, components are grouped into four main categories: atoms (e.g. buttons), cards (e.g. pricing card), interactive elements (e.g. tabs), and sections (e.g. footer). This structure makes it easy to find, edit, and scale elements as needed.

Main template structure

The project uses Framer’s layout templates to make editing fast and flexible. Learn more about how it works here.

Update branding

Change the logo

The logo is added as an icon set, allowing you to easily replace it with your own. You can delete the existing logo and upload your brand's version. This setup also makes it easy to manage different versions for dark and light logos.

Update colors

It’s recommended to update only the brand colors for consistency. After making changes, browse through the pages to check accessibility.

Swap the font

By default, the template uses Inter for a clean and modern look. While it's not recommended to change the typography for consistency, you can update it to match your brand — just make sure to review all pages for visual alignment and spacing after the change. To add a custom font, check out this guide.

Update content & structure

Define your sitemap

Identify which pages you need and update the Navigation and Footer.

Customize pages

Review all pages and reorganize them based on your product.

Features section

The features section includes predefined features tailored to the template, along with custom-designed illustrations. After defining your sitemap, update the features on each relevant page to match your product. You can also replace the illustrations with your own visuals if needed.

Testimonials

Update the testimonial cards on each page with quotes from your own customers to reflect real feedback and build trust.

Pricing

The pricing section is set up with monthly and annual toggle options by default. You can customize the plans under each option to match your billing structure

Blog categories

Define your blog categories — they will be automatically displayed on the blog post page. For design consistency, it's recommended to keep the number of categories to six or fewer.

Legal pages

The template includes pre-built legal pages such as Privacy Policy and Terms of Use. Make sure to update these with your own company information to ensure legal accuracy and compliance.

Forms

Connect the form components with your own contact or newsletter services. Update input actions to reflect your preferred endpoints.

Integrate the built-in login page so it redirects users straight to your live app.

Visual assets

Logo symbol

The logo symbols in the template were generated using ChatGPT. You can also use alternative AI image generation platforms like Midjourney, DALL·E, or Firefly. Here’s an example prompt you can use to generate your own:

Prompt:
"Minimal geometric logo symbol for a modern AI tool, bold silhouette, flat design, black on white, high contrast, centered composition."

Client logos & avatars

The template includes placeholder logos for client references. It's recommended to showcase 4–6 logos for a clean, balanced layout. Don’t forget to update client avatars as well to reflect real partnerships.

Dashboard mockups

Replace the dashboard visuals in the template with screenshots from your actual app. Make sure the images are in 16:9 format to maintain layout consistency and avoid distortion.

Background images

The background images in the template can be replaced with visuals that match your brand or product. You can generate custom backgrounds using AI tools like ChatGPT, Midjourney, DALL·E, or Firefly. Here’s an example prompt you can use:

Prompt:
"Abstract soft-focus background for a modern AI product, neutral tones, subtle gradients, minimal texture, high resolution, 16:9 ratio."

Hero reflections

To achieve the reflect effect seen in the hero section, export a flipped horizontal 180° version of the original image. Once placed beneath the original, make small adjustments to opacity, blur, and positioning to create a subtle and realistic reflection.

Team photos

The team member cards use the Dither Wave component and Dither Plugin for a stylized visual effect. For each team member, prepare two images: one dithered version and one standard photo. Make sure both images have a transparent background for proper layering and visual consistency.