Thanks for your interest in Nest for Framer. This template is made to help you build your website with less stress and unmatched style. 

Nest is based on the Frames X design system and provides accessible and beautiful design guidelines and UI elements. With Nest, you can streamline your site development process and use existing styles, robust components, and predesigned pages to build your desired brand or business online.

Nest is an ever-growing template with continuous free updates. With Framer's ongoing updates, we want to continue to support Nest and provide you with the best possible experience for building sites that work and look above the competition.

Updating styles

Nest keeps its style set minimal but versatile enough to make scaling your project to the enterprise level possible. To get started, it is recommended to customize global styles. You can access the list of all colors and font styles via the Assets tab from the left sidebar in Framer.

Note: You must update light and dark colors when updating color styles. This will require you to open the color picker menu for each style and click on light and dark mode icons. You can have a more detailed overview of how the color panel works in Framer from the official blog.

Updating brand colors

The brand colors are listed as the Primary palette in the assets panel, following a numeric naming convention. You can easily replace, duplicate, remove, or add your own colors.

You can also customize the gray colors in the template to match your brand's specific shades. These gray colors have a solid appearance and are useful when opacity cannot achieve the desired accessibility level.

To create a consistent sense of depth, you can utilize the Base colors that represent different opacity levels. These Base styles follow the same numeric scale and can be used to implement transparency in UI elements.

Updating fonts

Nest has two types of text: Headlines and body fonts used for paragraphs and content. You can replace the default font Inter by updating each text style font parameter.

Updating components

You can control various aspects of the design of all Nest components as variables power them. For example, with the Sidebar, you can adjust its status and avatar and even change the variant to a minified state to have a condensed site navigation.

Note: If you'd like to update the Sidebar to the minified state, you must update it on each template page.

Updating CMS items

Nest offers dynamic CMS collections that allow you to customize your portfolio, blog, store items, and other content types. With Nest collections, you can easily add, remove, and modify items that represent your products, case studies, or any other content.

Note: we recommend to check the official blog to learn more on how to manage your CMS content.

Updating images

When using Nest, you have the option to choose between Dark and Light themes. This means that when you update your images through CMS or edit components, you will come across image containers that have both light and dark properties.

Note: The default image resolution is 1440 x 824, representing the recommended resolution for an internet image within a 1.9:1 ratio. By preparing and uploading two images into the Image container, you can ensure that your images adapt to the user's preferred theme - light or dark.

Conclusion

We believe that the Nest template will be a valuable addition to the Framer community, offering a high-quality product that is worth its cost.

If you encounter any difficulties or need assistance in customizing or utilizing the available components, please don't hesitate to DM me on X(Twitter).