Start with the basics
Buy template
Use this link to buy the template.
Explore the file
Understand how the design system and templates are structured.
Color system
Colors are categorized into Black, White, and Gray 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 and Body, 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 three main categories: atoms (e.g. buttons), cards (e.g. pricing card), 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/add only your 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.
Projects
Project posts are connected to their categories — assigning a project to a category ensures it’s automatically organized and displayed on the project listing page. Keep category names clear and consistent for easy navigation.
Blog
Blog posts are linked to their categories — assign each post to a category so it’s automatically displayed and grouped on the blog post page. For design consistency, limit the total categories to six or fewer.
Testimonials
Update the testimonial cards on each page with quotes from your own customers to reflect real feedback and build trust.
Legal pages
The template includes pre-built legal pages such as the Privacy Policy. Make sure to update these with your company information to ensure legal accuracy and compliance.
Forms
Forms
Connect the form components with your own contact or newsletter services. Update input actions to reflect your preferred endpoints.
Visual assets
Client logos
The template includes placeholder logos for client references. It's recommended to showcase 4–6 logos for a clean, balanced layout.
Photo guideline
Use editorial-style photography with a mix of grainy and soft textures. Favor candid, atmospheric shots over staged compositions, incorporating natural light, motion blur, and subtle color grading. Maintain a cohesive, muted palette, occasionally punctuated with bold accent colors.
All photos are sourced free from Unsplash.
Team photos
Team portraits were created using AI. You can generate similar visuals with tools like Midjourney, DALL·E, or Firefly.
Example prompt:
"Turn this photo into realistic portrait photo, soft studio lighting, neutral background, natural expression, 4K resolution"